Update video

index.html

@@ -22,7 +22,7 @@
             if (app.ports !== undefined && app.ports.registerVideo !== undefined) {
                 app.ports.registerVideo.subscribe(function(args) {
                     window.scrollTo(0, 0);
-                    var time = parseInt(args[2], 10) || undefined;
+                    var time = vd.parseTime(args[2]) || undefined;
 
                     requestAnimationFrame(function() {
                         if (args[0] !== lastId) {
@@ -30,7 +30,7 @@
 
                             player = vd.setup(args[0], {
                                 v: args[1] + "/manifest.mpd",
-                                t: parseInt(args[2], 10) || 0,
+                                t: time,
                                 focus: true
                             });
                         } else if (time !== undefined ){

js/vd.js

@@ -107,53 +107,7 @@ const vd = (function() {
     return position;
 }
 
-    function setupRepresentations(menuButton, player) {
-
-        let hls = player.tech({IWillNotUseThisInPlugins: true}).hls;
-
-        if (hls === undefined) {
-            setTimeout(() => setupRepresentations(menuButton, player), 500);
-            return;
-        }
-
-        let representations = hls.representations();
-        representations.sort((a, b) => b.height - a.height);
-
-        menuButton.menu.items = [];
-        menuButton.menu.addAndRecordItem = function(item) {
-            this.addItem(item);
-            this.items.push(item);
-        }
-
-        menuButton.menu.addAndRecordItem(new MenuItem(player, { label: "auto", menuButton }));
-        for (let representation of representations) {
-            menuButton.menu.addAndRecordItem(new MenuItem(player, {
-                label: representation.height + "p",
-                representation,
-                menuButton
-            }));
-        }
-    }
-
-    function setupSpeed(menuButton, player) {
-        let speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-        menuButton.updateLabel('x1');
-        menuButton.menu.items = [];
-        menuButton.menu.addAndRecordItem = function(item) {
-            this.addItem(item);
-            this.items.push(item);
-        }
-
-        for (let speed of speeds) {
-            menuButton.menu.addAndRecordItem(new SpeedItem(player, {
-                label: "x" + speed,
-                speed,
-            }));
-        }
-    }
-
 let vjs = {};
-
 vjs.Component = videojs.getComponent('Component');
 vjs.Menu = videojs.getComponent('Menu');
 vjs.MenuButton = videojs.getComponent('MenuButton');
@@ -163,7 +117,7 @@ const vd = (function() {
 
     constructor(player, options) {
         super(player, options);
-            this.updateLabel('auto');
+        this.updateLabel(options === undefined ? "" : options.label || "");
     }
 
     createEl() {
@@ -207,7 +161,7 @@ const vd = (function() {
 
 }
 
-    class MenuItem extends vjs.MenuItem {
+class ResolutionItem extends vjs.MenuItem {
     constructor() {
         super(...arguments);
         this.representation = arguments[1].representation;
@@ -274,6 +228,114 @@ const vd = (function() {
     }
 }
 
+function createRepresentationButtons(player, menuButton = undefined) {
+    if (menuButton === undefined) {
+        menuButton = new MenuButton(player);
+        menuButton.updateLabel("auto");
+    }
+
+    let hls = player.tech({IWillNotUseThisInPlugins: true}).hls;
+
+    if (hls === undefined) {
+        setTimeout(() => createRepresentationButtons(player, menuButton), 500);
+        return menuButton;
+    }
+
+    let representations = hls.representations();
+    representations.sort((a, b) => b.height - a.height);
+
+    menuButton.menu.items = [];
+    menuButton.menu.addAndRecordItem = function(item) {
+        this.addItem(item);
+        this.items.push(item);
+    }
+
+    menuButton.menu.addAndRecordItem(new ResolutionItem(player, { label: "auto", menuButton }));
+    for (let representation of representations) {
+        menuButton.menu.addAndRecordItem(new ResolutionItem(player, {
+            label: representation.height + "p",
+            representation,
+            menuButton
+        }));
+    }
+
+    return menuButton;
+}
+
+function createSpeedButtons(player) {
+    let menuButton = new MenuButton(player);
+
+    let speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+    menuButton.updateLabel('x1');
+    menuButton.menu.items = [];
+    menuButton.menu.addAndRecordItem = function(item) {
+        this.addItem(item);
+        this.items.push(item);
+    }
+
+    for (let speed of speeds) {
+        menuButton.menu.addAndRecordItem(new SpeedItem(player, {
+            label: "x" + speed,
+            speed,
+        }));
+    }
+
+    return menuButton;
+}
+
+vd.parseTime = function(t) {
+    let parsed = 1 * t;
+
+    if (!isNaN(parsed)) {
+        return parsed;
+    }
+
+    // Compute the split
+    let split = t.split("h");
+
+    let hours;
+    let minutes;
+    let seconds;
+
+    switch (split.length) {
+        case 1:
+            hours = 0;
+            split = split[0].split("m");
+            break;
+        case 2:
+            hours = 1 * split[0];
+            if (isNaN(hours)) {
+                return NaN;
+            }
+            split = split[1].split("m");
+            break;
+        default:
+            return NaN;
+    }
+
+    switch (split.length) {
+        case 1:
+            minutes = 0;
+            split = split[0].split("s");
+            break;
+        case 2:
+            minutes = 1 * split[0];
+            if (isNaN(minutes)) {
+                return NaN;
+            }
+            split = split[1].split("s");
+            break;
+        default:
+            return NaN;
+    }
+
+    seconds = 1 * split[0];
+    if ((split.length !== 1 && (! (split.length == 2 && split[1] === ""))) || isNaN(seconds)) {
+        return NaN;
+    }
+
+    return 3600 * hours + 60 * minutes + seconds;
+}
 
 vd.setup = function(video, args) {
 
@@ -340,7 +402,7 @@ const vd = (function() {
     };
 
     if (args.t !== undefined) {
-            let time = parseFloat(args.t);
+        let time = vd.parseTime(args.t);
         if (!isNaN(time)) {
             player.currentTime(time);
         }
@@ -459,16 +521,13 @@ const vd = (function() {
     let controlBar = player.getChild('controlBar');
     let fullscreenButton = controlBar.children()[controlBar.children().length - 1];
     controlBar.removeChild(fullscreenButton);
-        let menuButton = new MenuButton(player);
+
-        let speedButton = new MenuButton(player);
+    let menuButton = createRepresentationButtons(player);
+    let speedButton = createSpeedButtons(player);
     controlBar.addChild(speedButton, {});
     controlBar.addChild(menuButton, {});
     controlBar.addChild(fullscreenButton, {});
 
-        setupSpeed(speedButton, player);
-        setupRepresentations(menuButton, player);
-
-        // videojs.Html5DashJS.hook('beforeinitialize', (p, mp) => setupRepresentations(menuButton, p, mp));
     window.player = player;
 
     if (video.getAttribute('autoplay') != undefined) {
@@ -485,6 +544,6 @@ const vd = (function() {
     }
 }
 
-    return vd;
 
+    return vd;
 })();

src/Core.elm

@@ -185,11 +185,11 @@ update msg model =
                             ( [], Dict.empty )
 
                 time =
-                    case Maybe.map String.toInt (Dict.get "t" args) of
+                    case Dict.get "t" args of
-                        Just (Just 0) ->
+                        Just "0" ->
                             Nothing
 
-                        Just (Just t) ->
+                        Just t ->
                             Just t
 
                         _ ->

src/Ports.elm

@@ -1,7 +1,7 @@
 port module Ports exposing (eraseVideo, registerVideo)
 
 
-port registerVideo : ( String, String, Maybe Int ) -> Cmd msg
+port registerVideo : ( String, String, Maybe String ) -> Cmd msg
 
 
 port eraseVideo : () -> Cmd msg