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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/video-js.css" rel="stylesheet">
</head>
<body>
<div id="container"></div>
<script src="js/vd.js"></script>
<script src="js/main.js"></script>
<script>
Elm.Main.init({
var app = Elm.Main.init({
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>
</body>
</html>

6
src/Consts.elm
View File

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

19
src/Core.elm
View File

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

44
src/Views.elm
View File

@ -9,6 +9,9 @@ import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Element.Input as Input
import Html
import Html.Attributes
import Json.Encode as Encode
import Time
import TimeUtils
import Twitch
@ -225,25 +228,42 @@ videoMiniatureView zone playlist video =
button
videoInList : Time.Zone -> Twitch.Video -> Element Core.Msg
videoInList zone video =
Element.row [ Element.width Element.fill, Element.spacing 10 ]
[ Element.el [ Element.width (Element.fillPortion 2) ]
(videoMiniature video)
, Element.el [ Element.width (Element.fillPortion 3), Element.paddingXY 0 10, Element.alignTop ]
(videoDescription zone video)
]
videoInList : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
videoInList zone playlist video =
let
label =
Element.row [ Element.width Element.fill, Element.spacing 10 ]
[ Element.el [ Element.width (Element.fillPortion 2) ]
(videoMiniature video)
, Element.el [ Element.width (Element.fillPortion 3), Element.paddingXY 0 10, Element.alignTop ]
(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 zone playlist video =
Element.row [ Element.padding 10, Element.width Element.fill, Element.spacing 10 ]
[ Element.column [ Element.spacing 10, Element.width (Element.fillPortion 2) ]
[ Element.image [ Element.width Element.fill ]
{ description = "", src = Twitch.videoMiniatureUrl video }
[ Element.column
[ Element.width (Element.fillPortion 2)
, 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
[ Font.size Consts.homeFontSize
, Font.bold
, Element.paddingEach { top = 10, left = 0, bottom = 0, right = 0 }
]
[ Element.text video.name ]
, Element.paragraph
@ -251,7 +271,7 @@ videoView zone playlist video =
[ Element.text ("Diffusé le " ++ formatDate zone video.date) ]
]
, 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)
]