chore: cleanup (#1136)

tapexyz · Nov 13, 2023 · c74f47d · c74f47d · vercel · Nov 13, 2023
1 parent 1faecfa
commit c74f47d
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 33 deletions.
diff --git a/apps/api/lib/getPublicationOembed.ts b/apps/api/lib/getPublicationOembed.ts
@@ -79,7 +79,7 @@ const getPublicationOembed = async (publicationId: string, format: string) => {
               <html>
                 <iframe width="200" height="113" src="${TAPE_EMBED_URL}/${
                   video.id
-                }" title="${TAPE_APP_NAME} video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;" allowfullscreen="true"></iframe>
+                }" title="${TAPE_APP_NAME} player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;" allowfullscreen="true"></iframe>
               </html>
               </oembed>`
     }

diff --git a/apps/embed/package.json b/apps/embed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tape.xyz/embed",
-  "description": "Embed Video Player",
+  "description": "Embed Player",
   "version": "0.0.0",
   "private": true,
   "scripts": {

diff --git a/apps/web/src/components/Bangers/RenderBanger.tsx b/apps/web/src/components/Bangers/RenderBanger.tsx
@@ -1,5 +1,5 @@
 import SignOutline from '@components/Common/Icons/SignOutline'
-import MirrorVideo from '@components/Common/MirrorVideo'
+import MirrorPublication from '@components/Common/MirrorPublication'
 import PublicationReaction from '@components/Common/Publication/PublicationReaction'
 import { getDateString, getRelativeTime } from '@lib/formatTime'
 import { Button, Text } from '@radix-ui/themes'
@@ -30,14 +30,17 @@ const RenderBanger = ({ post }: { post: PrimaryPublication }) => {
         <div className="mx-2 flex items-center justify-between space-x-2">
           <div className="flex items-center justify-between space-x-4">
             <PublicationReaction publication={post} />
-            <MirrorVideo video={post} successToast="Co-signed successfully.">
+            <MirrorPublication
+              video={post}
+              successToast="Co-signed successfully."
+            >
               <div className="flex">
                 <Button size="1" highContrast variant="ghost">
                   <SignOutline className="h-3.5 w-3.5" />
                   Co-sign
                 </Button>
               </div>
-            </MirrorVideo>
+            </MirrorPublication>
           </div>
           <Text size="1" title={getDateString(post.createdAt)}>
             {getRelativeTime(post.createdAt)}

diff --git a/apps/web/src/components/Bytes/ByteActions.tsx b/apps/web/src/components/Bytes/ByteActions.tsx
@@ -2,7 +2,7 @@ import CollectOutline from '@components/Common/Icons/CollectOutline'
 import CommentOutline from '@components/Common/Icons/CommentOutline'
 import MirrorOutline from '@components/Common/Icons/MirrorOutline'
 import TimesOutline from '@components/Common/Icons/TimesOutline'
-import MirrorVideo from '@components/Common/MirrorVideo'
+import MirrorPublication from '@components/Common/MirrorPublication'
 import PublicationReaction from '@components/Common/Publication/PublicationReaction'
 import VideoOptions from '@components/Common/VideoCard/VideoOptions'
 import OpenActions from '@components/Watch/OpenActions'
@@ -65,7 +65,7 @@ const ByteActions: FC<Props> = ({ video }) => {
             </Dialog.Root>
           </div>
           <div className="w-full text-center">
-            <MirrorVideo video={video}>
+            <MirrorPublication video={video}>
               <Button variant="ghost" className="w-7" highContrast>
                 <Flex direction="column" align="center">
                   <MirrorOutline className="h-5 w-5" />
@@ -74,7 +74,7 @@ const ByteActions: FC<Props> = ({ video }) => {
                   </span>
                 </Flex>
               </Button>
-            </MirrorVideo>
+            </MirrorPublication>
           </div>
           <div className="w-full text-center">
             <OpenActions publication={video}>

diff --git a/.../web/src/components/Common/EmbedVideo.tsx → .../web/src/components/Common/EmbedMedia.tsx b/.../web/src/components/Common/EmbedVideo.tsx → .../web/src/components/Common/EmbedMedia.tsx
@@ -3,6 +3,7 @@ import { Card, Dialog, Flex, IconButton } from '@radix-ui/themes'
 import { useCopyToClipboard } from '@tape.xyz/browser'
 import { TAPE_APP_NAME, TAPE_EMBED_URL } from '@tape.xyz/constants'
 import { EVENTS, Tower } from '@tape.xyz/generic'
+import clsx from 'clsx'
 import type { FC } from 'react'
 import React from 'react'
 
@@ -11,13 +12,18 @@ import CopyOutline from './Icons/CopyOutline'
 import TimesOutline from './Icons/TimesOutline'
 
 type Props = {
-  videoId: string
+  publicationId: string
+  isAudio: boolean
 }
 
-const EmbedVideo: FC<Props> = ({ videoId }) => {
+const EmbedMedia: FC<Props> = ({ publicationId, isAudio }) => {
   const [copy] = useCopyToClipboard()
 
-  const iframeCode = `<iframe width="560" height="315" src="${TAPE_EMBED_URL}/${videoId}?autoplay=1&t=0&loop=0" title="${TAPE_APP_NAME} video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;" allowfullscreen></iframe>`
+  let iframeCode = `<iframe width="560" height="315" src="${TAPE_EMBED_URL}/${publicationId}?autoplay=1&t=0&loop=0" title="${TAPE_APP_NAME} player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;" allowfullscreen></iframe>`
+
+  if (isAudio) {
+    iframeCode = `<iframe width="100%" height="300" src="${TAPE_EMBED_URL}/${publicationId}" title="${TAPE_APP_NAME} player" frameborder="0"></iframe>`
+  }
 
   const onCopyCode = () => {
     copy(iframeCode)
@@ -54,9 +60,12 @@ const EmbedVideo: FC<Props> = ({ videoId }) => {
           <div className="w-full">
             <iframe
               sandbox="allow-scripts allow-same-origin"
-              className="aspect-[16/9] w-full"
-              src={`${TAPE_EMBED_URL}/${videoId}`}
-              title={`${TAPE_APP_NAME} video player`}
+              className={clsx(
+                'w-full',
+                isAudio ? 'min-h-[200px]' : 'aspect-[16/9] '
+              )}
+              src={`${TAPE_EMBED_URL}/${publicationId}`}
+              title={`${TAPE_APP_NAME} player`}
               allow="accelerometer; autoplay; clipboard-write; gyroscope;"
               allowFullScreen
             />
@@ -85,4 +94,4 @@ const EmbedVideo: FC<Props> = ({ videoId }) => {
   )
 }
 
-export default EmbedVideo
+export default EmbedMedia
diff --git a/...web/src/components/Common/MirrorVideo.tsx → ...c/components/Common/MirrorPublication.tsx b/...web/src/components/Common/MirrorVideo.tsx → ...c/components/Common/MirrorPublication.tsx
@@ -41,7 +41,7 @@ type Props = {
   successToast?: string
 }
 
-const MirrorVideo: FC<Props> = ({
+const MirrorPublication: FC<Props> = ({
   video,
   children,
   onMirrorSuccess,
@@ -175,7 +175,7 @@ const MirrorVideo: FC<Props> = ({
     onCompleted: () => onCompleted()
   })
 
-  const mirrorVideo = async () => {
+  const mirrorPublication = async () => {
     if (!activeProfile?.id) {
       return toast.error(SIGN_IN_REQUIRED)
     }
@@ -233,12 +233,12 @@ const MirrorVideo: FC<Props> = ({
         type="button"
         className="disabled:opacity-50"
         disabled={loading}
-        onClick={() => mirrorVideo()}
+        onClick={() => mirrorPublication()}
       >
         {children}
       </button>
     </div>
   )
 }
 
-export default MirrorVideo
+export default MirrorPublication
diff --git a/apps/web/src/components/Common/Publication/PublicationActions.tsx b/apps/web/src/components/Common/Publication/PublicationActions.tsx
@@ -1,7 +1,7 @@
 import MirrorOutline from '@components/Common/Icons/MirrorOutline'
 import ThreeDotsOutline from '@components/Common/Icons/ThreeDotsOutline'
 import TipOutline from '@components/Common/Icons/TipOutline'
-import MirrorVideo from '@components/Common/MirrorVideo'
+import MirrorPublication from '@components/Common/MirrorPublication'
 import VideoOptions from '@components/Common/VideoCard/VideoOptions'
 import { Button, Dialog, IconButton } from '@radix-ui/themes'
 import { EVENTS, getProfile, Tower } from '@tape.xyz/generic'
@@ -58,14 +58,12 @@ const PublicationActions: FC<Props> = ({ publication }) => {
           </Dialog.Content>
         </Dialog.Root>
       )}
-      {publication.operations.canMirror !== TriStateValue.No && (
-        <MirrorVideo video={publication}>
-          <Button variant="surface" color="blue" highContrast>
-            <MirrorOutline className="h-4 w-4 flex-none" />
-            Mirror
-          </Button>
-        </MirrorVideo>
-      )}
+      <MirrorPublication video={publication}>
+        <Button variant="surface" color="blue" highContrast>
+          <MirrorOutline className="h-4 w-4 flex-none" />
+          Mirror
+        </Button>
+      </MirrorPublication>
       <OpenActions publication={publication} text="Collect" />
       <VideoOptions video={publication}>
         <IconButton variant="surface" color="blue" highContrast>

diff --git a/apps/web/src/components/Common/VideoCard/Share.tsx b/apps/web/src/components/Common/VideoCard/Share.tsx
@@ -9,10 +9,10 @@ import { useTheme } from 'next-themes'
 import type { FC } from 'react'
 import React from 'react'
 
-import EmbedVideo from '../EmbedVideo'
+import EmbedMedia from '../EmbedMedia'
 import CopyOutline from '../Icons/CopyOutline'
 import MirrorOutline from '../Icons/MirrorOutline'
-import MirrorVideo from '../MirrorVideo'
+import MirrorPublication from '../MirrorPublication'
 
 type Props = {
   publication: PrimaryPublication
@@ -34,12 +34,12 @@ const Share: FC<Props> = ({ publication }) => {
   return (
     <div>
       <div className="no-scrollbar mb-4 flex flex-nowrap items-center space-x-3 overflow-x-auto">
-        <EmbedVideo videoId={publication.id} />
-        <MirrorVideo video={publication}>
+        <EmbedMedia publicationId={publication.id} isAudio={isAudio} />
+        <MirrorPublication video={publication}>
           <div className="rounded-full bg-gray-200 p-3 dark:bg-gray-800">
             <MirrorOutline className="h-5 w-5" />
           </div>
-        </MirrorVideo>
+        </MirrorPublication>
         <Link
           className="rounded-full"
           target="_blank"