diff --git a/elm.json b/elm.json
index 90af5ca..63a45bb 100644
--- a/elm.json
+++ b/elm.json
@@ -11,6 +11,7 @@
"elm/core": "1.0.5",
"elm/html": "1.0.0",
"elm/json": "1.1.3",
+ "elm/svg": "1.0.1",
"mdgriffith/elm-ui": "1.1.8"
},
"indirect": {
diff --git a/index.html b/index.html
index 2fdeef4..1c9553d 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,11 @@
twitch.tforgione.fr
+
diff --git a/src/Icons.elm b/src/Icons.elm
new file mode 100644
index 0000000..c54ad1e
--- /dev/null
+++ b/src/Icons.elm
@@ -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" ] []
+ ]
diff --git a/src/Main.elm b/src/Main.elm
index 23fe26e..e0cb5b8 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -10,6 +10,7 @@ import Element.Input as Input
import Html
import Html.Attributes
import Html.Events
+import Icons
import Json.Decode as Decode
@@ -179,7 +180,7 @@ video model =
, Element.row
[ Element.spacing 10 ]
[ 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
@@ -192,13 +193,13 @@ playPauseButton playing =
let
icon =
if playing then
- "⏸"
+ Icons.pause True
else
- "▶"
+ Icons.play True
in
Input.button []
- { label = Element.text icon
+ { label = icon
, onPress = Just PlayPause
}