fix: Small Bug Fixes.

src/common/apis/kickApi.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { KickClip } from '../models/kick';
 
-export async function getClip(id: string): Promise<KickClip | undefined> {
+export const getClip = async (id: string): Promise<KickClip | undefined> => {
   if (id.length <= 0) {
     return;
   }
@@ -12,16 +12,16 @@ export async function getClip(id: string): Promise<KickClip | undefined> {
     console.error('Failed to Get Kick clip:', id, e);
     return;
   }
-}
+};
 
-export async function getDirectUrl(id: string): Promise<string | undefined> {
+export const getDirectUrl = async (id: string): Promise<string | undefined> => {
   const clip = await getClip(id);
   if (!clip || !clip.video_url) {
     console.error('Invalid clip or missing playback URL');
     return;
   }
   return clip.video_url;
-}
+};
 
 const kickApi = {
   getClip,

src/features/clips/history/HistoryPage.tsx

@@ -21,7 +21,7 @@ function MemoryPage() {
             {clipObjects.map((clip) => (
               <Grid.Col span={2} key={clip!.id}>
                 <Anchor
-                  href={clipProvider.getUrl(clip!.id)}
+                  href={clipProvider.getUrl(clip!.id) || clipProvider.getChannelUrl(clip!.id, clip!)}
                   target="_blank"
                   referrerPolicy="no-referrer"
                   underline={false}

src/features/clips/providers/kickClip/kickClipProvider.ts

@@ -51,6 +51,10 @@ class KickClipProvider implements ClipProvider {
     return this.clipCache.get(id);
   }
 
+  getChannelUrl(id: string, clipInfo: Clip): string | undefined {
+    return `https://kick.com/${clipInfo.author}/clips/${id}`;
+  }
+
   getEmbedUrl(id: string): string | undefined {
     return this.getUrl(id);
   }

src/features/clips/providers/providers.ts

@@ -16,6 +16,7 @@ export interface ClipProvider {
   getEmbedUrl(id: string): string | undefined;
   getAutoplayUrl(id: string): Promise<string | undefined>;
   getFallbackM3u8Url?(id: string): string | undefined;
+  getChannelUrl?(id: string, clipInfo: Clip): string | undefined;
 }
 
 class CombinedClipProvider implements ClipProvider {
@@ -70,6 +71,10 @@ class CombinedClipProvider implements ClipProvider {
     const [provider, idPart] = this.getProviderAndId(id);
     return provider?.getFallbackM3u8Url?.(idPart);
   }
+  getChannelUrl(id: string, clipInfo: Clip): string | undefined {
+    const [provider, idPart] = this.getProviderAndId(id);
+    return provider?.getChannelUrl?.(idPart, clipInfo);
+  }
 
   setProviders(providers: string[]) {
     logger.info('setProviders', providers);

src/features/clips/queue/Player.tsx

@@ -64,15 +64,18 @@ function Player({ className }: PlayerProps) {
   const autoplayTimeoutHandle = useAppSelector(selectAutoplayTimeoutHandle);
   const [videoSrc, setVideoSrc] = useState<string | undefined>(undefined);
   const [error, setError] = useState<string | null>(null);
+  const [isFallback, setIsFallback] = useState(false);
 
   useEffect(() => {
     if (!currentClip) {
       setVideoSrc(undefined);
       setError(null);
+      setIsFallback(false);
       return;
     }
 
     setVideoSrc(undefined);
+    setIsFallback(false);
     let Flag = true;
 
     const fetchVideoUrl = async () => {
@@ -81,12 +84,14 @@ function Player({ className }: PlayerProps) {
         if (Flag) {
           setVideoSrc(url);
           setError(null);
+          setIsFallback(false);
         }
       } catch (err) {
         if (Flag) {
           const fallbackUrl = clipProvider.getFallbackM3u8Url(currentClip.id);
           setVideoSrc(fallbackUrl);
           setError(null);
+          setIsFallback(true);
         } else {
           setError('Failed to load video. Please make an Issue Request on GitHub. Thank you!');
         }
@@ -100,7 +105,8 @@ function Player({ className }: PlayerProps) {
     };
   }, [currentClip]);
 
-  const player = getPlayerComponent(currentClip, videoSrc, autoplayEnabled, nextClipId, dispatch);
+  const effectAutoPlay = autoplayEnabled && !isFallback;
+  const player = getPlayerComponent(currentClip, videoSrc, effectAutoPlay, nextClipId, dispatch);
 
   return (
     <Stack

src/index.scss

@@ -33,19 +33,20 @@ html {
   transform: translateY(0) !important;
 }
 
-.video-js.vjs-paused .vjs-control-bar {
+.video-js.vjs-paused .vjs-control-bar,
+.video-js.vjs-waiting .vjs-control-bar {
   transform: translateY(0) !important;
   opacity: 1 !important;
   transition: transform var(--control-bar-duration) var(--control-bar-easing) !important;
 }
 
-.video-js.vjs-user-inactive:not(.vjs-paused) .vjs-control-bar {
+.video-js.vjs-user-inactive:not(.vjs-paused):not(.vjs-waiting) .vjs-control-bar {
   transform: translateY(100%) !important;
   opacity: 1 !important;
   transition: transform var(--control-bar-duration) var(--control-bar-easing) !important;
 }
 
-.video-js:not(:hover):not(.vjs-paused) .vjs-control-bar {
+.video-js:not(:hover):not(.vjs-paused):not(.vjs-waiting) .vjs-control-bar {
   transform: translateY(100%) !important;
 }