An attempt to work with elm-video
This commit is contained in:
parent
df821e07af
commit
31cc8a1bb9
|
@ -0,0 +1,3 @@
|
|||
[submodule "elm-video"]
|
||||
path = elm-video
|
||||
url = https://gitea.tforgione.fr/tforgione/elm-video
|
|
@ -0,0 +1 @@
|
|||
Subproject commit d1bd418e890c337b010a9cd906679bd729a00fd0
|
7
elm.json
7
elm.json
|
@ -1,7 +1,8 @@
|
|||
{
|
||||
"type": "application",
|
||||
"source-directories": [
|
||||
"src"
|
||||
"src",
|
||||
"elm-video/src"
|
||||
],
|
||||
"elm-version": "0.19.1",
|
||||
"dependencies": {
|
||||
|
@ -14,10 +15,12 @@
|
|||
"elm/json": "1.1.3",
|
||||
"elm/time": "1.0.0",
|
||||
"elm/url": "1.0.0",
|
||||
"elm/svg": "1.0.1",
|
||||
"jims/html-parser": "1.0.0",
|
||||
"justinmimbs/timezone-data": "3.0.3",
|
||||
"mdgriffith/elm-ui": "1.1.8",
|
||||
"rtfeldman/elm-iso8601-date-strings": "1.1.3"
|
||||
"rtfeldman/elm-iso8601-date-strings": "1.1.3",
|
||||
"andrewMacmurray/elm-simple-animation": "2.1.0"
|
||||
},
|
||||
"indirect": {
|
||||
"elm/bytes": "1.0.8",
|
||||
|
|
26
index.html
26
index.html
|
@ -10,7 +10,8 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script src="js/vd.js"></script>
|
||||
<script src="https://cdn.rawgit.com/video-dev/hls.js/18bb552/dist/hls.min.js"></script>
|
||||
<script src="js/elm-video.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<script>
|
||||
function isDarkMode(e) {
|
||||
|
@ -37,30 +38,9 @@
|
|||
}
|
||||
});
|
||||
|
||||
var lastId, player;
|
||||
setupApp(app);
|
||||
|
||||
if (app.ports !== undefined) {
|
||||
if (app.ports.registerVideo !== undefined) {
|
||||
app.ports.registerVideo.subscribe(function(args) {
|
||||
window.scrollTo(0, 0);
|
||||
var time = vd.parseTime(args[2]) || undefined;
|
||||
|
||||
requestAnimationFrame(function() {
|
||||
if (args[0] !== lastId) {
|
||||
lastId = args[0];
|
||||
|
||||
player = vd.setup(args[0], {
|
||||
v: args[1] + "/manifest.m3u8",
|
||||
t: time,
|
||||
focus: true
|
||||
});
|
||||
} else if (time !== undefined ){
|
||||
player.currentTime(time);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (app.ports.setDarkMode !== undefined) {
|
||||
app.ports.setDarkMode.subscribe(function(arg) {
|
||||
if (arg === null) {
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
../elm-video/js/ports.js
|
57
src/Core.elm
57
src/Core.elm
|
@ -13,6 +13,8 @@ import Time
|
|||
import TimeZone
|
||||
import Twitch
|
||||
import Url
|
||||
import Video
|
||||
import Video.Events
|
||||
|
||||
|
||||
type alias Model =
|
||||
|
@ -32,7 +34,7 @@ type alias Model =
|
|||
type Page
|
||||
= Home (Maybe (Hover Twitch.Playlist))
|
||||
| Playlist Twitch.Playlist (Maybe (Hover Twitch.Video))
|
||||
| Video Twitch.Playlist Twitch.Video (Maybe (Hover Twitch.Video))
|
||||
| Video Twitch.Playlist Twitch.Video Video.Video (Maybe (Hover Twitch.Video))
|
||||
|
||||
|
||||
type Msg
|
||||
|
@ -53,6 +55,7 @@ type Msg
|
|||
| CurrentDateReceived Time.Posix
|
||||
| DarkMode Bool
|
||||
| DarkModeClicked
|
||||
| VideoMsg Video.Msg
|
||||
|
||||
|
||||
init : { width : Int, height : Int, darkMode : Bool, darkSetting : Maybe Bool } -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
|
||||
|
@ -87,11 +90,19 @@ resultToMsg result =
|
|||
|
||||
|
||||
subscriptions : Model -> Sub Msg
|
||||
subscriptions _ =
|
||||
subscriptions model =
|
||||
Sub.batch
|
||||
[ Events.onResize (\w h -> SizeReceived w h)
|
||||
, Time.every 200 TimeReceived
|
||||
, Ports.darkMode DarkMode
|
||||
, Sub.map VideoMsg
|
||||
(case model.page of
|
||||
Video _ _ v _ ->
|
||||
Video.Events.subs v
|
||||
|
||||
_ ->
|
||||
Sub.none
|
||||
)
|
||||
]
|
||||
|
||||
|
||||
|
@ -129,8 +140,8 @@ update msg model =
|
|||
Playlist p Nothing ->
|
||||
( { model | page = Playlist p (Just (Hover.hover hover model.time)) }, Cmd.none )
|
||||
|
||||
Video p v Nothing ->
|
||||
( { model | page = Video p v (Just (Hover.hover v model.time)) }, Cmd.none )
|
||||
Video p v x Nothing ->
|
||||
( { model | page = Video p v x (Just (Hover.hover v model.time)) }, Cmd.none )
|
||||
|
||||
_ ->
|
||||
( model, Cmd.none )
|
||||
|
@ -143,8 +154,8 @@ update msg model =
|
|||
Playlist p _ ->
|
||||
( { model | page = Playlist p Nothing }, Cmd.none )
|
||||
|
||||
Video p v _ ->
|
||||
( { model | page = Video p v Nothing }, Cmd.none )
|
||||
Video p v x _ ->
|
||||
( { model | page = Video p v x Nothing }, Cmd.none )
|
||||
|
||||
SizeReceived w h ->
|
||||
( { model | device = Element.classifyDevice { width = w, height = h } }
|
||||
|
@ -234,25 +245,19 @@ update msg model =
|
|||
( page, cmd ) =
|
||||
case ( playlist, video ) of
|
||||
( Just p, Just v ) ->
|
||||
( Video p v Nothing
|
||||
, Ports.registerVideo ( Twitch.videoId v, "videos/" ++ p.url ++ v.url, time )
|
||||
)
|
||||
let
|
||||
( el, videoCommand ) =
|
||||
Video.fromUrl ("/videos/" ++ p.url ++ v.url ++ "/manifest.m3u8") "video"
|
||||
in
|
||||
( Video p v el Nothing, Cmd.map VideoMsg videoCommand )
|
||||
|
||||
( Just p, Nothing ) ->
|
||||
( Playlist p Nothing, Cmd.none )
|
||||
|
||||
_ ->
|
||||
( Home Nothing, Cmd.none )
|
||||
|
||||
extraCmd =
|
||||
case page of
|
||||
Video _ _ _ ->
|
||||
Cmd.none
|
||||
|
||||
_ ->
|
||||
Ports.eraseVideo ()
|
||||
in
|
||||
( { model | page = page }, Cmd.batch [ cmd, extraCmd ] )
|
||||
( { model | page = page }, cmd )
|
||||
|
||||
UrlRequested u ->
|
||||
case u of
|
||||
|
@ -265,6 +270,22 @@ update msg model =
|
|||
DarkMode dark ->
|
||||
( { model | darkMode = dark }, Cmd.none )
|
||||
|
||||
VideoMsg vMsg ->
|
||||
let
|
||||
( newPage, newCommand ) =
|
||||
case model.page of
|
||||
Video a b v c ->
|
||||
let
|
||||
( newVideo, cmd ) =
|
||||
Video.update vMsg v
|
||||
in
|
||||
( Video a b newVideo c, cmd )
|
||||
|
||||
_ ->
|
||||
( model.page, Cmd.none )
|
||||
in
|
||||
( { model | page = newPage }, Cmd.map VideoMsg newCommand )
|
||||
|
||||
|
||||
splitter : String -> Maybe ( String, String )
|
||||
splitter input =
|
||||
|
|
|
@ -1,10 +1,4 @@
|
|||
port module Ports exposing (darkMode, eraseVideo, registerVideo, setDarkMode)
|
||||
|
||||
|
||||
port registerVideo : ( String, String, Maybe String ) -> Cmd msg
|
||||
|
||||
|
||||
port eraseVideo : () -> Cmd msg
|
||||
port module Ports exposing (darkMode, setDarkMode)
|
||||
|
||||
|
||||
port setDarkMode : Maybe Bool -> Cmd msg
|
||||
|
|
|
@ -19,6 +19,8 @@ import Time
|
|||
import TimeUtils
|
||||
import Twitch
|
||||
import Ui
|
||||
import Video
|
||||
import Video.Views
|
||||
|
||||
|
||||
view : Core.Model -> Browser.Document Core.Msg
|
||||
|
@ -57,7 +59,7 @@ title model =
|
|||
Core.Playlist p _ ->
|
||||
Consts.url ++ " - " ++ p.name
|
||||
|
||||
Core.Video p v _ ->
|
||||
Core.Video p v _ _ ->
|
||||
Consts.url ++ " - " ++ p.name ++ " - " ++ v.name
|
||||
|
||||
|
||||
|
@ -70,8 +72,8 @@ viewContent model =
|
|||
Core.Playlist playlist hover ->
|
||||
videoMiniaturesView model.darkMode model.device model.zone model.currentDate model.time hover playlist
|
||||
|
||||
Core.Video playlist video hover ->
|
||||
videoView model.darkMode model.device model.zone model.currentDate model.time hover playlist video
|
||||
Core.Video playlist video v hover ->
|
||||
videoView model.darkMode model.device model.zone model.currentDate model.time hover playlist video v
|
||||
|
||||
|
||||
topBar : Maybe Bool -> Element Core.Msg
|
||||
|
@ -359,8 +361,8 @@ videoInList darkMode zone currentDate time hover playlist activeVideo video =
|
|||
}
|
||||
|
||||
|
||||
videoView : Bool -> Element.Device -> Time.Zone -> Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
|
||||
videoView darkMode device zone currentDate time hover playlist video =
|
||||
videoView : Bool -> Element.Device -> Time.Zone -> Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Twitch.Video -> Video.Video -> Element Core.Msg
|
||||
videoView darkMode device zone currentDate time hover playlist video v =
|
||||
let
|
||||
( builder, contentPadding ) =
|
||||
case device.class of
|
||||
|
@ -379,31 +381,8 @@ videoView darkMode device zone currentDate time hover playlist video =
|
|||
[ Element.width (Element.fillPortion 2)
|
||||
, Element.spacing 10
|
||||
, Element.alignTop
|
||||
, Element.height Element.fill
|
||||
]
|
||||
[ Keyed.el
|
||||
[ Element.width Element.fill
|
||||
, Element.height (Element.px 0)
|
||||
, Element.htmlAttribute (Html.Attributes.style "padding-top" "56.25%")
|
||||
, Element.htmlAttribute (Html.Attributes.style "position" "relative")
|
||||
]
|
||||
( video.url
|
||||
, Element.html
|
||||
(Html.video
|
||||
[ Html.Attributes.id (Twitch.videoId video)
|
||||
, Html.Attributes.class "video-js"
|
||||
, Html.Attributes.class "vjs-default-skin"
|
||||
, Html.Attributes.class "wf"
|
||||
, Html.Attributes.property "data-setup" (Encode.string "{\"fluid\": true}")
|
||||
, Html.Attributes.style "position" "absolute"
|
||||
, Html.Attributes.style "top" "0"
|
||||
, Html.Attributes.style "height" "100%"
|
||||
, Html.Attributes.controls True
|
||||
, Html.Attributes.autoplay True
|
||||
]
|
||||
[]
|
||||
)
|
||||
)
|
||||
[ Video.Views.view v |> Element.map Core.VideoMsg
|
||||
, Element.paragraph
|
||||
[ Font.size Consts.homeFontSize
|
||||
, Font.bold
|
||||
|
|
Loading…
Reference in New Issue