From 1dc80fdb95c3ec52b62237fced5a6f849d1173c1 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Wed, 11 May 2022 11:21:42 -0700 Subject: [PATCH] support video thumb selection --- net/server/transform/transform_ithumb.sh | 2 +- net/server/transform/transform_vthumb.sh | 4 ++-- net/web/src/User/Conversation/AddTopic/AddTopic.jsx | 3 ++- net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js | 7 +++++-- .../User/Conversation/TopicItem/ImageAsset/ImageAsset.jsx | 2 +- .../User/Conversation/TopicItem/VideoAsset/VideoAsset.jsx | 2 +- net/web/src/User/User.jsx | 2 +- net/web/src/api/addChannelTopic.js | 5 +++-- net/web/src/api/addContactChannelTopic.js | 5 +++-- 9 files changed, 19 insertions(+), 13 deletions(-) diff --git a/net/server/transform/transform_ithumb.sh b/net/server/transform/transform_ithumb.sh index 51561afd..34c22541 100755 --- a/net/server/transform/transform_ithumb.sh +++ b/net/server/transform/transform_ithumb.sh @@ -1,3 +1,3 @@ #!/bin/bash -convert -strip $1 -auto-orient -resize '640x640>' $2 +convert -strip $1 -auto-orient -resize '320x320>' $2 diff --git a/net/server/transform/transform_vthumb.sh b/net/server/transform/transform_vthumb.sh index b7930c9a..aa427754 100755 --- a/net/server/transform/transform_vthumb.sh +++ b/net/server/transform/transform_vthumb.sh @@ -1,5 +1,5 @@ #!/bin/bash set -e TMPFILE=$(mktemp /tmp/databag-XXXXX) -ffmpeg -ss 0 -i $1 -y -vframes 1 -q:v 2 $TMPFILE.jpg -convert -strip $TMPFILE.jpg -auto-orient -resize '640x640>' $2 +ffmpeg -ss $3 -i $1 -y -vframes 1 -q:v 2 $TMPFILE.jpg +convert -strip $TMPFILE.jpg -auto-orient -resize '320x320>' $2 diff --git a/net/web/src/User/Conversation/AddTopic/AddTopic.jsx b/net/web/src/User/Conversation/AddTopic/AddTopic.jsx index 4c253f7f..3a83ddc2 100644 --- a/net/web/src/User/Conversation/AddTopic/AddTopic.jsx +++ b/net/web/src/User/Conversation/AddTopic/AddTopic.jsx @@ -6,6 +6,7 @@ import { Carousel } from '../../../Carousel/Carousel'; import { useAddTopic } from './useAddTopic.hook'; import { BgColorsOutlined, FontColorsOutlined, FontSizeOutlined, PaperClipOutlined, SendOutlined } from '@ant-design/icons'; import { AudioFile } from './AudioFile/AudioFile'; +import { VideoFile } from './VideoFile/VideoFile'; import login from '../../../login.png'; import test from '../../../test.png'; @@ -74,7 +75,7 @@ export function AddTopic() { return actions.setLabel(index, label)}/> } if (item.video) { - return + return actions.setPosition(index, pos)} url={item.url} /> } return <> } diff --git a/net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js b/net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js index 710725c4..b25fb136 100644 --- a/net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js +++ b/net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js @@ -49,11 +49,11 @@ export function useAddTopic() { const actions = { addImage: (image) => { let url = URL.createObjectURL(image); - addAsset({ image, url }) + addAsset({ image, url, position: 0 }) }, addVideo: (video) => { let url = URL.createObjectURL(video); - addAsset({ video, url }) + addAsset({ video, url, label: '' }) }, addAudio: (audio) => { let url = URL.createObjectURL(audio); @@ -62,6 +62,9 @@ export function useAddTopic() { setLabel: (index, label) => { updateAsset(index, { label }); }, + setPosition: (index, position) => { + updateAsset(index, { position }); + }, removeAsset: (idx) => { removeAsset(idx) }, setMessageText: (value) => { updateState({ messageText: value }); diff --git a/net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.jsx b/net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.jsx index 03eb75fb..41ce8d3e 100644 --- a/net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.jsx +++ b/net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.jsx @@ -21,7 +21,7 @@ export function ImageAsset({ thumbUrl, fullUrl }) { updateState({ popout: true, popWidth: '80%', popHeight: 'auto' }); } else { - let width = Math.floor(80 * state.width / state.height); + let width = Math.floor(80 * (state.width / state.height) * (window.innerHeight / window.innerWidth)); updateState({ popout: true, popWidth: width + '%', popHeight: 'auto' }); } } diff --git a/net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.jsx b/net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.jsx index 5d8d6a31..d6b38b9d 100644 --- a/net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.jsx +++ b/net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.jsx @@ -26,7 +26,7 @@ export function VideoAsset({ thumbUrl, lqUrl, hdUrl }) { updateState({ popout: true, popWidth: '70%', inline: false, popoutUrl: hdUrl, playing: false, inlineUrl: null }); } else { - let width = Math.floor(70 * state.width / state.height); + let width = Math.floor(70 * (state.width / state.height) * (window.innerHeight / window.innerWidth)); updateState({ popout: true, popWidth: width + '%', inline: false, popoutUrl: hdUrl, playing: false, inlineUrl: null }); } } diff --git a/net/web/src/User/User.jsx b/net/web/src/User/User.jsx index 01afbf1c..38f08e1e 100644 --- a/net/web/src/User/User.jsx +++ b/net/web/src/User/User.jsx @@ -14,7 +14,7 @@ export function User() { return ( -
+
diff --git a/net/web/src/api/addChannelTopic.js b/net/web/src/api/addChannelTopic.js index 3386aa74..c7829a52 100644 --- a/net/web/src/api/addChannelTopic.js +++ b/net/web/src/api/addChannelTopic.js @@ -38,13 +38,14 @@ export async function addChannelTopic(token, channelId, message, assets ) { else if (asset.video) { const formData = new FormData(); formData.append('asset', asset.video); - let transform = encodeURIComponent(JSON.stringify(["vlq;video", "vhd;video", 'vthumb;video'])); + let thumb = 'vthumb;video;' + asset.position; + let transform = encodeURIComponent(JSON.stringify(["vlq;video", "vhd;video", thumb])); let topicAsset = await fetch(`/content/channels/${channelId}/topics/${slot.id}/assets?transforms=${transform}&agent=${token}`, { method: 'POST', body: formData }); checkResponse(topicAsset); let assetEntry = await topicAsset.json(); message.assets.push({ video: { - thumb: assetEntry.find(item => item.transform === 'vthumb;video').assetId, + thumb: assetEntry.find(item => item.transform === thumb).assetId, lq: assetEntry.find(item => item.transform === 'vlq;video').assetId, hd: assetEntry.find(item => item.transform === 'vhd;video').assetId, } diff --git a/net/web/src/api/addContactChannelTopic.js b/net/web/src/api/addContactChannelTopic.js index e5cd2685..ddc936d8 100644 --- a/net/web/src/api/addContactChannelTopic.js +++ b/net/web/src/api/addContactChannelTopic.js @@ -39,13 +39,14 @@ export async function addContactChannelTopic(server, token, channelId, message, else if (asset.video) { const formData = new FormData(); formData.append('asset', asset.video); - let transform = encodeURIComponent(JSON.stringify(["vhd;video", "vlq;video", "vthumb;video"])); + let thumb = "vthumb;video;" + asset.position + let transform = encodeURIComponent(JSON.stringify(["vhd;video", "vlq;video", thumb])); let topicAsset = await fetch(`https://${server}/content/channels/${channelId}/topics/${slot.id}/assets?transforms=${transform}&contact=${token}`, { method: 'POST', body: formData }); checkResponse(topicAsset); let assetEntry = await topicAsset.json(); message.assets.push({ video: { - thumb: assetEntry.find(item => item.transform === 'vthumb;video').assetId, + thumb: assetEntry.find(item => item.transform === thumb).assetId, lq: assetEntry.find(item => item.transform === 'vlq;video').assetId, hd: assetEntry.find(item => item.transform === 'vhd;video').assetId, }