tforgione
/
elm-twitch
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

An attempt to work with elm-video

This commit is contained in:
Thomas Forgione 2021-06-21 11:30:31 +02:00
parent df821e07af
commit 31cc8a1bb9
9 changed files with 61 additions and 641 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitmodules vendored Normal file
View File

@ -0,0 +1,3 @@
[submodule "elm-video"]
path = elm-video
url = https://gitea.tforgione.fr/tforgione/elm-video

1
elm-video Submodule

@ -0,0 +1 @@
Subproject commit d1bd418e890c337b010a9cd906679bd729a00fd0

7
elm.json
View File

@ -1,7 +1,8 @@
{ {
"type": "application", "type": "application",
"source-directories": [ "source-directories": [
"src" "src",
"elm-video/src"
], ],
"elm-version": "0.19.1", "elm-version": "0.19.1",
"dependencies": { "dependencies": {
@ -14,10 +15,12 @@
"elm/json": "1.1.3", "elm/json": "1.1.3",
"elm/time": "1.0.0", "elm/time": "1.0.0",
"elm/url": "1.0.0", "elm/url": "1.0.0",
"elm/svg": "1.0.1",
"jims/html-parser": "1.0.0", "jims/html-parser": "1.0.0",
"justinmimbs/timezone-data": "3.0.3", "justinmimbs/timezone-data": "3.0.3",
"mdgriffith/elm-ui": "1.1.8", "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": { "indirect": {
"elm/bytes": "1.0.8", "elm/bytes": "1.0.8",

26
index.html
View File

@ -10,7 +10,8 @@
</head> </head>
<body> <body>
<div id="container"></div> <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 src="js/main.js"></script>
<script> <script>
function isDarkMode(e) { function isDarkMode(e) {
@ -37,30 +38,9 @@
} }
}); });
var lastId, player; setupApp(app);
if (app.ports !== undefined) { 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) { if (app.ports.setDarkMode !== undefined) {
app.ports.setDarkMode.subscribe(function(arg) { app.ports.setDarkMode.subscribe(function(arg) {
if (arg === null) { if (arg === null) {

1
js/elm-video.js Symbolic link
View File

@ -0,0 +1 @@
../elm-video/js/ports.js

562
js/vd.js
View File

File diff suppressed because one or more lines are too long

57
src/Core.elm
View File

@ -13,6 +13,8 @@ import Time
import TimeZone import TimeZone
import Twitch import Twitch
import Url import Url
import Video
import Video.Events
type alias Model = type alias Model =
@ -32,7 +34,7 @@ type alias Model =
type Page type Page
= Home (Maybe (Hover Twitch.Playlist)) = Home (Maybe (Hover Twitch.Playlist))
| Playlist Twitch.Playlist (Maybe (Hover Twitch.Video)) | 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 type Msg
@ -53,6 +55,7 @@ type Msg
| CurrentDateReceived Time.Posix | CurrentDateReceived Time.Posix
| DarkMode Bool | DarkMode Bool
| DarkModeClicked | DarkModeClicked
| VideoMsg Video.Msg
init : { width : Int, height : Int, darkMode : Bool, darkSetting : Maybe Bool } -> Url.Url -> Nav.Key -> ( Model, Cmd 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 : Model -> Sub Msg
subscriptions _ = subscriptions model =
Sub.batch Sub.batch
[ Events.onResize (\w h -> SizeReceived w h) [ Events.onResize (\w h -> SizeReceived w h)
, Time.every 200 TimeReceived , Time.every 200 TimeReceived
, Ports.darkMode DarkMode , 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 -> Playlist p Nothing ->
( { model | page = Playlist p (Just (Hover.hover hover model.time)) }, Cmd.none ) ( { model | page = Playlist p (Just (Hover.hover hover model.time)) }, Cmd.none )
Video p v Nothing -> Video p v x Nothing ->
( { model | page = Video p v (Just (Hover.hover v model.time)) }, Cmd.none ) ( { model | page = Video p v x (Just (Hover.hover v model.time)) }, Cmd.none )
_ -> _ ->
( model, Cmd.none ) ( model, Cmd.none )
@ -143,8 +154,8 @@ update msg model =
Playlist p _ -> Playlist p _ ->
( { model | page = Playlist p Nothing }, Cmd.none ) ( { model | page = Playlist p Nothing }, Cmd.none )
Video p v _ -> Video p v x _ ->
( { model | page = Video p v Nothing }, Cmd.none ) ( { model | page = Video p v x Nothing }, Cmd.none )
SizeReceived w h -> SizeReceived w h ->
( { model | device = Element.classifyDevice { width = w, height = h } } ( { model | device = Element.classifyDevice { width = w, height = h } }
@ -234,25 +245,19 @@ update msg model =
( page, cmd ) = ( page, cmd ) =
case ( playlist, video ) of case ( playlist, video ) of
( Just p, Just v ) -> ( Just p, Just v ) ->
( Video p v Nothing let
, Ports.registerVideo ( Twitch.videoId v, "videos/" ++ p.url ++ v.url, time ) ( 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 ) -> ( Just p, Nothing ) ->
( Playlist p Nothing, Cmd.none ) ( Playlist p Nothing, Cmd.none )
_ -> _ ->
( Home Nothing, Cmd.none ) ( Home Nothing, Cmd.none )
extraCmd =
case page of
Video _ _ _ ->
Cmd.none
_ ->
Ports.eraseVideo ()
in in
( { model | page = page }, Cmd.batch [ cmd, extraCmd ] ) ( { model | page = page }, cmd )
UrlRequested u -> UrlRequested u ->
case u of case u of
@ -265,6 +270,22 @@ update msg model =
DarkMode dark -> DarkMode dark ->
( { model | darkMode = dark }, Cmd.none ) ( { 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 : String -> Maybe ( String, String )
splitter input = splitter input =

8
src/Ports.elm
View File

@ -1,10 +1,4 @@
port module Ports exposing (darkMode, eraseVideo, registerVideo, setDarkMode) port module Ports exposing (darkMode, setDarkMode)
port registerVideo : ( String, String, Maybe String ) -> Cmd msg
port eraseVideo : () -> Cmd msg
port setDarkMode : Maybe Bool -> Cmd msg port setDarkMode : Maybe Bool -> Cmd msg

37
src/Views.elm
View File

@ -19,6 +19,8 @@ import Time
import TimeUtils import TimeUtils
import Twitch import Twitch
import Ui import Ui
import Video
import Video.Views
view : Core.Model -> Browser.Document Core.Msg view : Core.Model -> Browser.Document Core.Msg
@ -57,7 +59,7 @@ title model =
Core.Playlist p _ -> Core.Playlist p _ ->
Consts.url ++ " - " ++ p.name Consts.url ++ " - " ++ p.name
Core.Video p v _ -> Core.Video p v _ _ ->
Consts.url ++ " - " ++ p.name ++ " - " ++ v.name Consts.url ++ " - " ++ p.name ++ " - " ++ v.name
@ -70,8 +72,8 @@ viewContent model =
Core.Playlist playlist hover -> Core.Playlist playlist hover ->
videoMiniaturesView model.darkMode model.device model.zone model.currentDate model.time hover playlist videoMiniaturesView model.darkMode model.device model.zone model.currentDate model.time hover playlist
Core.Video playlist video hover -> Core.Video playlist video v hover ->
videoView model.darkMode model.device model.zone model.currentDate model.time hover playlist video videoView model.darkMode model.device model.zone model.currentDate model.time hover playlist video v
topBar : Maybe Bool -> Element Core.Msg 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 : 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 = videoView darkMode device zone currentDate time hover playlist video v =
let let
( builder, contentPadding ) = ( builder, contentPadding ) =
case device.class of case device.class of
@ -379,31 +381,8 @@ videoView darkMode device zone currentDate time hover playlist video =
[ Element.width (Element.fillPortion 2) [ Element.width (Element.fillPortion 2)
, Element.spacing 10 , Element.spacing 10
, Element.alignTop , Element.alignTop
, Element.height Element.fill
] ]
[ Keyed.el [ Video.Views.view v |> Element.map Core.VideoMsg
[ 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
]
[]
)
)
, Element.paragraph , Element.paragraph
[ Font.size Consts.homeFontSize [ Font.size Consts.homeFontSize
, Font.bold , Font.bold