From e0060f40a9e8e54078da5a842fe37c17c2cb550a Mon Sep 17 00:00:00 2001 From: WaDadidou Date: Wed, 13 Sep 2023 16:55:07 +0200 Subject: [PATCH] feat: Video player (fixes from feat/video-player branch) --- networks.json | 2 +- .../fileUploader/FileUploader.type.ts | 3 +- .../fileUploader/FileUploader.web.tsx | 17 +- .../components/fileUploader/formatFile.ts | 1 - .../videoPlayer/DetailAlbumMenu.tsx | 115 ++- .../components/videoPlayer/MoreVideoCard.tsx | 129 ++-- .../components/videoPlayer/MyVideoMenu.tsx | 191 +++-- .../components/videoPlayer/TrackHoverMenu.tsx | 164 ++-- .../videoPlayer/TrackImageHover.tsx | 34 +- .../videoPlayer/UploadVideoModal.tsx | 714 ++++++++---------- .../components/videoPlayer/VideoPlayer.tsx | 81 +- .../videoPlayer/VideoPlayerCard.tsx | 77 +- .../videoPlayer/VideoPlayerSeekBar.tsx | 133 ++-- .../components/videoPlayer/VideoPlayerTab.tsx | 103 ++- packages/networks/teritori-testnet/index.ts | 2 +- .../VideoPlayer/VideoPlayerHomeContent.tsx | 107 ++- .../VideoPlayerMyLibraryContent.tsx | 133 ++-- .../screens/VideoPlayer/VideoPlayerScreen.tsx | 59 +- .../screens/VideoPlayer/VideoShowScreen.tsx | 507 ++++--------- packages/utils/ipfs.ts | 18 +- 20 files changed, 1026 insertions(+), 1564 deletions(-) diff --git a/networks.json b/networks.json index e99a656909..20bc1e8a53 100644 --- a/networks.json +++ b/networks.json @@ -218,7 +218,7 @@ "daoVotingCw4CodeId": 109, "daoFactoryContractAddress": "tori1r29chp8ufwgx9u3wr4sfk050aardhkzwve7nht6y06gvlaqutr3qt83z6r", "coreDAOAddress": "tori1dy5h9q9zue4swxe9mzracm8gudp0fcf2ncllch6pfq9d0fq0ftgq546063", - "videoContractAddress": "tori1e4xxwwlpxjpsnrjk4tax7qqf5wepvrqry2yccpkrqh67uurn4s7sk3qr7a" + "videoContractAddress": "tori1m95r73qkq9amntsmr33uz549jdc8284pl0xfqd7mp46c5y8s6ljq7z4q7z" }, { "id": "cosmos-hub-theta", diff --git a/packages/components/fileUploader/FileUploader.type.ts b/packages/components/fileUploader/FileUploader.type.ts index 6f028c0fef..e0d6bb321c 100644 --- a/packages/components/fileUploader/FileUploader.type.ts +++ b/packages/components/fileUploader/FileUploader.type.ts @@ -1,4 +1,4 @@ -import React from "react"; +import React, { Dispatch, SetStateAction } from "react"; import { StyleProp, ViewStyle } from "react-native"; import { LocalFileData } from "../../utils/types/files"; @@ -13,4 +13,5 @@ export interface FileUploaderProps { mimeTypes?: string[]; children?: ({ onPress }: { onPress: () => void }) => React.ReactNode; maxUpload?: number; + setIsLoading?: Dispatch>; } diff --git a/packages/components/fileUploader/FileUploader.web.tsx b/packages/components/fileUploader/FileUploader.web.tsx index da2f093d45..91babd76e3 100644 --- a/packages/components/fileUploader/FileUploader.web.tsx +++ b/packages/components/fileUploader/FileUploader.web.tsx @@ -33,6 +33,7 @@ export const FileUploader: FC = ({ maxUpload, isImageCover, fileHeight = 256, + setIsLoading, }) => { const { setToastError } = useFeedbacks(); const hiddenFileInput = useRef(null); @@ -71,28 +72,32 @@ export const FileUploader: FC = ({ onUpload(formattedFiles); }; - const handleChange = (event: SyntheticEvent) => { + const handleChange = async (event: SyntheticEvent) => { + setIsLoading?.(true); const targetEvent = event.target as HTMLInputElement; + if (targetEvent.files && targetEvent.files[0]) { - handleFiles(targetEvent?.files as unknown as File[]); + await handleFiles(targetEvent?.files as unknown as File[]); } + setIsLoading?.(false); }; const handleClick = () => { hiddenFileInput?.current?.click?.(); }; - const dropHandler = (ev: any) => { + const dropHandler = async (ev: any) => { + setIsLoading?.(true); ev.preventDefault(); - if (ev.dataTransfer.items) { const files = [...ev.dataTransfer.items] .filter((item: any) => item.kind === "file") .map((item: any) => item.getAsFile()); - handleFiles(files); + await handleFiles(files); } else { - handleFiles(ev.dataTransfer.files); + await handleFiles(ev.dataTransfer.files); } + setIsLoading?.(false); }; const dragOverHandler = (ev: SyntheticEvent) => { diff --git a/packages/components/fileUploader/formatFile.ts b/packages/components/fileUploader/formatFile.ts index cdddc3dd07..46aa5d038b 100644 --- a/packages/components/fileUploader/formatFile.ts +++ b/packages/components/fileUploader/formatFile.ts @@ -18,7 +18,6 @@ export const formatFile = async (file: File): Promise => { } else if (IMAGE_MIME_TYPES.includes(file.type)) { fileType = "image"; } - console.log(file.path, URL.createObjectURL(file)); return { file, fileName: file.name, diff --git a/packages/components/videoPlayer/DetailAlbumMenu.tsx b/packages/components/videoPlayer/DetailAlbumMenu.tsx index 4f903357bb..9d4bd6f6e7 100644 --- a/packages/components/videoPlayer/DetailAlbumMenu.tsx +++ b/packages/components/videoPlayer/DetailAlbumMenu.tsx @@ -1,106 +1,77 @@ import React from "react"; -import { View, StyleSheet } from "react-native"; +import { View, ViewStyle, TextStyle } from "react-native"; import { HoverView } from "./HoverView"; import Link from "../../../assets/player/link.svg"; -import { neutralA3, neutral33, secondaryColor } from "../../utils/style/colors"; +import { neutralA3, neutral33 } from "../../utils/style/colors"; import { fontSemibold13 } from "../../utils/style/fonts"; import { layout } from "../../utils/style/layout"; import { BrandText } from "../BrandText"; import { SVG } from "../SVG"; +import { SpacerRow } from "../spacer"; interface DetailAlbumMenuProps { id: string; } +const buttonHeight = 36; export const DetailAlbumMenu: React.FC = ({ id }) => { - const shareMenuWidth = 188; - const lineHeight = 18; - const buttonHeight = 36; - const handleCopyLinkTrack = () => { window.navigator.clipboard.writeText( `${window.location.origin}/music-player/album/${id}` ); }; - const styles = StyleSheet.create({ - menuContainer: { - borderRadius: layout.spacing_x1_5, - position: "absolute", - right: 0, - bottom: buttonHeight + layout.spacing_x0_5, - backgroundColor: "rgba(41, 41, 41, 1)", - padding: layout.spacing_x1_5, - flexDirection: "column", - gap: layout.spacing_x0_75, - zIndex: 999, - }, - unitBoxNormal: { - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - padding: layout.spacing_x0_75, - borderRadius: layout.spacing_x0_75, - }, - unitBoxHovered: { - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - padding: layout.spacing_x0_75, - backgroundColor: neutral33, - borderRadius: layout.spacing_x0_75, - }, - oneLine: { - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x1, - }, - text: StyleSheet.flatten([ - fontSemibold13, - { - color: neutralA3, - }, - ]), - divideLine: { - height: 1, - opacity: 0.12, - backgroundColor: secondaryColor, - }, - shareMenuContainer: { - borderRadius: layout.spacing_x1_5, - position: "absolute", - left: -(layout.spacing_x1_5 + shareMenuWidth), - bottom: -( - layout.spacing_x1_5 + - lineHeight + - layout.spacing_x1_5 + - 1 * layout.spacing_x0_75 - ), - backgroundColor: "rgba(41, 41, 41, 1)", - padding: layout.spacing_x1_5, - flexDirection: "column", - gap: layout.spacing_x0_75, - width: shareMenuWidth, - }, - }); - return ( - + handleCopyLinkTrack()} > - + - Copy link to the track + + Copy link to the track ); }; + +const menuContainerStyle: ViewStyle = { + borderRadius: layout.spacing_x1_5, + position: "absolute", + right: 0, + bottom: buttonHeight + layout.spacing_x0_5, + backgroundColor: "rgba(41, 41, 41, 1)", + padding: layout.spacing_x1_5, + zIndex: 999, +}; +const unitBoxNormalStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + padding: layout.spacing_x0_75, + borderRadius: layout.spacing_x0_75, +}; +const unitBoxHoveredStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + padding: layout.spacing_x0_75, + backgroundColor: neutral33, + borderRadius: layout.spacing_x0_75, +}; +const oneLineStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", +}; +const text: TextStyle = { + ...fontSemibold13, + color: neutralA3, +}; diff --git a/packages/components/videoPlayer/MoreVideoCard.tsx b/packages/components/videoPlayer/MoreVideoCard.tsx index c727ba78fb..de8530e2fc 100644 --- a/packages/components/videoPlayer/MoreVideoCard.tsx +++ b/packages/components/videoPlayer/MoreVideoCard.tsx @@ -1,10 +1,10 @@ import React from "react"; -import { View, StyleSheet, Image } from "react-native"; +import { View, Image, ViewStyle, TextStyle, ImageStyle } from "react-native"; import { Pressable } from "react-native-hoverable"; import { ipfsURLToHTTPURL } from "../../utils/ipfs"; import { useAppNavigation } from "../../utils/navigation"; -import { neutral77, primaryColor } from "../../utils/style/colors"; +import { neutral77 } from "../../utils/style/colors"; import { fontSemibold14, fontMedium14 } from "../../utils/style/fonts"; import { layout } from "../../utils/style/layout"; import { VideoInfoWithMeta } from "../../utils/types/video"; @@ -12,79 +12,15 @@ import { durationToString } from "../../utils/videoPlayer"; import { BrandText } from "../BrandText"; import { DateTime } from "../socialFeed/SocialThread/DateTime"; +const unitWidth = 300; export const MoreVideoPlayerCard: React.FC<{ item: VideoInfoWithMeta; }> = ({ item }) => { - const unitWidth = 300; const navigation = useAppNavigation(); - const styles = StyleSheet.create({ - unitCard: { - width: unitWidth, - }, - contentVideo: { - backgroundColor: "gray", - borderRadius: 10, - aspectRatio: 1.5, - }, - contentTitle: StyleSheet.flatten([ - fontSemibold14, - { - marginVertical: layout.spacing_x0_5, - }, - ]), - contentDescription: StyleSheet.flatten([ - fontMedium14, - { - color: neutral77, - }, - ]), - contentDate: StyleSheet.flatten([ - fontMedium14, - { - color: neutral77, - marginLeft: "1em", - }, - ]), - imgBox: { - position: "relative", - }, - videoDuration: { - position: "absolute", - left: 10, - top: 10, - backgroundColor: "gray", - color: "white", - borderRadius: layout.spacing_x1, - }, - contentDuration: StyleSheet.flatten([ - fontSemibold14, - { - padding: layout.spacing_x0_5, - }, - ]), - contentName: StyleSheet.flatten([ - fontSemibold14, - { - color: primaryColor, - }, - ]), - contentImg: { - width: "100%", - borderRadius: layout.spacing_x1, - aspectRatio: 1.7, - }, - titleRow: { - marginLeft: "0.5em", - display: "flex", - flexDirection: "row", - alignItems: "center", - }, - }); - return ( - - + + { navigation.navigate("VideoShow", { id: item.identifier }); @@ -93,20 +29,20 @@ export const MoreVideoPlayerCard: React.FC<{ - - + + {durationToString(item.videoMetaInfo.duration)} - + {item.videoMetaInfo.title} - - + + {item.viewCount} views {/* A dot separator */} @@ -120,8 +56,49 @@ export const MoreVideoPlayerCard: React.FC<{ }} /> {/*---- Date */} - + ); }; + +const unitCardStyle: ViewStyle = { + width: unitWidth, +}; +const contentTitleStyle: TextStyle = { + ...fontSemibold14, + + marginVertical: layout.spacing_x0_5, +}; +const contentDescriptionStyle: TextStyle = { + ...fontMedium14, + color: neutral77, +}; +const imgBoxStyle: ViewStyle = { + position: "relative", +}; +const videoDurationStyle: ViewStyle = { + position: "absolute", + left: 10, + top: 10, + backgroundColor: "gray", + borderRadius: layout.spacing_x1, +}; +const contentDurationStyle: TextStyle = { + ...fontSemibold14, + padding: layout.spacing_x0_5, +}; +const contentImgStyle: ImageStyle = { + width: "100%", + borderRadius: layout.spacing_x1, + aspectRatio: 1.7, +}; +const titleRowStyle: ViewStyle = { + marginLeft: "0.5em", + display: "flex", + flexDirection: "row", + alignItems: "center", +}; diff --git a/packages/components/videoPlayer/MyVideoMenu.tsx b/packages/components/videoPlayer/MyVideoMenu.tsx index 1f737f682a..66a6f6ec2b 100644 --- a/packages/components/videoPlayer/MyVideoMenu.tsx +++ b/packages/components/videoPlayer/MyVideoMenu.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { View, StyleSheet } from "react-native"; +import { View, ViewStyle, TextStyle } from "react-native"; import { HoverView } from "./HoverView"; import Code from "../../../assets/icons/player/code.svg"; @@ -17,13 +17,14 @@ import { layout } from "../../utils/style/layout"; import { VideoInfoWithMeta } from "../../utils/types/video"; import { BrandText } from "../BrandText"; import { SVG } from "../SVG"; +import { SpacerColumn, SpacerRow } from "../spacer"; interface MyVideoMenuProps { videoInfo: VideoInfoWithMeta; } +const shareMenuWidth = 188; +const lineHeight = 18; export const MyVideoMenu: React.FC = ({ videoInfo }) => { - const shareMenuWidth = 188; - const lineHeight = 18; const selectedNetworkId = useSelectedNetworkId(); const wallet = useSelectedWallet(); const [openShareMenu, setOpenShareMenu] = useState(false); @@ -54,118 +55,42 @@ export const MyVideoMenu: React.FC = ({ videoInfo }) => { }); } }; - const styles = StyleSheet.create({ - hoverBox: { - position: "absolute", - width: "100%", - height: "100%", - left: 0, - top: 0, - backgroundColor: "rgba(0,0,0,0.5)", - padding: layout.spacing_x1_5, - flexDirection: "row", - justifyContent: "space-between", - alignItems: "flex-end", - zIndex: 999, - }, - menuContainer: { - borderRadius: layout.spacing_x1_5, - position: "absolute", - right: layout.spacing_x1_5, - bottom: 44, - backgroundColor: "rgba(41, 41, 41, 1)", - padding: layout.spacing_x1_5, - flexDirection: "column", - gap: layout.spacing_x0_75, - }, - unitBoxNormal: { - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - padding: layout.spacing_x0_75, - borderRadius: layout.spacing_x0_75, - }, - unitBoxHovered: { - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - padding: layout.spacing_x0_75, - backgroundColor: neutral33, - borderRadius: layout.spacing_x0_75, - }, - oneLine: { - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x1, - }, - normalText: StyleSheet.flatten([ - fontSemibold13, - { - color: neutralA3, - }, - ]), - deleteText: StyleSheet.flatten([ - fontSemibold13, - { - color: "#F46F76", - }, - ]), - divideLine: { - height: 1, - opacity: 0.12, - backgroundColor: secondaryColor, - }, - shareMenuContainer: { - borderRadius: layout.spacing_x1_5, - position: "absolute", - left: -(layout.spacing_x1_5 + shareMenuWidth), - bottom: -( - layout.spacing_x1_5 + - lineHeight + - layout.spacing_x1_5 + - 2 * layout.spacing_x0_75 - ), - backgroundColor: "rgba(41, 41, 41, 1)", - padding: layout.spacing_x1_5, - flexDirection: "column", - gap: layout.spacing_x0_75, - width: shareMenuWidth, - }, - }); return ( - + { deleteMusicAlbum(); }} > - + - Delete album + + Delete album - - - + + + setOpenShareMenu((value) => !value)} - hoverStyle={styles.unitBoxHovered} + hoverStyle={unitBoxHoveredStyle} > - + - Share + + Share = ({ videoInfo }) => { /> {openShareMenu && ( - + - + - + + Copy link to the track + - + - - Copy widget code - + + Copy widget code @@ -211,3 +137,60 @@ export const MyVideoMenu: React.FC = ({ videoInfo }) => { ); }; + +const menuContainerStyle: ViewStyle = { + borderRadius: layout.spacing_x1_5, + position: "absolute", + right: layout.spacing_x1_5, + bottom: 44, + backgroundColor: "rgba(41, 41, 41, 1)", + padding: layout.spacing_x1_5, +}; +const unitBoxNormalStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + padding: layout.spacing_x0_75, + borderRadius: layout.spacing_x0_75, +}; +const unitBoxHoveredStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + padding: layout.spacing_x0_75, + backgroundColor: neutral33, + borderRadius: layout.spacing_x0_75, +}; +const oneLineStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", +}; +const normalTextStyle: TextStyle = { + ...fontSemibold13, + + color: neutralA3, +}; +const deleteTextStyle: TextStyle = { + ...fontSemibold13, + + color: "#F46F76", +}; +const divideLineStyle: ViewStyle = { + height: 1, + opacity: 0.12, + backgroundColor: secondaryColor, +}; +const shareMenuContainerStyle: ViewStyle = { + borderRadius: layout.spacing_x1_5, + position: "absolute", + left: -(layout.spacing_x1_5 + shareMenuWidth), + bottom: -( + layout.spacing_x1_5 + + lineHeight + + layout.spacing_x1_5 + + 2 * layout.spacing_x0_75 + ), + backgroundColor: "rgba(41, 41, 41, 1)", + padding: layout.spacing_x1_5, + width: shareMenuWidth, +}; diff --git a/packages/components/videoPlayer/TrackHoverMenu.tsx b/packages/components/videoPlayer/TrackHoverMenu.tsx index 9c04e4f51d..c874698bfa 100644 --- a/packages/components/videoPlayer/TrackHoverMenu.tsx +++ b/packages/components/videoPlayer/TrackHoverMenu.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { View, StyleSheet } from "react-native"; +import { View, ViewStyle, TextStyle } from "react-native"; import { HoverView } from "./HoverView"; import AddLibrary from "../../../assets/icons/player/add-library.svg"; @@ -15,6 +15,7 @@ import { VideoInfoWithMeta } from "../../utils/types/video"; import { BrandText } from "../BrandText"; import { SVG } from "../SVG"; import { TipModal } from "../socialFeed/SocialActions/TipModal"; +import { SpacerColumn, SpacerRow } from "../spacer"; interface TrackHoverMenuProps { videoInfo: VideoInfoWithMeta; @@ -29,9 +30,6 @@ export const TrackHoverMenu: React.FC = ({ const selectedNetworkId = useSelectedNetworkId(); const wallet = useSelectedWallet(); - const shareMenuWidth = 188; - const lineHeight = 18; - const [tipModalVisible, setTipModalVisible] = useState(false); const { setToastError, setToastSuccess } = useFeedbacks(); @@ -96,151 +94,84 @@ export const TrackHoverMenu: React.FC = ({ setTipModalVisible(true); }; - const styles = StyleSheet.create({ - hoverBox: { - position: "absolute", - width: "100%", - height: "100%", - left: 0, - top: 0, - backgroundColor: "rgba(0,0,0,0.5)", - padding: layout.spacing_x1_5, - flexDirection: "row", - justifyContent: "space-between", - alignItems: "flex-end", - zIndex: 999, - }, - menuContainer: { - borderRadius: layout.spacing_x1_5, - position: "absolute", - right: layout.spacing_x1_5, - bottom: 44, - backgroundColor: "rgba(41, 41, 41, 1)", - padding: layout.spacing_x1_5, - flexDirection: "column", - gap: layout.spacing_x0_75, - }, - unitBoxNormal: { - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - padding: layout.spacing_x0_75, - borderRadius: layout.spacing_x0_75, - }, - unitBoxHovered: { - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - padding: layout.spacing_x0_75, - backgroundColor: neutral33, - borderRadius: layout.spacing_x0_75, - }, - oneLine: { - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x1, - }, - text: StyleSheet.flatten([ - fontSemibold13, - { - color: neutralA3, - }, - ]), - divideLine: { - height: 1, - opacity: 0.12, - backgroundColor: secondaryColor, - }, - shareMenuContainer: { - borderRadius: layout.spacing_x1_5, - position: "absolute", - left: -(layout.spacing_x1_5 + shareMenuWidth), - bottom: -( - layout.spacing_x1_5 + - lineHeight + - layout.spacing_x1_5 + - 2 * layout.spacing_x0_75 - ), - backgroundColor: "rgba(41, 41, 41, 1)", - padding: layout.spacing_x1_5, - flexDirection: "column", - gap: layout.spacing_x0_75, - width: shareMenuWidth, - }, - }); - return ( - + {wallet && wallet.address !== videoInfo.createdBy && !hasLibrary && ( { addToLibrary(); }} > - + - Add to library + + Add to library )} {wallet && wallet.address !== videoInfo.createdBy && hasLibrary && ( { removeFromLibrary(); }} > - + - Remove From library + + Remove From library )} - - - + + + { handleTip(); }} > - + - Tip this track + + Tip this track - + + + { copyLinkTrack(); }} > - + - Copy link to the track + + Copy link to the track = ({ ); }; + +const menuContainerStyle: ViewStyle = { + borderRadius: layout.spacing_x1_5, + position: "absolute", + right: layout.spacing_x1_5, + bottom: 44, + backgroundColor: "rgba(41, 41, 41, 1)", + padding: layout.spacing_x1_5, +}; +const unitBoxNormalStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + padding: layout.spacing_x0_75, + borderRadius: layout.spacing_x0_75, +}; +const unitBoxHoveredStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + padding: layout.spacing_x0_75, + backgroundColor: neutral33, + borderRadius: layout.spacing_x0_75, +}; +const oneLineStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", +}; +const textStyle: TextStyle = { + ...fontSemibold13, + color: neutralA3, +}; +const divideLineStyle: ViewStyle = { + height: 1, + opacity: 0.12, + backgroundColor: secondaryColor, +}; diff --git a/packages/components/videoPlayer/TrackImageHover.tsx b/packages/components/videoPlayer/TrackImageHover.tsx index b2c08dfcd8..9e7811c5b6 100644 --- a/packages/components/videoPlayer/TrackImageHover.tsx +++ b/packages/components/videoPlayer/TrackImageHover.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { StyleSheet, Pressable } from "react-native"; +import { Pressable, ViewStyle } from "react-native"; import { MyVideoMenu } from "./MyVideoMenu"; import { TrackHoverMenu } from "./TrackHoverMenu"; @@ -28,25 +28,9 @@ export const TrackImageHover: React.FC<{ const [openMenu, setOpenMenu] = useState(false); const userId = getUserId(selectedNetworkId, wallet?.address); - const styles = StyleSheet.create({ - hoverBox: { - position: "absolute", - width: "100%", - height: "100%", - left: 0, - top: 0, - backgroundColor: "rgba(0,0,0,0.5)", - padding: layout.spacing_x1_5, - flexDirection: "row", - justifyContent: "space-between", - alignItems: "flex-end", - borderRadius: 10, - }, - }); - return ( { navigation.navigate("VideoShow", { id: videoInfo.identifier }); }} @@ -106,3 +90,17 @@ export const TrackImageHover: React.FC<{ ); }; + +const hoverBoxStyle: ViewStyle = { + position: "absolute", + width: "100%", + height: "100%", + left: 0, + top: 0, + backgroundColor: "rgba(0,0,0,0.5)", + padding: layout.spacing_x1_5, + flexDirection: "row", + justifyContent: "space-between", + alignItems: "flex-end", + borderRadius: 10, +}; diff --git a/packages/components/videoPlayer/UploadVideoModal.tsx b/packages/components/videoPlayer/UploadVideoModal.tsx index 9402f5a622..eba21e24d0 100644 --- a/packages/components/videoPlayer/UploadVideoModal.tsx +++ b/packages/components/videoPlayer/UploadVideoModal.tsx @@ -1,62 +1,178 @@ -import React, { - createRef, - useState, - Dispatch, - SetStateAction, - useEffect, -} from "react"; -import { View, Pressable, StyleSheet, Image, TextInput } from "react-native"; +import { ResizeMode, Video } from "expo-av"; +import React, { useState } from "react"; +import { + Image, + ImageStyle, + TextStyle, + TouchableOpacity, + View, + ViewStyle, +} from "react-native"; import { useSelector } from "react-redux"; import { v4 as uuidv4 } from "uuid"; -import CoverImg from "../../../assets/icons/player/cover-img.png"; +import Add from "../../../assets/icons/player/add-primary.svg"; +import DefaultVideoImage from "../../../assets/icons/player/cover-img.png"; import Img from "../../../assets/icons/player/img.svg"; -import { pinataPinFileToIPFS } from "../../candymachine/pinata-upload"; import { signingVideoPlayerClient } from "../../client-creators/videoplayerClient"; +import ModalBase from "../../components/modals/ModalBase"; import { useFeedbacks } from "../../context/FeedbacksProvider"; import { useSelectedNetworkId } from "../../hooks/useSelectedNetwork"; import useSelectedWallet from "../../hooks/useSelectedWallet"; import { getUserId } from "../../networks"; import { selectNFTStorageAPI } from "../../store/slices/settings"; import { defaultSocialFeedFee } from "../../utils/fee"; -import { generateIpfsKey, ipfsURLToHTTPURL } from "../../utils/ipfs"; -import { VIDEO_MIME_TYPES } from "../../utils/mime"; import { - neutral17, + generateIpfsKey, + ipfsURLToHTTPURL, + uploadFileToIPFS, +} from "../../utils/ipfs"; +import { IMAGE_MIME_TYPES, VIDEO_MIME_TYPES } from "../../utils/mime"; +import { + neutral30, neutral33, neutral77, primaryColor, - secondaryColor, - neutralA3, } from "../../utils/style/colors"; import { fontSemibold14 } from "../../utils/style/fonts"; import { layout } from "../../utils/style/layout"; import { LocalFileData } from "../../utils/types/files"; -import { VideoMetaInfo } from "../../utils/types/video"; +import { VideoInfoWithMeta } from "../../utils/types/video"; import { BrandText } from "../BrandText"; +import { DeleteButton } from "../FilePreview/DeleteButton"; import { SVG } from "../SVG"; import { PrimaryButton } from "../buttons/PrimaryButton"; import { FileUploader } from "../fileUploader"; -import ModalBase from "../modals/ModalBase"; +import { TextInputCustom } from "../inputs/TextInputCustom"; +import { SpacerColumn, SpacerRow } from "../spacer"; -interface UploadVideoModalProps { +interface UploadAlbumModalProps { onClose: () => void; isVisible: boolean; } -const modalWidth = 564; +const DEFAULT_VIDEO_INFO = { + identifier: "", + createdBy: "", + createdAt: 0, + viewCount: 0, + like: 0, + dislike: 0, + viewLastTimestamp: 0, + videoMetaInfo: { + title: "", + description: "", + url: "", + image: "", + duration: 0, + }, +}; -export const UploadVideoModal: React.FC = ({ +export const MODAL_WIDTH = 564; +export const UploadVideoModal: React.FC = ({ onClose, isVisible, }) => { const { setToastError, setToastSuccess } = useFeedbacks(); const selectedNetworkId = useSelectedNetworkId(); const wallet = useSelectedWallet(); - const [step, setStep] = useState(0); - const [videoFile, setVideoFile] = useState(null); - const uploadVideo = async () => { - if (!videoFile) return; + const [isLoading, setIsLoading] = useState(false); + const [isUploading, setIsUploading] = useState(false); + const selectedWallet = useSelectedWallet(); + const userId = getUserId(selectedNetworkId, selectedWallet?.address); + const userIPFSKey = useSelector(selectNFTStorageAPI); + const [videoInfo, setVideoInfo] = + useState(DEFAULT_VIDEO_INFO); + + const onUploadVideoImage = async (files: LocalFileData[]) => { + setIsUploading(true); + const uploadedFile = await uploadFileToIPFS({ + userKey: userIPFSKey, + file: files[0], + networkId: selectedNetworkId, + userId, + }); + if (!uploadedFile?.url) { + console.error("upload file err : Fail to pin to IPFS"); + setToastError({ + title: "File upload failed", + message: "Fail to pin to IPFS, please try to Publish again", + }); + return; + } + setVideoInfo({ + ...videoInfo, + videoMetaInfo: { ...videoInfo.videoMetaInfo, image: uploadedFile.url }, + }); + setIsUploading(false); + }; + + const onUploadVideoFile = async (files: LocalFileData[]) => { + setIsUploading(true); + const pinataJWTKey = + userIPFSKey || (await generateIpfsKey(selectedNetworkId, userId)); + if (!pinataJWTKey) { + console.error("upload file err : No Pinata JWT"); + setToastError({ + title: "File upload failed", + message: "No Pinata JWT", + }); + return; + } + const uploadedFile = await uploadFileToIPFS({ + userKey: userIPFSKey, + file: files[0], + networkId: selectedNetworkId, + userId, + }); + if (!uploadedFile?.url) { + console.error("upload file err : Fail to pin to IPFS"); + setToastError({ + title: "File upload failed", + message: "Fail to pin to IPFS, please try to Publish again", + }); + return; + } + setVideoInfo((videoInfo) => { + return { + ...videoInfo, + videoMetaInfo: { + ...videoInfo.videoMetaInfo, + url: uploadedFile.url, + duration: 0, //TODO + }, + }; + }); + setIsUploading(false); + }; + + const handleVideoNameTextChange = (text: string) => { + setVideoInfo({ + ...videoInfo, + videoMetaInfo: { + ...videoInfo.videoMetaInfo, + title: text.trim(), + }, + }); + }; + + const handleVideoDescriptionTextChange = (text: string) => { + setVideoInfo({ + ...videoInfo, + videoMetaInfo: { + ...videoInfo.videoMetaInfo, + description: text.trim(), + }, + }); + }; + + const handleRemoveVideo = () => { + setVideoInfo(DEFAULT_VIDEO_INFO); + }; + + const onPressUpload = async () => { + setIsLoading(true); + if (!wallet?.connected || !wallet.address) { return; } @@ -64,12 +180,11 @@ export const UploadVideoModal: React.FC = ({ networkId: selectedNetworkId, walletAddress: wallet.address, }); - try { const res = await client.createVideo( { identifier: uuidv4(), - metadata: JSON.stringify(videoFile), + metadata: JSON.stringify(videoInfo.videoMetaInfo), }, defaultSocialFeedFee, "" @@ -87,413 +202,204 @@ export const UploadVideoModal: React.FC = ({ message: `Error: ${err}`, }); } - setStep(0); + setIsLoading(false); onClose(); }; return ( { - setStep(0); - onClose(); - }} - width={modalWidth} + onClose={onClose} + width={MODAL_WIDTH} > - {step === 0 && ( - - )} - {step === 1 && ( - - )} - - ); -}; - -const Step1Component: React.FC<{ - setStep: Dispatch>; - setUploadVideo: Dispatch>; -}> = ({ setStep, setUploadVideo }) => { - const selectedNetworkId = useSelectedNetworkId(); - const selectedWallet = useSelectedWallet(); - const userId = getUserId(selectedNetworkId, selectedWallet?.address); - const userIPFSKey = useSelector(selectNFTStorageAPI); - const [uploadFile, setUploadFile] = useState(null); - const [canContinue, setCanContinue] = useState(false); - const [isUploading, setIsUploading] = useState(false); - - const paddingHorizontal = layout.spacing_x2_5; - const styles = StyleSheet.create({ - contentContainer: { - paddingBottom: layout.spacing_x2_5, - }, - uploadBox: { - width: "100%", - flexDirection: "row", - alignItems: "center", - justifyContent: "center", - gap: layout.spacing_x1, - borderStyle: "dotted", - borderWidth: 1, - backgroundColor: "rgba(22, 187, 255, 0.1)", - paddingVertical: layout.spacing_x4, - borderColor: "#16BBFF", - borderRadius: layout.spacing_x1_5, - }, - buttonContainer: { - marginTop: layout.spacing_x2, - flexDirection: "row", - alignItems: "center", - justifyContent: "center", - }, - buttonText: StyleSheet.flatten([ - fontSemibold14, - { - color: primaryColor, - paddingHorizontal: layout.spacing_x1_5, - paddingVertical: layout.spacing_x1, - marginBottom: layout.spacing_x2_5, - borderRadius: layout.spacing_x1, - backgroundColor: "#2B2B33", - }, - ]), - divideLine: { - height: 1, - width: modalWidth - 2, - marginLeft: -paddingHorizontal, - backgroundColor: neutral33, - }, - footer: { - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - paddingHorizontal: layout.spacing_x2_5, - paddingVertical: layout.spacing_x2, - }, - footerText: StyleSheet.flatten([ - fontSemibold14, - { - color: neutral77, - }, - ]), - }); - - useEffect(() => { - setCanContinue(!!uploadFile); - }, [uploadFile]); - - const uploadVideoFile = async (files: LocalFileData[]) => { - if (files.length === 0) return; - const file = files[0]; - const url = URL.createObjectURL(file.file); - const video = document.createElement("video"); - video.preload = "metadata"; - const pinataJWTKey = - userIPFSKey || (await generateIpfsKey(selectedNetworkId, userId)); - video.addEventListener("loadedmetadata", async () => { - window.URL.revokeObjectURL(video.src); - if (!pinataJWTKey) { - return; - } - setIsUploading(true); - const ipfsHash_data = await pinataPinFileToIPFS({ - file, - pinataJWTKey, - }); - const duration = video.duration; - if (ipfsHash_data.IpfsHash! !== "") { - setUploadFile({ - title: file.file.name, - description: "", - url: ipfsHash_data.IpfsHash, - image: "", - duration, - }); - } - setIsUploading(false); - }); - video.src = url; - }; - - return ( - <> - - - - - - - Provide FLAC, WAV or AIFF for highest audio quality. - - { - setUploadVideo(uploadFile); - setStep(1); - }} - /> - - - ); -}; - -const Step2Component: React.FC<{ - videoFile: VideoMetaInfo; - setVideoFile: Dispatch>; - uploadVideo: () => void; -}> = ({ videoFile, setVideoFile, uploadVideo }) => { - const inputFileRef = createRef(); - const selectedNetworkId = useSelectedNetworkId(); - const selectedWallet = useSelectedWallet(); - const userId = getUserId(selectedNetworkId, selectedWallet?.address); - const userIPFSKey = useSelector(selectNFTStorageAPI); - const [isUploading, setIsUploading] = useState(false); - - const paddingHorizontal = layout.spacing_x2_5; - const imgSize = 172; - const styles = StyleSheet.create({ - buttonContainer: { - marginTop: layout.spacing_x2, - flexDirection: "row", - alignItems: "center", - justifyContent: "center", - height: 40, - borderRadius: layout.spacing_x1, - backgroundColor: "#2B2B33", - gap: layout.spacing_x1, - marginBottom: layout.spacing_x2_5, - }, - buttonText: StyleSheet.flatten([ - fontSemibold14, - { - color: primaryColor, - }, - ]), - divideLine: { - height: 1, - width: modalWidth - 2, - marginLeft: -paddingHorizontal, - backgroundColor: neutral33, - }, - footer: { - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - paddingHorizontal: layout.spacing_x2_5, - paddingVertical: layout.spacing_x2, - }, - footerText: StyleSheet.flatten([ - fontSemibold14, - { - color: neutral77, - width: "55%", - }, - ]), - songGroup: { - flexDirection: "column", - gap: layout.spacing_x1, - }, - unitBox: { - backgroundColor: neutral17, - paddingHorizontal: layout.spacing_x1_5, - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - borderRadius: layout.spacing_x1, - height: 40, - }, - oneLine: { - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x1_5, - }, - inputBox: { - flexDirection: "row", - alignItems: "flex-start", - justifyContent: "space-between", - }, - imgBox: { - position: "relative", - }, - img: { - width: imgSize, - height: imgSize, - borderRadius: layout.spacing_x1, - }, - textBox: { - width: 332, - }, - inputTitle: StyleSheet.flatten([ - fontSemibold14, - { - color: neutralA3, - marginBottom: layout.spacing_x1_5, - }, - ]), - required: StyleSheet.flatten([ - fontSemibold14, - { - color: "#FFAEAE", - paddingLeft: layout.spacing_x0_5, - }, - ]), - input: StyleSheet.flatten([ - fontSemibold14, - { - color: secondaryColor, - padding: layout.spacing_x2, - borderWidth: 1, - borderColor: neutral33, - marginBottom: layout.spacing_x2_5, - borderRadius: 10, - outlineStyle: "none", - }, - ]), - uploadImg: { - width: "100%", - position: "absolute", - left: 0, - bottom: layout.spacing_x1, - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - }, - uploadButton: { - flexDirection: "row", - alignItems: "center", - backgroundColor: "#2B2B33", - borderRadius: layout.spacing_x4, - gap: layout.spacing_x1, - paddingLeft: layout.spacing_x1, - paddingRight: layout.spacing_x1_5, - paddingVertical: layout.spacing_x1, - }, - }); - - const clickUploadImage = () => { - inputFileRef.current?.click(); - }; - - const onInputFileChange: React.ChangeEventHandler = async ( - e - ) => { - const file = e.target?.files?.[0]; - const pinataJWTKey = await generateIpfsKey(selectedNetworkId, userId); - if (file && pinataJWTKey) { - const local_file_data = { - file, - fileName: file.name, - mimeType: "", - size: 0, - url: "", - fileType: "image", - } as LocalFileData; - const pinataJWTKey = - userIPFSKey || (await generateIpfsKey(selectedNetworkId, userId)); - if (!pinataJWTKey) { - setIsUploading(false); - return; - } - const ipfsHash_data = await pinataPinFileToIPFS({ - file: local_file_data, - pinataJWTKey, - }); - - const videoImage = ipfsHash_data.IpfsHash; - setVideoFile({ ...videoFile, image: videoImage }); - } - }; - - const handleVideoNameTextChange = (text: string) => { - setVideoFile({ ...videoFile, title: text }); - }; - - const handleVideoDescriptionTextChange = (text: string) => { - setVideoFile({ ...videoFile, description: text }); - }; - - return ( - <> - - - + + - - - - upload image - + + + {({ onPress }) => ( + + + + upload image + + )} + - - - Video name* - - + - - Album Description* - - + + + - + + {videoInfo.videoMetaInfo.url ? ( + + - - + + + ) : ( + + {({ onPress }) => ( + + + + Add video + + )} + + )} + + + + Provide 2k video for highest video quality. + + + + + + + By uploading, you confirm that your sounds comply with our Terms of Use. - + ); }; + +const buttonContainerStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + height: 40, + borderRadius: layout.spacing_x1, + backgroundColor: neutral30, +}; +const buttonTextStyle: TextStyle = { + ...fontSemibold14, + + color: primaryColor, +}; +const divideLineStyle: ViewStyle = { + height: 1, + width: MODAL_WIDTH - 2, + marginLeft: -layout.spacing_x2_5, + backgroundColor: neutral33, +}; +const footerStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + paddingHorizontal: layout.spacing_x2_5, + paddingVertical: layout.spacing_x2, +}; +const footerTextStyle: TextStyle = { + ...fontSemibold14, + + color: neutral77, + width: "55%", +}; +const inputBoxStyle: ViewStyle = { + flexDirection: "row", + alignItems: "flex-start", + justifyContent: "space-between", +}; +const imgBoxStyle: ViewStyle = { + position: "relative", +}; +const imgStyle: ImageStyle = { + width: 172, + height: 172, + borderRadius: layout.spacing_x1, +}; +const textBoxStyle: ViewStyle = { + width: 332, +}; + +const uploadImgStyle: ViewStyle = { + width: "100%", + position: "absolute", + left: 0, + bottom: layout.spacing_x1, + flexDirection: "column", + alignItems: "center", + justifyContent: "center", +}; +const uploadButtonStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", + backgroundColor: "#2B2B33", + borderRadius: layout.spacing_x4, + paddingLeft: layout.spacing_x1, + paddingRight: layout.spacing_x1_5, + paddingVertical: layout.spacing_x1, +}; diff --git a/packages/components/videoPlayer/VideoPlayer.tsx b/packages/components/videoPlayer/VideoPlayer.tsx index 029157bde8..971fe36f51 100644 --- a/packages/components/videoPlayer/VideoPlayer.tsx +++ b/packages/components/videoPlayer/VideoPlayer.tsx @@ -1,79 +1,43 @@ import React, { useState } from "react"; -import { View, Pressable, StyleSheet } from "react-native"; +import { View, Pressable, ViewStyle } from "react-native"; import Avatar from "../../../assets/icons/player/avatar.svg"; import Next from "../../../assets/icons/player/next.svg"; import Pause from "../../../assets/icons/player/pause.svg"; import Play from "../../../assets/icons/player/play.svg"; -import { - neutral17, - neutral22, - neutral33, - neutral77, -} from "../../utils/style/colors"; +import { neutral17, neutral22, neutral77 } from "../../utils/style/colors"; import { fontSemibold14 } from "../../utils/style/fonts"; import { layout } from "../../utils/style/layout"; import { BrandText } from "../BrandText"; import { SVG } from "../SVG"; - +import { SpacerColumn, SpacerRow } from "../spacer"; +const componentHeight = 48; export const VideoPlayer: React.FC = () => { const [isPlay, setIsPlay] = useState(false); - const componentHeight = 48; - const styles = StyleSheet.create({ - container: { - backgroundColor: neutral17, - height: componentHeight, - width: "100%", - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - borderWidth: 1, - borderColor: neutral22, - paddingHorizontal: layout.spacing_x3, - }, - playHandleBox: { - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x3, - }, - verticalLine: { - height: layout.spacing_x2_5, - width: 1, - backgroundColor: neutral33, - }, - durationBox: { - flexDirection: "row", - alignItems: "center", - gap: 40, - }, - infoBox: { - flexDirection: "column", - gap: layout.spacing_x0_5, - justifyContent: "center", - }, - videoBox: {}, - }); const clickPlayPause = () => { setIsPlay(!isPlay); }; return ( - - + + {isPlay && } {!isPlay && } + - + - + + Song Name + Artist @@ -94,3 +58,26 @@ const StandardIcon: React.FC<{ source: any }> = ({ source }) => { ); }; + +const containerStyle: ViewStyle = { + backgroundColor: neutral17, + height: componentHeight, + width: "100%", + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + borderWidth: 1, + borderColor: neutral22, + paddingHorizontal: layout.spacing_x3, +}; +const playHandleBoxStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", +}; +const durationBoxStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", +}; +const infoBoxStyle: ViewStyle = { + justifyContent: "center", +}; diff --git a/packages/components/videoPlayer/VideoPlayerCard.tsx b/packages/components/videoPlayer/VideoPlayerCard.tsx index c1154c07c1..ea04032b9e 100644 --- a/packages/components/videoPlayer/VideoPlayerCard.tsx +++ b/packages/components/videoPlayer/VideoPlayerCard.tsx @@ -1,24 +1,24 @@ import React, { useState } from "react"; -import { View, StyleSheet, Image } from "react-native"; +import { View, Image, ViewStyle, TextStyle, ImageStyle } from "react-native"; import { Pressable } from "react-native-hoverable"; import { TrackImageHover } from "./TrackImageHover"; import { useNSUserInfo } from "../../hooks/useNSUserInfo"; import { parseUserId } from "../../networks"; import { ipfsURLToHTTPURL } from "../../utils/ipfs"; -import { neutral77, primaryColor } from "../../utils/style/colors"; -import { fontSemibold14, fontMedium14 } from "../../utils/style/fonts"; +import { primaryColor } from "../../utils/style/colors"; +import { fontSemibold14 } from "../../utils/style/fonts"; import { layout } from "../../utils/style/layout"; import { VideoInfoWithMeta } from "../../utils/types/video"; import { BrandText } from "../BrandText"; import { OmniLink } from "../OmniLink"; import { UserAvatarWithFrame } from "../images/AvatarWithFrame"; +const unitWidth = 300; export const VideoPlayerCard: React.FC<{ item: VideoInfoWithMeta; hasLibrary: boolean; }> = ({ item, hasLibrary }) => { - const unitWidth = 300; const authorNSInfo = useNSUserInfo(item.createdBy); const [, userAddress] = parseUserId(item.createdBy); const [selectedIndex, setSelectedIndex] = useState(item.identifier); @@ -27,49 +27,10 @@ export const VideoPlayerCard: React.FC<{ ? authorNSInfo?.metadata?.tokenId : userAddress; - const styles = StyleSheet.create({ - unitCard: { - width: unitWidth, - }, - contentTitle: StyleSheet.flatten([ - fontSemibold14, - { - marginVertical: layout.spacing_x0_5, - }, - ]), - contentDescription: StyleSheet.flatten([ - fontMedium14, - { - color: neutral77, - }, - ]), - contentDate: StyleSheet.flatten([ - fontMedium14, - { - color: neutral77, - marginLeft: "1em", - }, - ]), - imgBox: { - position: "relative", - }, - contentName: StyleSheet.flatten([ - fontSemibold14, - { - color: primaryColor, - }, - ]), - contentImg: { - width: "100%", - borderRadius: layout.spacing_x1, - aspectRatio: 1.7, - }, - }); - return ( - + setSelectedIndex(item.id)} onMouseLeave={() => setSelectedIndex("")} @@ -77,7 +38,7 @@ export const VideoPlayerCard: React.FC<{ {selectedIndex === item.identifier && ( )} - + {item.videoMetaInfo.title} - @{username} + @{username} ); }; + +const unitCardStyle: ViewStyle = { + width: unitWidth, +}; +const contentTitleStyle: TextStyle = { + ...fontSemibold14, + marginVertical: layout.spacing_x0_5, +}; +const imgBoxStyle: ViewStyle = { + position: "relative", +}; +const contentNameStyle: TextStyle = { + ...fontSemibold14, + color: primaryColor, +}; +const contentImgStyle: ImageStyle = { + width: "100%", + borderRadius: layout.spacing_x1, + aspectRatio: 1.7, +}; diff --git a/packages/components/videoPlayer/VideoPlayerSeekBar.tsx b/packages/components/videoPlayer/VideoPlayerSeekBar.tsx index 47c6823d2a..7f16fce324 100644 --- a/packages/components/videoPlayer/VideoPlayerSeekBar.tsx +++ b/packages/components/videoPlayer/VideoPlayerSeekBar.tsx @@ -1,80 +1,20 @@ import { memo, useRef, useEffect, useCallback, useState } from "react"; -import { View, Pressable, StyleSheet } from "react-native"; +import { View, Pressable, ViewStyle } from "react-native"; import VolumeSvg from "../../../assets/icons/player/audio.svg"; -// import Next from "../../../assets/icons/player/next.svg"; import Pause from "../../../assets/icons/player/pause.svg"; import Play from "../../../assets/icons/player/play.svg"; import { useVideoPlayer } from "../../context/VideoPlayerContext"; -import { - neutral17, - neutral22, - neutral33, - neutral77, -} from "../../utils/style/colors"; +import { neutral17, neutral22, neutral77 } from "../../utils/style/colors"; import { fontSemibold14 } from "../../utils/style/fonts"; import { layout } from "../../utils/style/layout"; import { durationToString } from "../../utils/videoPlayer"; import { BrandText } from "../BrandText"; import { SVG } from "../SVG"; import { UserAvatarWithFrame } from "../images/AvatarWithFrame"; +import { SpacerColumn, SpacerRow } from "../spacer"; -const componentHight = 48; - -const styles = StyleSheet.create({ - container: { - backgroundColor: neutral17, - height: componentHight, - width: "100%", - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - borderWidth: 1, - borderColor: neutral22, - paddingHorizontal: layout.spacing_x3, - }, - volumeBox: { - flexDirection: "row", - alignItems: "center", - }, - seekbarBox: { - flexDirection: "row", - alignItems: "center", - }, - playHandleBox: { - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x3, - }, - verticalLine: { - height: layout.spacing_x2_5, - width: 1, - backgroundColor: neutral33, - }, - inforBox: { - flexDirection: "row", - alignItems: "center", - gap: 20, - }, - avatarBox: { - flexDirection: "row", - alignContent: "center", - gap: 10, - }, - durationBox: { - flexDirection: "row", - alignItems: "center", - gap: 40, - }, - infoBox: { - flexDirection: "column", - gap: layout.spacing_x0_5, - justifyContent: "center", - }, - audioBox: { - display: "none", - }, -}); +const componentHeight = 48; const VideoPlayerSeekBar: React.FC = () => { const { isPlay, setIsPlay, videoMeta, volume, setVolume, videoRef } = @@ -129,18 +69,15 @@ const VideoPlayerSeekBar: React.FC = () => { }; return ( - - + + {isPlay && } {!isPlay && } - {/* {}}> - - */} - + {durationToString(currentTime)} @@ -155,8 +92,8 @@ const VideoPlayerSeekBar: React.FC = () => { - - + + { userId={videoMeta.createdBy} size="S" /> - + + {videoMeta.title} + {videoMeta.userName} - - + + { ); }; -// const StandardIcon: React.FC<{ source: any }> = ({ source }) => { -// return ( -// -// ); -// }; +const containerStyle: ViewStyle = { + backgroundColor: neutral17, + height: componentHeight, + width: "100%", + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + borderWidth: 1, + borderColor: neutral22, + paddingHorizontal: layout.spacing_x3, +}; +const volumeBoxStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", +}; +const seekbarBoxStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", +}; +const playHandleBoxStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", +}; +const infoBoxStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", +}; +const avatarBoxStyle: ViewStyle = { + flexDirection: "row", + alignContent: "center", +}; +const titleUsernameBoxStyle: ViewStyle = { + justifyContent: "center", +}; + export default memo(VideoPlayerSeekBar); diff --git a/packages/components/videoPlayer/VideoPlayerTab.tsx b/packages/components/videoPlayer/VideoPlayerTab.tsx index aaf4d2d27c..a8363cbc06 100644 --- a/packages/components/videoPlayer/VideoPlayerTab.tsx +++ b/packages/components/videoPlayer/VideoPlayerTab.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { View, StyleSheet, Pressable } from "react-native"; +import { View, Pressable, TextStyle, ViewStyle } from "react-native"; import HomeSelected from "../../../assets/icons/player/home-selected.svg"; import HomeUnselected from "../../../assets/icons/player/home-unselected.svg"; @@ -10,6 +10,7 @@ import { fontSemibold14 } from "../../utils/style/fonts"; import { layout } from "../../utils/style/layout"; import { BrandText } from "../BrandText/BrandText.electron"; import { SVG } from "../SVG"; +import { SpacerRow } from "../spacer"; interface VideoPlayerTabProps { tab?: string; @@ -21,55 +22,11 @@ export const VideoPlayerTab: React.FC = ({ setTab, }) => { const tabData: string[] = ["Home", "My Library", "Search"]; - - const styles = StyleSheet.create({ - tabContainer: { - width: "100%", - flexDirection: "row", - alignItems: "center", - position: "relative", - gap: layout.spacing_x3, - }, - selectedUnitBox: { - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x1_5, - paddingVertical: layout.spacing_x2_5, - borderBottomColor: secondaryColor, - borderBottomWidth: 2, - paddingRight: 6, - }, - unselectedUnitBox: { - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x1_5, - paddingVertical: layout.spacing_x2_5, - borderBottomColor: secondaryColor, - borderBottomWidth: 0, - paddingRight: 6, - }, - selectedText: StyleSheet.flatten([fontSemibold14]), - unselectedText: StyleSheet.flatten([ - fontSemibold14, - { - color: neutralA3, - }, - ]), - divideLine: { - position: "absolute", - bottom: 0, - left: 0, - height: 1, - backgroundColor: neutral33, - width: "100%", - }, - }); - return ( - + setTab(tabData[0])} > @@ -78,17 +35,17 @@ export const VideoPlayerTab: React.FC = ({ width={layout.spacing_x3} height={layout.spacing_x3} /> + Home + setTab(tabData[1])} > @@ -97,15 +54,51 @@ export const VideoPlayerTab: React.FC = ({ width={layout.spacing_x3} height={layout.spacing_x3} /> + My Library - + + ); }; + +const tabContainerStyle: ViewStyle = { + width: "100%", + flexDirection: "row", + alignItems: "center", + position: "relative", +}; +const selectedUnitBoxStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", + paddingVertical: layout.spacing_x2_5, + borderBottomColor: secondaryColor, + borderBottomWidth: 2, + paddingRight: 6, +}; +const unselectedUnitBoxStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", + paddingVertical: layout.spacing_x2_5, + borderBottomColor: secondaryColor, + borderBottomWidth: 0, + paddingRight: 6, +}; +const selectedTextStyle: TextStyle = { ...fontSemibold14 }; +const unselectedTextStyle: TextStyle = { + ...fontSemibold14, + color: neutralA3, +}; +const divideLineStyle: ViewStyle = { + position: "absolute", + bottom: 0, + left: 0, + height: 1, + backgroundColor: neutral33, + width: "100%", +}; diff --git a/packages/networks/teritori-testnet/index.ts b/packages/networks/teritori-testnet/index.ts index 8d56b0c5f6..f0682285af 100644 --- a/packages/networks/teritori-testnet/index.ts +++ b/packages/networks/teritori-testnet/index.ts @@ -82,5 +82,5 @@ export const teritoriTestnetNetwork: NetworkInfo = { coreDAOAddress: "tori1dy5h9q9zue4swxe9mzracm8gudp0fcf2ncllch6pfq9d0fq0ftgq546063", videoContractAddress: - "tori1e4xxwwlpxjpsnrjk4tax7qqf5wepvrqry2yccpkrqh67uurn4s7sk3qr7a", + "tori1m95r73qkq9amntsmr33uz549jdc8284pl0xfqd7mp46c5y8s6ljq7z4q7z", }; diff --git a/packages/screens/VideoPlayer/VideoPlayerHomeContent.tsx b/packages/screens/VideoPlayer/VideoPlayerHomeContent.tsx index bf36ba00dc..a936257f80 100644 --- a/packages/screens/VideoPlayer/VideoPlayerHomeContent.tsx +++ b/packages/screens/VideoPlayer/VideoPlayerHomeContent.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useMemo } from "react"; -import { View, StyleSheet, Pressable } from "react-native"; +import { View, Pressable, ViewStyle, TextStyle } from "react-native"; import Animated, { useAnimatedScrollHandler, useSharedValue, @@ -10,8 +10,9 @@ import Logo from "../../../assets/logos/logo.svg"; import { GetVideoListRequest } from "../../api/video/v1/video"; import { BrandText } from "../../components/BrandText"; import { SVG } from "../../components/SVG"; -import { UploadVideoModal } from "../../components/VideoPlayer/UploadVideoModal"; import { VideoPlayerCard } from "../../components/VideoPlayer/VideoPlayerCard"; +import { SpacerRow } from "../../components/spacer"; +import { UploadVideoModal } from "../../components/videoPlayer/UploadVideoModal"; import { combineFetchVideoPages, useFetchVideos, @@ -68,65 +69,23 @@ export const VideoPlayerHomeContent: React.FC = ({ } }; - const styles = StyleSheet.create({ - container: { - marginTop: layout.spacing_x3, - width: "100%", - }, - oneLine: { - flexDirection: "row", - justifyContent: "space-between", - alignItems: "center", - }, - contentGroup: { - flexDirection: "row", - justifyContent: "center", - flexWrap: "wrap", - marginTop: layout.spacing_x3, - gap: layout.spacing_x2_5, - marginBottom: 40, - }, - buttonGroup: { - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x2, - }, - buttonContainer: { - flexDirection: "row", - alignItems: "center", - paddingLeft: layout.spacing_x1, - paddingRight: layout.spacing_x1_5, - paddingVertical: layout.spacing_x1, - backgroundColor: "#2B2B33", - borderRadius: layout.spacing_x4, - gap: layout.spacing_x1_5, - }, - buttonText: StyleSheet.flatten([ - fontSemibold14, - { - color: primaryColor, - }, - ]), - albumGrid: { - margin: layout.spacing_x3, - }, - }); - return ( - - + + All Videos - - + + - Create funding + + Create funding + setOpenUploadModal(true)} > = ({ width={layout.spacing_x2} height={layout.spacing_x2} /> - Upload video + + Upload video - + ( - + = ({ ); }; + +const containerStyle: ViewStyle = { + marginTop: layout.spacing_x3, + width: "100%", +}; +const oneLineStyle: ViewStyle = { + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", +}; +const contentGroupStyle: ViewStyle = { + flexDirection: "row", + justifyContent: "center", + flexWrap: "wrap", + marginTop: layout.spacing_x3, + marginBottom: 40, +}; +const buttonGroupStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", +}; +const buttonContainerStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", + paddingLeft: layout.spacing_x1, + paddingRight: layout.spacing_x1_5, + paddingVertical: layout.spacing_x1, + backgroundColor: "#2B2B33", + borderRadius: layout.spacing_x4, +}; +const buttonTextStyle: TextStyle = { + ...fontSemibold14, + color: primaryColor, +}; +const albumGridStyle: ViewStyle = { + margin: layout.spacing_x3, +}; diff --git a/packages/screens/VideoPlayer/VideoPlayerMyLibraryContent.tsx b/packages/screens/VideoPlayer/VideoPlayerMyLibraryContent.tsx index ecf0b1db66..72e8f06c98 100644 --- a/packages/screens/VideoPlayer/VideoPlayerMyLibraryContent.tsx +++ b/packages/screens/VideoPlayer/VideoPlayerMyLibraryContent.tsx @@ -1,5 +1,5 @@ import React, { useState, useMemo, useEffect } from "react"; -import { View, StyleSheet, Pressable } from "react-native"; +import { View, Pressable, ViewStyle, TextStyle } from "react-native"; import Animated, { useAnimatedScrollHandler, useSharedValue, @@ -10,6 +10,7 @@ import { BrandText } from "../../components/BrandText"; import { SVG } from "../../components/SVG"; import { UploadVideoModal } from "../../components/VideoPlayer/UploadVideoModal"; import { VideoPlayerCard } from "../../components/VideoPlayer/VideoPlayerCard"; +import { SpacerRow } from "../../components/spacer"; import { useSelectedNetworkId } from "../../hooks/useSelectedNetwork"; import useSelectedWallet from "../../hooks/useSelectedWallet"; import { @@ -17,20 +18,14 @@ import { combineFetchVideoPages, } from "../../hooks/video/useUserFetchVideos"; import { getUserId } from "../../networks"; -import { neutral77, primaryColor } from "../../utils/style/colors"; -import { - fontMedium14, - fontSemibold20, - fontSemibold14, -} from "../../utils/style/fonts"; +import { primaryColor } from "../../utils/style/colors"; +import { fontSemibold20, fontSemibold14 } from "../../utils/style/fonts"; import { layout } from "../../utils/style/layout"; import { VideoInfoWithMeta } from "../../utils/types/video"; export const VideoPlayerMyLibraryContent: React.FC<{ videoListForLibrary: VideoInfoWithMeta[]; }> = ({ videoListForLibrary }) => { - const unitWidth = 240; - const isLoadingValue = useSharedValue(false); const isGoingUp = useSharedValue(false); @@ -95,75 +90,13 @@ export const VideoPlayerMyLibraryContent: React.FC<{ const onEndReachedOther = () => {}; - const styles = StyleSheet.create({ - container: { - marginTop: layout.spacing_x3, - width: "100%", - }, - oneLine: { - flexDirection: "row", - justifyContent: "space-between", - alignItems: "center", - }, - contentGroup: { - flexDirection: "row", - flexWrap: "wrap", - justifyContent: "center", - marginTop: layout.spacing_x3, - gap: layout.spacing_x2_5, - marginBottom: 40, - }, - trackItem: { - width: unitWidth, - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x1_5, - }, - itemImg: { - width: 40, - height: 40, - borderRadius: layout.spacing_x0_5, - }, - itemText: StyleSheet.flatten([ - fontMedium14, - { - color: neutral77, - marginTop: layout.spacing_x0_5, - }, - ]), - buttonGroup: { - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x2, - }, - buttonContainer: { - flexDirection: "row", - alignItems: "center", - paddingLeft: layout.spacing_x1, - paddingRight: layout.spacing_x1_5, - paddingVertical: layout.spacing_x1, - backgroundColor: "#2B2B33", - borderRadius: layout.spacing_x4, - gap: layout.spacing_x1_5, - }, - buttonText: StyleSheet.flatten([ - fontSemibold14, - { - color: primaryColor, - }, - ]), - albumGrid: { - margin: layout.spacing_x3, - }, - }); - return ( - - + + My Videos - + setOpenUploadModal(true)} > - Upload video + + Upload video - + ( - + )} @@ -191,16 +125,16 @@ export const VideoPlayerMyLibraryContent: React.FC<{ /> - + Other Videos - + ( - + )} @@ -216,3 +150,40 @@ export const VideoPlayerMyLibraryContent: React.FC<{ ); }; + +const containerStyle: ViewStyle = { + marginTop: layout.spacing_x3, + width: "100%", +}; +const oneLineStyle: ViewStyle = { + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", +}; +const contentGroupStyle: ViewStyle = { + flexDirection: "row", + flexWrap: "wrap", + justifyContent: "center", + marginTop: layout.spacing_x3, + marginBottom: 40, +}; +const buttonGroupStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", +}; +const buttonContainerStyle: ViewStyle = { + flexDirection: "row", + alignItems: "center", + paddingLeft: layout.spacing_x1, + paddingRight: layout.spacing_x1_5, + paddingVertical: layout.spacing_x1, + backgroundColor: "#2B2B33", + borderRadius: layout.spacing_x4, +}; +const buttonTextStyle: TextStyle = { + ...fontSemibold14, + color: primaryColor, +}; +const albumGridStyle: ViewStyle = { + margin: layout.spacing_x3, +}; diff --git a/packages/screens/VideoPlayer/VideoPlayerScreen.tsx b/packages/screens/VideoPlayer/VideoPlayerScreen.tsx index 1bdc69f855..a9c67cf5eb 100644 --- a/packages/screens/VideoPlayer/VideoPlayerScreen.tsx +++ b/packages/screens/VideoPlayer/VideoPlayerScreen.tsx @@ -1,5 +1,5 @@ import React, { useState, useMemo } from "react"; -import { View, StyleSheet } from "react-native"; +import { View } from "react-native"; import { VideoPlayerHomeContent } from "./VideoPlayerHomeContent"; import { VideoPlayerMyLibraryContent } from "./VideoPlayerMyLibraryContent"; @@ -9,9 +9,6 @@ import { ScreenContainer } from "../../components/ScreenContainer"; import { VideoPlayerTab } from "../../components/VideoPlayer/VideoPlayerTab"; import { useFetchVideosForLibrary } from "../../hooks/video/useFetchVideosForLibrary"; import { ScreenFC } from "../../utils/navigation"; -import { neutralA3, secondaryColor } from "../../utils/style/colors"; -import { fontSemibold14 } from "../../utils/style/fonts"; -import { layout } from "../../utils/style/layout"; export const VideoPlayerScreen: ScreenFC<"VideoPlayer"> = () => { const tabData: string[] = ["Home", "My Library"]; @@ -29,7 +26,12 @@ export const VideoPlayerScreen: ScreenFC<"VideoPlayer"> = () => { headerChildren={Video Player} fullWidth > - + {tab === tabData[0] && ( = () => { ); }; - -const styles = StyleSheet.create({ - pageConatiner: { - width: "100%", - paddingHorizontal: 80, - }, - tabContainer: { - width: "100%", - flexDirection: "row", - alignItems: "center", - position: "relative", - gap: layout.spacing_x3, - }, - selectedUnitBox: { - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x1_5, - paddingVertical: layout.spacing_x2_5, - borderBottomColor: secondaryColor, - borderBottomWidth: 2, - paddingRight: 6, - }, - unselectedUnitBox: { - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x1_5, - paddingVertical: layout.spacing_x2_5, - borderBottomColor: secondaryColor, - borderBottomWidth: 0, - paddingRight: 6, - }, - selectedText: StyleSheet.flatten([fontSemibold14]), - unselectedText: StyleSheet.flatten([ - fontSemibold14, - { - color: neutralA3, - }, - ]), - divideLine: { - position: "absolute", - bottom: 0, - left: 0, - height: 1, - backgroundColor: neutralA3, - width: "100%", - }, -}); diff --git a/packages/screens/VideoPlayer/VideoShowScreen.tsx b/packages/screens/VideoPlayer/VideoShowScreen.tsx index 6bf56a3918..9383d47ccc 100644 --- a/packages/screens/VideoPlayer/VideoShowScreen.tsx +++ b/packages/screens/VideoPlayer/VideoShowScreen.tsx @@ -1,5 +1,13 @@ import React, { useState, useEffect, useMemo, useRef } from "react"; -import { View, StyleSheet, Pressable, TextInput, Image } from "react-native"; +import { + View, + Pressable, + TextInput, + Image, + ViewStyle, + TextStyle, + ImageStyle, +} from "react-native"; import Animated from "react-native-reanimated"; import { v4 as uuidv4 } from "uuid"; @@ -23,6 +31,7 @@ import { PrimaryButton } from "../../components/buttons/PrimaryButton"; import { UserAvatarWithFrame } from "../../components/images/AvatarWithFrame"; import { TipModal } from "../../components/socialFeed/SocialActions/TipModal"; import { DateTime } from "../../components/socialFeed/SocialThread/DateTime"; +import { SpacerRow } from "../../components/spacer"; import { useFeedbacks } from "../../context/FeedbacksProvider"; import { useVideoPlayer } from "../../context/VideoPlayerContext"; import { useNSUserInfo } from "../../hooks/useNSUserInfo"; @@ -44,334 +53,16 @@ import { defaultSocialFeedFee } from "../../utils/fee"; import { ipfsURLToHTTPURL } from "../../utils/ipfs"; import { ScreenFC, useAppNavigation } from "../../utils/navigation"; import { SOCIAL_FEED_ARTICLE_MIN_CHARS_LIMIT } from "../../utils/social-feed"; -import { - neutral77, - neutral17, - primaryColor, - secondaryColor, -} from "../../utils/style/colors"; +import { neutral77, secondaryColor } from "../../utils/style/colors"; import { fontSemibold14, fontMedium14, fontSemibold13, - fontSemibold20, - fontMedium16, fontSemibold16, } from "../../utils/style/fonts"; import { layout } from "../../utils/style/layout"; import { tinyAddress } from "../../utils/text"; -const styles = StyleSheet.create({ - commentContent: { - marginTop: "0.5em", - display: "flex", - flexDirection: "row", - marginLeft: "40px", - fontSize: 13, - gap: "0.6em", - }, - blueContents: StyleSheet.flatten([ - fontSemibold13, - { - color: "#16BBFF", - }, - ]), - flexRowItemCenter: { - display: "flex", - flexDirection: "row", - alignItems: "center", - }, - flexColumnItem: { - display: "flex", - flexDirection: "column", - }, - avatar: { - aspectRatio: 1, - width: "32px", - borderRadius: 1000, - marginRight: layout.spacing_x1, - }, - avatarDetail: { - display: "flex", - flexDirection: "row", - alignItems: "center", - }, - videoInfo: { - display: "flex", - flexDirection: "row", - alignItems: "center", - paddingBottom: layout.spacing_x1_5, - }, - btnGroup: { - marginLeft: "auto", - display: "flex", - flexDirection: "row", - }, - comments: { - fontSize: 16, - marginTop: "1.5em", - marginBottom: "0.875em", - }, - outlineButtonContainer: { - marginLeft: "0.5em", - flexDirection: "row", - alignItems: "center", - paddingLeft: layout.spacing_x1, - paddingRight: layout.spacing_x1_5, - paddingVertical: layout.spacing_x1, - backgroundColor: "transparent", - borderRadius: layout.spacing_x4, - gap: layout.spacing_x1_5, - border: "1px solid #2B2B33", - }, - buttonContainer: { - marginLeft: "0.5em", - flexDirection: "row", - alignItems: "center", - paddingLeft: layout.spacing_x1, - paddingRight: layout.spacing_x1_5, - paddingVertical: layout.spacing_x1, - backgroundColor: "#2B2B33", - borderRadius: layout.spacing_x4, - gap: layout.spacing_x1_5, - }, - pageConatiner: { - width: "100%", - paddingHorizontal: 80, - paddingBottom: 80, - fontFamily: "Exo_500Medium", - color: "white", - }, - menuBox: { - marginTop: layout.spacing_x2_5, - marginBottom: layout.spacing_x1, - width: "100%", - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - paddingHorizontal: layout.spacing_x3, - }, - contentGroup: { - flexDirection: "column", - justifyContent: "space-between", - gap: layout.spacing_x1, - zIndex: 999, - }, - unitBoxEven: { - width: "100%", - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - paddingHorizontal: layout.spacing_x3, - paddingVertical: layout.spacing_x0_5, - backgroundColor: neutral17, - borderRadius: layout.spacing_x1, - height: 48, - }, - uniBoxOdd: { - width: "100%", - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - paddingHorizontal: layout.spacing_x3, - paddingVertical: layout.spacing_x0_5, - borderRadius: layout.spacing_x1, - height: 48, - }, - menuText: StyleSheet.flatten([ - fontSemibold13, - { - color: neutral77, - }, - ]), - index: { - width: layout.spacing_x2_5, - textAlign: "center", - }, - text: StyleSheet.flatten([ - fontMedium14, - { - color: neutral77, - marginTop: layout.spacing_x0_5, - }, - ]), - leftBox: { - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x1_5, - }, - textBox: { - flexDirection: "column", - justifyContent: "space-between", - height: 40, - }, - rightBox: { - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x2_5, - }, - albumBox: { - marginTop: layout.spacing_x2_5, - flexDirection: "row", - alignItems: "flex-end", - justifyContent: "space-between", - zIndex: 999, - }, - infoBox: { - flexDirection: "row", - alignItems: "flex-end", - gap: layout.spacing_x4, - }, - albumImg: { - width: 216, - height: 216, - }, - artistText: StyleSheet.flatten([ - fontSemibold20, - { - color: primaryColor, - marginTop: layout.spacing_x0_5, - }, - ]), - infoText: StyleSheet.flatten([ - fontSemibold13, - { - marginTop: layout.spacing_x1, - marginBottom: layout.spacing_x0_5, - }, - ]), - tagText: StyleSheet.flatten([ - fontSemibold13, - { - color: primaryColor, - }, - ]), - verticalBox: { - flexDirection: "column", - alignItems: "flex-start", - width: 420, - }, - oneLine: { - flexDirection: "row", - alignItems: "center", - marginTop: layout.spacing_x2_5, - gap: layout.spacing_x2, - }, - playButton: { - padding: layout.spacing_x1, - paddingRight: layout.spacing_x1_5, - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x1, - borderRadius: layout.spacing_x1, - backgroundColor: primaryColor, - }, - tipButton: { - padding: layout.spacing_x1, - paddingRight: layout.spacing_x1_5, - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x1, - borderRadius: layout.spacing_x1, - backgroundColor: "#2B2B33", - }, - playButtonText: StyleSheet.flatten([ - fontSemibold14, - { - color: "#2B0945", - }, - ]), - tipButtonText: StyleSheet.flatten([ - fontSemibold14, - { - color: primaryColor, - }, - ]), - actionBox: { - flexDirection: "row", - gap: layout.spacing_x2, - }, - addButton: { - padding: layout.spacing_x1, - paddingRight: layout.spacing_x1_5, - flexDirection: "row", - alignItems: "center", - gap: layout.spacing_x1, - borderRadius: layout.spacing_x1, - backgroundColor: "#2B2B33", - }, - addButtonText: StyleSheet.flatten([ - fontSemibold14, - { - color: primaryColor, - }, - ]), - moreButton: { - width: 36, - height: 36, - borderRadius: 18, - flexDirection: "row", - justifyContent: "center", - alignItems: "center", - backgroundColor: "#2B2B33", - }, - pagePanel: { - paddingTop: layout.spacing_x1_5, - width: "100%", - display: "flex", - flexDirection: "row", - }, - pageLeftPanel: { - flex: 1, - }, - pageRightPanel: { - paddingLeft: layout.spacing_x1_5, - paddingRight: layout.spacing_x1_5, - }, - rightTitle: { - fontFamily: "Exo_500Medium", - - paddingBottom: layout.spacing_x1_5, - }, - leftVideoName: { - fontFamily: "Exo_500Medium", - fontSize: "1.5em", - - paddingBottom: layout.spacing_x1_5, - }, - contentName: StyleSheet.flatten([fontSemibold14]), - contentDescription: StyleSheet.flatten([ - fontMedium14, - { - color: neutral77, - }, - ]), - contentDate: StyleSheet.flatten([ - fontMedium14, - { - color: neutral77, - marginLeft: "0.5em", - }, - ]), - tipContent: StyleSheet.flatten([fontMedium14]), - commentTip: StyleSheet.flatten([ - fontMedium14, - { - color: neutral77, - marginLeft: "0.5em", - }, - ]), - commentReply: StyleSheet.flatten([ - fontMedium16, - { - marginLeft: "0.5em", - }, - ]), - moreVideoGrid: { - margin: layout.spacing_x3, - }, -}); - export const VideoShowScreen: ScreenFC<"VideoShow"> = ({ route: { params: { id }, @@ -512,13 +203,13 @@ export const VideoShowScreen: ScreenFC<"VideoShow"> = ({ if (res.transactionHash) { setToastSuccess({ - title: "Uploaded video successfully", + title: "Comment created successfully", message: `tx_hash: ${res.transactionHash}`, }); } } catch (err) { setToastError({ - title: "Failed to upload video", + title: "Failed to create comment", message: `Error: ${err}`, }); } @@ -532,15 +223,15 @@ export const VideoShowScreen: ScreenFC<"VideoShow"> = ({ headerChildren={{data.videoMetaInfo.title}} fullWidth > - + { navigation.navigate("VideoPlayer"); }} /> - - + + {data && (