feat: video display

js/packages/web/src/components/ArtContent/index.tsx

@@ -1,11 +1,10 @@
 import React, { Ref, useCallback, useEffect, useRef, useState } from 'react';
 import { Image } from 'antd';
-import { MetadataCategory } from '@oyster/common';
+import { MetadataCategory, MetadataFile } from '@oyster/common';
 import { MeshViewer } from '../MeshViewer';
 import { ThreeDots } from '../MyLoader';
 import { useCachedImage, useExtendedArt } from '../../hooks';
 import { Stream, StreamPlayerApi } from '@cloudflare/stream-react';
-import { useInView } from 'react-intersection-observer';
 import { PublicKey } from '@solana/web3.js';
 
 const MeshArtContent = ({
@@ -17,9 +16,9 @@ const MeshArtContent = ({
   uri?: string;
   className?: string;
   style?: React.CSSProperties;
-  files?: string[];
+  files?: (MetadataFile | string)[];
 }) => {
-  const renderURL = files && files.length > 0 ? files[0] : uri;
+  const renderURL = files && files.length > 0 && typeof files[0] === 'string'  ? files[0] : uri;
   const { isLoading } = useCachedImage(renderURL || '', true);
 
   if (isLoading) {
@@ -71,7 +70,7 @@ const VideoArtContent = ({
   extension?: string;
   className?: string;
   style?: React.CSSProperties;
-  files?: string[];
+  files?: (MetadataFile | string)[];
   active?: boolean;
 }) => {
   const [playerApi, setPlayerApi] = useState<StreamPlayerApi>();
@@ -90,9 +89,13 @@ const VideoArtContent = ({
   }, [active, playerApi]);
 
   const likelyVideo = (files || []).filter((f, index, arr) => {
+    if(typeof f !== 'string') {
+      return false;
+    }
+
     // TODO: filter by fileType
     return arr.length >= 2 ? index === 1 : index === 0;
-  })[0];
+  })?.[0] as string;
 
   const content = (
     likelyVideo && likelyVideo.startsWith('https://watch.videodelivery.net/') ? (
@@ -116,7 +119,7 @@ const VideoArtContent = ({
       <video
         className={className}
         playsInline={true}
-        autoPlay={false}
+        autoPlay={true}
         muted={true}
         controls={true}
         controlsList="nodownload"
@@ -124,7 +127,8 @@ const VideoArtContent = ({
         loop={true}
         poster={extension}
       >
-        <source src={likelyVideo} type="video/mp4" style={style} />
+        {likelyVideo && <source src={likelyVideo} type="video/mp4" style={style} />}
+        {files?.filter(f => typeof f !== 'string').map((f: any) => <source src={f.uri} type={f.type} style={style} />)}
       </video>
     )
   );
@@ -163,14 +167,14 @@ export const ArtContent = ({
   extension?: string;
   uri?: string;
   animationURL?: string;
-  files?: string[];
+  files?: (MetadataFile | string)[];
 }) => {
   const id = typeof pubkey === 'string' ? pubkey : pubkey?.toBase58() || '';
 
   const { ref, data } = useExtendedArt(id);
 
   if(pubkey && data) {
-    files = data.properties.files?.filter(f => typeof f === 'string') as string[];
+    files = data.properties.files;
     uri = data.image;
     animationURL = data.animation_url;
     category = data.properties.category;

js/packages/web/src/components/PreSaleBanner/index.tsx

@@ -6,16 +6,18 @@ import { AuctionView, useArt } from '../../hooks';
 import { ArtContent } from '../ArtContent';
 import { AuctionCard } from '../AuctionCard';
 import { Link } from 'react-router-dom';
+import { useMeta } from '../../contexts';
 
 interface IPreSaleBanner {
   auction?: AuctionView;
 }
 
 export const PreSaleBanner = ({ auction }: IPreSaleBanner) => {
+  const { isLoading } = useMeta();
   const id = auction?.thumbnail.metadata.pubkey;
   const art = useArt();
 
-  if (!auction) {
+  if (isLoading) {
     return <Skeleton />;
   }
 
@@ -31,7 +33,7 @@ export const PreSaleBanner = ({ auction }: IPreSaleBanner) => {
         <h2 className="art-title">
           {art.title}
         </h2>
-        <AuctionCard
+        {auction && <AuctionCard
           auctionView={auction}
           style={{
             background: 'transparent',
@@ -54,7 +56,7 @@ export const PreSaleBanner = ({ auction }: IPreSaleBanner) => {
               </Link>
             </>
           }
-        />
+        />}
       </Col>
     </Row>
   );