Big play button only when not has started

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
@@ -19,7 +19,8 @@ import Video.Quality as Quality exposing (Quality)
 
 
 type alias Video =
-    { url : String
+    { hasStarted : Bool
+    , url : String
     , id : String
     , playing : Bool
     , position : Float
@@ -44,10 +45,18 @@ 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 =
+    ( { hasStarted = False
+      , url = config.url
+      , id = config.id
       , playing = False
       , position = 0
       , duration = 0
@@ -69,7 +78,7 @@ fromUrl url id =
       , showIcon = Nothing
       , showIconRequested = Nothing
       }
-    , init id url
+    , init config.id config.url config.autoplay
     )
 
 
@@ -223,7 +232,7 @@ update msg model =
             ( { model | animationFrame = 0 }, Cmd.none )
 
         NowPlaying ->
-            ( { model | playing = True }, Cmd.none )
+            ( { model | playing = True, hasStarted = True }, Cmd.none )
 
         NowPaused ->
             ( { model | playing = False }, Cmd.none )
@@ -265,12 +274,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,16 +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, _ ) ->
+        (case ( not model.playing && not model.hasStarted, model.showIcon ) of
+            ( True, _ ) ->
                 Element.el
                     [ Element.centerX
                     , Element.centerY