Add a button to copy event id/hash.

Author: Nufflee

package.json

@@ -16,6 +16,7 @@
     "@types/moment": "^2.13.0",
     "@types/moment-timezone": "^0.5.6",
     "browserify": "^16.2.2",
+    "clipboard-copy": "^3.0.0",
     "markdown-it": "^8.4.2",
     "moment": "^2.22.2",
     "moment-timezone": "^0.5.20",

scss/main.scss

@@ -58,6 +58,12 @@ body {
         color: $red;
     }
 
+    .copy {
+        color: $dimmed_foreground;
+        cursor: pointer;
+        margin-left: 5px;
+    }
+
     .description {
         margin-top: 20px;
         text-align: left;

ts/CancelledEvent.ts

@@ -4,21 +4,17 @@ import * as moment from 'moment';
 import ComponentsArray from './ComponentsArray';
 import Countdown from './Countdown';
 import UiComponent from './UiComponent';
+import Timestamp from './Timestamp';
 
 export default class CancelledEvent implements UiComponent {
-    constructor(private _event: dto.Event) {
+    constructor(private _event: dto.Event, 
+                private _timestamp: string) {
     }
 
     appendTo(entry: HTMLElement | null): void {
         new html.Div(
             new ComponentsArray([
-                new html.Div(
-                    new html.Href(
-                        `#_${this._event.datetime.utc().unix()}`,
-                        new html.Text(`${this._event.datetime.utc().unix()}`)
-                    ),
-                    {"class": "timestamp"}
-                ),
+                new Timestamp(this._timestamp),
                 new html.H1(
                     new html.Href(
                         `${this._event.url}`,

ts/CurrentEvent.ts

@@ -1,25 +1,22 @@
 import * as dto from './dto';
 import * as html from './html';
 import * as moment from 'moment';
+import copy = require('clipboard-copy')
 import ComponentsArray from './ComponentsArray';
 import Countdown from './Countdown';
 import UiComponent from './UiComponent';
 import TwitchPlayer from './TwitchPlayer';
+import Timestamp from './Timestamp'
 
 export default class CurrentEvent implements UiComponent {
-    constructor(private _event: dto.Event) {
+    constructor(private _event: dto.Event,
+                private _timestamp: string) {
     }
 
     appendTo(entry: HTMLElement | null): void {
         new html.Div(
             new ComponentsArray([
-                new html.Div(
-                    new html.Href(
-                        `#_${this._event.datetime.utc().unix()}`,
-                        new html.Text(`${this._event.datetime.utc().unix()}`)
-                    ),
-                    {"class": "timestamp"}
-                ),
+                new Timestamp(this._timestamp),
                 new html.Div(
                     new html.Href(
                         this._event.channel ? this._event.channel : "https://twitch.tv/tsoding",

ts/Event.ts

@@ -13,19 +13,21 @@ export default class Event implements UiComponent {
     }
 
     appendTo(entry: HTMLElement | null): void {
-        let secondsDiff = moment().diff(this._event.datetime, 'seconds');
+        const secondsDiff = moment().diff(this._event.datetime, 'seconds');
+        const timestamp = this._event.datetime.utc().unix().toString();
 
         if (this.isCancelled()) {
-            new CancelledEvent(this._event).appendTo(entry);
+            new CancelledEvent(this._event, timestamp).appendTo(entry);
         } else if (0 <= secondsDiff && secondsDiff < 4 * 60 * 60) {
-            new CurrentEvent(this._event).appendTo(entry);
+            new CurrentEvent(this._event, timestamp).appendTo(entry);
         } else if (secondsDiff >= 4 * 60 * 60) {
-            new PastEvent(this._event).appendTo(entry);
+            new PastEvent(this._event, timestamp).appendTo(entry);
         } else {
-            new FutureEvent(this._event).appendTo(entry);
+            new FutureEvent(this._event, timestamp).appendTo(entry);
         }
 
-        const hashId = "#_" + this._event.datetime.utc().unix();
+        const hashId = "#_" + timestamp;
+
         if (window.location.hash == hashId) {
             window.location.hash = "";
             setTimeout(() => { window.location.hash = hashId; }, 0);

ts/FutureEvent.ts

@@ -4,21 +4,17 @@ import * as moment from 'moment';
 import ComponentsArray from './ComponentsArray';
 import Countdown from './Countdown';
 import UiComponent from './UiComponent';
+import Timestamp from './Timestamp';
 
 export default class FutureEvent implements UiComponent {
-    constructor(private _event: dto.Event) {
+    constructor(private _event: dto.Event,
+                private _timestamp: string) {
     }
 
     appendTo(entry: HTMLElement | null): void {
         new html.Div(
             new ComponentsArray([
-                new html.Div(
-                    new html.Href(
-                        `#_${this._event.datetime.utc().unix()}`,
-                        new html.Text(`${this._event.datetime.utc().unix()}`)
-                    ),
-                    {"class": "timestamp"}
-                ),
+                new Timestamp(this._timestamp),
                 new html.H1(
                     new html.Href(
                         `${this._event.url}`,

ts/PastEvent.ts

@@ -4,21 +4,17 @@ import * as moment from 'moment';
 import ComponentsArray from './ComponentsArray';
 import Countdown from './Countdown';
 import UiComponent from './UiComponent';
+import Timestamp from './Timestamp';
 
 export default class PastEvent implements UiComponent {
-    constructor(private _event: dto.Event) {
+    constructor(private _event: dto.Event,
+                private _timestamp: string) {
     }
 
     appendTo(entry: HTMLElement | null): void {
         new html.Div(
             new ComponentsArray([
-                new html.Div(
-                    new html.Href(
-                        `#_${this._event.datetime.utc().unix()}`,
-                        new html.Text(`${this._event.datetime.utc().unix()}`)
-                    ),
-                    {"class": "timestamp"}
-                ),
+                new Timestamp(this._timestamp),
                 new html.H1(
                     new html.Href(
                         `${this._event.url}`,

ts/Timestamp.ts

@@ -0,0 +1,35 @@
+import * as dto from './dto';
+import * as html from './html';
+import * as moment from 'moment';
+import copy = require('clipboard-copy')
+import ComponentsArray from './ComponentsArray';
+import Countdown from './Countdown';
+import UiComponent from './UiComponent';
+import TwitchPlayer from './TwitchPlayer';
+
+export default class CurrentEvent implements UiComponent {
+    constructor(private _timestamp: string) {
+    }
+
+    onCopyClick = () => {
+        copy(this._timestamp)
+    }
+
+    appendTo(entry: HTMLElement | null): void {
+        new html.Div(
+            new ComponentsArray([
+                new html.Href(
+                    `#_${this._timestamp}`,
+                    new html.Text(`${this._timestamp}`)
+                ),
+                new html.Tag(
+                    "i",
+                    new html.Empty(),
+                    {"class": "copy fas fa-copy fa-lg"},
+                    {"click": this.onCopyClick}
+                )
+            ]),
+            {"class": "timestamp"}
+        ).appendTo(entry);
+    }
+}