add tips to player

src/pages/parts/player/PlayerPart.tsx

@@ -15,7 +15,7 @@ import { useIsMobile } from "@/hooks/useIsMobile";
 import { PlayerMeta, playerStatus } from "@/stores/player/slices/source";
 import { usePlayerStore } from "@/stores/player/store";
 
-import { ScrapingPartInterruptButton } from "./ScrapingPart";
+import { ScrapingPartInterruptButton, Tips } from "./ScrapingPart";
 
 export interface PlayerPartProps {
   children?: ReactNode;
@@ -138,6 +138,7 @@ export function PlayerPart(props: PlayerPartProps) {
       </Player.TopControls>
 
       <Player.BottomControls show={showTargets}>
+        {status === playerStatus.PLAYING ? null : <Tips />}
         <div className="flex items-center justify-center space-x-3 h-full">
           {status === playerStatus.SCRAPING ? (
             <ScrapingPartInterruptButton />

src/pages/parts/player/ScrapingPart.tsx

@@ -180,3 +180,32 @@ export function ScrapingPartInterruptButton() {
     </div>
   );
 }
+
+const TIPS_LIST = [
+  "Tap the gear icon to switch sources!",
+  "Tap the title to copy the link!",
+  "Hold SHIFT for widescreen instead of fullscreen!",
+  "Some sources work better than others!",
+  "Get the extension for more sources!",
+  "Use arrow keys to skip or change volume!",
+  "Hold bookmarks to edit or delete them!",
+  "Hold SHIFT and tap the title to copy the link with time!",
+  "Set a custom subtitle color!",
+  "Migrate your account to a new backend in settings!",
+  "Join the Discord!",
+];
+
+export function Tips() {
+  const [tip] = useState(() => {
+    const randomIndex = Math.floor(Math.random() * TIPS_LIST.length);
+    return TIPS_LIST[randomIndex];
+  });
+
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="text-type-secondary text-center text-sm text-bold">
+        Tip: {tip}
+      </p>
+    </div>
+  );
+}