Add video and file support.
This commit is contained in:
parent
525a6dd878
commit
12e5fdfbf1
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user