From 51dd1736fd96c7f78c481028ea0b4ba2ac37da58 Mon Sep 17 00:00:00 2001
From: Thomas Forgione <thomas@forgione.fr>
Date: Tue, 15 Jun 2021 19:42:24 +0200
Subject: [PATCH] Adds a big play button when video not playing

---
 src/Events.elm |  1 +
 src/Views.elm  | 25 ++++++++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/Events.elm b/src/Events.elm
index 342e01a..f567e6a 100644
--- a/src/Events.elm
+++ b/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)
         ]
 
 
diff --git a/src/Views.elm b/src/Views.elm
index a387be8..88d1b17 100644
--- a/src/Views.elm
+++ b/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) ]
-                (case model.showIcon of
-                    Just icon ->
+            Element.el
+                [ 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)
+                ]
+                (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