adding audio support

net/web/package.json

@@ -11,6 +11,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-easy-crop": "^4.1.4",
+    "react-player": "^2.10.0",
     "react-resize-detector": "^7.0.0",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",

net/web/src/User/Conversation/AddTopic/AddTopic.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef } from 'react';
+import ReactPlayer from 'react-player'
 import { Button, Dropdown, Input, Tooltip, Menu } from 'antd';
 import { AddTopicWrapper, BusySpin } from './AddTopic.styled';
 import { Carousel } from '../../../Carousel/Carousel';
@@ -69,10 +70,10 @@ export function AddTopic() {
       return <img style={{ height: '100%', objectFit: 'contain' }} src={item.url} alt="" />
     }
     if (item.audio) {
-      return <img style={{ height: '100%', objectFit: 'contain' }} src={test} alt="" />
+      return <ReactPlayer height="100%" width="auto" url={item.url} />
     }
     if (item.video) {
-      return <img style={{ height: '100%', objectFit: 'contain' }} src={login} alt="" />
+      return <ReactPlayer height="100%" width="auto" url={item.url} />
     }
     return <></>
   }

net/web/src/User/Conversation/TopicItem/TopicItem.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import ReactPlayer from 'react-player'
 import { TopicItemWrapper } from './TopicItem.styled';
 import ReactResizeDetector from 'react-resize-detector';
 import { useTopicItem } from './useTopicItem.hook';
@@ -19,6 +20,12 @@ export function TopicItem({ topic }) {
     if (asset.image) {
       return <img style={{ height: '100%', objectFit: 'container' }} src={actions.getAssetUrl(asset.image.full)} alt="" />
     }
+    if (asset.video) {
+      return <ReactPlayer height="100%" width="auto" controls="true" url={actions.getAssetUrl(asset.video.full)} />
+    }
+    if (asset.audio) {
+      return <ReactPlayer height="100%" width="auto" controls="true" url={actions.getAssetUrl(asset.audio.full)} />
+    }
     return <></>
   }
 

net/web/src/api/addChannelTopic.js

@@ -38,13 +38,12 @@ 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(["vthumb;video", "vcopy;video"]));
+        let transform = encodeURIComponent(JSON.stringify(["vcopy;video"]));
         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({
-          image: {
+          video: {
-            thumb: assetEntry.find(item => item.transform === 'vthumb;video').assetId,
             full: assetEntry.find(item => item.transform === 'vcopy;video').assetId,
           }
         });
@@ -57,7 +56,7 @@ export async function addChannelTopic(token, channelId, message, assets ) {
         checkResponse(topicAsset);
         let assetEntry = await topicAsset.json();
         message.assets.push({
-          image: {
+          audio: {
             full: assetEntry.find(item => item.transform === 'acopy;audio').assetId,
           }
         });

net/web/src/api/addContactChannelTopic.js

@@ -39,13 +39,12 @@ 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(["vthumb;video", "vcopy;video"]));
+        let transform = encodeURIComponent(JSON.stringify(["vcopy;video"]));
         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({
-          image: {
+          video: {
-            thumb: assetEntry.find(item => item.transform === 'vthumb;video').assetId,
             full: assetEntry.find(item => item.transform === 'vcopy;video').assetId,
           }
         });
@@ -58,7 +57,7 @@ export async function addContactChannelTopic(server, token, channelId, message,
         checkResponse(topicAsset);
         let assetEntry = await topicAsset.json();
         message.assets.push({
-          image: {
+          audio: {
             full: assetEntry.find(item => item.transform === 'acopy;audio').assetId,
           }
         });

net/web/yarn.lock

@@ -3578,7 +3578,7 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^4.2.2:
+deepmerge@^4.0.0, deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
@@ -5861,6 +5861,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=
+
 loader-runner@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz"
@@ -6018,6 +6023,11 @@ memfs@^3.1.2, memfs@^3.4.1:
   dependencies:
     fs-monkey "1.0.3"
 
+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memoize-one@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz"
@@ -7673,6 +7683,11 @@ react-error-overlay@^6.0.10:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz"
   integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==
 
+react-fast-compare@^3.0.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -7688,6 +7703,17 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-player@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.10.0.tgz#bd3e0f10ae756cc644efb14177a515d455d97e20"
+  integrity sha512-PccIqea9nxSHAdai6R+Yj9lp6tb2lyXWbaF6YVHi5uO4FiXYMKKr9rMXJrivwV5vXwQa65rYKBmwebsBmRTT3w==
+  dependencies:
+    deepmerge "^4.0.0"
+    load-script "^1.0.0"
+    memoize-one "^5.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.0.1"
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"