Adds a big play button when video not playing

src/Events.elm

@@ -51,6 +51,7 @@ player =
     List.map Element.htmlAttribute
         [ Html.Events.on "fullscreenchange" decodeFullscreenChange
         , Html.Events.on "mousemove" (Decode.succeed Video.MouseMove)
+        , Html.Events.on "click" (Decode.succeed Video.PlayPause)
         ]
 
 

src/Views.elm

@@ -58,13 +58,32 @@ embed screenSize model =
             round ((model.duration - model.position) * 1000)
 
         overlay =
-            Element.el [ Element.centerX, Element.centerY, Font.color (Element.rgb 1 1 1) ]
+            Element.el
-                (case model.showIcon of
+                [ Element.width Element.fill
-                    Just icon ->
+                , 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)
+                ]
+                (case ( model.playing, model.showIcon ) of
+                    ( False, _ ) ->
+                        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
                             , Element.padding 10
+                            , Element.centerX
+                            , Element.centerY
                             ]
                             icon