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

svg icons

This commit is contained in:
Thomas Forgione 2021-06-09 16:30:21 +02:00
parent 1ac7a45ddd
commit e2df6c1881
4 changed files with 82 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
elm.json
View File

@ -11,6 +11,7 @@
"elm/core": "1.0.5", "elm/core": "1.0.5",
"elm/html": "1.0.0", "elm/html": "1.0.0",
"elm/json": "1.1.3", "elm/json": "1.1.3",
"elm/svg": "1.0.1",
"mdgriffith/elm-ui": "1.1.8" "mdgriffith/elm-ui": "1.1.8"
}, },
"indirect": { "indirect": {

5
index.html
View File

@ -4,6 +4,11 @@
<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">
<style>
.filled {
fill: currentColor;
}
</style>
</head> </head>
<body> <body>
<div id="container"></div> <div id="container"></div>

71
src/Icons.elm Normal file
View File

@ -0,0 +1,71 @@
module Icons exposing
( maximize
, minimize
, pause
, play
, playCircle
)
import Element exposing (Element)
import Html exposing (Html)
import Svg exposing (Svg, svg)
import Svg.Attributes exposing (..)
svgFeatherIcon : String -> List (Svg msg) -> Bool -> Element msg
svgFeatherIcon className lines f =
Element.html
(svg
[ if f then
class <| "filled feather feather-" ++ className
else
class <| "feather feather-" ++ className
, fill "none"
, height "24"
, stroke "currentColor"
, strokeLinecap "round"
, strokeLinejoin "round"
, strokeWidth "2"
, viewBox "0 0 24 24"
, width "24"
]
lines
)
maximize : Bool -> Element msg
maximize =
svgFeatherIcon "maximize"
[ Svg.path [ d "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" ] []
]
minimize : Bool -> Element msg
minimize =
svgFeatherIcon "minimize"
[ Svg.path [ d "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" ] []
]
pause : Bool -> Element msg
pause =
svgFeatherIcon "pause"
[ Svg.rect [ Svg.Attributes.x "6", y "4", width "4", height "16" ] []
, Svg.rect [ Svg.Attributes.x "14", y "4", width "4", height "16" ] []
]
play : Bool -> Element msg
play =
svgFeatherIcon "play"
[ Svg.polygon [ points "5 3 19 12 5 21 5 3" ] []
]
playCircle : Bool -> Element msg
playCircle =
svgFeatherIcon "play-circle"
[ Svg.circle [ cx "12", cy "12", r "10" ] []
, Svg.polygon [ points "10 8 16 12 10 16 10 8" ] []
]

9
src/Main.elm
View File

@ -10,6 +10,7 @@ import Element.Input as Input
import Html import Html
import Html.Attributes import Html.Attributes
import Html.Events import Html.Events
import Icons
import Json.Decode as Decode import Json.Decode as Decode
@ -179,7 +180,7 @@ video model =
, Element.row , Element.row
[ Element.spacing 10 ] [ Element.spacing 10 ]
[ playPauseButton model.playing [ playPauseButton model.playing
, Element.text (formatTime model.position ++ " / " ++ formatTime model.duration) , Element.el [ Element.moveDown 2.5 ] (Element.text (formatTime model.position ++ " / " ++ formatTime model.duration))
] ]
] ]
in in
@ -192,13 +193,13 @@ playPauseButton playing =
let let
icon = icon =
if playing then if playing then
"⏸" Icons.pause True
else else
"▶" Icons.play True
in in
Input.button [] Input.button []
{ label = Element.text icon { label = icon
, onPress = Just PlayPause , onPress = Just PlayPause
} }