Like 1
Fork 1

Last active 2 years ago

A userscript for displaying the actual date & time (relative to local time) of when a Twitch clip was created.

Alex's Avatar Alex Thomassen revised this gist 4 years ago. 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's Avatar Alex Thomassen revised this gist 4 years ago. 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's Avatar Alex Thomassen revised this gist 4 years ago. 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 + ![Screenshot of userscript in action, before chat history loads](https://i.alex.lol/2021-08-29_r2lRVE.png)
24 +
25 + ### With chat
16 26
17 - ![Screenshot of how userscript works](https://i.ibb.co/WtvzsFM/2019-06-03-MH6-SKo.png)
27 + ![Screenshot of userscript in action, with chat history loaded](https://i.alex.lol/2021-08-29_gO8qwL.png)

Alex's Avatar Alex Thomassen revised this gist 4 years ago. 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's Avatar Alex Thomassen revised this gist 4 years ago. 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's Avatar Alex Thomassen revised this gist 5 years ago. 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's Avatar Alex Thomassen revised this gist 6 years ago. Go to revision

No changes

Alex's Avatar Alex Thomassen revised this gist 6 years ago. 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's Avatar Alex Thomassen revised this gist 6 years ago. 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's Avatar Alex Thomassen revised this gist 6 years ago. 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 - ![Screenshot of userscript](https://i.ibb.co/WtvzsFM/2019-06-03-MH6-SKo.png)
14 + ![Screenshot of how userscript works](https://i.ibb.co/WtvzsFM/2019-06-03-MH6-SKo.png)
Newer Older

Powered by Opengist ⋅ Load: 12ms⋅

English