fix: bytes autoplay (#495)

* fix: bytes autoplay

* chore: reorder props

* chore: cleanup

* chore: add cdn link for logo

apps/web/src/components/Bytes/ByteVideo.tsx

@@ -1,7 +1,7 @@
 import CollectVideo from '@components/Watch/CollectVideo'
 import { ControlsContainer } from '@livepeer/react'
 import type { FC } from 'react'
-import React, { useState } from 'react'
+import React, { useRef } from 'react'
 import { useInView } from 'react-cool-inview'
 import type { LenstubePublication } from 'utils'
 import { getPublicationMediaUrl } from 'utils/functions/getPublicationMediaUrl'
@@ -19,43 +19,40 @@ type Props = {
 }
 
 const ByteVideo: FC<Props> = ({ video }) => {
-  const [videoRef, setVideoRef] = useState<HTMLMediaElement>()
-  const [playing, setIsPlaying] = useState(true)
+  const videoRef = useRef<HTMLMediaElement>()
 
   const playVideo = () => {
-    if (!videoRef) return
-    videoRef.currentTime = 0
-    videoRef.volume = 1
-    videoRef
-      ?.play()
-      .then(() => setIsPlaying(true))
-      .catch(() => {})
+    if (!videoRef.current) return
+    videoRef.current.currentTime = 0
+    videoRef.current.volume = 1
+    videoRef.current.autoplay = true
+    videoRef.current?.play().catch(() => {})
+  }
+
+  const pauseVideo = () => {
+    if (!videoRef.current) return
+    videoRef.current?.pause()
+    videoRef.current.autoplay = false
   }
 
   const onClickVideo = () => {
-    if (videoRef?.paused) {
+    if (videoRef.current?.paused) {
       playVideo()
     } else {
-      videoRef?.pause()
-      setIsPlaying(false)
+      pauseVideo()
     }
   }
 
   const refCallback = (ref: HTMLMediaElement) => {
     if (!ref) return
-    if (ref?.paused) {
-      setIsPlaying(false)
-    } else {
-      setIsPlaying(true)
-    }
-    setVideoRef(ref)
+    videoRef.current = ref
   }
 
   const { observe } = useInView({
     threshold: 1,
     onLeave: () => {
-      videoRef?.pause()
-      setIsPlaying(false)
+      if (!videoRef.current) return
+      pauseVideo()
     },
     onEnter: () => {
       const nextUrl = window.location.origin + `/bytes/${video?.id}`
@@ -82,7 +79,7 @@ const ByteVideo: FC<Props> = ({ video }) => {
             <ControlsContainer />
           </VideoPlayer>
         </div>
-        <TopOverlay playing={playing} onClickPlayPause={onClickVideo} />
+        <TopOverlay onClickVideo={onClickVideo} />
         <BottomOverlay video={video} />
         <div className="absolute md:hidden z-[1] right-2 bottom-[15%]">
           <ByteActions video={video} />

apps/web/src/components/Bytes/TopOverlay.tsx

@@ -1,18 +1,17 @@
 import Link from 'next/link'
 import type { FC } from 'react'
 import React from 'react'
-import { BsArrowLeft, BsPauseFill, BsPlayFill } from 'react-icons/bs'
+import { BsArrowLeft } from 'react-icons/bs'
 
 type Props = {
-  onClickPlayPause: () => void
-  playing: boolean
+  onClickVideo: () => void
 }
 
-const TopOverlay: FC<Props> = ({ onClickPlayPause, playing }) => {
+const TopOverlay: FC<Props> = ({ onClickVideo }) => {
   return (
     <div
       role="button"
-      onClick={() => onClickPlayPause()}
+      onClick={() => onClickVideo()}
       className="absolute top-0 z-[1] bottom-0 left-0 right-0 w-full outline-none cursor-default"
     >
       <div className="flex items-center justify-between">
@@ -21,13 +20,6 @@ const TopOverlay: FC<Props> = ({ onClickPlayPause, playing }) => {
             <BsArrowLeft className="text-2xl text-white" />
           </Link>
         </div>
-        <div className="p-3">
-          {playing ? (
-            <BsPauseFill className="text-2xl text-white" />
-          ) : (
-            <BsPlayFill className="text-2xl text-white" />
-          )}
-        </div>
       </div>
     </div>
   )

apps/web/src/components/Common/FullPageLoader.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { STATIC_ASSETS } from 'utils'
+import imageCdn from 'utils/functions/imageCdn'
 
 import MetaTags from './MetaTags'
 
@@ -9,7 +10,7 @@ const FullPageLoader = () => {
       <MetaTags />
       <div className="animate-bounce">
         <img
-          src={`${STATIC_ASSETS}/images/brand/christmas.png`}
+          src={imageCdn(`${STATIC_ASSETS}/images/brand/christmas.png`)}
           draggable={false}
           className="w-20 h-20 ml-6 mb-6"
           alt="lenstube"

packages/web-ui/VideoPlayer/index.tsx

@@ -54,11 +54,18 @@ const PlayerInstance = ({
 }: PlayerProps) => {
   return (
     <Player
-      controls={{ defaultVolume: 1 }}
-      mediaElementRef={playerRef}
-      poster={posterUrl}
       src={permanentUrl}
+      poster={posterUrl}
+      showTitle={false}
+      objectFit="contain"
       aspectRatio={ratio}
+      showPipButton={true}
+      mediaElementRef={playerRef}
+      loop={options?.loop ?? true}
+      showUploadingIndicator={false}
+      muted={options?.muted ?? false}
+      controls={{ defaultVolume: 1 }}
+      autoPlay={options?.autoPlay ?? false}
       autoUrlUpload={
         IS_MAINNET
           ? {
@@ -67,13 +74,6 @@ const PlayerInstance = ({
             }
           : false
       }
-      objectFit="contain"
-      showPipButton={true}
-      autoPlay={options?.autoPlay ?? false}
-      muted={options?.muted ?? false}
-      loop={options?.loop ?? true}
-      showTitle={false}
-      showUploadingIndicator={false}
     >
       {children}
     </Player>
@@ -142,18 +142,16 @@ const VideoPlayer: FC<Props> = ({
       {sensitiveWarning ? (
         <SensitiveWarning acceptWarning={() => setSensitiveWarning(false)} />
       ) : (
-        <div onContextMenu={onContextClick}>
-          <div className="relative">
-            <PlayerInstance
-              posterUrl={posterUrl}
-              permanentUrl={permanentUrl}
-              ratio={ratio}
-              playerRef={mediaElementRef}
-              options={options}
-            >
-              {children}
-            </PlayerInstance>
-          </div>
+        <div onContextMenu={onContextClick} className="relative">
+          <PlayerInstance
+            posterUrl={posterUrl}
+            permanentUrl={permanentUrl}
+            ratio={ratio}
+            playerRef={mediaElementRef}
+            options={options}
+          >
+            {children}
+          </PlayerInstance>
         </div>
       )}
     </div>