martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

support video thumb selection

Browse Source
This commit is contained in:
Roland Osborne 2022-05-11 11:21:42 -07:00
parent 68f2948878
commit 1dc80fdb95
9 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
net/server/transform/transform_ithumb.sh
View File

@ -1,3 +1,3 @@
#!/bin/bash
convert -strip $1 -auto-orient -resize '640x640>' $2
convert -strip $1 -auto-orient -resize '320x320>' $2

4
net/server/transform/transform_vthumb.sh
View File

@ -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

3
net/web/src/User/Conversation/AddTopic/AddTopic.jsx
View File

@ -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 <AudioFile onLabel={(label) => actions.setLabel(index, label)}/>
}
if (item.video) {
return <ReactPlayer controls="true" height="100%" width="auto" url={item.url} />
return <VideoFile onPosition={(pos) => actions.setPosition(index, pos)} url={item.url} />
}
return <></>
}

7
net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js
View File

@ -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 });

2
net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.jsx
View File

@ -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' });
}
}

2
net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.jsx
View File

@ -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 });
}
}

2
net/web/src/User/User.jsx
View File

@ -14,7 +14,7 @@ export function User() {
return (
<UserWrapper>
<SideBar />
<div class="canvas">
<div class="canvas noselect">
<img class="connect" src={connect} alt="" />
<div class="page">
<Outlet />

5
net/web/src/api/addChannelTopic.js
View File

@ -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,
}

5
net/web/src/api/addContactChannelTopic.js
View File

@ -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,
}