From 12e5fdfbf1df367ab50f810f374a36970f151c30 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Sun, 23 Dec 2018 20:26:35 -0800
Subject: [PATCH] Add video and file support.

---
 src/Scylla/Views.elm   | 28 ++++++++++++++++++++++++++--
 static/scss/style.scss | 16 ++++++++++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/Scylla/Views.elm b/src/Scylla/Views.elm
index 0e62ec7..fa14cbe 100644
--- a/src/Scylla/Views.elm
+++ b/src/Scylla/Views.elm
@@ -12,8 +12,8 @@ import Svg
 import Svg.Attributes
 import Url.Builder
 import Json.Decode as Decode
-import Html exposing (Html, Attribute, div, input, text, button, div, span, a, h2, table, td, tr, img, textarea)
-import Html.Attributes exposing (type_, value, href, class, style, src, id, rows)
+import Html exposing (Html, Attribute, div, input, text, button, div, span, a, h2, table, td, tr, img, textarea, video, source)
+import Html.Attributes exposing (type_, value, href, class, style, src, id, rows, controls, src)
 import Html.Events exposing (onInput, onClick, preventDefaultOn)
 import Dict
 
@@ -194,6 +194,8 @@ messageView m re =
         case msgtype of
             Ok "m.text" -> messageTextView m re
             Ok "m.image" -> messageImageView m re
+            Ok "m.file" -> messageFileView m re
+            Ok "m.video" -> messageVideoView m re
             _ -> Nothing
 
 messageTextView : Model -> RoomEvent -> Maybe (Html Msg)
@@ -218,3 +220,25 @@ messageImageView m re =
         Maybe.map (\s -> img [ class "message-image", src s ] [])
             <| Maybe.map (contentRepositoryDownloadUrl m.apiUrl)
             <| Result.toMaybe body
+
+messageFileView : Model -> RoomEvent -> Maybe (Html Msg)
+messageFileView m re =
+    let
+        decoder = Decode.map2 (\l r -> (l, r)) (Decode.field "url" Decode.string) (Decode.field "body" Decode.string)
+        fileData = Decode.decodeValue decoder re.content
+    in
+        Maybe.map (\(url, name) -> a [ href url, class "file-wrapper" ] [ iconView "file", text name ])
+        <| Maybe.map (\(url, name) -> (contentRepositoryDownloadUrl m.apiUrl url, name))
+        <| Result.toMaybe fileData
+
+messageVideoView : Model -> RoomEvent -> Maybe (Html Msg)
+messageVideoView m re =
+    let
+        decoder = Decode.map2 (\l r -> (l, r))
+            (Decode.field "url" Decode.string)
+            (Decode.field "info" <| Decode.field "mimetype" Decode.string)
+        videoData = Decode.decodeValue decoder re.content
+    in
+        Maybe.map (\(url, t) -> video [ controls True ] [ source [ src url, type_ t ] [] ])
+        <| Maybe.map (\(url, type_) -> (contentRepositoryDownloadUrl m.apiUrl url, type_))
+        <| Result.toMaybe videoData
diff --git a/static/scss/style.scss b/static/scss/style.scss
index 471ce39..c73de69 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -72,6 +72,17 @@ h2 {
     margin-bottom: 3px;
 }
 
+a.file-wrapper {
+    display: flex;
+    align-items: center;
+
+    .feather-icon {
+        height: 30px;
+        width: 30px;
+        margin-right: 10px;
+    }
+}
+
 div.errors-wrapper {
     position: fixed;
     pointer-events: none;
@@ -210,6 +221,11 @@ table.events-table {
         max-height: 400px;
     }
 
+    video {
+        max-width: 90%;
+        max-height: 400px;
+    }
+
     td:nth-child(1) {
         width: 10%;
         max-width: 100px;