From 641b5539998f58219897d1e0f5223dabc025353b Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Mon, 2 May 2022 14:18:10 -0700 Subject: [PATCH] adding audio support --- net/web/package.json | 1 + .../User/Conversation/AddTopic/AddTopic.jsx | 5 ++-- .../User/Conversation/TopicItem/TopicItem.jsx | 7 +++++ net/web/src/api/addChannelTopic.js | 7 ++--- net/web/src/api/addContactChannelTopic.js | 7 ++--- net/web/yarn.lock | 28 ++++++++++++++++++- 6 files changed, 44 insertions(+), 11 deletions(-) diff --git a/net/web/package.json b/net/web/package.json index 0351c9fc..8353e419 100644 --- a/net/web/package.json +++ b/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", diff --git a/net/web/src/User/Conversation/AddTopic/AddTopic.jsx b/net/web/src/User/Conversation/AddTopic/AddTopic.jsx index b071eaca..84f5a946 100644 --- a/net/web/src/User/Conversation/AddTopic/AddTopic.jsx +++ b/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 } if (item.audio) { - return + return } if (item.video) { - return + return } return <> } diff --git a/net/web/src/User/Conversation/TopicItem/TopicItem.jsx b/net/web/src/User/Conversation/TopicItem/TopicItem.jsx index 67ccb3c8..e1aa8d3e 100644 --- a/net/web/src/User/Conversation/TopicItem/TopicItem.jsx +++ b/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 } + if (asset.video) { + return + } + if (asset.audio) { + return + } return <> } diff --git a/net/web/src/api/addChannelTopic.js b/net/web/src/api/addChannelTopic.js index 15341a32..5754f031 100644 --- a/net/web/src/api/addChannelTopic.js +++ b/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: { - thumb: assetEntry.find(item => item.transform === 'vthumb;video').assetId, + video: { 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, } }); diff --git a/net/web/src/api/addContactChannelTopic.js b/net/web/src/api/addContactChannelTopic.js index 1d4a45b0..6d0911fc 100644 --- a/net/web/src/api/addContactChannelTopic.js +++ b/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: { - thumb: assetEntry.find(item => item.transform === 'vthumb;video').assetId, + video: { 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, } }); diff --git a/net/web/yarn.lock b/net/web/yarn.lock index f638380a..c324dc8c 100644 --- a/net/web/yarn.lock +++ b/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"