support video thumb selection

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
 

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 
+ffmpeg -ss $3 -i $1 -y -vframes 1 -q:v 2 $TMPFILE.jpg 
-convert -strip $TMPFILE.jpg -auto-orient -resize '640x640>' $2
+convert -strip $TMPFILE.jpg -auto-orient -resize '320x320>' $2

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 <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 <></>
   }

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

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

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

net/web/src/User/User.jsx

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

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

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