Adds a big play button when video not playing
This commit is contained in:
parent
ce9048d779
commit
51dd1736fd
|
@ -51,6 +51,7 @@ player =
|
||||||
List.map Element.htmlAttribute
|
List.map Element.htmlAttribute
|
||||||
[ Html.Events.on "fullscreenchange" decodeFullscreenChange
|
[ Html.Events.on "fullscreenchange" decodeFullscreenChange
|
||||||
, Html.Events.on "mousemove" (Decode.succeed Video.MouseMove)
|
, Html.Events.on "mousemove" (Decode.succeed Video.MouseMove)
|
||||||
|
, Html.Events.on "click" (Decode.succeed Video.PlayPause)
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -58,13 +58,32 @@ embed screenSize model =
|
||||||
round ((model.duration - model.position) * 1000)
|
round ((model.duration - model.position) * 1000)
|
||||||
|
|
||||||
overlay =
|
overlay =
|
||||||
Element.el [ Element.centerX, Element.centerY, Font.color (Element.rgb 1 1 1) ]
|
Element.el
|
||||||
(case model.showIcon of
|
[ Element.width Element.fill
|
||||||
Just icon ->
|
, 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
|
animatedEl fadeOutZoom
|
||||||
[ Background.color (Element.rgb 0 0 0)
|
[ Background.color (Element.rgb 0 0 0)
|
||||||
, Border.rounded 100
|
, Border.rounded 100
|
||||||
, Element.padding 10
|
, Element.padding 10
|
||||||
|
, Element.centerX
|
||||||
|
, Element.centerY
|
||||||
]
|
]
|
||||||
icon
|
icon
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue