Add: Format Selection

Modules/Website/db.yml

@@ -0,0 +1,19 @@
+
+
+Task:
+    id: integer
+    timestamp: ts
+    hash: string
+    url: string
+    audio_only: bool
+    status: int
+    format: optional string
+
+
+File:
+    id: integer
+    hash: String
+    timestamp: ts
+    format: String
+    filename: String
+    local_path: String

Modules/Website/src/Color.elm

@@ -3,26 +3,13 @@ module Color exposing (..)
 import Element
 
 
-white : Element.Color
+color =
-white =
+    { blue = Element.rgb255 0x72 0x9F 0xCF
-    Element.rgb 1 1 1
+    , darkCharcoal = Element.rgb255 0x2E 0x34 0x36
-
+    , lightBlue = Element.rgb255 0xC5 0xE8 0xF7
-
+    , darkBlue = Element.rgb 0 0 0.9
-grey : Element.Color
+    , lightGrey = Element.rgb255 0xE0 0xE0 0xE0
-grey =
+    , white = Element.rgb255 0xFF 0xFF 0xFF
-    Element.rgb 0.9 0.9 0.9
+    , grey = Element.rgb 0.9 0.9 0.9
-
+    , red = Element.rgb 0.8 0 0
-
+    }
-blue : Element.Color
-blue =
-    Element.rgb 0 0 0.8
-
-
-red : Element.Color
-red =
-    Element.rgb 0.8 0 0
-
-
-darkBlue : Element.Color
-darkBlue =
-    Element.rgb 0 0 0.9

Modules/Website/src/Files.elm

@@ -1,5 +1,6 @@
 module Files exposing (..)
 
+import Debug exposing (toString)
 import Element exposing (..)
 import Element.Background as Background
 import Element.Border as Border
@@ -10,7 +11,6 @@ import Http
 import Json.Decode exposing (Decoder, int, list, string, succeed)
 import Json.Decode.Pipeline exposing (required)
 import String exposing (left)
-import Debug exposing (toString)
 
 
 type alias File =
@@ -109,13 +109,23 @@ queryFiles =
 -- View --
 
 
-shadow : Attr decorative msg
+cardShadow : Attr decorative msg
-shadow =
+cardShadow =
     Border.shadow
-        { offset = ( 2, 2 )
+        { offset = ( 0, 4 )
-        , size = 2
+        , size = 4
-        , blur = 2
+        , blur = 8
-        , color = rgb 0.5 0.5 0.5
+        , color = rgba 0 0 0 0.2
+        }
+
+
+cardShadowOver : Attr decorative msg
+cardShadowOver =
+    Border.shadow
+        { offset = ( 0, 4 )
+        , size = 8
+        , blur = 16
+        , color = rgba 0 0 0 0.2
         }
 
 
@@ -123,11 +133,13 @@ viewFile : File -> Element Msg
 viewFile file =
     el
         [ width fill
-        , Background.color (rgb 0.8 0.8 0.8)
+
+        --        , Background.color (rgb 0.8 0.8 0.8)
         , padding 10
         , Border.rounded 3
-        , shadow
+        , cardShadow
         , height (px 110)
+        , mouseOver [ cardShadowOver ]
         ]
         (Element.column
             [ width fill
@@ -154,12 +166,12 @@ viewFile file =
                 , Font.size 16
                 , spacingXY 0 10
                 ]
-                (text (String.concat ["File name: ", file.file_name]))
+                (text (String.concat [ "File name: ", file.file_name ]))
-            ,el
+            , el
                 [ Region.heading 2
                 , Font.size 16
                 ]
-                (text (String.concat ["Source: ", file.source]))
+                (text (String.concat [ "Source: ", file.source ]))
             , download
                 [ Region.footer
                 , Font.color (rgb 0 0 0.8)
@@ -167,7 +179,7 @@ viewFile file =
                 , alignBottom
                 , alignRight
                 ]
-                { url = String.concat ["http://127.0.0.1/api/file/", toString file.id ]
+                { url = String.concat [ "http://127.0.0.1/api/file/", toString file.id ]
                 , label = text "Download"
                 }
             ]
@@ -181,7 +193,7 @@ view model =
         , height shrink
         , centerX
         , spacing 36
-        , padding 10
+        , padding 20
         ]
         [ el
             [ Region.heading 1
@@ -202,7 +214,7 @@ view model =
                 Element.column
                     [ width fill
                     , centerX
-                    , spacing 10
+                    , spacing 20
                     ]
                     (List.map viewFile model.files)
         ]

Modules/Website/src/MainPage.elm

@@ -11,11 +11,15 @@ import Http
 import Json.Decode exposing (Decoder, int, string, succeed)
 import Json.Decode.Pipeline exposing (required)
 import Json.Encode as Encode
+import List exposing (map3)
+import Tuple exposing (mapBoth)
+import Html exposing (form)
 
 
 type alias Form =
     { url : String
-    , test : Bool
+    , audio_only : Bool
+    , format : Format
     }
 
 
@@ -28,18 +32,62 @@ initModel : Model
 initModel =
     { form =
         { url = ""
-        , test = True
+        , audio_only = False
+        , format = Auto
         }
     }
 
 
 type Msg
     = UpdateForm Form
+    | UpdateFormAudioOnlyChanged Bool
+    | UpdateFormFormatChnaged Format
     | PostForm Form
     | PostResult (Result Http.Error PostFormResponse)
     | None
 
 
+type AudioFormats
+    = MP3
+    | OPUS
+    | AAC
+    | WAV
+
+audioFormatName : AudioFormats -> String
+audioFormatName format =
+    case format of
+        MP3 -> "mp3"
+        OPUS -> "opus"
+        AAC -> "aac"
+        WAV -> "wav"
+
+
+type VideoFormats
+    = FLV
+    | MP4
+    | OGG
+    | WEBM
+
+videoFormatName : VideoFormats -> String
+videoFormatName format =
+    case format of
+        FLV -> "flv"
+        MP4 -> "mp4"
+        OGG -> "ogg"
+        WEBM -> "wav"
+
+type Format
+    = Auto
+    | AudioFormat AudioFormats
+    | VideoFormat VideoFormats
+
+formatName : Format -> String
+formatName format =
+    case format of
+        Auto -> "Auto"
+        AudioFormat audio -> audioFormatName audio
+        VideoFormat video -> videoFormatName video
+
 
 -- -- Request -- --
 
@@ -57,8 +105,18 @@ formDecoder =
 
 formPostEncoder : Form -> Encode.Value
 formPostEncoder form =
-    Encode.object
+    Encode.object <|
-        [ ( "url", Encode.string form.url )
+        List.concat
+            [ [ ( "url", Encode.string form.url ) ]
+            , if form.audio_only then
+                [ ( "audio_only", Encode.bool form.audio_only ) ]
+
+              else
+                []
+            , if form.format == Auto then
+                []
+            else
+                [( "format", Encode.string <| formatName form.format )]
             ]
 
 
@@ -72,6 +130,26 @@ update msg model =
         UpdateForm new_form ->
             ( { model | form = new_form }, Cmd.none )
 
+        UpdateFormAudioOnlyChanged _ ->
+            let
+                form =
+                    model.form
+
+                new_form =
+                    { form | audio_only = not form.audio_only, format = Auto }
+            in
+            ( { model | form = new_form }, Cmd.none )
+
+        UpdateFormFormatChnaged format ->
+            let
+                form =
+                    model.form
+
+                new_form =
+                    { form | format = format }
+            in
+            ( { model | form = new_form }, Cmd.none )
+
         PostForm form ->
             ( model
             , Http.post
@@ -98,6 +176,99 @@ updateUrl form new_url =
 -- -- view -- --
 
 
+audioOnlyCheckbox : Bool -> Element msg
+audioOnlyCheckbox isChecked =
+    let
+        knob =
+            el
+                [ width <| px 36
+                , height <| px 36
+                , Border.rounded 6
+                , Border.width 2
+                , Border.color color.blue
+                , Background.color color.white
+                ]
+                none
+    in
+    el
+        [ width <| px 120
+        , height <| px 48
+        , centerY
+        , padding 4
+        , Border.rounded 6
+        , Border.width 2
+        , Border.color color.blue
+        , Background.color <|
+            if isChecked then
+                color.lightBlue
+
+            else
+                color.white
+        ]
+    <|
+        row [ width fill ] <|
+            if isChecked then
+                [ el [ centerX ] <| text "Audio", knob ]
+
+            else
+                [ knob, el [ centerX ] <| text "Video" ]
+
+
+type ButtonPosition
+    = First
+    | Mid
+    | Last
+
+
+
+--formatButton : ButtonPosition -> String -> OptionState -> Element Msg
+
+
+formatButton : ButtonPosition -> String -> Input.OptionState -> Element msg
+formatButton position label state =
+    let
+        borders =
+            case position of
+                First ->
+                    { left = 2, right = 2, top = 2, bottom = 2 }
+
+                Mid ->
+                    { left = 0, right = 2, top = 2, bottom = 2 }
+
+                Last ->
+                    { left = 0, right = 2, top = 2, bottom = 2 }
+
+        corners =
+            case position of
+                First ->
+                    { topLeft = 6, bottomLeft = 6, topRight = 0, bottomRight = 0 }
+
+                Mid ->
+                    { topLeft = 0, bottomLeft = 0, topRight = 0, bottomRight = 0 }
+
+                Last ->
+                    { topLeft = 0, bottomLeft = 0, topRight = 6, bottomRight = 6 }
+    in
+    el
+        [ paddingEach { left = 20, right = 20, top = 10, bottom = 10 }
+        , Border.roundEach corners
+        , Border.widthEach borders
+        , Border.color color.blue
+        , Background.color <|
+            if state == Input.Selected then
+                color.lightBlue
+
+            else
+                color.white
+        ]
+    <|
+        el [ centerX, centerY ] <|
+            text label
+
+
+formatOption format position =
+    Input.optionWith format <| formatButton position <| formatName format
+
 view : Model -> Element Msg
 view model =
     Element.column
@@ -118,7 +289,7 @@ view model =
             [ spacing 12
             , below
                 (el
-                    [ Font.color red
+                    [ Font.color color.red
                     , Font.size 14
                     , alignRight
                     , moveDown 6
@@ -131,21 +302,52 @@ view model =
             , onChange = \new -> updateUrl model.form new |> UpdateForm
             , label = Input.labelAbove [ Font.size 14 ] (text "Video Url")
             }
+        , Element.row
+            [ spacing 10 ]
+            [ Input.checkbox [ width shrink, Font.size 20 ]
+                { onChange = UpdateFormAudioOnlyChanged
+                , icon = audioOnlyCheckbox
+                , checked = model.form.audio_only
+                , label =
+                    Input.labelHidden <|
+                        if model.form.audio_only then
+                            "Audo"
+
+                        else
+                            "Video"
+                }
+            , Input.radioRow
+                [ Border.rounded 6 ]
+                { onChange = UpdateFormFormatChnaged
+                , selected = Just model.form.format
+                , label = Input.labelLeft [ paddingEach { bottom = 0, top = 0, left = 15, right = 20 } ] <| text "Format:"
+                , options =
+                    List.concat
+                        [ [ Input.optionWith Auto <| formatButton First "Auto" ]
+                        , if model.form.audio_only then
+                            [ formatOption (AudioFormat MP3) Mid 
+                            , formatOption (AudioFormat OPUS) Mid 
+                            , formatOption (AudioFormat AAC) Mid 
+                            , formatOption (AudioFormat WAV) Last 
+                            ]
+
+                          else
+                            [ formatOption (VideoFormat FLV) Mid 
+                            , formatOption (VideoFormat MP4) Mid 
+                            , formatOption (VideoFormat OGG) Mid 
+                            , formatOption (VideoFormat WEBM)Last 
+                            ]
+                        ]
+                }
+            ]
         , Input.button
-            [ Background.color blue
+            [ Background.color color.blue
-            , Font.color white
+            , Font.color color.white
-            , Border.color darkBlue
+            , Border.color color.darkBlue
             , paddingXY 32 16
             , Border.rounded 3
             ]
             { onPress = Just (PostForm model.form)
             , label = Element.text "Download"
             }
-        , Input.checkbox
-            []
-            { checked = model.form.test
-            , icon = Input.defaultCheckbox
-            , label = Input.labelRight [] (text "Test")
-            , onChange = \_ -> None
-            }
         ]