Add sound settings tab

Author: HadrienMP

public/images/commune.jpg

@@ -44,6 +44,10 @@
                     .writeText(command.value)
                     .finally(() => app.ports.events.send({name: 'Copied', value: ""}))
                 break;
+            case 'ChangeVolume':
+                // window.localStorage.setItem("preferences", JSON.stringify({volume: parseInt(command.value)}));
+                alarm.volume = parseInt(command.value) / 100.0;
+                break;
         }
     });
     alarm.addEventListener("ended", () => {

public/images/img.png

@@ -12,6 +12,7 @@ type Command
     | SetAlarm Sound.Library.Sound
     | StopAlarm
     | CopyInPasteBin String
+    | ChangeVolume Int
 
 
 type alias OutCommand =
@@ -35,3 +36,6 @@ send command =
 
             StopAlarm ->
                 OutCommand "StopAlarm" Json.Encode.null
+
+            ChangeVolume volume ->
+                OutCommand "ChangeVolume" <| Json.Encode.string <| String.fromInt volume

public/images/weird.jpeg

@@ -9,6 +9,14 @@ import Lib.Icons.Rgba exposing (RGBA)
 import Svg exposing (Svg)
 
 
+volumeLow : Svg msg
+volumeLow =
+    display Ionicon.volumeLow
+
+volumeHigh : Svg msg
+volumeHigh =
+    display Ionicon.volumeHigh
+
 github : Svg msg
 github =
     display Ionicon.Social.github

public/index.html

@@ -25,6 +25,7 @@ import Random
 import Shared
 import SharedEvents
 import Sound.Library
+import Sound.Settings
 import Svg exposing (Svg, svg)
 import Svg.Attributes as Svg
 import Task
@@ -78,6 +79,7 @@ type alias Model =
     , shared : Shared.State
     , mobbersSettings : Mobbers.Settings.Model
     , clockSettings : Clock.Settings.Model
+    , soundSettings : Sound.Settings.Model
     , alarm : AlarmState
     , now : Time.Posix
     , toasts : Toasts
@@ -92,6 +94,7 @@ init _ url key =
       , shared = Shared.init
       , mobbersSettings = Mobbers.Settings.init
       , clockSettings = Clock.Settings.init
+      , soundSettings = Sound.Settings.init 50
       , alarm = Standby
       , now = Time.millisToPosix 0
       , toasts = []
@@ -121,6 +124,7 @@ type Msg
     | GotClockSettingsMsg Clock.Settings.Msg
     | GotShareTabMsg Mob.Tabs.Share.Msg
     | GotMobbersSettingsMsg Mobbers.Settings.Msg
+    | GotSoundSettingsMsg Sound.Settings.Msg
     | GotToastMsg Lib.Toaster.Msg
     | SwitchTab Tab
     | Batch (List Msg)
@@ -180,7 +184,7 @@ update msg model =
             )
 
         Start ->
-            ( model, Random.generate StartWithAlarm <| Sound.Library.pick Sound.Library.ClassicWeird )
+            ( model, Random.generate StartWithAlarm <| Sound.Library.pick model.soundSettings.profile )
 
         StartWithAlarm sound ->
             ( model
@@ -243,6 +247,13 @@ update msg model =
                     (\a -> { model | clockSettings = a })
                     (Cmd.map GotClockSettingsMsg)
 
+        GotSoundSettingsMsg subMsg->
+            Sound.Settings.update subMsg model.soundSettings
+                |> Tuple.mapBoth
+                    (\a -> { model | soundSettings = a })
+                    (Cmd.map GotSoundSettingsMsg)
+
+
 
 
 -- SUBSCRIPTIONS
@@ -340,7 +351,8 @@ view model =
                         |> Html.map GotMobbersSettingsMsg
 
                 Sound ->
-                    div [] []
+                    Sound.Settings.view model.soundSettings
+                        |> Html.map GotSoundSettingsMsg
 
                 Share ->
                     Mob.Tabs.Share.view "Awesome" model.url

src/elm/Js/Commands.elm

@@ -0,0 +1,87 @@
+module Sound.Settings exposing (..)
+
+import Html exposing (Html, button, div, i, img, input, label, p, text)
+import Html.Attributes exposing (alt, class, classList, for, id, src, step, type_, value)
+import Html.Events exposing (onClick, onInput)
+import Js.Commands
+import Json.Encode
+import Lib.Icons.Ion
+import Sound.Library as SoundLibrary
+
+type alias CommandPort = (Json.Encode.Value -> Cmd Msg)
+type alias StorePort = (Json.Encode.Value -> Cmd Msg)
+
+type alias Model =
+    { profile : SoundLibrary.Profile
+    , volume : Int
+    }
+
+
+init : Int -> Model
+init volume =
+    { profile = SoundLibrary.ClassicWeird
+    , volume = volume
+    }
+
+
+type Msg
+    = VolumeChanged String
+    | SelectedSoundProfile SoundLibrary.Profile
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        VolumeChanged rawVolume ->
+            let
+                volume = String.toInt rawVolume|> Maybe.withDefault model.volume
+            in
+            ( { model | volume = volume }
+            , Js.Commands.send <| Js.Commands.ChangeVolume volume
+            )
+
+        SelectedSoundProfile profile ->
+            ( { model | profile = profile }
+            , Cmd.none
+            )
+
+
+view : Model -> Html Msg
+view model =
+    div [ id "sound", class "tab" ]
+        [ div
+            [ id "volume-field", class "form-field" ]
+            [ label [ for "volume" ] [ text "Volume" ]
+            , Lib.Icons.Ion.volumeLow
+            , input
+                [ id "volume"
+                , type_ "range"
+                , onInput VolumeChanged
+                , step "10"
+                , value <| String.fromInt model.volume
+                ]
+                []
+            , Lib.Icons.Ion.volumeHigh
+            ]
+        , div
+            [ id "sounds-field", class "form-field" ]
+            [ label [] [ text "Profiles" ]
+            , div
+                [ id "sound-cards" ]
+                [ button
+                    [ classList [ ( "active", model.profile == SoundLibrary.ClassicWeird ) ]
+                    , onClick <| SelectedSoundProfile SoundLibrary.ClassicWeird
+                    ]
+                    [ img [ src "/images/weird.jpeg", alt "Man wearing a watermelon as a hat" ] []
+                    , p [] [ text "Classic Weird" ]
+                    ]
+                , button
+                    [ classList [ ( "active", model.profile == SoundLibrary.Riot ) ]
+                    , onClick <| SelectedSoundProfile SoundLibrary.Riot
+                    ]
+                    [ img [ src "/images/commune.jpg", alt "Comic book drawing of the paris commune revolution" ] []
+                    , p [] [ text "Revolution" ]
+                    ]
+                ]
+            ]
+        ]

src/elm/Lib/Icons/Ion.elm

@@ -32,26 +32,31 @@ input[type="range"] {
   #sound-cards {
     display: flex;
     align-items: start;
+    padding: $margin-space 0;
 
     button {
       flex: 1 0;
       width: 130px;
       background: none;
       text-align: center;
-      padding: 20px;
+      padding: 0;
       color: black;
       vertical-align: top;
+      display: block;
+      margin-left: $margin-space;
 
-      i {
-        font-size: 2em;
-        padding: 30px;
-        background: $dark-button-color;
-        color: white;
+      &:first-child {
+        margin-left: 0;
       }
 
-      &.active {
-        i {
-          background: $light-button-color;
+      img {
+        width: 100%;
+        opacity: .6;
+      }
+
+      &.active, &:hover {
+        img {
+          opacity: 1;
         }
       }
     }