Auto hide bar
This commit is contained in:
parent
22fd24c13e
commit
1119ebf380
3
elm.json
3
elm.json
|
@ -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"
|
||||||
}
|
}
|
||||||
|
|
154
src/Main.elm
154
src/Main.elm
|
@ -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
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue