Improve 3speak video upload

package.json

@@ -13,7 +13,7 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "@ecency/render-helper": "^2.2.24",
+    "@ecency/render-helper": "^2.2.25",
     "@ecency/render-helper-amp": "^1.1.0",
     "@firebase/analytics": "^0.8.0",
     "@firebase/app": "^0.7.28",

src/common/api/operations.ts

@@ -47,6 +47,7 @@ export interface MetaData {
 export interface BeneficiaryRoute {
   account: string;
   weight: number;
+  src?: string;
 }
 
 export interface CommentOptions {

src/common/api/threespeak/mutations.ts

@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { uploadFile, uploadVideoInfo } from "./api";
 import { QueryIdentifiers } from "../../core";
-import { ThreeSpeakVideo } from "./types";
+import { useThreeSpeakVideo } from "./queries";
 
 export function useThreeSpeakVideoUpload() {
   const [completedByType, setCompletedByType] = useState<Record<string, number>>({});
@@ -28,6 +28,7 @@ export function useThreeSpeakVideoUpload() {
 
 export function useUploadVideoInfo() {
   const queryClient = useQueryClient();
+  const { data, refetch } = useThreeSpeakVideo("all");
 
   return useMutation(
     ["threeSpeakVideoUploadInfo"],
@@ -55,14 +56,15 @@ export function useUploadVideoInfo() {
     },
 
     {
-      onSuccess: (response) => {
+      onSuccess: async (response) => {
         if (response) {
-          const next = [
-            response,
-            ...(queryClient.getQueryData<ThreeSpeakVideo[]>([
-              QueryIdentifiers.THREE_SPEAK_VIDEO_LIST
-            ]) ?? [])
-          ];
+          let current = data;
+          if (current.length === 0) {
+            const response = await refetch();
+            current = response.data ?? [];
+          }
+
+          const next = [response, ...current];
           queryClient.setQueryData([QueryIdentifiers.THREE_SPEAK_VIDEO_LIST], next);
           queryClient.setQueryData([QueryIdentifiers.THREE_SPEAK_VIDEO_LIST_FILTERED, "all"], next);
         }

src/common/api/threespeak/queries.ts

@@ -16,7 +16,7 @@ export function useThreeSpeakVideo(
   const queryClient = useQueryClient();
 
   const apiQuery = useQuery(
-    [QueryIdentifiers.THREE_SPEAK_VIDEO_LIST],
+    [QueryIdentifiers.THREE_SPEAK_VIDEO_LIST, activeUser?.username ?? ""],
     async () => {
       try {
         return await getAllVideoStatuses(activeUser!.username);

src/common/components/beneficiary-editor/index.spec.tsx

@@ -5,6 +5,7 @@ import BeneficiaryEditorDialog, { DialogBody } from "./index";
 import TestRenderer from "react-test-renderer";
 
 const defProps = {
+  body: "",
   list: [
     {
       account: "foo",

src/common/components/beneficiary-editor/index.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import { Button, Modal, Form, InputGroup, FormControl } from "react-bootstrap";
+import { Button, Form, FormControl, InputGroup, Modal } from "react-bootstrap";
 
 import BaseComponent from "../base";
 import { error } from "../feedback";
@@ -11,11 +11,14 @@ import { getAccount } from "../../api/hive";
 
 import { _t } from "../../i18n";
 
-import { plusSvg, deleteForeverSvg, accountMultipleSvg } from "../../img/svg";
+import { accountMultipleSvg, deleteForeverSvg, plusSvg } from "../../img/svg";
 import { handleInvalid, handleOnInput } from "../../util/input-util";
 import "./_index.scss";
 
+const THREE_SPEAK_VIDEO_PATTERN = /\[!\[]\(https:\/\/ipfs-3speak.*\)\]\(https:\/\/3speak\.tv.*\)/g;
+
 interface Props {
+  body: string;
   author?: string;
   list: BeneficiaryRoute[];
   onAdd: (item: BeneficiaryRoute) => void;
@@ -162,16 +165,21 @@ export class DialogBody extends BaseComponent<Props, DialogBodyState> {
                     <td>{`@${x.account}`}</td>
                     <td>{`${x.weight / 100}%`}</td>
                     <td>
-                      <Button
-                        onClick={() => {
-                          const { onDelete } = this.props;
-                          onDelete(x.account);
-                        }}
-                        variant="danger"
-                        size="sm"
-                      >
-                        {deleteForeverSvg}
-                      </Button>
+                      {!!this.props.body.match(THREE_SPEAK_VIDEO_PATTERN) &&
+                      x.src === "ENCODER_PAY" ? (
+                        <></>
+                      ) : (
+                        <Button
+                          onClick={() => {
+                            const { onDelete } = this.props;
+                            onDelete(x.account);
+                          }}
+                          variant="danger"
+                          size="sm"
+                        >
+                          {deleteForeverSvg}
+                        </Button>
+                      )}
                     </td>
                   </tr>
                 );

src/common/components/decks/deck-threads-form/_index.scss

@@ -56,6 +56,13 @@
     }
   }
 
+  &:not(.inline) {
+    .deck-toolbar-threads-form-content {
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -192,6 +199,27 @@
         background-color: rgba($primary, 0.15);
       }
     }
+
+    &-video-picker {
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0.5rem;
+        right: 1rem;
+        width: 0.25rem;
+        height: 0.25rem;
+        opacity: 0;
+        background-color: $danger;
+        border-radius: 50%;
+        transition: 0.3s;
+      }
+
+      &:hover::before {
+        opacity: 1;
+      }
+    }
   }
 
   .deck-threads-form-selected-image {
@@ -206,8 +234,8 @@
 
     .remove {
       position: absolute;
-      top: 0;
-      right: 0;
+      top: 0.5rem;
+      right: 0.5rem;
       background-color: $white;
       display: flex;
       align-items: center;
@@ -223,6 +251,20 @@
         height: 1rem;
       }
     }
+
+    .type {
+      position: absolute;
+      background-color: $dark-sky-blue;
+      color: $white;
+      rotate: -45deg;
+      padding: 0.125rem;
+      text-align: center;
+      width: 100px;
+      top: 0.75rem;
+      left: -1.75rem;
+      font-size: 0.675rem;
+      text-transform: uppercase;
+    }
   }
 
   .dropdown {

src/common/components/decks/deck-threads-form/deck-threads-form-control.tsx

@@ -7,9 +7,11 @@ import { closeSvg } from "../../../img/svg";
 interface Props {
   text: string;
   setText: (v: string) => void;
+  video: string | null;
   selectedImage: string | null;
   setSelectedImage: (url: string | null) => void;
   onAddImage: (url: string, name: string) => void;
+  onAddVideo: (value: string | null) => void;
   placeholder?: string;
   onTextareaFocus: () => void;
 }
@@ -21,7 +23,9 @@ export const DeckThreadsFormControl = ({
   selectedImage,
   setSelectedImage,
   placeholder,
-  onTextareaFocus
+  onTextareaFocus,
+  onAddVideo,
+  video
 }: Props) => {
   return (
     <>
@@ -37,16 +41,34 @@ export const DeckThreadsFormControl = ({
           <div className="length-prompt">{text.length}/255</div>
         </div>
         {selectedImage && (
-          <div className="deck-threads-form-selected-image">
+          <div className="deck-threads-form-selected-image border mb-3">
+            <div className="type">image</div>
             <img src={selectedImage} alt="" />
             <div className="remove" onClick={() => setSelectedImage(null)}>
               {closeSvg}
             </div>
           </div>
         )}
+        {video && (
+          <div className="deck-threads-form-selected-image border mb-3">
+            <div className="type">video</div>
+            <img
+              src={video
+                .matchAll(/<center>\[!\[](.*)].*<\/center>/g)
+                .next()
+                .value[1].replace("(", "")
+                .replace(")", "")}
+              alt=""
+            />
+            <div className="remove" onClick={() => onAddVideo(null)}>
+              {closeSvg}
+            </div>
+          </div>
+        )}
         <DeckThreadsFormToolbar
           onAddImage={onAddImage}
           onEmojiPick={(v) => setText(`${text}${v}`)}
+          onAddVideo={onAddVideo}
         />
       </div>
     </>

src/common/components/decks/deck-threads-form/deck-threads-form-toolbar-video-picker.tsx

@@ -0,0 +1,49 @@
+import Tooltip from "../../tooltip";
+import { _t } from "../../../i18n";
+import { PopperDropdown } from "../../popper-dropdown";
+import { videoSvg } from "../../../img/svg";
+import React, { useState } from "react";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { VideoUpload } from "../../video-upload-threespeak";
+import VideoGallery from "../../video-gallery";
+
+interface Props {
+  onSelect: (video: string) => void;
+}
+
+export function DeckThreadsFormToolbarVideoPicker({ onSelect }: Props) {
+  const { activeUser, global } = useMappedStore();
+
+  const [showUpload, setShowUpload] = useState(false);
+  const [showGallery, setShowGallery] = useState(false);
+
+  return (
+    <div className="deck-threads-form-toolbar-video-picker">
+      {activeUser && (
+        <Tooltip content={_t("editor-toolbar.image")}>
+          <PopperDropdown toggle={videoSvg} hideOnClick={true}>
+            <div className="dropdown-menu">
+              <div className="dropdown-item" onClick={() => setShowUpload(true)}>
+                {_t("video-upload.upload-video")}
+              </div>
+              {global.usePrivate && (
+                <div className="dropdown-item" onClick={() => setShowGallery(true)}>
+                  {_t("video-upload.video-gallery")}
+                </div>
+              )}
+            </div>
+          </PopperDropdown>
+        </Tooltip>
+      )}
+      <VideoUpload show={showUpload} setShow={setShowUpload} setShowGallery={setShowGallery} />
+      <VideoGallery
+        preFilter="published"
+        showGallery={showGallery}
+        setShowGallery={setShowGallery}
+        insertText={(v) => {
+          onSelect(v);
+        }}
+      />
+    </div>
+  );
+}

src/common/components/decks/deck-threads-form/deck-threads-form-toolbar.tsx

@@ -5,13 +5,15 @@ import { DeckThreadsFormEmojiPicker } from "./deck-threads-form-emoji-picker";
 interface Props {
   onAddImage: (url: string, name: string) => void;
   onEmojiPick: (value: string) => void;
+  onAddVideo: (value: string) => void;
 }
 
-export const DeckThreadsFormToolbar = ({ onAddImage, onEmojiPick }: Props) => {
+export const DeckThreadsFormToolbar = ({ onAddImage, onEmojiPick, onAddVideo }: Props) => {
   return (
     <div className="deck-threads-form-toolbar">
       <DeckThreadsFormToolbarImagePicker onAddImage={onAddImage} />
       <DeckThreadsFormEmojiPicker onPick={onEmojiPick} />
+      {/*<DeckThreadsFormToolbarVideoPicker onSelect={onAddVideo} />*/}
     </div>
   );
 };