Clean

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",
             });

js/ports.js

@@ -14,7 +14,11 @@ Object.defineProperty(HTMLElement.prototype, "polymnyVideoDocument", {
     }
 });
 
-function embed(options) {
+const PolymnyVideo = (function() {
+
+    const PolymnyVideo = {};
+
+    PolymnyVideo.embed = function(options) {
         if (!(options.node instanceof HTMLElement)) {
             throw new Error("options.node must be an HTMLElement");
         }
@@ -28,11 +32,11 @@ function embed(options) {
         options.height = window.innerHeight;
 
         const app = Elm.Examples.Embed.init(options);
-    setupApp(app);
+        PolymnyVideo.setup(app);
 
-}
+    };
 
-function setupApp(app) {
+    PolymnyVideo.setup = function(app) {
         let hls;
 
         app.ports.polymnyVideoInit.subscribe(function(arg) {
@@ -68,6 +72,10 @@ function setupApp(app) {
                 } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                     video.src = arg[1];
                 }
+
+                if (arg[2]) {
+                    video.play();
+                }
             });
         });
 
@@ -128,4 +136,7 @@ function setupApp(app) {
             hls.subtitleTrack = arg[1];
         });
 
-}
+    };
+
+    return PolymnyVideo;
+})();

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

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

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