n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/timeline: image size calculator for videos too

Browse source
This commit is contained in:
Tulir Asokan 2024-12-01 23:55:11 +02:00
parent 42140aa0e0
commit b889f90c4d
3 changed files with 6 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
web/src/ui/timeline/content/index.css
View file

@ -230,11 +230,6 @@ div.media-container {
} }
} }
&.video-container {
width: 100%;
height: 240px;
}
> a { > a {
display: flex; display: flex;
align-items: center; align-items: center;
@ -242,13 +237,8 @@ div.media-container {
color: inherit; color: inherit;
} }
> img { > img, > video {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
> video {
min-width: 320px;
max-width: 100%;
height: 100%;
}
} }

6
web/src/ui/timeline/content/useMediaContent.tsx
View file

@ -16,7 +16,7 @@
import React, { CSSProperties, JSX, use } from "react" import React, { CSSProperties, JSX, use } from "react"
import { getEncryptedMediaURL, getMediaURL } from "@/api/media.ts" import { getEncryptedMediaURL, getMediaURL } from "@/api/media.ts"
import type { EventType, MediaMessageEventContent } from "@/api/types" import type { EventType, MediaMessageEventContent } from "@/api/types"
import { ImageContainerSize, calculateMediaSize } from "@/util/mediasize.ts" import { ImageContainerSize, calculateMediaSize, defaultVideoContainerSize } from "@/util/mediasize.ts"
import { LightboxContext } from "../../modal/Lightbox.tsx" import { LightboxContext } from "../../modal/Lightbox.tsx"
import DownloadIcon from "@/icons/download.svg?react" import DownloadIcon from "@/icons/download.svg?react"
@ -42,6 +42,7 @@ export const useMediaContent = (
onClick={use(LightboxContext)} onClick={use(LightboxContext)}
/>, "image-container", style.container] />, "image-container", style.container]
} else if (content.msgtype === "m.video") { } else if (content.msgtype === "m.video") {
const style = calculateMediaSize(content.info?.w, content.info?.h, containerSize ?? defaultVideoContainerSize)
const autoplay = false const autoplay = false
const controls = !content.info?.["fi.mau.hide_controls"] const controls = !content.info?.["fi.mau.hide_controls"]
const loop = !!content.info?.["fi.mau.loop"] const loop = !!content.info?.["fi.mau.loop"]
@ -57,6 +58,7 @@ export const useMediaContent = (
return [<video return [<video
autoPlay={autoplay} autoPlay={autoplay}
controls={controls} controls={controls}
style={style.media}
loop={loop} loop={loop}
poster={thumbnailURL} poster={thumbnailURL}
onMouseOver={onMouseOver} onMouseOver={onMouseOver}
@ -64,7 +66,7 @@ export const useMediaContent = (
preload="none" preload="none"
> >
<source src={mediaURL} type={content.info?.mimetype}/> <source src={mediaURL} type={content.info?.mimetype}/>
</video>, "video-container", {}] </video>, "video-container", style.container]
} else if (content.msgtype === "m.audio") { } else if (content.msgtype === "m.audio") {
return [<audio controls src={mediaURL} preload="none"/>, "audio-container", {}] return [<audio controls src={mediaURL} preload="none"/>, "audio-container", {}]
} else if (content.msgtype === "m.file") { } else if (content.msgtype === "m.file") {

1
web/src/util/mediasize.ts
View file

@ -26,6 +26,7 @@ export interface ImageContainerSize {
} }
export const defaultImageContainerSize: ImageContainerSize = { width: 320, height: 240 } export const defaultImageContainerSize: ImageContainerSize = { width: 320, height: 240 }
export const defaultVideoContainerSize: ImageContainerSize = { width: 400, height: 320 }
export function calculateMediaSize( export function calculateMediaSize(
width?: number, width?: number,