Adds nice icon when play pause

src/Video.elm

@@ -12,6 +12,8 @@ port module Video exposing
     , update
     )
 
+import Element exposing (Element)
+import Icons
 import Json.Decode as Decode
 import Quality exposing (Quality)
 
@@ -36,6 +38,8 @@ type alias Video =
     , subtitles : List SubtitleTrack
     , subtitleTrack : Maybe SubtitleTrack
     , showMiniature : Maybe ( Int, Int )
+    , showIcon : Maybe (Element Msg)
+    , showIconRequested : Maybe (Element Msg)
     }
 
 
@@ -60,6 +64,8 @@ fromUrl url =
     , subtitles = []
     , subtitleTrack = Nothing
     , showMiniature = Nothing
+    , showIcon = Nothing
+    , showIconRequested = Nothing
     }
 
 
@@ -117,7 +123,16 @@ update msg model =
             ( model, Cmd.none )
 
         PlayPause ->
-            ( model, playPause )
+            ( { model
+                | showIconRequested =
+                    if model.playing then
+                        Just (Icons.pause True)
+
+                    else
+                        Just (Icons.play True)
+              }
+            , playPause
+            )
 
         Seek time ->
             ( model, seek time )
@@ -147,11 +162,37 @@ update msg model =
             ( model, setVolume { volume = v, muted = m } )
 
         AnimationFrameDelta delta ->
-            if model.animationFrame + delta > 3500 then
-                ( { model | animationFrame = model.animationFrame + delta, showSettings = False, settings = All }, Cmd.none )
+            let
+                animationFrame =
+                    model.animationFrame + delta
 
-            else
-                ( { model | animationFrame = model.animationFrame + delta }, Cmd.none )
+                ( showSettings, settings ) =
+                    if animationFrame > 3500 then
+                        ( False, All )
+
+                    else
+                        ( model.showSettings, model.settings )
+
+                ( showIconRequested, showIcon ) =
+                    case ( model.showIconRequested, model.showIcon ) of
+                        ( Just a, Just b ) ->
+                            ( Just a, Nothing )
+
+                        ( Just a, Nothing ) ->
+                            ( Nothing, Just a )
+
+                        ( Nothing, a ) ->
+                            ( Nothing, a )
+            in
+            ( { model
+                | animationFrame = animationFrame
+                , showSettings = showSettings
+                , settings = settings
+                , showIconRequested = showIconRequested
+                , showIcon = showIcon
+              }
+            , Cmd.none
+            )
 
         MouseMove ->
             ( { model | animationFrame = 0 }, Cmd.none )

src/Views.elm

@@ -57,6 +57,21 @@ embed screenSize model =
         remaining =
             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 ->
+                        animatedEl fadeOutZoom
+                            [ Background.color (Element.rgb 0 0 0)
+                            , Border.rounded 100
+                            , Element.padding 10
+                            ]
+                            icon
+
+                    _ ->
+                        Element.none
+                )
+
         bar =
             animatedEl
                 (if model.animationFrame < 3000 then
@@ -205,7 +220,8 @@ embed screenSize model =
                 )
     in
     Element.el
-        (Element.inFront bar
+        (Element.inFront overlay
+            :: Element.inFront bar
             :: Element.width Element.fill
             :: Element.height Element.fill
             :: Background.color (Element.rgb 0 0 0)
@@ -535,6 +551,16 @@ fadeOut =
         [ P.opacity 0 ]
 
 
+fadeOutZoom : Animation
+fadeOutZoom =
+    Animation.fromTo
+        { duration = 500
+        , options = []
+        }
+        [ P.opacity 1, P.scale 1 ]
+        [ P.opacity 0, P.scale 5 ]
+
+
 animatedEl : Animation -> List (Element.Attribute msg) -> Element msg -> Element msg
 animatedEl =
     animatedUi Element.el