Implemented the timelink copy feature

multiplayer.js

@@ -121,6 +121,47 @@
     </svg>
     `;
 
+    /*
+     *  Parse the GET parameters in the URL bar into an Object, mapping keys
+     *  to values. Will not behave properly on repeated keys.
+     *
+     *  The Object has a toString() method which returns the parameters in the
+     *  same format as `window.location.search`.
+     */
+    function parseGETParameters() {
+        const get = window.location.search.substring(1);
+        const out = {};
+        get.split('&').forEach((arg) => {
+            if(arg === '') {
+                return;
+            }
+            const split = arg.split('=');
+            const name = split[0];
+            var value = null;
+            if(split.length > 1) {
+                value = split[1];
+            }
+            out[name] = value;
+        });
+        out.toString = function() {
+            // Return a properly formatted search string
+            const result = [];
+            Object.keys(this).forEach((key) => {
+                if(key === 'toString') {
+                    return;
+                }
+                if(this[key]) {
+                    result.push(key + '=' + this[key]);
+                } else {
+                    result.push(key);
+                }
+            });
+            return '?' + result.join('&');
+        }
+
+        return out;
+    }
+
     function createElementNS(ns, tagName, attributes={}, children=[]) {
         const elem = document.createElementNS(ns, tagName);
         Object.entries(attributes).forEach(([key, value]) => {
@@ -210,7 +251,7 @@
     class MultiPlayer extends HTMLElement {
         static get observedAttributes() {
             return ['play', 'play-local', 'list', 'list-local',
-                    'nomunge', 'timelink'];
+                    'nomunge', 'timelink', 'time'];
         }
 
         attributeChangedCallback(name, oldValue, newValue) {
@@ -252,6 +293,10 @@
                 break;
             case 'timelink':
                 this.toggleTimelink(newValue);
+                break;
+            case 'time':
+                this._startTime = newValue;
+                break;
             }
         }
 
@@ -264,6 +309,9 @@
             // Controlled by the 'nomunge' attribute on this element.
             this._mungeSources = true;
 
+            // The time to start playback at
+            this._startTime = 0;
+
             // raw presentation json is stored here
             this._presentation = null;
 
@@ -557,6 +605,26 @@
                  'data-title_en': 'Copy URL at current time'},
                 [createIcon(['timelink'])]);
 
+            this._timelinkButton.addEventListener('click', (event) => {
+                const params = parseGETParameters();
+                // Add presentation argument
+                params['play'] = this.attributes['play'].nodeValue;
+
+                // Add playlist argument if present
+                const playlistAttribute = this.attributes['list'];
+                if(playlistAttribute && playlistAttribute.nodeValue) {
+                    params['list'] = playlistAttribute.nodeValue;
+                }
+
+                // Add time argument
+                const time = this._mainSource.currentTime;
+                params['time'] = time.toFixed(1);
+
+                // Save to clipboard
+                navigator.clipboard.writeText(this._timelinkURL
+                                              + params.toString());
+            });
+
             // setSubtitles() requires this._subtitlesSelect to
             // be in the correct position in the DOM already,
             // so creating a dummy
@@ -701,6 +769,7 @@
                 this._subtitlesSelect.classList.add('hidden');
             }
 
+            this._controlSource.currentTime = this._startTime;
             this.setActivePlaylistItem();
             this.autoBlurControls();
             this.initProgressContainer();
@@ -1138,12 +1207,13 @@
         /*
          *  Set the visibility of the time link button.
          */
-        toggleTimelink(visible) {
-            if(visible) {
+        toggleTimelink(url) {
+            if(url) {
                 this._timelinkButton.classList.remove('hidden');
             } else {
                 this._timelinkButton.classList.add('hidden');
             }
+            this._timelinkURL = url;
         }
 
         /*