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

Compare commits

base: tforgione:master
Branches Tags
tforgione:master
tforgione:plyr
tforgione:indexify
..
compare: tforgione:indexify
Branches Tags
tforgione:master
tforgione:plyr
tforgione:indexify

No commits in common. "master" and "indexify" have entirely different histories.
master ... indexify

20 changed files with 2480 additions and 667 deletions
Show Stats Expand all files Collapse all files

4
.gitignore vendored
View File

@ -1,4 +1,6 @@
videos
elm-stuff
js
js/main.js
js/main.tmp.js
js/main.min.js
deploy.sh

3
.gitmodules vendored
View File

@ -1,3 +0,0 @@
[submodule "elm-video"]
path = elm-video
url = https://github.com/polymny/elm-video

4
Makefile
View File

@ -18,13 +18,13 @@ dev: js/main.js
release: js/main.min.js
js/main.js: src/** elm-video/src/**
js/main.js: src/**
$(ELM) make src/Main.elm --output $(BUILD_DIR)/main.js
js/main.min.js: js/main.tmp.js
@$(UGLIFYJS) $(BUILD_DIR)/main.tmp.js --compress 'pure_funcs="F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9",pure_getters,keep_fargs=false,unsafe_comps,unsafe' | uglifyjs --mangle > $(BUILD_DIR)/main.min.js
js/main.tmp.js: src/** elm-video/src/**
js/main.tmp.js: src/**
@$(ELM) make src/Main.elm --optimize --output $(BUILD_DIR)/main.tmp.js
watch:

78
css/spinner.css Normal file
View File

@ -0,0 +1,78 @@
.lds-spinner {
color: official;
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-spinner div {
transform-origin: 40px 40px;
animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
content: " ";
display: block;
position: absolute;
top: 3px;
left: 37px;
width: 6px;
height: 18px;
border-radius: 20%;
background: #cef;
}
.lds-spinner div:nth-child(1) {
transform: rotate(0deg);
animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
transform: rotate(30deg);
animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
transform: rotate(60deg);
animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
transform: rotate(90deg);
animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
transform: rotate(120deg);
animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
transform: rotate(150deg);
animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
transform: rotate(180deg);
animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
transform: rotate(210deg);
animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
transform: rotate(240deg);
animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
transform: rotate(270deg);
animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
transform: rotate(300deg);
animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
transform: rotate(330deg);
animation-delay: 0s;
}
@keyframes lds-spinner {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

1664
css/video-js.css Normal file
View File

File diff suppressed because one or more lines are too long

1
elm-video

@ -1 +0,0 @@
Subproject commit 087c3d594b62b6617954fc31a58576f12752d75a

9
elm.json
View File

@ -1,29 +1,24 @@
{
"type": "application",
"source-directories": [
"src",
"elm-video/src"
"src"
],
"elm-version": "0.19.1",
"dependencies": {
"direct": {
"andrewMacmurray/elm-simple-animation": "2.1.0",
"STTR13/ziplist": "1.3.0",
"elm/browser": "1.0.2",
"elm/core": "1.0.5",
"elm/html": "1.0.0",
"elm/http": "2.0.0",
"elm/json": "1.1.3",
"elm/svg": "1.0.1",
"elm/time": "1.0.0",
"elm/url": "1.0.0",
"icidasset/elm-material-icons": "9.0.0",
"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"
},
"indirect": {
"avh4/elm-color": "1.0.0",
"elm/bytes": "1.0.8",
"elm/file": "1.0.5",
"elm/parser": "1.1.0",

24
embed.html
View File

@ -1,24 +0,0 @@
<!doctype HTML>
<html>
<head>
<title>twitch.tforgione.fr</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/ico" href="favicon.ico"/>
</head>
<body>
<div id="container"></div>
<script src="js/polymny-video-full.min.js"></script>
<script src="js/main.js"></script>
<script>
PolymnyVideo.fullpage({
node: document.getElementById('container'),
url: "videos/" + PolymnyVideo.getArgumentFromUrl("v") + "/manifest.m3u8",
autoplay: true,
startTime: PolymnyVideo.getArgumentFromUrl("t"),
enableMiniatures: true,
});
</script>
</body>
</html>

BIN
favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 66 KiB

63
index.html
View File

@ -4,65 +4,46 @@
<title>twitch.tforgione.fr</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/ico" href="favicon.ico"/>
<link href="css/video-js.css" rel="stylesheet">
<link href="css/spinner.css" rel="stylesheet">
</head>
<body>
<div id="container"></div>
<script src="js/polymny-video-elm.min.js"></script>
<script src="js/vd.js"></script>
<script src="js/main.js"></script>
<script>
function isDarkMode(e) {
var darkMode = JSON.parse(localStorage.getItem('darkMode'));
if (darkMode === null) {
if (e === undefined) {
e = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
}
darkMode = e.matches === true;
}
return darkMode;
}
var app = Elm.Main.init({
node: document.getElementById('container'),
flags: {
width: window.innerWidth,
height: window.innerHeight,
darkMode: isDarkMode(),
darkSetting: JSON.parse(localStorage.getItem('darkMode'))
}
flags: { width: window.innerWidth, height: window.innerHeight }
});
PolymnyVideo.setup(app);
var lastId, player;
if (app.ports !== undefined) {
if (app.ports.setDarkMode !== undefined) {
app.ports.setDarkMode.subscribe(function(arg) {
if (arg === null) {
localStorage.removeItem('darkMode');
} else {
localStorage.setItem('darkMode', arg);
if (app.ports !== undefined && app.ports.registerVideo !== undefined) {
app.ports.registerVideo.subscribe(function(args) {
var time = parseInt(args[2], 10) || undefined;
requestAnimationFrame(function() {
if (args[0] !== lastId) {
lastId = args[0];
player = vd.setup(args[0], {
v: args[1] + "/manifest.mpd",
t: parseInt(args[2], 10) || 0,
focus: true
});
} else if (time !== undefined ){
player.currentTime(time);
}
app.ports.darkMode.send(isDarkMode());
});
});
}
}
if (app.ports !== undefined) {
if (app.ports.eraseVideo !== undefined) {
if (app.ports !== undefined && app.ports.eraseVideo !== undefined) {
app.ports.eraseVideo.subscribe(function() {
window.scrollTo(0, 0);
lastId = undefined;
});
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
app.ports.darkMode.send(isDarkMode(e));
});
}
</script>
</body>
</html>

13
indexify.js
View File

@ -2,25 +2,16 @@ const fs = require('fs');
const path = require('path');
const VIDEO_DIR = "videos";
const DESCRIPTION_FILE = "description.json";
const INDEX_FILE = "index.json";
function isDirectory(path) {
return fs.lstatSync(path).isDirectory();
}
let info = [];
for (let dir of fs.readdirSync(VIDEO_DIR)) {
if (!isDirectory(path.join(VIDEO_DIR, dir))) {
continue;
}
let description = JSON.parse(fs.readFileSync(path.join(VIDEO_DIR, dir, DESCRIPTION_FILE)));
description.url = dir + "/";
description.videos = [];
for (let subdir of fs.readdirSync(path.join(VIDEO_DIR, dir))) {
if (!isDirectory(path.join(VIDEO_DIR, dir, subdir))) {
if (subdir === DESCRIPTION_FILE) {
continue;
}
@ -33,5 +24,5 @@ for (let dir of fs.readdirSync(VIDEO_DIR)) {
info.push(description);
}
fs.writeFileSync(path.join(VIDEO_DIR, INDEX_FILE), JSON.stringify(info));
fs.writeFileSync(path.join(VIDEO_DIR, 'index.json'), JSON.stringify(info));

449
js/vd.js Normal file
View File

File diff suppressed because one or more lines are too long

42
src/Colors.elm
View File

@ -1,4 +1,4 @@
module Colors exposing (..)
module Colors exposing (blackFont, greyBackground, greyFont, primary, primaryOver, selected, white)
import Element
@ -18,47 +18,21 @@ white =
Element.rgb255 255 255 255
red : Element.Color
red =
Element.rgb255 255 0 0
greyBackground : Element.Color
greyBackground =
Element.rgba255 0 0 0 0.7
background : Bool -> Element.Color
background darkMode =
if darkMode then
Element.rgb255 47 49 54
else
Element.rgb255 245 245 245
blackFont : Element.Color
blackFont =
Element.rgb255 54 54 54
font : Bool -> Element.Color
font darkMode =
if darkMode then
Element.rgb255 245 245 245
else
Element.rgb255 54 57 63
detailFont : Bool -> Element.Color
detailFont darkMode =
if darkMode then
Element.rgb255 160 160 160
else
greyFont : Element.Color
greyFont =
Element.rgb255 128 128 128
selected : Bool -> Element.Color
selected darkMode =
if darkMode then
Element.rgb255 64 68 75
else
selected : Element.Color
selected =
Element.rgb255 223 233 250

240
src/Core.elm
View File

@ -1,20 +1,19 @@
module Core exposing (Model, Msg(..), Page(..), init, subscriptions, update)
module Core exposing (FullModel(..), Model, Msg(..), Page(..), init, subscriptions, update)
import Browser
import Browser.Events as Events
import Browser.Navigation as Nav
import Dict exposing (Dict)
import Element
import Hover exposing (Hover)
import Http
import Ports
import Task
import Time
import TimeZone
import Twitch
import Url
import Video
import Video.Events
type FullModel
= Unloaded Element.Device Url.Url Nav.Key
| Loaded Model
type alias Model =
@ -23,59 +22,29 @@ type alias Model =
, page : Page
, key : Nav.Key
, device : Element.Device
, time : Time.Posix
, currentDate : Time.Posix
, url : Url.Url
, darkMode : Bool
, darkSetting : Maybe Bool
}
type Page
= Home (Maybe (Hover Twitch.Playlist))
| Playlist Twitch.Playlist (Maybe (Hover Twitch.Video))
| Video Twitch.Playlist Twitch.Video Video.Video (Maybe (Hover Twitch.Video))
= Home
| Playlist Twitch.Playlist
| Video Twitch.Playlist Twitch.Video
type Msg
= Noop
| PlaylistsReceived (List Twitch.Playlist)
| PlaylistsReceived ( List Twitch.Playlist, Time.Zone )
| HomeClicked
| PlaylistClicked Twitch.Playlist
| VideoClicked Twitch.Playlist Twitch.Video
| UrlReceived Url.Url
| UrlRequested Browser.UrlRequest
| SizeReceived Int Int
| TimeZoneReceivedResult (Result TimeZone.Error ( String, Time.Zone ))
| TimeZoneReceived Time.Zone
| HoverPlaylist Twitch.Playlist
| HoverVideo Twitch.Video
| Unhover
| TimeReceived Time.Posix
| 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 )
init { width, height, darkMode, darkSetting } url key =
( Model
[]
Time.utc
(Home Nothing)
key
(Element.classifyDevice { width = width, height = height })
(Time.millisToPosix 0)
(Time.millisToPosix 0)
url
darkMode
darkSetting
, Cmd.batch
[ Task.attempt TimeZoneReceivedResult TimeZone.getZone
, Task.perform CurrentDateReceived Time.now
init : { width : Int, height : Int } -> Url.Url -> Nav.Key -> ( FullModel, Cmd Msg )
init { width, height } url key =
( Unloaded (Element.classifyDevice { width = width, height = height }) url key
, Twitch.fetchPlaylists resultToMsg
]
)
@ -83,117 +52,49 @@ resultToMsg : Result Http.Error (List Twitch.Playlist) -> Msg
resultToMsg result =
case result of
Ok o ->
PlaylistsReceived o
PlaylistsReceived ( o, Time.utc )
Err _ ->
Noop
subscriptions : Model -> Sub Msg
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
)
]
subscriptions : FullModel -> Sub Msg
subscriptions _ =
Events.onResize (\w h -> SizeReceived w h)
update : Msg -> Model -> ( Model, Cmd Msg )
update : Msg -> FullModel -> ( FullModel, Cmd Msg )
update msg model =
case msg of
Noop ->
case ( msg, model ) of
( Noop, _ ) ->
( model, Cmd.none )
TimeZoneReceived z ->
( { model | zone = z }, Cmd.none )
TimeZoneReceivedResult (Ok ( _, zone )) ->
( { model | zone = zone }, Cmd.none )
TimeZoneReceivedResult (Err _) ->
( model, Task.perform TimeZoneReceived Time.here )
TimeReceived p ->
( { model | time = p }, Cmd.none )
CurrentDateReceived d ->
( { model | currentDate = d }, Cmd.none )
HoverPlaylist hover ->
case model.page of
Home Nothing ->
( { model | page = Home (Just (Hover.hover hover model.time)) }, Cmd.none )
_ ->
( model, Cmd.none )
HoverVideo hover ->
case model.page of
Playlist p Nothing ->
( { model | page = Playlist p (Just (Hover.hover hover model.time)) }, Cmd.none )
Video p v x Nothing ->
( { model | page = Video p v x (Just (Hover.hover hover model.time)) }, Cmd.none )
_ ->
( model, Cmd.none )
Unhover ->
case model.page of
Home _ ->
( { model | page = Home Nothing }, Cmd.none )
Playlist p _ ->
( { model | page = Playlist p 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 } }
( SizeReceived w h, Loaded m ) ->
( Loaded { m | device = Element.classifyDevice { width = w, height = h } }
, Cmd.none
)
PlaylistsReceived playlists ->
( PlaylistsReceived ( playlists, zone ), Unloaded device url key ) ->
update
(UrlReceived model.url)
{ model | playlists = playlists, page = Home Nothing }
(UrlReceived url)
(Loaded { key = key, playlists = playlists, zone = zone, page = Home, device = device })
HomeClicked ->
( HomeClicked, Loaded m ) ->
( model
, Nav.pushUrl model.key "#"
, Nav.pushUrl m.key "#"
)
DarkModeClicked ->
let
next =
nextDarkSetting model.darkSetting
in
( { model | darkSetting = next }, Ports.setDarkMode next )
PlaylistClicked playlist ->
( PlaylistClicked playlist, Loaded m ) ->
( model
, Nav.pushUrl model.key ("#" ++ playlist.url)
, Nav.pushUrl m.key ("#" ++ playlist.url)
)
VideoClicked playlist video ->
( VideoClicked playlist video, Loaded m ) ->
( model
, Nav.pushUrl model.key ("#" ++ playlist.url ++ video.url)
, Nav.pushUrl m.key ("#" ++ playlist.url ++ video.url)
)
UrlReceived url ->
if List.isEmpty model.playlists then
( { model | url = url }, Cmd.none )
else
( UrlReceived url, Loaded m ) ->
let
splits =
String.split "?" (Maybe.withDefault "" url.fragment)
@ -210,11 +111,11 @@ update msg model =
( [], Dict.empty )
time =
case Dict.get "t" args of
Just "0" ->
case Maybe.map String.toInt (Dict.get "t" args) of
Just (Just 0) ->
Nothing
Just t ->
Just (Just t) ->
Just t
_ ->
@ -232,7 +133,7 @@ update msg model =
( Nothing, Nothing )
playlist =
List.head (List.filter (\x -> Just x.url == playlistName) model.playlists)
List.head (List.filter (\x -> Just x.url == playlistName) m.playlists)
video =
case playlist of
@ -245,56 +146,28 @@ update msg model =
( page, cmd ) =
case ( playlist, video ) of
( Just p, Just v ) ->
let
( el, videoCommand ) =
Video.fromConfig
{ url = "/videos/" ++ p.url ++ v.url ++ "/manifest.m3u8"
, id = "video"
, autoplay = True
, enableMiniatures = True
, startTime = time
, customElement = Nothing
, live = Just False
, miniaturesUrl = Nothing
, muted = False
}
in
( Video p v el Nothing, Cmd.map VideoMsg videoCommand )
( Video p v
, Ports.registerVideo ( Twitch.videoId v, "videos/" ++ p.url ++ v.url, time )
)
( Just p, Nothing ) ->
( Playlist p Nothing, Cmd.none )
( Playlist p, Cmd.none )
_ ->
( Home Nothing, Cmd.none )
in
( { model | page = page }, cmd )
( Home, Cmd.none )
UrlRequested u ->
case u of
Browser.Internal url ->
( model, Nav.pushUrl model.key (Url.toString url) )
Browser.External s ->
( model, Nav.load s )
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 )
extraCmd =
case page of
Video _ _ ->
Cmd.none
_ ->
( model.page, Cmd.none )
Ports.eraseVideo ()
in
( { model | page = newPage }, Cmd.map VideoMsg newCommand )
( Loaded { m | page = page }, Cmd.batch [ cmd, extraCmd ] )
_ ->
( model, Cmd.none )
splitter : String -> Maybe ( String, String )
@ -310,16 +183,3 @@ splitter input =
parseQueryString : String -> Dict String String
parseQueryString input =
Dict.fromList (List.filterMap splitter (String.split "&" input))
nextDarkSetting : Maybe Bool -> Maybe Bool
nextDarkSetting current =
case current of
Nothing ->
Just True
Just True ->
Just False
Just False ->
Nothing

14
src/Hover.elm
View File

@ -1,14 +0,0 @@
module Hover exposing (..)
import Time
type alias Hover a =
{ element : a
, time : Time.Posix
}
hover : a -> Time.Posix -> Hover a
hover element time =
{ element = element, time = time }

4
src/Main.elm
View File

@ -5,7 +5,7 @@ import Core
import Views
main : Program { width : Int, height : Int, darkMode : Bool, darkSetting : Maybe Bool } Core.Model Core.Msg
main : Program { width : Int, height : Int } Core.FullModel Core.Msg
main =
Browser.application
{ init = Core.init
@ -13,5 +13,5 @@ main =
, view = Views.view
, subscriptions = Core.subscriptions
, onUrlChange = Core.UrlReceived
, onUrlRequest = Core.UrlRequested
, onUrlRequest = \_ -> Core.Noop
}

6
src/Ports.elm
View File

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

78
src/Twitch.elm
View File

@ -3,14 +3,12 @@ module Twitch exposing
, Video
, decodePlaylists
, fetchPlaylists
, playlistDate
, playlistMiniatureUrl
, videoId
, videoMiniatureUrl
, videoName
)
import Hover exposing (Hover)
import Http
import Iso8601
import Json.Decode as Decode
@ -51,32 +49,7 @@ decodePlaylist =
decodePlaylists : Decode.Decoder (List Playlist)
decodePlaylists =
Decode.map (sortPlaylists >> List.reverse) (Decode.list decodePlaylist)
mostRecentVideo : List Video -> Maybe Time.Posix
mostRecentVideo videos =
case ( videos, List.map .date videos ) of
( _, (Just t) :: _ ) ->
Just t
( _ :: t, Nothing :: _ ) ->
mostRecentVideo t
_ ->
Nothing
playlistDate : Playlist -> Int
playlistDate playlist =
mostRecentVideo playlist.videos
|> Maybe.map Time.posixToMillis
|> Maybe.withDefault 0
sortPlaylists : List Playlist -> List Playlist
sortPlaylists list =
List.sortBy playlistDate list
Decode.map (List.sortBy .url >> List.reverse) (Decode.list decodePlaylist)
fetchPlaylists : (Result Http.Error (List Playlist) -> msg) -> Cmd msg
@ -97,22 +70,9 @@ videoId video =
String.dropLeft 1 video.url |> String.replace "/" "-"
playlistMiniatureUrl : Time.Posix -> Maybe (Hover Playlist) -> Playlist -> String
playlistMiniatureUrl currentTime hover playlist =
let
skip =
case hover of
Nothing ->
0
Just { element, time } ->
if element == playlist then
modBy (List.length playlist.videos) ((Time.posixToMillis currentTime - Time.posixToMillis time) // 1000)
else
0
in
case List.head (List.drop skip playlist.videos) of
playlistMiniatureUrl : Playlist -> String
playlistMiniatureUrl playlist =
case List.head (List.reverse playlist.videos) of
Just v ->
"videos/" ++ playlist.url ++ v.url ++ "miniature-050.png"
@ -120,30 +80,6 @@ playlistMiniatureUrl currentTime hover playlist =
""
videoMiniatureUrl : Time.Posix -> Maybe (Hover Video) -> Playlist -> Video -> String
videoMiniatureUrl currentTime hover playlist video =
let
index =
case hover of
Nothing ->
5
Just { element, time } ->
if element == video then
modBy 11 ((Time.posixToMillis currentTime - Time.posixToMillis time) // 1000)
else
5
indexString =
case index of
10 ->
"100"
0 ->
"000"
n ->
"0" ++ String.fromInt n ++ "0"
in
"videos/" ++ playlist.url ++ video.url ++ "miniature-" ++ indexString ++ ".png"
videoMiniatureUrl : Playlist -> Video -> String
videoMiniatureUrl playlist video =
"videos/" ++ playlist.url ++ video.url ++ "miniature-050.png"

12
src/Ui.elm
View File

@ -1,12 +0,0 @@
module Ui exposing (link)
import Element exposing (Element)
import Element.Input as Input
link : List (Element.Attribute msg) -> { label : Element msg, url : String } -> Element msg
link attr data =
Input.button attr
{ label = Element.link [ Element.width Element.fill, Element.height Element.fill ] data
, onPress = Nothing
}

309
src/Views.elm
View File

@ -7,128 +7,106 @@ import Core
import Element exposing (Element)
import Element.Background as Background
import Element.Border as Border
import Element.Events as Events
import Element.Font as Font
import Element.Input as Input
import Element.Keyed as Keyed
import Hover exposing (Hover)
import Html
import Html.Attributes
import Json.Encode as Encode
import Time
import TimeUtils
import Twitch
import Ui
import Video
import Video.Views
view : Core.Model -> Browser.Document Core.Msg
view : Core.FullModel -> Browser.Document Core.Msg
view model =
let
element =
case model.playlists of
[] ->
case model of
Core.Unloaded _ _ _ ->
Element.el [ Element.padding 10, Element.centerX ] spinner
_ ->
viewContent model
Core.Loaded m ->
viewContent m
in
{ title = title model
, body =
[ Element.layout
[ Font.color (Colors.font model.darkMode)
, Background.color (Colors.background model.darkMode)
[ Font.color Colors.blackFont
, Font.size Consts.normalFontSize
, Font.family [ Font.typeface "Cantarell" ]
]
(Element.column
[ Element.width Element.fill, Element.height Element.fill ]
[ topBar model.darkSetting, element ]
[ topBar, element ]
)
]
}
title : Core.Model -> String
title : Core.FullModel -> String
title model =
case model.page of
Core.Home _ ->
case model of
Core.Unloaded _ _ _ ->
Consts.url
Core.Playlist p _ ->
Core.Loaded m ->
case m.page of
Core.Home ->
Consts.url
Core.Playlist p ->
Consts.url ++ " - " ++ p.name
Core.Video p v _ _ ->
Core.Video p v ->
Consts.url ++ " - " ++ p.name ++ " - " ++ v.name
viewContent : Core.Model -> Element Core.Msg
viewContent model =
case model.page of
Core.Home hover ->
playlistsView model.device model.playlists model.currentDate model.time hover
Core.Home ->
playlistsView model.device model.playlists
Core.Playlist playlist hover ->
videoMiniaturesView model.darkMode model.device model.zone model.currentDate model.time hover playlist
Core.Playlist playlist ->
videoMiniaturesView model.device model.zone playlist
Core.Video playlist video v hover ->
videoView model.darkMode model.device model.zone model.currentDate model.time hover playlist video v
Core.Video playlist video ->
videoView model.device model.zone playlist video
topBar : Maybe Bool -> Element Core.Msg
topBar darkSetting =
topBar : Element Core.Msg
topBar =
Element.row
[ Element.width Element.fill
, Background.color Colors.primary
, Font.color Colors.white
, Font.size Consts.homeFontSize
]
[ homeButton, mode darkSetting ]
mode : Maybe Bool -> Element Core.Msg
mode current =
let
( label, icon ) =
case current of
Nothing ->
( "Par défaut", "🌓" )
Just True ->
( "Mode nuit", "🌑" )
Just False ->
( "Mode jour", "🌕" )
in
Input.button
[ Element.height Element.fill, Element.alignRight, Element.padding 10 ]
{ label =
Element.row [ Element.spacing 5 ]
[ Element.el [ Font.size Consts.titleFontSize ] (Element.text label)
, Element.el [ Font.size Consts.homeFontSize ] (Element.text icon)
]
, onPress = Just Core.DarkModeClicked
}
[ homeButton ]
homeButton : Element Core.Msg
homeButton =
Ui.link
[ Element.height Element.fill
Input.button
[ Element.padding Consts.homePadding
, Element.height Element.fill
, Element.mouseOver [ Background.color Colors.primaryOver ]
, Font.bold
]
{ label = Element.el [ Element.padding 10 ] (Element.text Consts.name)
, url = "/"
{ label = Element.text Consts.name
, onPress = Just Core.HomeClicked
}
playlistsView : Element.Device -> List Twitch.Playlist -> Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Playlist) -> Element Core.Msg
playlistsView device playlists currentDate time hover =
playlistsView : Element.Device -> List Twitch.Playlist -> Element Core.Msg
playlistsView device playlists =
let
empty =
Element.el [ Element.width Element.fill ] Element.none
views =
List.map (playlistView currentDate time hover) playlists
List.map playlistView playlists
grouped =
group (numberOfVideosPerRow device) views
@ -144,32 +122,19 @@ playlistsView device playlists currentDate time hover =
final
playlistView : Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Playlist) -> Twitch.Playlist -> Element Core.Msg
playlistView currentDate time hover playlist =
playlistView : Twitch.Playlist -> Element Core.Msg
playlistView playlist =
let
key =
Twitch.playlistMiniatureUrl time Nothing playlist
src =
Twitch.playlistMiniatureUrl time hover playlist
Twitch.playlistMiniatureUrl playlist
image =
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")
, Events.onMouseEnter (Core.HoverPlaylist playlist)
, Events.onMouseLeave Core.Unhover
]
( key
Keyed.el [ Element.width Element.fill, Element.height Element.fill ]
( src
, Element.image
[ Element.width Element.fill
, Element.htmlAttribute (Html.Attributes.style "position" "absolute")
, Element.htmlAttribute (Html.Attributes.style "top" "0")
, Element.htmlAttribute (Html.Attributes.style "height" "100%")
, Element.height Element.fill
, Element.inFront inFront
, Element.inFront new
]
{ description = "", src = src }
)
@ -201,13 +166,6 @@ playlistView currentDate time hover playlist =
, Element.padding 5
]
new =
if Time.posixToMillis currentDate - Twitch.playlistDate playlist > week then
Element.none
else
newBadge
display =
Element.column [ Element.width Element.fill, Element.spacing 10 ]
[ image
@ -218,25 +176,21 @@ playlistView currentDate time hover playlist =
button =
Input.button [ Element.width Element.fill, Element.alignTop ]
{ label =
Ui.link [ Element.width Element.fill, Element.alignTop ]
{ label = display
, url = "/#" ++ playlist.url
}
, onPress = Nothing
, onPress = Just (Core.PlaylistClicked playlist)
}
in
button
videoMiniaturesView : Bool -> Element.Device -> Time.Zone -> Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Element Core.Msg
videoMiniaturesView darkMode device zone currentDate time hover playlist =
videoMiniaturesView : Element.Device -> Time.Zone -> Twitch.Playlist -> Element Core.Msg
videoMiniaturesView device zone playlist =
let
empty =
Element.el [ Element.width Element.fill ] Element.none
views =
List.map (videoMiniatureView darkMode zone currentDate time hover playlist) playlist.videos
List.map (videoMiniatureView zone playlist) playlist.videos
grouped =
group (numberOfVideosPerRow device) views
@ -252,8 +206,8 @@ videoMiniaturesView darkMode device zone currentDate time hover playlist =
final
videoMiniature : Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
videoMiniature currentDate time hover playlist video =
videoMiniature : Twitch.Playlist -> Twitch.Video -> Element Core.Msg
videoMiniature playlist video =
let
inFront =
Element.text label
@ -269,39 +223,16 @@ videoMiniature currentDate time hover playlist video =
, Element.padding 5
]
date =
video.date
|> Maybe.map Time.posixToMillis
|> Maybe.withDefault 0
new =
if Time.posixToMillis currentDate - date > week then
Element.none
else
newBadge
key =
Twitch.videoMiniatureUrl time Nothing playlist video
src =
Twitch.videoMiniatureUrl time hover playlist video
Twitch.videoMiniatureUrl playlist video
image =
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")
]
( key
Keyed.el [ Element.width Element.fill, Element.height Element.fill ]
( src
, Element.image
[ Element.width Element.fill
, Element.htmlAttribute (Html.Attributes.style "position" "absolute")
, Element.htmlAttribute (Html.Attributes.style "top" "0")
, Element.htmlAttribute (Html.Attributes.style "height" "100%")
, Element.height Element.fill
, Element.inFront inFront
, Element.inFront new
]
{ description = "", src = src }
)
@ -312,63 +243,53 @@ videoMiniature currentDate time hover playlist video =
image
videoMiniatureView : Bool -> Time.Zone -> Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
videoMiniatureView darkMode zone currentDate time hover playlist video =
videoMiniatureView : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
videoMiniatureView zone playlist video =
let
display =
Element.column
[ Element.width Element.fill
, Element.spacing 10
, Events.onMouseEnter (Core.HoverVideo video)
, Events.onMouseLeave Core.Unhover
]
[ videoMiniature currentDate time hover playlist video
, videoDate darkMode zone video
Element.column [ Element.width Element.fill, Element.spacing 10 ]
[ videoMiniature playlist video
, videoDescription zone video
]
button =
Ui.link [ Element.width Element.fill, Element.alignTop ]
Input.button [ Element.width Element.fill, Element.alignTop ]
{ label = display
, url = "/#" ++ playlist.url ++ video.url
, onPress = Just (Core.VideoClicked playlist video)
}
in
button
videoInList : Bool -> Time.Zone -> Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Twitch.Video -> Twitch.Video -> Element Core.Msg
videoInList darkMode zone currentDate time hover playlist activeVideo video =
videoInList : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Twitch.Video -> Element Core.Msg
videoInList zone playlist activeVideo video =
let
label =
Element.row
[ Element.width Element.fill
, Element.spacing 10
, Events.onMouseEnter (Core.HoverVideo video)
, Events.onMouseLeave Core.Unhover
]
[ Element.el [ Element.width (Element.fillPortion 2) ]
(videoMiniature currentDate time hover playlist video)
, Element.el [ Element.width (Element.fillPortion 3), Element.paddingXY 0 10, Element.alignTop ]
(videoDate darkMode zone video)
]
in
( msg, attr ) =
if video == activeVideo then
Element.el
[ Element.width Element.fill
, Background.color (Colors.selected darkMode)
( Nothing
, [ Element.width Element.fill
, Background.color Colors.selected
, Border.color Colors.primary
, Border.width 2
]
label
)
else
Ui.link [ Element.width Element.fill ]
{ label = label
, url = "/#" ++ playlist.url ++ video.url
}
( Just (Core.VideoClicked playlist video), [ Element.width Element.fill ] )
label =
Element.row [ Element.width Element.fill, Element.spacing 10 ]
[ Element.el [ Element.width (Element.fillPortion 2) ]
(videoMiniature playlist video)
, Element.el [ Element.width (Element.fillPortion 3), Element.paddingXY 0 10, Element.alignTop ]
(videoDescription zone video)
]
in
Input.button attr { label = label, onPress = 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 v =
videoView : Element.Device -> Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
videoView device zone playlist video =
let
( builder, contentPadding ) =
case device.class of
@ -387,8 +308,31 @@ videoView darkMode device zone currentDate time hover playlist video v =
[ Element.width (Element.fillPortion 2)
, Element.spacing 10
, Element.alignTop
, Element.height Element.fill
]
[ Video.Views.embedElement v |> Element.map Core.VideoMsg
[ 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
]
[]
)
)
, Element.paragraph
[ Font.size Consts.homeFontSize
, Font.bold
@ -412,12 +356,12 @@ videoView darkMode device zone currentDate time hover playlist video v =
, Element.height Element.fill
, Element.scrollbarY
]
(List.map (videoInList darkMode zone currentDate time hover playlist video) playlist.videos)
(List.map (videoInList zone playlist video) playlist.videos)
]
videoDate : Bool -> Time.Zone -> Twitch.Video -> Element Core.Msg
videoDate darkMode zone video =
videoDescription : Time.Zone -> Twitch.Video -> Element Core.Msg
videoDescription zone video =
Element.column [ Element.spacing 10 ]
[ Element.paragraph
[ Font.bold
@ -427,7 +371,7 @@ videoDate darkMode zone video =
, case video.date of
Just date ->
Element.paragraph
[ Font.color (Colors.detailFont darkMode)
[ Font.color Colors.greyFont
]
[ Element.text ("Diffusé le " ++ formatDate zone date) ]
@ -562,26 +506,19 @@ groupAux size list acc =
spinner : Element Core.Msg
spinner =
Element.none
newBadge : Element Core.Msg
newBadge =
Element.text "NOUV."
|> Element.el
[ Background.color Colors.red
, Border.rounded 5
, Element.padding 5
, Font.color Colors.white
, Font.bold
Element.html
(Html.div [ Html.Attributes.class "lds-spinner" ]
[ Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
]
|> Element.el
[ Element.alignBottom
, Element.alignLeft
, Element.padding 5
]
week : Int
week =
1000 * 60 * 60 * 24 * 7
)