Video support. (ccrsxx#40)

* video now mutes when opening video modal * username bug fix & images upload by id * refactor: reuse logic when checking if username exists * style: minor nit changes spaces and newline * feat: improve logic when handling uploading media * feat: improve logic when extracting image and video data * feat: remove alt check when uploading media * feat: overall finished pr * feat: make tweet card non draggable to allow sliding on video progress * feat: add button on video tweet to open modal on mobile --------- Co-authored-by: ccrsxx <[email protected]>
Altair59 · Mar 6, 2024 · fe5cf29 · fe5cf29
1 parent c6bf6fb
commit fe5cf29
Show file tree

Hide file tree

Showing 14 changed files with 228 additions and 119 deletions.
diff --git a/.env.development b/.env.development
@@ -1,17 +1,17 @@
-# Dev URL
-NEXT_PUBLIC_URL=http://localhost
-
-# Emulator
-NEXT_PUBLIC_USE_EMULATOR=false
-
-# Firebase
-NEXT_PUBLIC_API_KEY=YOUR_FIREBASE_API_KEY
-NEXT_PUBLIC_AUTH_DOMAIN=YOUR_FIREBASE_AUTH_DOMAIN
-NEXT_PUBLIC_PROJECT_ID=YOUR_FIREBASE_PROJECT_ID
-NEXT_PUBLIC_STORAGE_BUCKET=YOUR_FIREBASE_STORAGE_BUCKET
-NEXT_PUBLIC_MESSAGING_SENDER_ID=YOUR_FIREBASE_MESSAGING_SENDER_ID
-NEXT_PUBLIC_APP_ID=YOUR_FIREBASE_APP_ID
-NEXT_PUBLIC_MEASUREMENT_ID=YOUR_FIREBASE_MEASUREMENT_ID
-
-# Twitter 
-TWITTER_BEARER_TOKEN=YOUR_TWITTER_BEARER_TOKEN
+# Dev URL
+NEXT_PUBLIC_URL=http://localhost
+
+# Emulator
+NEXT_PUBLIC_USE_EMULATOR=false
+
+# Firebase
+NEXT_PUBLIC_API_KEY=YOUR_FIREBASE_API_KEY
+NEXT_PUBLIC_AUTH_DOMAIN=YOUR_FIREBASE_AUTH_DOMAIN
+NEXT_PUBLIC_PROJECT_ID=YOUR_FIREBASE_PROJECT_ID
+NEXT_PUBLIC_STORAGE_BUCKET=YOUR_FIREBASE_STORAGE_BUCKET
+NEXT_PUBLIC_MESSAGING_SENDER_ID=YOUR_FIREBASE_MESSAGING_SENDER_ID
+NEXT_PUBLIC_APP_ID=YOUR_FIREBASE_APP_ID
+NEXT_PUBLIC_MEASUREMENT_ID=YOUR_FIREBASE_MEASUREMENT_ID
+
+# Twitter 
+TWITTER_BEARER_TOKEN=YOUR_TWITTER_BEARER_TOKEN
diff --git a/.firebaserc b/.firebaserc
@@ -1,5 +1,5 @@
 {
   "projects": {
-    "default": "twitter-clone-ccrsxx"
+    "default": "cyclone-59c8c"
   }
 }
diff --git a/firebase.json b/firebase.json
@@ -3,16 +3,19 @@
     "rules": "firestore.rules",
     "indexes": "firestore.indexes.json"
   },
-  "functions": {
-    "ignore": [
-      "node_modules",
-      ".git",
-      "firebase-debug.log",
-      "firebase-debug.*.log"
-    ],
-    "predeploy": "npm --prefix \"$RESOURCE_DIR\" run build",
-    "source": "functions"
-  },
+  "functions": [
+    {
+      "ignore": [
+        "node_modules",
+        ".git",
+        "firebase-debug.log",
+        "firebase-debug.*.log"
+      ],
+      "predeploy": ["npm --prefix \"$RESOURCE_DIR\" run build"],
+      "source": "functions",
+      "codebase": "default"
+    }
+  ],
   "storage": {
     "rules": "storage.rules"
   },

