From b41c62e9384edcb59ceb0616c045ac247decaae0 Mon Sep 17 00:00:00 2001
From: Thomas Forgione <thomas@forgione.fr>
Date: Mon, 21 Jun 2021 14:34:27 +0200
Subject: [PATCH] Clean

---
 index.html             |   2 +-
 js/ports.js            | 215 ++++++++++++++++++++++-------------------
 src/Examples/Embed.elm |   2 +-
 src/Video.elm          |  27 ++++--
 src/Video/Views.elm    |  18 +---
 5 files changed, 134 insertions(+), 130 deletions(-)

diff --git a/index.html b/index.html
index a3fd1d6..89fff58 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
         <script src="js/main.js"></script>
         <script src="js/ports.js"></script>
         <script>
-            embed({
+            PolymnyVideo.embed({
                 node: document.getElementById("container"),
                 url: "video/manifest.m3u8",
             });
diff --git a/js/ports.js b/js/ports.js
index 64254e9..b13efa4 100644
--- a/js/ports.js
+++ b/js/ports.js
@@ -14,118 +14,129 @@ Object.defineProperty(HTMLElement.prototype, "polymnyVideoDocument", {
     }
 });
 
-function embed(options) {
-    if (!(options.node instanceof HTMLElement)) {
-        throw new Error("options.node must be an HTMLElement");
-    }
+const PolymnyVideo = (function() {
 
-    if (typeof options.url !== "string" && ! (options.url instanceof String)) {
-        throw new Error("options.url must be a string");
-    }
+    const PolymnyVideo = {};
 
-    options.flags = options;
-    options.width = window.innerWidth;
-    options.height = window.innerHeight;
-
-    const app = Elm.Examples.Embed.init(options);
-    setupApp(app);
-
-}
-
-function setupApp(app) {
-    let hls;
-
-    app.ports.polymnyVideoInit.subscribe(function(arg) {
-        requestAnimationFrame(function() {
-            const video = document.getElementById(arg[0]);
-            if (Hls.isSupported()) {
-                hls = new Hls();
-                window.hls = hls;
-                hls.loadSource(arg[1]);
-
-                hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
-                    const availableQualities = hls.levels.map((l) => l.height);
-                    availableQualities.unshift(0);
-                    app.ports.polymnyVideoNowHasQualities.send(availableQualities);
-                });
-
-                hls.on(Hls.Events.LEVEL_SWITCHED, function(event, data) {
-                    app.ports.polymnyVideoNowHasQuality.send({
-                        auto: hls.autoLevelEnabled,
-                        height: hls.levels[data.level].height
-                    });
-                })
-
-                hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, function(event, data) {
-                    app.ports.polymnyVideoNowHasSubtitles.send(data.subtitleTracks);
-                });
-
-                hls.on(Hls.Events.SUBTITLE_TRACK_SWITCH, function(event, data) {
-                    app.ports.polymnyVideoNowHasSubtitleTrack.send(data.id === -1 ? null : hls.subtitleTracks[data.id]);
-                });
-
-                hls.attachMedia(video);
-            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-                video.src = arg[1];
-            }
-        });
-    });
-
-    app.ports.polymnyVideoPlayPause.subscribe(function(arg) {
-        const video = document.getElementById(arg);
-        if (video.paused) {
-            video.play();
-        } else {
-            video.pause();
+    PolymnyVideo.embed = function(options) {
+        if (!(options.node instanceof HTMLElement)) {
+            throw new Error("options.node must be an HTMLElement");
         }
-    });
 
-    app.ports.polymnyVideoSeek.subscribe(function(arg) {
-        const video = document.getElementById(arg[0]);
-        video.currentTime = arg[1];
-    });
+        if (typeof options.url !== "string" && ! (options.url instanceof String)) {
+            throw new Error("options.url must be a string");
+        }
 
-    app.ports.polymnyVideoRequestFullscreen.subscribe(function(arg) {
-        document.getElementById(arg + '-full').requestFullscreen();
-    });
+        options.flags = options;
+        options.width = window.innerWidth;
+        options.height = window.innerHeight;
 
-    app.ports.polymnyVideoExitFullscreen.subscribe(function(arg) {
-        document.exitFullscreen();
-    });
+        const app = Elm.Examples.Embed.init(options);
+        PolymnyVideo.setup(app);
 
-    app.ports.polymnyVideoSetPlaybackRate.subscribe(function(arg) {
-        const video = document.getElementById(arg[0]);
-        video.playbackRate = arg[1];
-    });
+    };
 
-    app.ports.polymnyVideoSetQuality.subscribe(function(arg) {
-        var old = hls.currentLevel;
-        if (arg[1].auto) {
-            hls.currentLevel = -1;
-        } else {
-            hls.levels.forEach((level, levelIndex) => {
-                if (level.height === arg[1].height) {
-                    hls.currentLevel = levelIndex;
+    PolymnyVideo.setup = function(app) {
+        let hls;
+
+        app.ports.polymnyVideoInit.subscribe(function(arg) {
+            requestAnimationFrame(function() {
+                const video = document.getElementById(arg[0]);
+                if (Hls.isSupported()) {
+                    hls = new Hls();
+                    window.hls = hls;
+                    hls.loadSource(arg[1]);
+
+                    hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
+                        const availableQualities = hls.levels.map((l) => l.height);
+                        availableQualities.unshift(0);
+                        app.ports.polymnyVideoNowHasQualities.send(availableQualities);
+                    });
+
+                    hls.on(Hls.Events.LEVEL_SWITCHED, function(event, data) {
+                        app.ports.polymnyVideoNowHasQuality.send({
+                            auto: hls.autoLevelEnabled,
+                            height: hls.levels[data.level].height
+                        });
+                    })
+
+                    hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, function(event, data) {
+                        app.ports.polymnyVideoNowHasSubtitles.send(data.subtitleTracks);
+                    });
+
+                    hls.on(Hls.Events.SUBTITLE_TRACK_SWITCH, function(event, data) {
+                        app.ports.polymnyVideoNowHasSubtitleTrack.send(data.id === -1 ? null : hls.subtitleTracks[data.id]);
+                    });
+
+                    hls.attachMedia(video);
+                } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                    video.src = arg[1];
+                }
+
+                if (arg[2]) {
+                    video.play();
                 }
             });
-        }
-        if (old === hls.currentLevel) {
-            app.ports.polymnyVideoNowHasQuality.send({
-                auto: hls.autoLevelEnabled,
-                height: hls.currentLevel === -1 ? 0 : hls.levels[hls.currentLevel].height
-            });
-        }
-    });
+        });
 
-    app.ports.polymnyVideoSetVolume.subscribe(function(arg) {
-        const video = document.getElementById(arg[0]);
-        video.volume = arg[1].volume;
-        video.muted = arg[1].muted;
-    });
+        app.ports.polymnyVideoPlayPause.subscribe(function(arg) {
+            const video = document.getElementById(arg);
+            if (video.paused) {
+                video.play();
+            } else {
+                video.pause();
+            }
+        });
 
-    app.ports.polymnyVideoSetSubtitleTrack.subscribe(function(arg) {
-        hls.subtitleDisplay = arg[1] !== -1;
-        hls.subtitleTrack = arg[1];
-    });
+        app.ports.polymnyVideoSeek.subscribe(function(arg) {
+            const video = document.getElementById(arg[0]);
+            video.currentTime = arg[1];
+        });
 
-}
+        app.ports.polymnyVideoRequestFullscreen.subscribe(function(arg) {
+            document.getElementById(arg + '-full').requestFullscreen();
+        });
+
+        app.ports.polymnyVideoExitFullscreen.subscribe(function(arg) {
+            document.exitFullscreen();
+        });
+
+        app.ports.polymnyVideoSetPlaybackRate.subscribe(function(arg) {
+            const video = document.getElementById(arg[0]);
+            video.playbackRate = arg[1];
+        });
+
+        app.ports.polymnyVideoSetQuality.subscribe(function(arg) {
+            var old = hls.currentLevel;
+            if (arg[1].auto) {
+                hls.currentLevel = -1;
+            } else {
+                hls.levels.forEach((level, levelIndex) => {
+                    if (level.height === arg[1].height) {
+                        hls.currentLevel = levelIndex;
+                    }
+                });
+            }
+            if (old === hls.currentLevel) {
+                app.ports.polymnyVideoNowHasQuality.send({
+                    auto: hls.autoLevelEnabled,
+                    height: hls.currentLevel === -1 ? 0 : hls.levels[hls.currentLevel].height
+                });
+            }
+        });
+
+        app.ports.polymnyVideoSetVolume.subscribe(function(arg) {
+            const video = document.getElementById(arg[0]);
+            video.volume = arg[1].volume;
+            video.muted = arg[1].muted;
+        });
+
+        app.ports.polymnyVideoSetSubtitleTrack.subscribe(function(arg) {
+            hls.subtitleDisplay = arg[1] !== -1;
+            hls.subtitleTrack = arg[1];
+        });
+
+    };
+
+    return PolymnyVideo;
+})();
diff --git a/src/Examples/Embed.elm b/src/Examples/Embed.elm
index bcc7cfb..9c2e192 100644
--- a/src/Examples/Embed.elm
+++ b/src/Examples/Embed.elm
@@ -64,7 +64,7 @@ init flags =
                 |> Result.withDefault 0
 
         ( video, cmd ) =
