Revision of Twitch clip datetime userscript

1 file changed, 14 insertions

README.md(file created)

		@@ -0,0 +1,14 @@
1	+	# Userscript for displaying the date & time for when a Twitch clip was created.
2	+
3	+	A userscript for displaying the actual date & time (relative to local time) of when a Twitch clip was created.
4	+
5	+	## Requirements:
6	+	- Something like the [Tampermonkey](https://www.tampermonkey.net/) extension installed for your browser.
7	+
8	+	## Installation:
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.
11	+
12	+	## Screenshot:
13	+
14	+	![Screenshot of userscript](https://i.ibb.co/WtvzsFM/2019-06-03-MH6-SKo.png)

No changes

No changes

No changes

No changes

No changes

1 file changed, 6 insertions, 8 deletions

twitch-clips-datetime.user.js

			@@ -1,6 +1,6 @@
1	1		// ==UserScript==
2	2		// @name Twitch Clips - Show date & time
3		-	// @version 0.1
	3	+	// @version 0.2
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/*
			@@ -10,6 +10,7 @@
10	10		'use strict';
11	11
12	12		const slug = window.location.href.match(/https\:\/\/clips\.twitch\.tv\/([A-z0-9]+)/m)[1];
	13	+
13	14		if (!slug) {
14	15		return;
15	16		}
			@@ -22,6 +23,7 @@
22	23		});
23	24
24	25		const data = await response.json();
	26	+
25	27		if (!data.created_at) {
26	28		return;
27	29		}
			@@ -30,12 +32,8 @@
30	32		const dateAndTime = created.toLocaleString();
31	33
32	34		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');
	35	+	const element = document.createElement('div');
	36	+	element.innerHTML = `<span class="tw-font-size-5 tw-strong">Clip created:</span><br /><span>${dateAndTime}</span>`;
33	37
34		-	const child = document.createElement('span');
35		-	child.innerHTML = `Clip created:<br />${dateAndTime}`;
36		-
37		-	const parentElement = document.createElement('div');
38		-	parentElement.append(child);
39		-
40		-	box[0].appendChild(parentElement);
	38	+	box[0].appendChild(element);
41	39		})();

1 file changed, 41 insertions

twitch-clips-datetime.user.js(file created)

		@@ -0,0 +1,41 @@
1	+	// ==UserScript==
2	+	// @name Twitch Clips - Show date & time
3	+	// @version 0.1
4	+	// @description Displays the actual date & time of when a clip was created, instead of the useless "xxx days/months/weeks ago"
5	+	// @author Decicus
6	+	// @match https://clips.twitch.tv/*
7	+	// ==/UserScript==
8	+
9	+	(async function() {
10	+	'use strict';
11	+
12	+	const slug = window.location.href.match(/https\:\/\/clips\.twitch\.tv\/([A-z0-9]+)/m)[1];
13	+	if (!slug) {
14	+	return;
15	+	}
16	+
17	+	const response = await fetch(`https://api.twitch.tv/kraken/clips/${slug}`, {
18	+	headers: {
19	+	Accept: 'application/vnd.twitchtv.v5+json',
20	+	'Client-ID': 'zs377ogpzz01ogfx26pvbddx9jodg1',
21	+	},
22	+	});
23	+
24	+	const data = await response.json();
25	+	if (!data.created_at) {
26	+	return;
27	+	}
28	+
29	+	const created = new Date(data.created_at);
30	+	const dateAndTime = created.toLocaleString();
31	+
32	+	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');
33	+
34	+	const child = document.createElement('span');
35	+	child.innerHTML = `Clip created:<br />${dateAndTime}`;
36	+
37	+	const parentElement = document.createElement('div');
38	+	parentElement.append(child);
39	+
40	+	box[0].appendChild(parentElement);
41	+	})();

Newer Older