Alex Thomassen revised this gist . Go to revision
1 file changed, 5 insertions
README.md
| @@ -14,6 +14,11 @@ This script does not work with URLs that are on the Twitch "channel pages" (`htt | |||
| 14 | 14 | 1. Install a userscript extension (such as [Tampermonkey](https://www.tampermonkey.net/)). | |
| 15 | 15 | 2. Click on [this link](https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72/raw/twitch-clips-datetime.user.js) when Tampermonkey is installed, and it will prompt you to install the userscript. | |
| 16 | 16 | ||
| 17 | + | ## Changelog | |
| 18 | + | ||
| 19 | + | - v0.4.0 - 2021-08-29 | |
| 20 | + | - Date/time placement was adjusted due to changes in the page on Twitch's end. See [screenshots](#screenshots). | |
| 21 | + | ||
| 17 | 22 | ## Screenshots: | |
| 18 | 23 | ||
| 19 | 24 | As of v0.4.0, the timestamp shows up a bit different compared to earlier versions. | |
Alex Thomassen revised this gist . Go to revision
1 file changed, 45 insertions, 9 deletions
twitch-clips-datetime.user.js
| @@ -1,17 +1,19 @@ | |||
| 1 | 1 | // ==UserScript== | |
| 2 | 2 | // @name Twitch Clips - Show date & time | |
| 3 | - | // @version 0.3.0 | |
| 3 | + | // @version 0.4.0 | |
| 4 | + | // @namespace https://github.com/Decicus | |
| 4 | 5 | // @description Displays the actual date & time of when a clip was created, instead of the useless "xxx days/months/weeks ago" | |
| 5 | 6 | // @author Decicus | |
| 6 | 7 | // @updateURL https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72/raw/twitch-clips-datetime.user.js | |
| 7 | 8 | // @downloadURL https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72/raw/twitch-clips-datetime.user.js | |
| 9 | + | // @homepageURL https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72 | |
| 10 | + | // @icon https://i.alex.lol/2021-08-29_PmO4zo.png | |
| 8 | 11 | // @match https://clips.twitch.tv/* | |
| 12 | + | // @license MIT | |
| 9 | 13 | // ==/UserScript== | |
| 10 | 14 | ||
| 11 | - | (async function() { | |
| 12 | - | 'use strict'; | |
| 13 | - | ||
| 14 | - | const slug = window.location.href.match(/https\:\/\/clips\.twitch\.tv\/([A-z0-9-]+)/m)[1]; | |
| 15 | + | async function fetchClip() { | |
| 16 | + | const slug = window.location.href.match(/https\:\/\/clips\.twitch\.tv\/([A-z0-9-_]+)/m)[1]; | |
| 15 | 17 | ||
| 16 | 18 | if (!slug) { | |
| 17 | 19 | return; | |
| @@ -33,9 +35,43 @@ | |||
| 33 | 35 | const created = new Date(data.created_at); | |
| 34 | 36 | const dateAndTime = created.toLocaleString(); | |
| 35 | 37 | ||
| 36 | - | const box = document.getElementsByClassName('clips-chat-info tw-align-items-start tw-flex tw-flex-column tw-flex-grow-1 tw-flex-shrink-1 tw-justify-content-center tw-lg-mg-y-2 tw-mg-t-1'); | |
| 38 | + | const box = document.querySelector('.clips-sidebar-info'); | |
| 39 | + | const layoutClass = box.classList[0]; | |
| 40 | + | ||
| 41 | + | const textElement = document.querySelector('span[class*="CoreText"]'); | |
| 42 | + | const textClass = textElement.classList[0]; | |
| 43 | + | ||
| 37 | 44 | const element = document.createElement('div'); | |
| 38 | - | element.innerHTML = `<span class="tw-font-size-5 tw-strong">Clip created:</span><br /><span>${dateAndTime}</span>`; | |
| 45 | + | element.className = layoutClass; | |
| 46 | + | element.setAttribute('style', 'text-align: center; margin-top: 1em;'); | |
| 47 | + | element.innerHTML = `<span class="${textClass}"><strong>Clip created:</strong> ${dateAndTime}</span>`; | |
| 48 | + | ||
| 49 | + | box.insertAdjacentElement('afterbegin', element); | |
| 50 | + | } | |
| 51 | + | ||
| 52 | + | /** | |
| 53 | + | * Observe the DOM until we find the element we're interested in. | |
| 54 | + | * Once complete, disconnect the observer and call the `fetchClip()` function which actually inserts the | |
| 55 | + | * timestamp into the DOM. | |
| 56 | + | */ | |
| 57 | + | function observerHandler(mutations, observer) | |
| 58 | + | { | |
| 59 | + | const textElement = document.querySelector('span[class*="CoreText"]'); | |
| 60 | + | ||
| 61 | + | if (!textElement) { | |
| 62 | + | return; | |
| 63 | + | } | |
| 64 | + | ||
| 65 | + | fetchClip(); | |
| 66 | + | observer.disconnect(); | |
| 67 | + | } | |
| 39 | 68 | ||
| 40 | - | box[0].appendChild(element); | |
| 41 | - | })(); | |
| 69 | + | window.addEventListener('DOMContentLoaded', function() { | |
| 70 | + | const observer = new MutationObserver(observerHandler); | |
| 71 | + | observer.observe(document, { | |
| 72 | + | attributes: false, | |
| 73 | + | childList: true, | |
| 74 | + | characterData: false, | |
| 75 | + | subtree: true, | |
| 76 | + | }); | |
| 77 | + | }); | |
Alex Thomassen revised this gist . Go to revision
1 file changed, 13 insertions, 3 deletions
README.md
| @@ -1,10 +1,12 @@ | |||
| 1 | 1 | # Twitch clip datetime userscript | |
| 2 | 2 | ||
| 3 | - | A userscript for displaying the actual date & time (relative to local time) of when a Twitch clip was created. | |
| 3 | + | A userscript for displaying the actual date & time (relative to **local time**) of when a Twitch clip was created. | |
| 4 | 4 | ||
| 5 | 5 | **FYI**: It only works on URLs that start with `https://clips.twitch.tv/`. | |
| 6 | 6 | This script does not work with URLs that are on the Twitch "channel pages" (`https://www.twitch.tv/CHANNEL_NAME_HERE/clip/...`). | |
| 7 | 7 | ||
| 8 | + | "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. | |
| 9 | + | ||
| 8 | 10 | ## Requirements: | |
| 9 | 11 | - Something like the [Tampermonkey](https://www.tampermonkey.net/) extension installed for your browser. | |
| 10 | 12 | ||
| @@ -12,6 +14,14 @@ This script does not work with URLs that are on the Twitch "channel pages" (`htt | |||
| 12 | 14 | 1. Install a userscript extension (such as [Tampermonkey](https://www.tampermonkey.net/)). | |
| 13 | 15 | 2. Click on [this link](https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72/raw/twitch-clips-datetime.user.js) when Tampermonkey is installed, and it will prompt you to install the userscript. | |
| 14 | 16 | ||
| 15 | - | ## Screenshot: | |
| 17 | + | ## Screenshots: | |
| 18 | + | ||
| 19 | + | As of v0.4.0, the timestamp shows up a bit different compared to earlier versions. | |
| 20 | + | ||
| 21 | + | ### Without chat (beginning of clip) | |
| 22 | + | ||
| 23 | + |  | |
| 24 | + | ||
| 25 | + | ### With chat | |
| 16 | 26 | ||
| 17 | - |  | |
| 27 | + |  | |
Alex Thomassen revised this gist . Go to revision
1 file changed, 3 insertions, 1 deletion
twitch-clips-datetime.user.js
| @@ -1,8 +1,10 @@ | |||
| 1 | 1 | // ==UserScript== | |
| 2 | 2 | // @name Twitch Clips - Show date & time | |
| 3 | - | // @version 0.3 | |
| 3 | + | // @version 0.3.0 | |
| 4 | 4 | // @description Displays the actual date & time of when a clip was created, instead of the useless "xxx days/months/weeks ago" | |
| 5 | 5 | // @author Decicus | |
| 6 | + | // @updateURL https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72/raw/twitch-clips-datetime.user.js | |
| 7 | + | // @downloadURL https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72/raw/twitch-clips-datetime.user.js | |
| 6 | 8 | // @match https://clips.twitch.tv/* | |
| 7 | 9 | // ==/UserScript== | |
| 8 | 10 | ||
Alex Thomassen revised this gist . Go to revision
1 file changed, 2 insertions, 2 deletions
twitch-clips-datetime.user.js
| @@ -1,6 +1,6 @@ | |||
| 1 | 1 | // ==UserScript== | |
| 2 | 2 | // @name Twitch Clips - Show date & time | |
| 3 | - | // @version 0.2 | |
| 3 | + | // @version 0.3 | |
| 4 | 4 | // @description Displays the actual date & time of when a clip was created, instead of the useless "xxx days/months/weeks ago" | |
| 5 | 5 | // @author Decicus | |
| 6 | 6 | // @match https://clips.twitch.tv/* | |
| @@ -9,7 +9,7 @@ | |||
| 9 | 9 | (async function() { | |
| 10 | 10 | 'use strict'; | |
| 11 | 11 | ||
| 12 | - | const slug = window.location.href.match(/https\:\/\/clips\.twitch\.tv\/([A-z0-9]+)/m)[1]; | |
| 12 | + | const slug = window.location.href.match(/https\:\/\/clips\.twitch\.tv\/([A-z0-9-]+)/m)[1]; | |
| 13 | 13 | ||
| 14 | 14 | if (!slug) { | |
| 15 | 15 | return; | |
Alex Thomassen revised this gist . Go to revision
1 file changed, 3 insertions
README.md
| @@ -2,6 +2,9 @@ | |||
| 2 | 2 | ||
| 3 | 3 | A userscript for displaying the actual date & time (relative to local time) of when a Twitch clip was created. | |
| 4 | 4 | ||
| 5 | + | **FYI**: It only works on URLs that start with `https://clips.twitch.tv/`. | |
| 6 | + | This script does not work with URLs that are on the Twitch "channel pages" (`https://www.twitch.tv/CHANNEL_NAME_HERE/clip/...`). | |
| 7 | + | ||
| 5 | 8 | ## Requirements: | |
| 6 | 9 | - Something like the [Tampermonkey](https://www.tampermonkey.net/) extension installed for your browser. | |
| 7 | 10 | ||
Alex Thomassen revised this gist . Go to revision
No changes
Alex Thomassen revised this gist . Go to revision
1 file changed, 1 insertion, 1 deletion
README.md
| @@ -7,7 +7,7 @@ A userscript for displaying the actual date & time (relative to local time) of w | |||
| 7 | 7 | ||
| 8 | 8 | ## Installation: | |
| 9 | 9 | 1. Install a userscript extension (such as [Tampermonkey](https://www.tampermonkey.net/)). | |
| 10 | - | 2. Click on the ['Raw' button](https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72/raw/twitch-clips-datetime.user.js) top-right when Tampermonkey is installed, and it will prompt you to install the userscript. | |
| 10 | + | 2. Click on [this link](https://gist.github.com/Decicus/ec4745e680e06cfff5b1fa0a53fcff72/raw/twitch-clips-datetime.user.js) when Tampermonkey is installed, and it will prompt you to install the userscript. | |
| 11 | 11 | ||
| 12 | 12 | ## Screenshot: | |
| 13 | 13 | ||
Alex Thomassen revised this gist . Go to revision
1 file changed, 1 insertion, 1 deletion
README.md
| @@ -1,4 +1,4 @@ | |||
| 1 | - | # Userscript for displaying the date & time for when a Twitch clip was created. | |
| 1 | + | # Twitch clip datetime userscript | |
| 2 | 2 | ||
| 3 | 3 | A userscript for displaying the actual date & time (relative to local time) of when a Twitch clip was created. | |
| 4 | 4 | ||
Alex Thomassen revised this gist . Go to revision
1 file changed, 1 insertion, 1 deletion
README.md
| @@ -11,4 +11,4 @@ A userscript for displaying the actual date & time (relative to local time) of w | |||
| 11 | 11 | ||
| 12 | 12 | ## Screenshot: | |
| 13 | 13 | ||
| 14 | - |  | |
| 14 | + |  | |