Auto hide bar

This commit is contained in:
Thomas Forgione 2021-06-10 08:55:13 +02:00
parent 22fd24c13e
commit 1119ebf380
2 changed files with 111 additions and 46 deletions

View File

@ -7,15 +7,16 @@
"dependencies": { "dependencies": {
"direct": { "direct": {
"K-Adam/elm-dom": "1.0.0", "K-Adam/elm-dom": "1.0.0",
"andrewMacmurray/elm-simple-animation": "2.1.0",
"elm/browser": "1.0.2", "elm/browser": "1.0.2",
"elm/core": "1.0.5", "elm/core": "1.0.5",
"elm/html": "1.0.0", "elm/html": "1.0.0",
"elm/json": "1.1.3", "elm/json": "1.1.3",
"elm/svg": "1.0.1", "elm/svg": "1.0.1",
"elm/time": "1.0.0",
"mdgriffith/elm-ui": "1.1.8" "mdgriffith/elm-ui": "1.1.8"
}, },
"indirect": { "indirect": {
"elm/time": "1.0.0",
"elm/url": "1.0.0", "elm/url": "1.0.0",
"elm/virtual-dom": "1.0.2" "elm/virtual-dom": "1.0.2"
} }

View File

@ -1,6 +1,7 @@
port module Main exposing (..) port module Main exposing (..)
import Browser import Browser
import Browser.Events
import DOM as Dom import DOM as Dom
import Element exposing (Element, alignRight, centerY, el, fill, padding, rgb255, row, spacing, text, width) import Element exposing (Element, alignRight, centerY, el, fill, padding, rgb255, row, spacing, text, width)
import Element.Background as Background import Element.Background as Background
@ -12,6 +13,9 @@ import Html.Attributes
import Html.Events import Html.Events
import Icons import Icons
import Json.Decode as Decode import Json.Decode as Decode
import Simple.Animation as Animation exposing (Animation)
import Simple.Animation.Animated as Animated
import Simple.Animation.Property as P
main : Program String Model Msg main : Program String Model Msg
@ -20,7 +24,12 @@ main =
{ init = \url _ _ -> init url { init = \url _ _ -> init url
, update = update , update = update
, view = view , view = view
, subscriptions = \_ -> nowHasQualities NowHasQualities , subscriptions =
\_ ->
Sub.batch
[ nowHasQualities NowHasQualities
, Browser.Events.onAnimationFrameDelta AnimationFrameDelta
]
, onUrlChange = \_ -> Noop , onUrlChange = \_ -> Noop
, onUrlRequest = \_ -> Noop , onUrlRequest = \_ -> Noop
} }
@ -36,6 +45,8 @@ type alias Model =
, muted : Bool , muted : Bool
, isFullscreen : Bool , isFullscreen : Bool
, qualities : List Int , qualities : List Int
, showBar : Bool
, animationFrame : Float
} }
@ -45,6 +56,8 @@ type Msg
| Seek Float | Seek Float
| RequestFullscreen | RequestFullscreen
| ExitFullscreen | ExitFullscreen
| AnimationFrameDelta Float
| MouseMove
| NowPlaying | NowPlaying
| NowPaused | NowPaused
| NowHasDuration Float | NowHasDuration Float
@ -67,6 +80,8 @@ init url =
False False
False False
[] []
True
0
, initVideo url , initVideo url
) )
@ -89,6 +104,12 @@ update msg model =
ExitFullscreen -> ExitFullscreen ->
( model, exitFullscreen () ) ( model, exitFullscreen () )
AnimationFrameDelta delta ->
( { model | animationFrame = model.animationFrame + delta }, Cmd.none )
MouseMove ->
( { model | animationFrame = 0 }, Cmd.none )
NowPlaying -> NowPlaying ->
( { model | playing = True }, Cmd.none ) ( { model | playing = True }, Cmd.none )
@ -163,57 +184,66 @@ video model =
round ((model.duration - model.position) * 1000) round ((model.duration - model.position) * 1000)
bar = bar =
Element.column animatedEl
[ Element.width Element.fill (if model.animationFrame < 5000 then
, Element.padding 10 fadeIn
, Element.alignBottom
, Font.color (Element.rgba 1 1 1 0.85) else
, Background.gradient { angle = 0, steps = [ Element.rgba 0 0 0 0.75, Element.rgba 0 0 0 0 ] } fadeOut
] )
[ Element.row [ Element.width Element.fill, Element.height Element.fill ]
(Element.column
[ Element.width Element.fill [ Element.width Element.fill
, Element.height (Element.px 30) , Element.padding 10
, Border.rounded 5 , Element.alignBottom
, Element.behindContent , Font.color (Element.rgba 1 1 1 0.85)
(Element.el , Background.gradient { angle = 0, steps = [ Element.rgba 0 0 0 0.75, Element.rgba 0 0 0 0 ] }
[ Background.color (Element.rgba 1 1 1 0.25) ]
, Element.width Element.fill [ Element.row
[ Element.width Element.fill
, Element.height (Element.px 30)
, Border.rounded 5
, Element.behindContent
(Element.el
[ Background.color (Element.rgba 1 1 1 0.25)
, Element.width Element.fill
, Element.height (Element.px 5)
, Element.centerY
, Border.rounded 5
]
Element.none
)
, Element.behindContent loadedElement
, Element.inFront
(Element.el
(Element.width Element.fill
:: Element.height Element.fill
:: Element.pointer
:: seekBarEvents
)
Element.none
)
]
[ Element.el
[ Background.color (Element.rgba 1 0 0 0.75)
, Element.width (Element.fillPortion seen)
, Element.height Element.fill
, Border.roundEach { topLeft = 5, topRight = 0, bottomLeft = 5, bottomRight = 0 }
, Element.height (Element.px 5) , Element.height (Element.px 5)
, Element.centerY , Element.centerY
, Border.rounded 5
] ]
Element.none Element.none
) , Element.el [ Element.width (Element.fillPortion remaining) ] Element.none
, Element.behindContent loadedElement ]
, Element.inFront , Element.row
(Element.el [ Element.spacing 10, Element.width Element.fill ]
(Element.width Element.fill [ playPauseButton model.playing
:: Element.height Element.fill , Element.el [ Element.moveDown 2.5 ] (Element.text (formatTime model.position ++ " / " ++ formatTime model.duration))
:: Element.pointer , Element.row [ Element.spacing 10, Element.alignRight ]
:: seekBarEvents [ fullscreenButton model.isFullscreen ]
)
Element.none
)
]
[ Element.el
[ Background.color (Element.rgba 1 0 0 0.75)
, Element.width (Element.fillPortion seen)
, Element.height Element.fill
, Border.roundEach { topLeft = 5, topRight = 0, bottomLeft = 5, bottomRight = 0 }
, Element.height (Element.px 5)
, Element.centerY
] ]
Element.none
, Element.el [ Element.width (Element.fillPortion remaining) ] Element.none
] ]
, Element.row )
[ Element.spacing 10, Element.width Element.fill ]
[ playPauseButton model.playing
, Element.el [ Element.moveDown 2.5 ] (Element.text (formatTime model.position ++ " / " ++ formatTime model.duration))
, Element.row [ Element.spacing 10, Element.alignRight ]
[ fullscreenButton model.isFullscreen ]
]
]
in in
Element.el (Element.inFront bar :: Element.width (Element.px 1000) :: Element.htmlAttribute (Html.Attributes.id "full") :: playerEvents) Element.el (Element.inFront bar :: Element.width (Element.px 1000) :: Element.htmlAttribute (Html.Attributes.id "full") :: playerEvents)
(Element.html (Html.video videoEvents [])) (Element.html (Html.video videoEvents []))
@ -254,6 +284,7 @@ playerEvents : List (Element.Attribute Msg)
playerEvents = playerEvents =
List.map Element.htmlAttribute List.map Element.htmlAttribute
[ Html.Events.on "fullscreenchange" decodeFullscreenChange [ Html.Events.on "fullscreenchange" decodeFullscreenChange
, Html.Events.on "mousemove" (Decode.succeed MouseMove)
] ]
@ -409,3 +440,36 @@ port exitFullscreen : () -> Cmd msg
port nowHasQualities : (List Int -> msg) -> Sub msg port nowHasQualities : (List Int -> msg) -> Sub msg
fadeIn : Animation
fadeIn =
Animation.fromTo
{ duration = 500
, options = []
}
[ P.opacity 0 ]
[ P.opacity 1 ]
fadeOut : Animation
fadeOut =
Animation.fromTo
{ duration = 500
, options = []
}
[ P.opacity 1 ]
[ P.opacity 0 ]
animatedEl : Animation -> List (Element.Attribute msg) -> Element msg -> Element msg
animatedEl =
animatedUi Element.el
animatedUi =
Animated.ui
{ behindContent = Element.behindContent
, htmlAttribute = Element.htmlAttribute
, html = Element.html
}