-            Video.fromUrl url "video"
+            Video.fromConfig { url = url, id = "video", autoplay = True }
     in
     ( { video = video, screenSize = ( width, height ) }
     , Cmd.map VideoMsg cmd
diff --git a/src/Video.elm b/src/Video.elm
index 197d1ad..631d236 100644
--- a/src/Video.elm
+++ b/src/Video.elm
@@ -3,7 +3,7 @@ port module Video exposing
     , Settings(..)
     , SubtitleTrack
     , Video
-    , fromUrl
+    , fromConfig
     , init
     , nowHasQualities
     , nowHasQuality
@@ -44,10 +44,17 @@ type alias Video =
     }
 
 
-fromUrl : String -> String -> ( Video, Cmd Msg )
-fromUrl url id =
-    ( { url = url
-      , id = id
+type alias Config =
+    { url : String
+    , id : String
+    , autoplay : Bool
+    }
+
+
+fromConfig : Config -> ( Video, Cmd Msg )
+fromConfig config =
+    ( { url = config.url
+      , id = config.id
       , playing = False
       , position = 0
       , duration = 0
@@ -69,7 +76,7 @@ fromUrl url id =
       , showIcon = Nothing
       , showIconRequested = Nothing
       }
-    , init id url
+    , init config.id config.url config.autoplay
     )
 
 
@@ -265,12 +272,12 @@ update msg model =
             ( { model | showMiniature = miniature }, Cmd.none )
 
 
-port polymnyVideoInit : ( String, String ) -> Cmd msg
+port polymnyVideoInit : ( String, String, Bool ) -> Cmd msg
 
 
-init : String -> String -> Cmd msg
-init id url =
-    polymnyVideoInit ( id, url )
+init : String -> String -> Bool -> Cmd msg
+init id url autoplay =
+    polymnyVideoInit ( id, url, autoplay )
 
 
 port polymnyVideoPlayPause : String -> Cmd msg
diff --git a/src/Video/Views.elm b/src/Video/Views.elm
index 6f41cfe..85a57d0 100644
--- a/src/Video/Views.elm
+++ b/src/Video/Views.elm
@@ -258,24 +258,10 @@ overlay model =
         (Element.width Element.fill
             :: Element.height Element.fill
             :: Font.color (Element.rgb 1 1 1)
-            :: (if not model.playing then
-                    Background.color (Element.rgba 0 0 0 0.5)
-
-                else
-                    Background.color (Element.rgba 0 0 0 0)
-               )
             :: Events.overlay
         )
-        (case ( model.playing, model.showIcon ) of
-            ( False, _ ) ->
-                Element.el
-                    [ Element.centerX
-                    , Element.centerY
-                    , Element.scale 10
-                    ]
-                    (Icons.play True)
-
-            ( _, Just icon ) ->
+        (case model.showIcon of
+            Just icon ->
                 animatedEl fadeOutZoom
                     [ Background.color (Element.rgb 0 0 0)
                     , Border.rounded 100