nostr/primal-web-app
1
0
Fork 0
mirror of https://github.com/PrimalHQ/primal-web-app.git synced 2024-09-29 08:21:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Scale videos the same way as images

Browse Source
This commit is contained in:
Bojan Mojsilovic 2023-12-27 13:31:42 +01:00
parent 6e2288bda7
commit 7ceb70b091
1 changed files with 46 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/ParsedNote/ParsedNote.tsx
View File

@ -274,8 +274,18 @@ const ParsedNote: Component<{
wordsDisplayed += shortMentionInWords; wordsDisplayed += shortMentionInWords;
let mVideo = media?.actions.getMedia(token, 'o'); let mVideo = media?.actions.getMedia(token, 'o');
const w = mVideo ? mVideo?.w > 524 ? 524 : mVideo?.w : undefined; let h: number | undefined = undefined;
const h = mVideo ? mVideo?.w > 524 ? 524 * mVideo?.h / mVideo?.w : mVideo?.h : undefined; let w: number | undefined = undefined;
if (mVideo) {
const ratio = mVideo.w / mVideo.h;
h = (524 / ratio);
w = h > 680 ? 680 * ratio : 524;
h = h > 680 ? 680 : h;
}
// const h = mVideo ? mVideo?.h > 524 ? 524 * mVideo?.h / mVideo?.w : mVideo?.h : undefined;
// const w = mVideo ? mVideo?.w > 524 ? 524 : mVideo?.w : undefined;
const klass = mVideo ? 'w-cen' : 'w-max'; const klass = mVideo ? 'w-cen' : 'w-max';
const video = <video class={klass} width={w} height={h} controls muted={true} ><source src={token} type="video/mp4" /></video>; const video = <video class={klass} width={w} height={h} controls muted={true} ><source src={token} type="video/mp4" /></video>;
@ -289,11 +299,30 @@ const ParsedNote: Component<{
wordsDisplayed += shortMentionInWords; wordsDisplayed += shortMentionInWords;
let mVideo = media?.actions.getMedia(token, 'o'); let mVideo = media?.actions.getMedia(token, 'o');
const w = mVideo ? mVideo?.w > 524 ? 524 : mVideo?.w : undefined; let h: number | undefined = undefined;
const h = mVideo ? mVideo?.w > 524 ? 524 * mVideo?.h / mVideo?.w : mVideo?.h : undefined; let w: number | undefined = undefined;
if (mVideo) {
const ratio = mVideo.w / mVideo.h;
h = (524 / ratio);
w = h > 680 ? 680 * ratio : 524;
h = h > 680 ? 680 : h;
}
// const h = mVideo ? mVideo?.h > 524 ? 524 * mVideo?.h / mVideo?.w : mVideo?.h : undefined;
// const w = mVideo ? mVideo?.w > 524 ? 524 : mVideo?.w : undefined;
const klass = mVideo ? 'w-cen' : 'w-max'; const klass = mVideo ? 'w-cen' : 'w-max';
const video = <video class={klass} width={w} height={h} controls muted={true} ><source src={token} type="video/ogg" /></video>; const video =
<video
class={klass}
width={w}
height={h}
controls
muted={true}
>
<source src={token} type="video/ogg" />
</video>;
media?.actions.addVideo(video as HTMLVideoElement); media?.actions.addVideo(video as HTMLVideoElement);
return video; return video;
} }
@ -302,8 +331,18 @@ const ParsedNote: Component<{
wordsDisplayed += shortMentionInWords; wordsDisplayed += shortMentionInWords;
let mVideo = media?.actions.getMedia(token, 'o'); let mVideo = media?.actions.getMedia(token, 'o');
const w = mVideo ? mVideo?.w > 524 ? 524 : mVideo?.w : undefined; let h: number | undefined = undefined;
const h = mVideo ? mVideo?.w > 524 ? 524 * mVideo?.h / mVideo?.w : mVideo?.h : undefined; let w: number | undefined = undefined;
if (mVideo) {
const ratio = mVideo.w / mVideo.h;
h = (524 / ratio);
w = h > 680 ? 680 * ratio : 524;
h = h > 680 ? 680 : h;
}
// const h = mVideo ? mVideo?.h > 524 ? 524 * mVideo?.h / mVideo?.w : mVideo?.h : undefined;
// const w = mVideo ? mVideo?.w > 524 ? 524 : mVideo?.w : undefined;
const klass = mVideo ? 'w-cen' : 'w-max'; const klass = mVideo ? 'w-cen' : 'w-max';
const video = <video class={klass} width={w} height={h} controls muted={true} ><source src={token} type="video/webm" /></video>; const video = <video class={klass} width={w} height={h} controls muted={true} ><source src={token} type="video/webm" /></video>;