# Twitch clip datetime userscript A userscript for displaying the actual date & time (relative to **local time**) of when a Twitch clip (and video) was created. ~~**FYI**: It only works on URLs that start with `https://clips.twitch.tv/`.~~ ~~This script does not work with URLs that are on the Twitch "channel pages" (`https://www.twitch.tv/CHANNEL_NAME_HERE/clip/...`).~~ **This has been added as of v0.5.0.** "Under the hood" the script uses [`Date.toLocaleString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) to format the date. The format of the date & time may differ from the screenshots below. ## Requirements - Something like the [Violentmonkey](https://violentmonkey.github.io/get-it/) extension installed for your browser. ## Installation 1. Install a userscript extension (such as [Violentmonkey](https://violentmonkey.github.io/get-it/)). 2. Click on [this link](https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72/raw/twitch-clips-datetime.user.js) when Violentmonkey is installed, and it will prompt you to install the userscript. ## Support / Requests If you have any requests or suggestions, feel free to [join my Discord server for all my projects](https://decapi.link/discord). ## Changelog - v0.7.0 - 2024-05-09 - Fixed the script so it now supports the new clip.twitch.tv layout. - Since they now use a similar layout as the main Twitch website, the position of the timestamp has been moved below the player. See [screenshots](#screenshots) at the bottom of this README. - v0.6.0 - 2022-01-03 - Added support for Twitch videos (VODs, highlights) - Switched API to use the new Twitch API (Helix) via an "API proxy" I host using Cloudflare Workers. - The observer should no longer disconnect after the first timestamp, allowing browsing to other videos/clips to work. - v0.5.1 - 2021-12-30 - Minor bug where it tried to fetch the date & time of a clip when watching highlights/VODs. - At some point I'll update the script to support VODs/highlights, but for now I'm sticking to clips. - v0.5.0 - 2021-12-30 - Script now supports clips on Twitch channel pages (e.g. `https://www.twitch.tv/$channelName/clip/$clipSlug`) - The `@match` rule will say `https://www.twitch.tv/*` to support navigating from the channel page to the clip page, otherwise script wouldn't load on regular Twitch browsing. - v0.4.1 - 2021-08-29 - Make script compatible with Tampermonkey again. - v0.4.0 - 2021-08-29 - Date/time placement was adjusted due to changes in the page on Twitch's end. See [screenshots](#screenshots). - ~~Previously I used Tampermonkey, but later switched to Violentmonkey. During my testing, I tested with Violentmonkey and it worked fine. However, if you're currently using Tampermonkey, v0.4.0 does not work. I'm unsure as to why, but I'll try to look into it.~~ - Fixed in v0.4.1 ## Screenshots As of v0.4.0, the timestamp shows up a bit different compared to earlier versions. As of v0.7.0, the script was updated to support the new `clips.twitch.tv` layout. The timestamp was moved to be below the video player. ### On clips.twitch.tv  ### Main Twitch website When browsing Twitch channel clips on the main Twitch website. **Only v0.5.0 (December 30th, 2021) and newer**  As of v0.6.0 (January 3rd, 2022), the script also works with Twitch videos (VODs, highlights).

// ==UserScript== // @name Twitch Clips - Show date & time // @version 0.7.0 // @description Displays the actual date & time of when a clip (or video/VOD/highlight) was created, instead of the useless "xxx days/months/weeks ago" // @author Decicus // @updateURL https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72/raw/twitch-clips-datetime.user.js // @downloadURL https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72/raw/twitch-clips-datetime.user.js // @homepageURL https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72 // @icon https://i.alex.lol/2021-08-29_PmO4zo.png // @match https://clips.twitch.tv/* // @match https://www.twitch.tv/* // @license MIT // ==/UserScript== /** * Insert timestamp for the `clips.twitch.tv` website. */ function clipsSubdomain(createdAt, dateAndTime) { // The new layout for clips.twitch.tv (as of May 2024) uses a similar layout to the main website, // so this has been simplified until they change it again. insertMainWebsite(createdAt, dateAndTime, false); } /** * Insert timestamp for the `www.twitch.tv` (main) website. * E.g. https://www.twitch.tv/$channelName/clip/$clipSlug * Or: https://www.twitch.tv/videos/$videoId */ function insertMainWebsite(createdAt, dateAndTime, isVideo) { const timestampBar = document.querySelector('.timestamp-metadata__bar'); const parent = timestampBar.parentElement; // Use for text styling const textElement = document.querySelector('p[class*="CoreText"]'); const textClass = textElement.classList[0]; let element = document.querySelector('#twitch-datetime-script'); let newElement = false; if (!element) { element = document.createElement('p'); element.className = textClass; element.setAttribute('style', 'margin-left: 0.25em;'); element.setAttribute('id', 'twitch-datetime-script'); newElement = true; } element.innerHTML = `- ${isVideo ? 'Video' : 'Clip'} created: <strong>${dateAndTime}</strong>`; element.setAttribute('title', createdAt); if (!newElement) { return; } parent.insertAdjacentElement('beforeend', element); } /** * Get the timestamp of a clip or video. * * @param {string} id The id of the clip or video. * @param {string} type Type: `clip` or `video` * @returns {Promise<{createdAt: string, dateAndTime: string}>} */ async function getTimestamp(id, type) { if (!type) { type = 'clip'; } const response = await fetch(`https://twitch-api-proxy.cactus.workers.dev/timestamps/${type}?id=${id}`); const data = await response.json(); if (!data.created_at) { return; } const createdAt = data.created_at; const created = new Date(createdAt); const dateAndTime = created.toLocaleString(); return {createdAt, dateAndTime}; } /** * Fetch clip information via getTimestamp() and insert accordingly. * * @param {URL} url * @returns {void} */ async function fetchClip(url) { const pathFragments = url.pathname.split('/'); const clipSlug = pathFragments[pathFragments.length - 1]; const slug = clipSlug.match(/([A-z0-9-_]+)/m)[1]; if (!slug) { return; } const { createdAt, dateAndTime } = await getTimestamp(slug, 'clip'); if (url.hostname === 'clips.twitch.tv') { clipsSubdomain(createdAt, dateAndTime); return; } insertMainWebsite(createdAt, dateAndTime, false); } /** * Fetch video information via getTimestamp() and insert accordingly. * * @param {URL} url * @returns {void} */ async function fetchVideo(url) { const pathFragments = url.pathname.split('/'); const videoFragment = pathFragments[pathFragments.length - 1]; const videoId = videoFragment.match(/(^\d+$)/m)[1]; if (!videoId) { return; } const { createdAt, dateAndTime } = await getTimestamp(videoId, 'video'); insertMainWebsite(createdAt, dateAndTime, true); } /** * Observe the DOM until we find the element we're interested in. * Once complete, disconnect the observer and call the `fetchClip()` function which actually inserts the * timestamp into the DOM. */ let checkedUrl = null; function observerHandler(mutations, observer) { // clips.twitch.tv const clipsInfo = document.querySelector('.clips-chat-info span[class*="CoreText"]'); // www.twitch.tv const timestampBar = document.querySelector('.timestamp-metadata__bar'); if (!clipsInfo && !timestampBar) { return; } const urlString = window.location.href; if (urlString === checkedUrl) { return; } checkedUrl = urlString; console.log('Clips page', clipsInfo !== null); console.log('Main website', timestampBar !== null); const url = new URL(urlString); if (url.hostname === 'www.twitch.tv' && url.pathname.includes('/videos/')) { fetchVideo(url); } else { fetchClip(url); } } const observer = new MutationObserver(observerHandler); observer.observe(document, { attributes: false, childList: true, characterData: false, subtree: true, });