Render image messages.

src/Scylla/Http.elm

@@ -7,15 +7,18 @@ import Scylla.UserData exposing (userDataDecoder, UserData)
 import Json.Encode exposing (object, string, int)
 import Http exposing (request, emptyBody, jsonBody, expectJson, expectWhatever)
 
-fullUrl : ApiUrl -> ApiUrl
+fullClientUrl : ApiUrl -> ApiUrl
-fullUrl s = s ++ "/_matrix/client/r0"
+fullClientUrl s = s ++ "/_matrix/client/r0"
+
+fullMediaUrl : ApiUrl -> ApiUrl
+fullMediaUrl s = s ++ "/_matrix/media/r0"
 
 -- Http Requests
 firstSync : ApiUrl -> ApiToken -> Cmd Msg
 firstSync apiUrl token = request
     { method = "GET"
     , headers = authenticatedHeaders token
-    , url = (fullUrl apiUrl) ++ "/sync"
+    , url = (fullClientUrl apiUrl) ++ "/sync"
     , body = emptyBody
     , expect = expectJson ReceiveFirstSyncResponse syncResponseDecoder
     , timeout = Nothing
@@ -26,7 +29,7 @@ sync : String -> ApiUrl -> ApiToken -> Cmd Msg
 sync nextBatch apiUrl token = request
     { method = "GET"
     , headers = authenticatedHeaders token
-    , url = (fullUrl apiUrl) ++ "/sync" ++ "?since=" ++ (nextBatch) ++ "&timeout=10000"
+    , url = (fullClientUrl apiUrl) ++ "/sync" ++ "?since=" ++ (nextBatch) ++ "&timeout=10000"
     , body = emptyBody
     , expect = expectJson ReceiveSyncResponse syncResponseDecoder
     , timeout = Nothing
@@ -37,7 +40,7 @@ sendTextMessage : ApiUrl -> ApiToken -> Int -> String -> String -> Cmd Msg
 sendTextMessage apiUrl token transactionId room message = request
     { method = "PUT"
     , headers = authenticatedHeaders token
-    , url = (fullUrl apiUrl)
+    , url = (fullClientUrl apiUrl)
         ++ "/rooms/" ++ room
         ++ "/send/" ++ "m.room.message"
         ++ "/" ++ (String.fromInt transactionId)
@@ -54,7 +57,7 @@ login : ApiUrl -> Username -> Password -> Cmd Msg
 login apiUrl username password = request
     { method = "POST"
     , headers = basicHeaders
-    , url = (fullUrl apiUrl) ++ "/login"
+    , url = (fullClientUrl apiUrl) ++ "/login"
     , body = jsonBody <| object
         [ ("type", string "m.login.password")
         , ("identifier", object
@@ -72,7 +75,7 @@ userData : ApiUrl -> ApiToken -> Username -> Cmd Msg
 userData apiUrl token username = request
     { method = "GET"
     , headers = authenticatedHeaders token
-    , url = (fullUrl apiUrl) ++ "/profile/" ++ username
+    , url = (fullClientUrl apiUrl) ++ "/profile/" ++ username
     , body = emptyBody
     , expect = expectJson (ReceiveUserData username) userDataDecoder
     , timeout = Nothing

src/Scylla/Views.elm

@@ -4,15 +4,27 @@ import Scylla.Sync exposing (..)
 import Scylla.Route exposing (..)
 import Scylla.Fnv as Fnv
 import Scylla.Login exposing (Username)
+import Scylla.Http exposing (fullMediaUrl)
+import Scylla.Api exposing (ApiUrl)
 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)
+import Html exposing (Html, Attribute, div, input, text, button, div, span, a, h2, table, td, tr, img)
-import Html.Attributes exposing (type_, value, href, class, style)
+import Html.Attributes exposing (type_, value, href, class, style, src)
 import Html.Events exposing (onInput, onClick, on)
 import Dict
 
+contentRepositoryDownloadUrl : ApiUrl -> String -> String
+contentRepositoryDownloadUrl apiUrl s =
+    let
+        lastIndex = Maybe.withDefault 6 <| List.head <| List.reverse <| String.indexes "/" s
+        authority = String.slice 6 lastIndex s
+        content = String.dropLeft (lastIndex + 1) s
+    in
+        (fullMediaUrl apiUrl) ++ "/download/" ++ authority ++ "/" ++ content
+
+
 stringColor : String -> String
 stringColor s = 
     let
@@ -171,6 +183,7 @@ messageView m re =
     in
         case msgtype of
             Ok "m.text" -> messageTextView m re
+            Ok "m.image" -> messageImageView m re
             _ -> Nothing
 
 messageTextView : Model -> RoomEvent -> Maybe (Html Msg)
@@ -180,3 +193,12 @@ messageTextView m re =
         wrap mtext = span [] [ text mtext ]
     in
         Maybe.map wrap <| Result.toMaybe body
+
+messageImageView : Model -> RoomEvent -> Maybe (Html Msg)
+messageImageView m re =
+    let
+        body = Decode.decodeValue (Decode.field "url" Decode.string) re.content
+    in
+        Maybe.map (\s -> img [ class "message-image", src s ] [])
+            <| Maybe.map (contentRepositoryDownloadUrl m.apiUrl)
+            <| Result.toMaybe body

static/scss/style.scss

@@ -155,6 +155,11 @@ table.events-table {
         vertical-align: top;
     }
 
+    img {
+        max-width: 90%;
+        max-height: 400px;
+    }
+
     td:nth-child(1) {
         width: 10%;
         max-width: 100px;