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

Shit starts to work

This commit is contained in:
Thomas Forgione 2020-10-04 16:37:01 +02:00
parent 90ad495baf
commit 27d19bf76d
5 changed files with 68 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -4,14 +4,26 @@
<title>twitch.tforgione.fr</title> <title>twitch.tforgione.fr</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/video-js.css" rel="stylesheet">
</head> </head>
<body> <body>
<div id="container"></div> <div id="container"></div>
<script src="js/vd.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script> <script>
Elm.Main.init({ var app = Elm.Main.init({
node: document.getElementById('container') node: document.getElementById('container')
}); });
function setup(args) {
if (document.getElementById(args[0]) != undefined) {
vd.setup(args[0], args[1] + "/manifest.mpd")
} else {
setTimeout(function() {
setup(args);
}, 50);
}
}
</script> </script>
</body> </body>
</html> </html>

6
src/Consts.elm
View File

@ -5,6 +5,7 @@ module Consts exposing
, normalFontSize , normalFontSize
, titleFontSize , titleFontSize
, url , url
, videoId
) )
@ -36,3 +37,8 @@ homeFontSize =
homePadding : Int homePadding : Int
homePadding = homePadding =
15 15
videoId : String
videoId =
"video"

19
src/Core.elm
View File

@ -1,7 +1,9 @@
module Core exposing (FullModel(..), Model, Msg(..), Page(..), init, update) module Core exposing (FullModel(..), Model, Msg(..), Page(..), init, update)
import Browser.Navigation as Nav import Browser.Navigation as Nav
import Consts
import Json.Decode as Decode import Json.Decode as Decode
import Ports
import Task import Task
import Time import Time
import Twitch import Twitch
@ -66,7 +68,10 @@ update msg model =
( VideoClicked playlist video, Loaded m ) -> ( VideoClicked playlist video, Loaded m ) ->
( Loaded { m | page = Video playlist video } ( Loaded { m | page = Video playlist video }
, Nav.pushUrl m.key ("#" ++ playlist.url ++ Twitch.videoName video) , Cmd.batch
[ Nav.pushUrl m.key ("#" ++ playlist.url ++ Twitch.videoName video)
, Ports.registerVideo ( "video", video.url )
]
) )
( UrlReceived url, Loaded m ) -> ( UrlReceived url, Loaded m ) ->
@ -96,18 +101,20 @@ update msg model =
_ -> _ ->
Nothing Nothing
page = ( page, cmd ) =
case ( playlist, video ) of case ( playlist, video ) of
( Just p, Just v ) -> ( Just p, Just v ) ->
Video p v ( Video p v
, Ports.registerVideo ( Consts.videoId, v.url )
)
( Just p, Nothing ) -> ( Just p, Nothing ) ->
Playlist p ( Playlist p, Cmd.none )
_ -> _ ->
Home ( Home, Cmd.none )
in in
( Loaded { m | page = page }, Cmd.none ) ( Loaded { m | page = page }, cmd )
_ -> _ ->
( model, Cmd.none ) ( model, Cmd.none )

4
src/Ports.elm Normal file
View File

@ -0,0 +1,4 @@
port module Ports exposing (registerVideo)
port registerVideo : ( String, String ) -> Cmd msg

32
src/Views.elm
View File

@ -9,6 +9,9 @@ import Element.Background as Background
import Element.Border as Border import Element.Border as Border
import Element.Font as Font import Element.Font as Font
import Element.Input as Input import Element.Input as Input
import Html
import Html.Attributes
import Json.Encode as Encode
import Time import Time
import TimeUtils import TimeUtils
import Twitch import Twitch
@ -225,25 +228,42 @@ videoMiniatureView zone playlist video =
button button
videoInList : Time.Zone -> Twitch.Video -> Element Core.Msg videoInList : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
videoInList zone video = videoInList zone playlist video =
let
label =
Element.row [ Element.width Element.fill, Element.spacing 10 ] Element.row [ Element.width Element.fill, Element.spacing 10 ]
[ Element.el [ Element.width (Element.fillPortion 2) ] [ Element.el [ Element.width (Element.fillPortion 2) ]
(videoMiniature video) (videoMiniature video)
, Element.el [ Element.width (Element.fillPortion 3), Element.paddingXY 0 10, Element.alignTop ] , Element.el [ Element.width (Element.fillPortion 3), Element.paddingXY 0 10, Element.alignTop ]
(videoDescription zone video) (videoDescription zone video)
] ]
in
Input.button [ Element.width Element.fill ]
{ label = label, onPress = Just (Core.VideoClicked playlist video) }
videoView : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg videoView : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
videoView zone playlist video = videoView zone playlist video =
Element.row [ Element.padding 10, Element.width Element.fill, Element.spacing 10 ] Element.row [ Element.padding 10, Element.width Element.fill, Element.spacing 10 ]
[ Element.column [ Element.spacing 10, Element.width (Element.fillPortion 2) ] [ Element.column
[ Element.image [ Element.width Element.fill ] [ Element.width (Element.fillPortion 2)
{ description = "", src = Twitch.videoMiniatureUrl video } , Element.htmlAttribute (Html.Attributes.style "height" "auto")
]
[ Element.html
(Html.video
[ Html.Attributes.id Consts.videoId
, Html.Attributes.class "video-js vjs-default-skin wf"
, Html.Attributes.property "data-setup" (Encode.string "{\"fluid\": true}")
, Html.Attributes.controls True
, Html.Attributes.autoplay True
]
[]
)
, Element.paragraph , Element.paragraph
[ Font.size Consts.homeFontSize [ Font.size Consts.homeFontSize
, Font.bold , Font.bold
, Element.paddingEach { top = 10, left = 0, bottom = 0, right = 0 }
] ]
[ Element.text video.name ] [ Element.text video.name ]
, Element.paragraph , Element.paragraph
@ -251,7 +271,7 @@ videoView zone playlist video =
[ Element.text ("Diffusé le " ++ formatDate zone video.date) ] [ Element.text ("Diffusé le " ++ formatDate zone video.date) ]
] ]
, Element.column [ Element.alignTop, Element.spacing 10, Element.width (Element.fillPortion 1) ] , Element.column [ Element.alignTop, Element.spacing 10, Element.width (Element.fillPortion 1) ]
(List.map (videoInList zone) playlist.videos) (List.map (videoInList zone playlist) playlist.videos)
] ]