diff --git a/src/components/home/update-username.tsx b/src/components/home/update-username.tsx
@@ -20,6 +20,7 @@ export function UpdateUsername(): JSX.Element {
   const [available, setAvailable] = useState(false);
   const [loading, setLoading] = useState(false);
   const [visited, setVisited] = useState(false);
+  const [searching, setSearching] = useState(false);
   const [inputValue, setInputValue] = useState('');
   const [errorMessage, setErrorMessage] = useState('');
 
@@ -28,13 +29,17 @@ export function UpdateUsername(): JSX.Element {
 
   useEffect(() => {
     const checkAvailability = async (value: string): Promise<void> => {
+      setSearching(true);
+
       const empty = await checkUsernameAvailability(value);
 
       if (empty) setAvailable(true);
       else {
         setAvailable(false);
         setErrorMessage('This username has been taken. Please choose another.');
       }
+
+      setSearching(false);
     };
 
     if (!visited && inputValue.length > 0) setVisited(true);
@@ -63,6 +68,8 @@ export function UpdateUsername(): JSX.Element {
 
     if (!available) return;
 
+    if (searching) return;
+
     setLoading(true);
 
     await sleep(500);
@@ -82,6 +89,7 @@ export function UpdateUsername(): JSX.Element {
 
   const cancelUpdateUsername = (): void => {
     closeModal();
+
     if (!alreadySet) void updateUsername(user?.id as string);
   };
 

diff --git a/src/components/input/image-preview.tsx b/src/components/input/image-preview.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import cn from 'clsx';
 import { useModal } from '@lib/hooks/useModal';
@@ -50,6 +50,8 @@ export function ImagePreview({
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [selectedImage, setSelectedImage] = useState<ImageData | null>(null);
 
+  const videoRef = useRef<HTMLVideoElement>(null);
+
   const { open, openModal, closeModal } = useModal();
 
   useEffect(() => {
@@ -58,7 +60,13 @@ export function ImagePreview({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedIndex]);
 
-  const handleSelectedImage = (index: number) => () => {
+  const handleVideoStop = (): void => {
+    if (videoRef.current) videoRef.current.pause();
+  };
+
+  const handleSelectedImage = (index: number, isVideo?: boolean) => () => {
+    if (isVideo) handleVideoStop();
+
     setSelectedIndex(index);
     openModal();
   };
@@ -106,52 +114,84 @@ export function ImagePreview({
         />
       </Modal>
       <AnimatePresence mode='popLayout'>
-        {imagesPreview.map(({ id, src, alt }, index) => (
-          <motion.button
-            type='button'
-            className={cn(
-              'accent-tab relative transition-shadow',
-              isTweet
-                ? postImageBorderRadius[previewCount][index]
-                : 'rounded-2xl',
-              {
-                'col-span-2 row-span-2': previewCount === 1,
-                'row-span-2':
-                  previewCount === 2 || (index === 0 && previewCount === 3)
-              }
-            )}
-            {...variants}
-            onClick={preventBubbling(handleSelectedImage(index))}
-            layout={!isTweet ? true : false}
-            key={id}
-          >
-            <NextImage
-              className='relative h-full w-full cursor-pointer transition 
-                         hover:brightness-75 hover:duration-200'
-              imgClassName={cn(
+        {imagesPreview.map(({ id, src, alt }, index) => {
+          const isVideo = imagesPreview[index].type?.includes('video');
+
+          return (
+            <motion.button
+              type='button'
+              className={cn(
+                'accent-tab group relative transition-shadow',
                 isTweet
                   ? postImageBorderRadius[previewCount][index]
-                  : 'rounded-2xl'
+                  : 'rounded-2xl',
+                {
+                  'col-span-2 row-span-2': previewCount === 1,
+                  'row-span-2':
+                    previewCount === 2 || (index === 0 && previewCount === 3)
+                }
+              )}
+              {...variants}
+              onClick={preventBubbling(handleSelectedImage(index, isVideo))}
+              layout={!isTweet ? true : false}
+              key={id}
+            >
+              {isVideo ? (
+                <>
+                  <Button
+                    className='visible absolute top-0 right-0 z-10 -translate-x-1 translate-y-1 
+                               bg-light-primary/75 p-1 opacity-0 backdrop-blur-sm transition
+                               hover:bg-image-preview-hover/75 group-hover:opacity-100 xs:invisible'
+                  >
+                    <HeroIcon className='h-5 w-5' iconName='ArrowUpRightIcon' />
+                  </Button>
+                  <video
+                    ref={videoRef}
+                    className={cn(
+                      `relative h-full w-full cursor-pointer transition 
+                       hover:brightness-75 hover:duration-200`,
+                      isTweet
+                        ? postImageBorderRadius[previewCount][index]
+                        : 'rounded-2xl'
+                    )}
+                    src={src}
+                    controls
+                    muted
+                  />
+                </>
+              ) : (
+                <NextImage
+                  className='relative h-full w-full cursor-pointer transition 
+                             hover:brightness-75 hover:duration-200'
+                  imgClassName={cn(
+                    isTweet
+                      ? postImageBorderRadius[previewCount][index]
+                      : 'rounded-2xl'
+                  )}
+                  previewCount={previewCount}
+                  layout='fill'
+                  src={src}
+                  alt={alt}
+                  useSkeleton={isTweet}
+                />
               )}
-              previewCount={previewCount}
-              layout='fill'
-              src={src}
-              alt={alt}
-              useSkeleton={isTweet}
-            />
-            {removeImage && (
-              <Button
-                className='group absolute top-0 left-0 translate-x-1 translate-y-1
+              {removeImage && (
+                <Button
+                  className='group absolute top-0 left-0 translate-x-1 translate-y-1
                            bg-light-primary/75 p-1 backdrop-blur-sm 
                            hover:bg-image-preview-hover/75'
-                onClick={preventBubbling(removeImage(id))}
-              >
-                <HeroIcon className='h-5 w-5 text-white' iconName='XMarkIcon' />
-                <ToolTip className='translate-y-2' tip='Remove' />
-              </Button>
-            )}
-          </motion.button>
-        ))}
+                  onClick={preventBubbling(removeImage(id))}
+                >
+                  <HeroIcon
+                    className='h-5 w-5 text-white'
+                    iconName='XMarkIcon'
+                  />
+                  <ToolTip className='translate-y-2' tip='Remove' />
+                </Button>
+              )}
+            </motion.button>
+          );
+        })}
       </AnimatePresence>
     </div>
   );

diff --git a/src/components/input/input-options.tsx b/src/components/input/input-options.tsx
@@ -89,7 +89,7 @@ export function InputOptions({
         <input
           className='hidden'
           type='file'
-          accept='image/*'
+          accept='image/*,video/*'
           onChange={handleImageUpload}
           ref={inputFileRef}
           multiple

diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
@@ -136,7 +136,10 @@ export function Input({
 
     const files = isClipboardEvent ? e.clipboardData.files : e.target.files;
 
-    const imagesData = getImagesData(files, previewCount);
+    const imagesData = getImagesData(files, {
+      currentFiles: previewCount,
+      allowUploadingVideos: true
+    });
 
     if (!imagesData) {
       toast.error('Please choose a GIF or photo up to 4');

diff --git a/src/components/modal/image-modal.tsx b/src/components/modal/image-modal.tsx
@@ -37,7 +37,9 @@ export function ImageModal({
   const [indexes, setIndexes] = useState<number[]>([]);
   const [loading, setLoading] = useState(true);
 
-  const { src, alt } = imageData;
+  const { src, alt, type } = imageData;
+
+  const isVideo = type?.includes('video');
 
   const requireArrows = handleNextIndex && previewCount > 1;
 
@@ -51,9 +53,14 @@ export function ImageModal({
       setIndexes([...indexes, selectedIndex]);
     }
 
-    const image = new Image();
-    image.src = src;
-    image.onload = (): void => setLoading(false);
+    const media = isVideo ? document.createElement('video') : new Image();
+
+    media.src = src;
+
+    const handleLoadingCompleted = (): void => setLoading(false);
+
+    if (isVideo) media.onloadeddata = handleLoadingCompleted;
+    else media.onload = handleLoadingCompleted;
   }, [...(tweet && previewCount > 1 ? [src] : [])]);
 
   useEffect(() => {
@@ -103,28 +110,45 @@ export function ImageModal({
           </motion.div>
         ) : (
           <motion.div className='relative mx-auto' {...modal} key={src}>
-            <picture className='group relative flex max-w-3xl'>
-              <source srcSet={src} type='image/*' />
-              <img
-                className='max-h-[75vh] rounded-md object-contain md:max-h-[80vh]'
-                src={src}
-                alt={alt}
-                onClick={preventBubbling()}
-              />
-              <a
-                className='trim-alt accent-tab absolute bottom-0 right-0 mx-2 mb-2 translate-y-4
-                           rounded-md bg-main-background/40 px-2 py-1 text-sm text-light-primary/80 opacity-0
-                           transition hover:bg-main-accent hover:text-white focus-visible:translate-y-0
-                           focus-visible:bg-main-accent focus-visible:text-white focus-visible:opacity-100
-                           group-hover:translate-y-0 group-hover:opacity-100 dark:text-dark-primary/80'
-                href={src}
-                target='_blank'
-                rel='noreferrer'
-                onClick={preventBubbling(null, true)}
-              >
-                {alt}
-              </a>
-            </picture>
+            {isVideo ? (
+              <div className='group relative flex max-w-3xl'>
+                <video
+                  className={cn(
+                    'max-h-[75vh] rounded-md object-contain md:max-h-[80vh]',
+                    loading ? 'hidden' : 'block'
+                  )}
+                  src={src}
+                  autoPlay
+                  controls
+                  onClick={preventBubbling()}
+                >
+                  <source srcSet={src} type='video/*' />
+                </video>
+              </div>
+            ) : (
+              <picture className='group relative flex max-w-3xl'>
+                <source srcSet={src} type='image/*' />
+                <img
+                  className='max-h-[75vh] rounded-md object-contain md:max-h-[80vh]'
+                  src={src}
+                  alt={alt}
+                  onClick={preventBubbling()}
+                />
+                <a
+                  className='trim-alt accent-tab absolute bottom-0 right-0 mx-2 mb-2 translate-y-4
+                             rounded-md bg-main-background/40 px-2 py-1 text-sm text-light-primary/80 opacity-0
+                             transition hover:bg-main-accent hover:text-white focus-visible:translate-y-0
+                             focus-visible:bg-main-accent focus-visible:text-white focus-visible:opacity-100
+                             group-hover:translate-y-0 group-hover:opacity-100 dark:text-dark-primary/80'
+                  href={src}
+                  target='_blank'
+                  rel='noreferrer'
+                  onClick={preventBubbling(null, true)}
+                >
+                  {alt}
+                </a>
+              </picture>
+            )}
             <a
               className='custom-underline absolute left-0 -bottom-7 font-medium text-light-primary/80
                          decoration-transparent underline-offset-2 transition hover:text-light-primary hover:underline

diff --git a/src/components/tweet/tweet.tsx b/src/components/tweet/tweet.tsx
@@ -99,6 +99,7 @@ export function Tweet(tweet: TweetProps): JSX.Element {
               ? 'mt-0.5 pt-2.5 pb-0'
               : 'border-b border-light-border dark:border-dark-border'
           )}
+          draggable={false}
           onClick={delayScroll(200)}
         >
           <div className='grid grid-cols-[auto,1fr] gap-x-3 gap-y-1'>