From a0a0c60f9edf1dfa7b2ce42598e541f7920ec949 Mon Sep 17 00:00:00 2001 From: "ildar.timerbaev" Date: Tue, 8 Aug 2023 18:29:36 +0300 Subject: [PATCH 01/11] 3Speak video uploading: fixed uplading label and user switching --- src/common/api/threespeak/queries.ts | 2 +- .../components/video-upload-threespeak/video-upload-item.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/common/api/threespeak/queries.ts b/src/common/api/threespeak/queries.ts index 5aa39f0f659..dbcb4fa3053 100644 --- a/src/common/api/threespeak/queries.ts +++ b/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); diff --git a/src/common/components/video-upload-threespeak/video-upload-item.tsx b/src/common/components/video-upload-threespeak/video-upload-item.tsx index aa45dbac27d..37ecc896dcb 100644 --- a/src/common/components/video-upload-threespeak/video-upload-item.tsx +++ b/src/common/components/video-upload-threespeak/video-upload-item.tsx @@ -28,7 +28,7 @@ export function VideoUploadItem({ onFileChange, type, accept, label, completed } style={{ display: "none" }} onChange={onFileChange} /> - {completed && ( + {completed ? ( + ) : ( + <> )} ); From 3dfda6cf4358b8cd1f0059c593b1d924dbd1cb70 Mon Sep 17 00:00:00 2001 From: "ildar.timerbaev" Date: Tue, 8 Aug 2023 19:22:42 +0300 Subject: [PATCH 02/11] 3Speak video uploading: made components re-usable --- src/common/api/threespeak/mutations.ts | 18 +++--- .../components/editor-toolbar/index.tsx | 40 ++++++++++++- .../video-upload-threespeak/index.tsx | 57 ++++--------------- 3 files changed, 60 insertions(+), 55 deletions(-) diff --git a/src/common/api/threespeak/mutations.ts b/src/common/api/threespeak/mutations.ts index 6fe0d4e0a99..6d5a4eadd59 100644 --- a/src/common/api/threespeak/mutations.ts +++ b/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>({}); @@ -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([ - 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); } diff --git a/src/common/components/editor-toolbar/index.tsx b/src/common/components/editor-toolbar/index.tsx index d6fd5a50e53..4e025693cdc 100644 --- a/src/common/components/editor-toolbar/index.tsx +++ b/src/common/components/editor-toolbar/index.tsx @@ -36,9 +36,11 @@ import { gridSvg, imageSvg, linkSvg, - textShortSvg + textShortSvg, + videoSvg } from "../../img/svg"; import { VideoUpload } from "../video-upload-threespeak"; +import VideoGallery from "../video-gallery"; interface Props { global: Global; @@ -59,6 +61,8 @@ interface State { link: boolean; mobileImage: boolean; shGif: boolean; + showVideoUpload: boolean; + showVideoGallery: boolean; } export const detectEvent = (eventType: string) => { @@ -78,7 +82,9 @@ export class EditorToolbar extends Component { image: false, link: false, mobileImage: false, - shGif: false + shGif: false, + showVideoUpload: false, + showVideoGallery: false }; holder = React.createRef(); @@ -567,6 +573,36 @@ export class EditorToolbar extends Component {
this.setState({ showVideoUpload: v })} + setShowGallery={(v) => this.setState({ showVideoGallery: v })} + > + {videoSvg} + {activeUser && ( +
+
this.setState({ showVideoUpload: true })} + > + {_t("video-upload.upload-video")} +
+ {global.usePrivate && ( +
) => { + e.stopPropagation(); + this.setState({ showVideoGallery: true }); + }} + > + {_t("video-upload.video-gallery")} +
+ )} +
+ )} + + this.setState({ showVideoGallery: v })} insertText={this.insertText} setVideoEncoderBeneficiary={this.props.setVideoEncoderBeneficiary} toggleNsfwC={this.props.toggleNsfwC} diff --git a/src/common/components/video-upload-threespeak/index.tsx b/src/common/components/video-upload-threespeak/index.tsx index acad7dd8e0b..0218de8324e 100644 --- a/src/common/components/video-upload-threespeak/index.tsx +++ b/src/common/components/video-upload-threespeak/index.tsx @@ -1,10 +1,7 @@ -import React, { ChangeEvent, useEffect, useRef, useState } from "react"; +import React, { ChangeEvent, ReactNode, useEffect, useRef, useState } from "react"; import { Button, Modal } from "react-bootstrap"; - -import { videoSvg } from "../../img/svg"; import { _t } from "../../i18n"; import { useThreeSpeakVideoUpload, useUploadVideoInfo } from "../../api/threespeak"; -import VideoGallery from "../video-gallery"; import "./index.scss"; import { VideoUploadItem } from "./video-upload-item"; import { createFile } from "../../util/create-file"; @@ -13,13 +10,13 @@ import { useMappedStore } from "../../store/use-mapped-store"; const DEFAULT_THUMBNAIL = require("./assets/thumbnail-play.jpg"); interface Props { - insertText: (before: string, after?: string) => void; - setVideoEncoderBeneficiary?: (video: any) => void; - toggleNsfwC?: () => void; + children?: ReactNode; + show: boolean; + setShow: (v: boolean) => void; + setShowGallery: (v: boolean) => void; } export const VideoUpload = (props: Props) => { - const { insertText, setVideoEncoderBeneficiary, toggleNsfwC } = props; const { activeUser, toggleUIProp, global } = useMappedStore(); const { mutateAsync: uploadFile, @@ -30,7 +27,6 @@ export const VideoUpload = (props: Props) => { const videoRef = useRef(null); - const [showModal, setShowModal] = useState(false); const [selectedFile, setSelectedFile] = useState(null); const [coverImage, setCoverImage] = useState(); const [step, setStep] = useState("upload"); @@ -45,7 +41,7 @@ export const VideoUpload = (props: Props) => { // Reset on dialog hide useEffect(() => { - if (!showModal) { + if (!props.show) { setSelectedFile(null); setCoverImage(undefined); setFileName(""); @@ -56,7 +52,7 @@ export const VideoUpload = (props: Props) => { setStep("upload"); setCompletedByType({}); } - }, [showModal]); + }, [props.show]); const getVideoDuration = () => { if (videoRef.current) { @@ -166,9 +162,9 @@ export const VideoUpload = (props: Props) => { activeUser: activeUser!.username, duration }); - setShowModal(false); + props.setShow(false); setStep("upload"); - setShowGallery(true); + props.setShowGallery(true); }} > {_t("video-upload.to-gallery")} @@ -182,42 +178,13 @@ export const VideoUpload = (props: Props) => { className="cursor-pointer new-feature" onClick={() => (activeUser ? null : toggleUIProp("login"))} > -
- {videoSvg} - {activeUser && ( -
-
setShowModal(true)}> - {_t("video-upload.upload-video")} -
- {global.usePrivate && ( -
) => { - e.stopPropagation(); - setShowGallery(true); - }} - > - {_t("video-upload.video-gallery")} -
- )} -
- )} -
-
- -
+
{props.children}
setShowModal(false)} + onHide={() => props.setShow(false)} keyboard={false} className="add-image-modal" > From 07a334ce0cdfd41940e1ac3ba80eb77382034882 Mon Sep 17 00:00:00 2001 From: "ildar.timerbaev" Date: Tue, 8 Aug 2023 21:20:14 +0300 Subject: [PATCH 03/11] 3Speak video uploading: added video uploading to wave form --- .../decks/deck-threads-form/_index.scss | 46 +++++++++++++++++- .../deck-threads-form-control.tsx | 26 +++++++++- ...deck-threads-form-toolbar-video-picker.tsx | 48 +++++++++++++++++++ .../deck-threads-form-toolbar.tsx | 5 +- .../decks/deck-threads-form/index.tsx | 3 ++ .../components/editor-toolbar/index.tsx | 1 + .../components/popper-dropdown/index.tsx | 7 ++- .../video-upload-threespeak/index.scss | 8 ++-- .../video-upload-threespeak/index.tsx | 4 +- 9 files changed, 135 insertions(+), 13 deletions(-) create mode 100644 src/common/components/decks/deck-threads-form/deck-threads-form-toolbar-video-picker.tsx diff --git a/src/common/components/decks/deck-threads-form/_index.scss b/src/common/components/decks/deck-threads-form/_index.scss index 35986589092..8dabccb41d2 100644 --- a/src/common/components/decks/deck-threads-form/_index.scss +++ b/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 { diff --git a/src/common/components/decks/deck-threads-form/deck-threads-form-control.tsx b/src/common/components/decks/deck-threads-form/deck-threads-form-control.tsx index 4e744dd7954..8e8fc71491f 100644 --- a/src/common/components/decks/deck-threads-form/deck-threads-form-control.tsx +++ b/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 = ({
{text.length}/255
{selectedImage && ( -
+
+
image
setSelectedImage(null)}> {closeSvg}
)} + {video && ( +
+
video
+ \[!\[](.*)].*<\/center>/g) + .next() + .value[1].replace("(", "") + .replace(")", "")} + alt="" + /> +
onAddVideo(null)}> + {closeSvg} +
+
+ )} setText(`${text}${v}`)} + onAddVideo={onAddVideo} />
diff --git a/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar-video-picker.tsx b/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar-video-picker.tsx new file mode 100644 index 00000000000..277fb1f8473 --- /dev/null +++ b/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar-video-picker.tsx @@ -0,0 +1,48 @@ +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 ( +
+ {activeUser && ( + + +
+
setShowUpload(true)}> + {_t("video-upload.upload-video")} +
+ {global.usePrivate && ( +
setShowGallery(true)}> + {_t("video-upload.video-gallery")} +
+ )} +
+ + + )} + + { + onSelect(v); + }} + /> +
+ ); +} diff --git a/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar.tsx b/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar.tsx index 9a095e986c2..3515dc4b186 100644 --- a/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar.tsx +++ b/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar.tsx @@ -1,17 +1,20 @@ import React from "react"; import { DeckThreadsFormToolbarImagePicker } from "./deck-threads-form-toolbar-image-picker"; import { DeckThreadsFormEmojiPicker } from "./deck-threads-form-emoji-picker"; +import { DeckThreadsFormToolbarVideoPicker } from "./deck-threads-form-toolbar-video-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 (
+
); }; diff --git a/src/common/components/decks/deck-threads-form/index.tsx b/src/common/components/decks/deck-threads-form/index.tsx index dc32f9f8ea5..84eb44383ec 100644 --- a/src/common/components/decks/deck-threads-form/index.tsx +++ b/src/common/components/decks/deck-threads-form/index.tsx @@ -56,6 +56,7 @@ export const DeckThreadsForm = ({ const [text, setText] = useState(""); const [image, setImage] = useState(null); const [imageName, setImageName] = useState(null); + const [video, setVideo] = useState(null); const [disabled, setDisabled] = useState(true); const [loading, setLoading] = useState(false); @@ -213,6 +214,7 @@ export const DeckThreadsForm = ({ )} setFocused(true)} diff --git a/src/common/components/editor-toolbar/index.tsx b/src/common/components/editor-toolbar/index.tsx index 4e025693cdc..1db234fe804 100644 --- a/src/common/components/editor-toolbar/index.tsx +++ b/src/common/components/editor-toolbar/index.tsx @@ -573,6 +573,7 @@ export class EditorToolbar extends Component {
this.setState({ showVideoUpload: v })} setShowGallery={(v) => this.setState({ showVideoGallery: v })} diff --git a/src/common/components/popper-dropdown/index.tsx b/src/common/components/popper-dropdown/index.tsx index 2790d89b36e..d9aabe00f92 100644 --- a/src/common/components/popper-dropdown/index.tsx +++ b/src/common/components/popper-dropdown/index.tsx @@ -10,9 +10,10 @@ interface Props { toggle: JSX.Element; children: JSX.Element; options?: Parameters[2]; + hideOnClick?: boolean; } -export const PopperDropdown = ({ children, toggle, options }: Props) => { +export const PopperDropdown = ({ children, toggle, options, hideOnClick = false }: Props) => { const isMounted = useMounted(); const [isShow, setIsShow] = useState(false); @@ -47,7 +48,9 @@ export const PopperDropdown = ({ children, toggle, options }: Props) => { {...attributes.popper} ref={setPopperElement} > -
{children}
+
(hideOnClick ? hide() : null)}> + {children} +
), document.querySelector("#popper-container")!! diff --git a/src/common/components/video-upload-threespeak/index.scss b/src/common/components/video-upload-threespeak/index.scss index eb354d56c73..3a0722e8f7b 100644 --- a/src/common/components/video-upload-threespeak/index.scss +++ b/src/common/components/video-upload-threespeak/index.scss @@ -15,12 +15,12 @@ .new-feature::after { content: ''; - height: 0.5rem; - width: 0.5rem; + height: 0.35rem; + width: 0.35rem; background: $red; position: absolute; - top: -0.25rem; - right: 0.25rem; + top: -0.125rem; + right: 0.35rem; border-radius: 1rem; } diff --git a/src/common/components/video-upload-threespeak/index.tsx b/src/common/components/video-upload-threespeak/index.tsx index 0218de8324e..0d5af55e215 100644 --- a/src/common/components/video-upload-threespeak/index.tsx +++ b/src/common/components/video-upload-threespeak/index.tsx @@ -16,7 +16,7 @@ interface Props { setShowGallery: (v: boolean) => void; } -export const VideoUpload = (props: Props) => { +export const VideoUpload = (props: Props & React.HTMLAttributes) => { const { activeUser, toggleUIProp, global } = useMappedStore(); const { mutateAsync: uploadFile, @@ -175,7 +175,7 @@ export const VideoUpload = (props: Props) => { return (
(activeUser ? null : toggleUIProp("login"))} >
{props.children}
From ca257f8e66ee551428f2ab65d62e7fa3ab9ddbee Mon Sep 17 00:00:00 2001 From: "ildar.timerbaev" Date: Tue, 8 Aug 2023 21:33:34 +0300 Subject: [PATCH 04/11] 3Speak video uploading: added persistence to the wave video --- .../decks/deck-threads-form/index.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/common/components/decks/deck-threads-form/index.tsx b/src/common/components/decks/deck-threads-form/index.tsx index 84eb44383ec..c1c9386a270 100644 --- a/src/common/components/decks/deck-threads-form/index.tsx +++ b/src/common/components/decks/deck-threads-form/index.tsx @@ -17,6 +17,7 @@ import { DeckThreadsCreatedRecently } from "./deck-threads-created-recently"; import { IdentifiableEntry, ThreadItemEntry } from "../columns/deck-threads-manager"; import useClickAway from "react-use/lib/useClickAway"; import { classNameObject } from "../../../helper/class-name-object"; +import usePrevious from "react-use/lib/usePrevious"; interface Props { className?: string; @@ -51,6 +52,7 @@ export const DeckThreadsForm = ({ {} ); const [persistedForm, setPersistedForm] = useLocalStorage>(PREFIX + "_dtf_f"); + const previousPersistedForm = usePrevious(persistedForm); const [threadHost, setThreadHost] = useState("ecency.waves"); const [text, setText] = useState(""); @@ -91,16 +93,25 @@ export const DeckThreadsForm = ({ setText(text ? text : persistedForm?.text ?? ""); setImage(image ? image : persistedForm?.image); setImageName(imageName ? imageName : persistedForm?.imageName); + setVideo(video ? video : persistedForm?.video); } }, [persistedForm]); useEffect(() => { - if (persistable) { + if ( + persistable && + (persistedForm?.threadHost !== threadHost || + persistedForm?.text !== text || + persistedForm?.image !== image || + persistedForm?.imageName !== imageName || + persistedForm?.video !== video) + ) { setPersistedForm({ threadHost, text, image, - imageName + imageName, + video }); } }, [threadHost, text, image, imageName]); @@ -123,6 +134,10 @@ export const DeckThreadsForm = ({ content = `${content}
![${imageName ?? ""}](${image})`; } + if (video) { + content = `${content}
${video}`; + } + // Push to draft built content with attachments if (text!!.length > 255) { setLocalDraft({ From c4c4ce02c7c0bdfb0cf6f77e39dca316da839f60 Mon Sep 17 00:00:00 2001 From: "ildar.timerbaev" Date: Tue, 8 Aug 2023 21:41:47 +0300 Subject: [PATCH 05/11] 3Speak video uploading: do not allow to remove beneficiaries --- .../components/beneficiary-editor/index.tsx | 32 ++++++++++++------- src/common/pages/submit.tsx | 3 +- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/common/components/beneficiary-editor/index.tsx b/src/common/components/beneficiary-editor/index.tsx index 8c9e82c6038..dcc6e01dee5 100644 --- a/src/common/components/beneficiary-editor/index.tsx +++ b/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 { {`@${x.account}`} {`${x.weight / 100}%`} - + {!!this.props.body.match(THREE_SPEAK_VIDEO_PATTERN) && + ["threespeakleader", "spk.beneficiary"].includes(x.account) ? ( + <> + ) : ( + + )} ); diff --git a/src/common/pages/submit.tsx b/src/common/pages/submit.tsx index 3005e8b2b1c..ca787c1609d 100644 --- a/src/common/pages/submit.tsx +++ b/src/common/pages/submit.tsx @@ -82,7 +82,7 @@ import Drafts from "../components/drafts"; import { AvailableCredits } from "../components/available-credits"; import { handleFloatingContainer } from "../components/floating-faq"; -import { updateSpeakVideoInfo, markAsPublished } from "../api/threespeak"; +import { markAsPublished, updateSpeakVideoInfo } from "../api/threespeak"; // import { ConfirmNsfwContent } from "../components/video-nsfw"; import { PostBodyLazyRenderer } from "../components/post-body-lazy-renderer"; @@ -1402,6 +1402,7 @@ class SubmitPage extends BaseComponent { Date: Tue, 8 Aug 2023 21:56:51 +0300 Subject: [PATCH 06/11] 3Speak video uploading: do not allow to publish multiple not published videos at one time --- .../components/editor-toolbar/index.tsx | 1 + src/common/components/video-gallery/index.tsx | 2 +- .../video-gallery/video-gallery-item.tsx | 22 +++++++++++++++---- 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/common/components/editor-toolbar/index.tsx b/src/common/components/editor-toolbar/index.tsx index 1db234fe804..34724f39933 100644 --- a/src/common/components/editor-toolbar/index.tsx +++ b/src/common/components/editor-toolbar/index.tsx @@ -195,6 +195,7 @@ export class EditorToolbar extends Component { if (el) { insertOrReplace(el, before, after); } + return this.getTargetEl(); }; replaceText = (find: string, rep: string) => { diff --git a/src/common/components/video-gallery/index.tsx b/src/common/components/video-gallery/index.tsx index 9adbda71184..9fc96ffb9fd 100644 --- a/src/common/components/video-gallery/index.tsx +++ b/src/common/components/video-gallery/index.tsx @@ -12,7 +12,7 @@ import { useMappedStore } from "../../store/use-mapped-store"; interface Props { showGallery: boolean; setShowGallery: React.Dispatch>; - insertText: (before: string, after?: string) => void; + insertText: (before: string, after?: string) => HTMLElement; setVideoEncoderBeneficiary?: (video: any) => void; toggleNsfwC?: () => void; } diff --git a/src/common/components/video-gallery/video-gallery-item.tsx b/src/common/components/video-gallery/video-gallery-item.tsx index 9e75c3dd464..322a05a5f28 100644 --- a/src/common/components/video-gallery/video-gallery-item.tsx +++ b/src/common/components/video-gallery/video-gallery-item.tsx @@ -1,8 +1,8 @@ import { informationSvg } from "../../img/svg"; import { _t } from "../../i18n"; import { dateToFullRelative } from "../../helper/parse-date"; -import React, { useState } from "react"; -import { ThreeSpeakVideo } from "../../api/threespeak"; +import React, { useEffect, useState } from "react"; +import { ThreeSpeakVideo, useThreeSpeakVideo } from "../../api/threespeak"; import { Button } from "react-bootstrap"; interface videoProps { @@ -14,7 +14,7 @@ interface videoProps { interface Props { item: ThreeSpeakVideo; - insertText: (before: string, after?: string) => void; + insertText: (before: string, after?: string) => HTMLElement; setVideoEncoderBeneficiary?: (video: any) => void; toggleNsfwC?: () => void; setShowGallery: (v: boolean) => void; @@ -27,8 +27,15 @@ export function VideoGalleryItem({ insertText, setShowGallery }: Props) { + const { data } = useThreeSpeakVideo("all"); + const [showMoreInfo, setShowMoreInfo] = useState(false); const [hoveredItem, setHoveredItem] = useState(null); + const [manualPublishSpeakVideos, setManualPublishSpeakVideos] = useState([]); + + useEffect(() => { + setManualPublishSpeakVideos(data.filter((i) => i.status === "publish_manual")); + }, [data]); const setBeneficiary = (video: any) => { setVideoEncoderBeneficiary && setVideoEncoderBeneficiary(video); @@ -43,7 +50,14 @@ export function VideoGalleryItem({ const speakFile = `[![](${video.thumbUrl})](${speakUrl}${video.owner}/${video.permlink})`; const element = `
${speakFile}
`; - insertText(element); + const body = insertText("").innerHTML; + const hasManualPublishInBody = manualPublishSpeakVideos + .map((i) => `[![](${i.thumbUrl})](${speakUrl}${i.owner}/${i.permlink})`) + .some((i) => body.includes(i)); + + if (!hasManualPublishInBody) { + insertText(element); + } }; const insert = async (isNsfw = false) => { From 72d7470c16c49e202bbd5bf8c52900f1ad6f94d7 Mon Sep 17 00:00:00 2001 From: "ildar.timerbaev" Date: Tue, 8 Aug 2023 21:59:05 +0300 Subject: [PATCH 07/11] 3Speak video uploading: updated snapshots --- .../beneficiary-editor/index.spec.tsx | 1 + .../boost/__snapshots__/index.spec.tsx.snap | 33 ++++++++- .../__snapshots__/index.spec.tsx.snap | 1 + .../friends/__snapshots__/index.spec.tsx.snap | 71 +++++++++++++++++++ .../promote/__snapshots__/index.spec.tsx.snap | 33 ++++++++- .../__snapshots__/index.spec.tsx.snap | 1 + .../__snapshots__/index.spec.tsx.snap | 7 ++ 7 files changed, 141 insertions(+), 6 deletions(-) diff --git a/src/common/components/beneficiary-editor/index.spec.tsx b/src/common/components/beneficiary-editor/index.spec.tsx index ab1e609cfb6..e6615b98bd0 100644 --- a/src/common/components/beneficiary-editor/index.spec.tsx +++ b/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", diff --git a/src/common/components/boost/__snapshots__/index.spec.tsx.snap b/src/common/components/boost/__snapshots__/index.spec.tsx.snap index 8a39f1ffe10..60287b6b73c 100644 --- a/src/common/components/boost/__snapshots__/index.spec.tsx.snap +++ b/src/common/components/boost/__snapshots__/index.spec.tsx.snap @@ -31,8 +31,17 @@ exports[`(1) Default render 1`] = `
+
@@ -184,8 +193,17 @@ exports[`(2) Insufficient Funds 1`] = `
+
@@ -341,8 +359,17 @@ exports[`(2) With entry 1`] = `
+
diff --git a/src/common/components/entry-tip-btn/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-tip-btn/__snapshots__/index.spec.tsx.snap index 6c5b2286487..331b26644db 100644 --- a/src/common/components/entry-tip-btn/__snapshots__/index.spec.tsx.snap +++ b/src/common/components/entry-tip-btn/__snapshots__/index.spec.tsx.snap @@ -126,6 +126,7 @@ exports[`(2) Dialog 1`] = `
+
diff --git a/src/common/components/friends/__snapshots__/index.spec.tsx.snap b/src/common/components/friends/__snapshots__/index.spec.tsx.snap index 8b646b71e98..90006a3e7f3 100644 --- a/src/common/components/friends/__snapshots__/index.spec.tsx.snap +++ b/src/common/components/friends/__snapshots__/index.spec.tsx.snap @@ -4,6 +4,50 @@ exports[`(1) Render list 1`] = `
+
+
+
+
+
+
+
+
+ Filter +
+
+ + + +
+
+
+
+
+
+
+
@@ -56,6 +100,15 @@ exports[`(1) Render list 1`] = `
+
+
+ diff --git a/src/common/components/promote/__snapshots__/index.spec.tsx.snap b/src/common/components/promote/__snapshots__/index.spec.tsx.snap index 43e305e05cd..1dee740b79c 100644 --- a/src/common/components/promote/__snapshots__/index.spec.tsx.snap +++ b/src/common/components/promote/__snapshots__/index.spec.tsx.snap @@ -31,8 +31,17 @@ exports[`(1) Default render 1`] = `
+
@@ -184,8 +193,17 @@ exports[`(2) Insufficient Funds 1`] = `
+
@@ -341,8 +359,17 @@ exports[`(3) With entry 1`] = `
+
diff --git a/src/common/components/purchase/__snapshots__/index.spec.tsx.snap b/src/common/components/purchase/__snapshots__/index.spec.tsx.snap index ff01fad7f73..f4b705af7bb 100644 --- a/src/common/components/purchase/__snapshots__/index.spec.tsx.snap +++ b/src/common/components/purchase/__snapshots__/index.spec.tsx.snap @@ -212,6 +212,7 @@ exports[`(2) Should switch to transfer 1`] = `
+
diff --git a/src/common/components/transfer/__snapshots__/index.spec.tsx.snap b/src/common/components/transfer/__snapshots__/index.spec.tsx.snap index fc6a1974cd5..fb51d177a2d 100644 --- a/src/common/components/transfer/__snapshots__/index.spec.tsx.snap +++ b/src/common/components/transfer/__snapshots__/index.spec.tsx.snap @@ -105,6 +105,7 @@ exports[`(1) Transfer HIVE (1) Step 1 1`] = `
+
@@ -657,6 +658,7 @@ exports[`(2) Transfer HBD (1) Step 1 1`] = `
+
@@ -1092,6 +1094,7 @@ exports[`(3) Transfer POINT (1) Step 1 1`] = `
+
@@ -1523,6 +1526,7 @@ exports[`(4) Transfer to Savings - HBD (1) Step 1 1`] = `
+
@@ -1948,6 +1952,7 @@ exports[`(5) Withdraw Savings - HIVE (1) Step 1 1`] = `
+
@@ -2683,6 +2688,7 @@ exports[`(7) Power up (1) Step 1 1`] = `
+
@@ -3059,6 +3065,7 @@ exports[`(8) Delegate (1) Step 1 1`] = `
+
From ffa495d12926c980adf57082eb59c8c2e2ae03bc Mon Sep 17 00:00:00 2001 From: "ildar.timerbaev" Date: Tue, 8 Aug 2023 22:03:35 +0300 Subject: [PATCH 08/11] 3Speak video uploading: turn off uploading in decks --- ...deck-threads-form-toolbar-video-picker.tsx | 1 + .../deck-threads-form-toolbar.tsx | 3 +- src/common/components/video-gallery/index.tsx | 116 ++++++++++-------- .../video-gallery/video-gallery-item.tsx | 2 +- 4 files changed, 65 insertions(+), 57 deletions(-) diff --git a/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar-video-picker.tsx b/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar-video-picker.tsx index 277fb1f8473..a3304476b14 100644 --- a/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar-video-picker.tsx +++ b/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar-video-picker.tsx @@ -37,6 +37,7 @@ export function DeckThreadsFormToolbarVideoPicker({ onSelect }: Props) { )} { diff --git a/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar.tsx b/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar.tsx index 3515dc4b186..cfec7836372 100644 --- a/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar.tsx +++ b/src/common/components/decks/deck-threads-form/deck-threads-form-toolbar.tsx @@ -1,7 +1,6 @@ import React from "react"; import { DeckThreadsFormToolbarImagePicker } from "./deck-threads-form-toolbar-image-picker"; import { DeckThreadsFormEmojiPicker } from "./deck-threads-form-emoji-picker"; -import { DeckThreadsFormToolbarVideoPicker } from "./deck-threads-form-toolbar-video-picker"; interface Props { onAddImage: (url: string, name: string) => void; @@ -14,7 +13,7 @@ export const DeckThreadsFormToolbar = ({ onAddImage, onEmojiPick, onAddVideo }:
- + {/**/}
); }; diff --git a/src/common/components/video-gallery/index.tsx b/src/common/components/video-gallery/index.tsx index 9fc96ffb9fd..592e339feea 100644 --- a/src/common/components/video-gallery/index.tsx +++ b/src/common/components/video-gallery/index.tsx @@ -12,9 +12,10 @@ import { useMappedStore } from "../../store/use-mapped-store"; interface Props { showGallery: boolean; setShowGallery: React.Dispatch>; - insertText: (before: string, after?: string) => HTMLElement; + insertText: (before: string, after?: string) => any; setVideoEncoderBeneficiary?: (video: any) => void; toggleNsfwC?: () => void; + preFilter?: string; } const VideoGallery = ({ @@ -22,16 +23,19 @@ const VideoGallery = ({ setShowGallery, insertText, setVideoEncoderBeneficiary, - toggleNsfwC + toggleNsfwC, + preFilter }: Props) => { const { activeUser } = useMappedStore(); const [label, setLabel] = useState("All"); - const [filterStatus, setFilterStatus] = useState("all"); + const [filterStatus, setFilterStatus] = useState( + preFilter ?? "all" + ); const { data: items, isFetching, refresh } = useThreeSpeakVideo(filterStatus, showGallery); useEffect(() => { - setFilterStatus("all"); + setFilterStatus(preFilter ?? "all"); }, [activeUser]); return ( @@ -48,61 +52,65 @@ const VideoGallery = ({
- {_t("video-gallery.all")}, - onClick: () => { - setLabel(_t("video-gallery.all")); - setFilterStatus("all"); - } - }, - { - label: {_t("video-gallery.published")}, - onClick: () => { - setLabel(_t("video-gallery.published")); - setFilterStatus("published"); - } - }, - { - label: {_t("video-gallery.encoding")}, - onClick: () => { - const encoding = "encoding_ipfs" || "encoding_preparing"; - setLabel(_t("video-gallery.encoding")); - setFilterStatus(encoding); - } - }, - { - label: {_t("video-gallery.encoded")}, - onClick: () => { - setLabel(_t("video-gallery.encoded")); - setFilterStatus("publish_manual"); - } - }, - { - label: {_t("video-gallery.failed")}, - onClick: () => { - setLabel(_t("video-gallery.failed")); - setFilterStatus("encoding_failed"); - } - }, - { - label: {_t("video-gallery.status-deleted")}, - onClick: () => { - setLabel(_t("video-gallery.status-deleted")); - setFilterStatus("deleted"); + {!preFilter ? ( + {_t("video-gallery.all")}, + onClick: () => { + setLabel(_t("video-gallery.all")); + setFilterStatus("all"); + } + }, + { + label: {_t("video-gallery.published")}, + onClick: () => { + setLabel(_t("video-gallery.published")); + setFilterStatus("published"); + } + }, + { + label: {_t("video-gallery.encoding")}, + onClick: () => { + const encoding = "encoding_ipfs" || "encoding_preparing"; + setLabel(_t("video-gallery.encoding")); + setFilterStatus(encoding); + } + }, + { + label: {_t("video-gallery.encoded")}, + onClick: () => { + setLabel(_t("video-gallery.encoded")); + setFilterStatus("publish_manual"); + } + }, + { + label: {_t("video-gallery.failed")}, + onClick: () => { + setLabel(_t("video-gallery.failed")); + setFilterStatus("encoding_failed"); + } + }, + { + label: {_t("video-gallery.status-deleted")}, + onClick: () => { + setLabel(_t("video-gallery.status-deleted")); + setFilterStatus("deleted"); + } } - } - ]} - /> + ]} + /> + ) : ( + <> + )}