Matrix-Programs/Scylla
1
0
Fork 0
Code Issues 9 Pull Requests Releases Wiki Activity

Add video and file support.

Browse Source
This commit is contained in:
Danila Fedorin 2018-12-23 20:26:35 -08:00
parent 525a6dd878
commit 12e5fdfbf1
2 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/Scylla/Views.elm
View File

@ -12,8 +12,8 @@ import Svg
import Svg.Attributes import Svg.Attributes
import Url.Builder import Url.Builder
import Json.Decode as Decode 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 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) import Html.Attributes exposing (type_, value, href, class, style, src, id, rows, controls, src)
import Html.Events exposing (onInput, onClick, preventDefaultOn) import Html.Events exposing (onInput, onClick, preventDefaultOn)
import Dict import Dict
@ -194,6 +194,8 @@ messageView m re =
case msgtype of case msgtype of
Ok "m.text" -> messageTextView m re Ok "m.text" -> messageTextView m re
Ok "m.image" -> messageImageView m re Ok "m.image" -> messageImageView m re
Ok "m.file" -> messageFileView m re
Ok "m.video" -> messageVideoView m re
_ -> Nothing _ -> Nothing
messageTextView : Model -> RoomEvent -> Maybe (Html Msg) messageTextView : Model -> RoomEvent -> Maybe (Html Msg)
@ -218,3 +220,25 @@ messageImageView m re =
Maybe.map (\s -> img [ class "message-image", src s ] []) Maybe.map (\s -> img [ class "message-image", src s ] [])
<| Maybe.map (contentRepositoryDownloadUrl m.apiUrl) <| Maybe.map (contentRepositoryDownloadUrl m.apiUrl)
<| Result.toMaybe body <| 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

16
static/scss/style.scss
View File

@ -72,6 +72,17 @@ h2 {
margin-bottom: 3px; margin-bottom: 3px;
} }
a.file-wrapper {
display: flex;
align-items: center;
.feather-icon {
height: 30px;
width: 30px;
margin-right: 10px;
}
}
div.errors-wrapper { div.errors-wrapper {
position: fixed; position: fixed;
pointer-events: none; pointer-events: none;
@ -210,6 +221,11 @@ table.events-table {
max-height: 400px; max-height: 400px;
} }
video {
max-width: 90%;
max-height: 400px;
}
td:nth-child(1) { td:nth-child(1) {
width: 10%; width: 10%;
max-width: 100px; max-width: 100px;