Big play button only when not has started

src/Video.elm

@@ -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
@@ -53,7 +54,8 @@ type alias Config =
 
 fromConfig : Config -> ( Video, Cmd Msg )
 fromConfig config =
-    ( { url = config.url
+    ( { hasStarted = False
+      , url = config.url
       , id = config.id
       , playing = False
       , position = 0
@@ -230,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 )

src/Video/Views.elm

@@ -260,8 +260,16 @@ overlay model =
             :: Font.color (Element.rgb 1 1 1)
             :: Events.overlay
         )
-        (case model.showIcon of
-            Just icon ->
+        (case ( not model.playing && not model.hasStarted, model.showIcon ) of
+            ( True, _ ) ->
+                Element.el
+                    [ Element.centerX
+                    , Element.centerY
+                    , Element.scale 10
+                    ]
+                    (Icons.play True)
+
+            ( _, Just icon ) ->
                 animatedEl fadeOutZoom
                     [ Background.color (Element.rgb 0 0 0)
                     , Border.rounded 100