diff --git a/src/Video.elm b/src/Video.elm index 7871473..0086dc2 100644 --- a/src/Video.elm +++ b/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 ) diff --git a/src/Views.elm b/src/Views.elm index 231a59a..a387be8 100644 --- a/src/Views.elm +++ b/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