improve mobile support

TODO.md

@@ -1,6 +1,6 @@
 
-Allow browsing some loras
 
-Funny use cases to try:
-- Hugging Face
-- Zelda 64 (will be a bit more tricky since it uses some custom Replicate stuff)
+## Video quality improvements
+
+- Add a "style prompt" to do it like the AI Comic Factory
+- Make it easier to pick a LoRA

src/app/config.ts

@@ -1,3 +1,7 @@
 export const showBetaFeatures = `${
   process.env.NEXT_PUBLIC_SHOW_BETA_FEATURES || ""
 }`.trim().toLowerCase() === "true"
+
+
+export const defaultVideoModel = "SVD"
+export const defaultVoice = "Julian"

src/app/interface/action-button/index.tsx

@@ -1,7 +1,15 @@
 import { ReactNode } from "react"
 
 import { cn } from "@/lib/utils"
-import Link from "next/link"
+
+export const actionButtonClassName = cn(
+  `flex flex-row space-x-1.5 lg:space-x-2 pl-2 lg:pl-3 pr-3 lg:pr-4 h-8 lg:h-9`,
+  `items-center justify-center text-center`,
+  `rounded-2xl`,
+  `cursor-pointer`,
+  `text-xs lg:text-sm font-medium`,
+  `bg-neutral-700/50 hover:bg-neutral-700/90 text-zinc-100`,
+)
 
 export function ActionButton({
   className,
@@ -14,12 +22,7 @@ export function ActionButton({
 }) {
 
   const classNames = cn(
-    `flex flex-row space-x-2 pl-3 pr-4 h-9`,
-    `items-center justify-center text-center`,
-    `rounded-2xl`,
-    `cursor-pointer`,
-    `text-sm font-medium`,
-    `bg-neutral-700/50 hover:bg-neutral-700/90 text-zinc-100`,
+    actionButtonClassName,
     className,
   )
 

src/app/interface/channel-card/index.tsx

@@ -1,10 +1,12 @@
 import { useState } from "react"
 import dynamic from "next/dynamic"
 
+import { RiCheckboxCircleFill } from "react-icons/ri"
+import { IoAdd } from "react-icons/io5"
+
 import { cn } from "@/lib/utils"
 import { ChannelInfo } from "@/types"
 import { isCertifiedUser } from "@/app/certification"
-import { RiCheckboxCircleFill } from "react-icons/ri"
 
 const DefaultAvatar = dynamic(() => import("../default-avatar"), {
   loading: () => null,
@@ -31,6 +33,8 @@ export function ChannelCard({
     }
   }
 
+  const isCreateButton = !channel.id
+
   return (
   <div
     className={cn(
@@ -39,8 +43,8 @@ export function ChannelCard({
       `space-y-1`,
       `w-52 h-52`,
       `rounded-lg`,
-      `hover:bg-neutral-800/30`,
-      `text-neutral-100/80 hover:text-neutral-100/100`,
+      `text-neutral-100/80`,
+      isCreateButton ? '' : `hover:bg-neutral-800/30 hover:text-neutral-100/100`,
       `cursor-pointer`,
       className,
     )}
@@ -57,8 +61,17 @@ export function ChannelCard({
           `w-26 h-26`
         )}
       >
-        {channelThumbnail ? 
-          <img
+        {isCreateButton
+        ? <div className={cn(
+          `flex flex-col justify-center items-center text-center`,
+          `w-full h-full rounded-full`,
+          `bg-neutral-700 hover:bg-neutral-600`,
+          `border-2 border-neutral-400 hover:border-neutral-300`
+          )}>
+            <IoAdd className="w-8 h-8" />
+          </div>
+        : channelThumbnail
+        ? <img
             src={channelThumbnail}
             onError={handleBadChannelThumbnail}
           />
@@ -76,22 +89,27 @@ export function ChannelCard({
          `items-center justify-center text-center`,
          `space-y-1`
       )}>
-        <div className="text-center text-base font-medium text-zinc-100">{channel.label}</div>
+        <div className={cn(
+          `text-center text-base font-medium text-zinc-100`,
+          isCreateButton ? 'mt-2' : ''
+        )}>{
+          isCreateButton ? "Create a channel" : channel.label
+        }</div>
         {/*<div className="text-center text-sm font-semibold">
           by <a href={
             `https://huggingface.co/${channel.datasetUser}`
           } target="_blank">@{channel.datasetUser}</a>
         </div>
         */}
-        <div className="flex flex-row items-center space-x-0.5">
+        {!isCreateButton && <div className="flex flex-row items-center space-x-0.5">
           <div className="flex flex-row items-center text-center text-xs font-medium">@{channel.datasetUser}</div>
           {isCertifiedUser(channel.datasetUser) ? <div className="text-xs text-neutral-400"><RiCheckboxCircleFill className="" /></div> : null}
-        </div>
-        <div className="flex flex-row items-center justify-center text-neutral-400">
+        </div>}
+        {!isCreateButton && <div className="flex flex-row items-center justify-center text-neutral-400">
           <div className="text-center text-xs">{0} videos</div>
           <div className="px-1">-</div>
           <div className="text-center text-xs">{channel.likes} likes</div>
-        </div>
+        </div>}
       </div>
     </div>
   )

src/app/interface/left-menu/index.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link"
+
 import { GrChannel } from "react-icons/gr"
 import { MdVideoLibrary } from "react-icons/md"
 import { RiHome8Line } from "react-icons/ri"
@@ -6,17 +8,17 @@ import { CgProfile } from "react-icons/cg"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
-import { MenuItem } from "./menu-item"
 import { showBetaFeatures } from "@/app/config"
-import Link from "next/link"
 
+import { MenuItem } from "./menu-item"
 
 export function LeftMenu() {
   const view = useStore(s => s.view)
 
   return (
     <div className={cn(
-      `flex flex-col`,
+      `hidden sm:flex`,
+       `flex-col`,
       `w-24 px-1 pt-4`,
       `justify-between`
      // `bg-orange-500`,

src/app/interface/left-menu/menu-item/index.tsx

@@ -22,7 +22,7 @@ export function MenuItem({
       `items-center justify-center justify-items-stretch`,
       // `bg-green-500`,
       `cursor-pointer`,
-      `w-full h-21`,
+      `w-20 h-18 sm:w-full sm:h-21`, 
       `p-1`,
       `group`
     )}

src/app/interface/mobile-bottom-menu/index.tsx

@@ -0,0 +1,54 @@
+import Link from "next/link"
+
+import { GrChannel } from "react-icons/gr"
+import { MdVideoLibrary } from "react-icons/md"
+import { RiHome8Line } from "react-icons/ri"
+import { PiRobot } from "react-icons/pi"
+import { CgProfile } from "react-icons/cg"
+
+import { useStore } from "@/app/state/useStore"
+import { cn } from "@/lib/utils"
+import { showBetaFeatures } from "@/app/config"
+
+import { MenuItem } from "../left-menu/menu-item"
+
+export function MobileBottomMenu() {
+  const view = useStore(s => s.view)
+
+  return (
+    <div className={cn(
+      `flex sm:hidden`,
+      `flex-row`,
+      `w-full`,
+      `justify-between`
+    )}>
+      <Link href={{
+          pathname: '/',
+          query: { v: undefined },
+        }}>
+        <MenuItem
+          icon={<RiHome8Line className="h-6 w-6" />}
+          selected={view === "home"}
+          >
+          Discover
+        </MenuItem>
+      </Link>
+      <Link href="/channels">
+        <MenuItem
+          icon={<GrChannel className="h-5 w-5" />}
+          selected={view === "public_channels"}
+          >
+          Channels
+        </MenuItem>
+      </Link>
+      <Link href="/account">
+        <MenuItem
+            icon={<CgProfile className="h-6 w-6" />}
+            selected={view === "user_account" || view === "user_channel"}
+            >
+            Account
+        </MenuItem>
+      </Link>
+    </div>
+  )
+}

src/app/interface/top-header/index.tsx

@@ -98,10 +98,13 @@ export function TopHeader() {
           </div>
         </div>
         <div className={cn(
-           `transition-all duration-200 ease-in-out`,
-           `flex flex-col items-center justify-center`,
-           `px-4 py-2 w-max-64`,
-           `text-neutral-400 text-sm italic`
+          // TODO: show the disclaimer on mobile too, maybe with a modal or something
+          `hidden sm:flex`,
+          `flex-col`,
+          `items-center justify-center`,
+          `transition-all duration-200 ease-in-out`,
+          `px-4 py-2 w-max-64`,
+          `text-neutral-400 text-2xs sm:text-xs lg:text-sm italic`
         )}>
         All the videos are generated using AI, for research purposes only. Some models might produce factually incorrect or biased outputs.
         </div>

src/app/interface/tube-layout/index.tsx

@@ -5,8 +5,10 @@ import { cn } from "@/lib/utils"
 import { useStore } from "@/app/state/useStore"
 
 import { LeftMenu } from "../left-menu"
+import { MobileBottomMenu } from "../mobile-bottom-menu"
 import { TopHeader } from "../top-header"
 
+
 export function TubeLayout({ children }: { children?: ReactNode }) {
   const headerMode = useStore(s => s.headerMode)
   const view = useStore(s => s.view)
@@ -21,7 +23,7 @@ export function TubeLayout({ children }: { children?: ReactNode }) {
       <LeftMenu />
       <div className={cn(
         `flex flex-col`,
-        `w-[calc(100vw-96px)]`,
+        `w-full sm:w-[calc(100vw-96px)]`,
         `px-2`
       )}>
         <TopHeader />
@@ -33,6 +35,7 @@ export function TubeLayout({ children }: { children?: ReactNode }) {
           )}>
           {children}
         </main>
+        <MobileBottomMenu />
       </div>
     </div>
   )

src/app/interface/video-card/index.tsx

@@ -118,7 +118,7 @@ export function VideoCard({
         {/* TEXT BLOCK */}
         <div className={cn(
           `flex flex-row`,
-          isCompact ? `w-51` : `space-x-4`,
+          isCompact ? `w-40 lg:w-44 xl:w-51` : `space-x-4`,
         )}>
           {
           isCompact ? null
@@ -143,12 +143,12 @@ export function VideoCard({
           )}>
             <h3 className={cn(
               `text-zinc-100 font-medium mb-0 line-clamp-2`,
-              isCompact ? `text-sm mb-1.5` : `text-base`
+              isCompact ? `text-2xs md:text-xs lg:text-sm mb-1.5` : `text-base`
             )}>{video.label}</h3>
             <div className={cn(
               `flex flex-row items-center`,
               `text-neutral-400 font-normal space-x-1`,
-              isCompact ? `text-xs` : `text-sm`
+              isCompact ? `text-3xs md:text-2xs lg:text-xs` : `text-sm`
               )}>
               <div>{video.channel.label}</div>
               {isCertifiedUser(video.channel.datasetUser) ? <div><RiCheckboxCircleFill className="" /></div> : null}
@@ -157,7 +157,7 @@ export function VideoCard({
             <div className={cn(
               `flex flex-row`,
               `text-neutral-400 font-normal`,
-              isCompact ? `text-xs` : `text-sm`,
+              isCompact ? `text-2xs lg:text-xs` : `text-sm`,
               `space-x-1`
             )}>
             <div>0 views</div>

src/app/interface/video-list/index.tsx

@@ -29,7 +29,7 @@ export function VideoList({
     <div
       className={cn(
         layout === "grid"
-          ? `grid grid-cols-2 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4`
+          ? `grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4`
         : layout === "vertical"
           ? `grid grid-cols-1 gap-2`
           : `flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4`,

src/app/views/public-video-view/index.tsx

@@ -13,7 +13,7 @@ import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { VideoPlayer } from "@/app/interface/video-player"
 import { VideoInfo } from "@/types"
-import { ActionButton } from "@/app/interface/action-button"
+import { ActionButton, actionButtonClassName } from "@/app/interface/action-button"
 import { RecommendedVideos } from "@/app/interface/recommended-videos"
 import { isCertifiedUser } from "@/app/certification"
 
@@ -78,6 +78,8 @@ export function PublicVideoView() {
       <div className={cn(
         `flex-grow`,
         `flex flex-col`,
+        `transition-all duration-200 ease-in-out`,
+        `px-2 sm:px-0`
       )}>
         {/** VIDEO PLAYER - HORIZONTAL */}
         <VideoPlayer
@@ -88,8 +90,9 @@ export function PublicVideoView() {
         {/** VIDEO TITLE - HORIZONTAL */}
         <div className={cn(
           `flex flew-row space-x-2`,
-          `text-xl text-zinc-100 font-medium mb-0 line-clamp-2`,
-          `mb-2`
+          `transition-all duration-200 ease-in-out`,
+          `text-lg lg:text-xl text-zinc-100 font-medium mb-0 line-clamp-2`,
+          `mb-2`,
         )}>
           <div className="">{video.label}</div>
           {/*
@@ -108,21 +111,26 @@ export function PublicVideoView() {
         
         {/** VIDEO TOOLBAR - HORIZONTAL */}
         <div className={cn(
-          `flex flex-row`,
-          `items-center`,
+          `flex flex-col space-y-3 xl:space-y-0 xl:flex-row`,
+          `transition-all duration-200 ease-in-out`,
+          `items-start xl:items-center`,
           `justify-between`,
-          `mb-4`
+          `mb-4`,
         )}>
-          {/** LEFT PART FO THE TOOLBARR */}
+          {/** LEFT PART OF THE TOOLBAR */}
           <div className={cn(
             `flex flex-row`,
             `items-center`
           )}>
             {/** CHANNEL LOGO - VERTICAL */}
-            <div className={cn(
-              `flex flex-col`,
-              `mr-3`
-            )}>
+            <a
+              className={cn(
+                `flex flex-col`,
+                `mr-3`,
+                `cursor-pointer`
+              )}
+              href={`https://huggingface.co/datasets/${video.channel.datasetUser}/${video.channel.datasetName}`}
+              target="_blank">
               <div className="flex w-10 rounded-full overflow-hidden">
               {
                 channelThumbnail ? <div className="flex flex-col">
@@ -141,15 +149,20 @@ export function PublicVideoView() {
                   roundShape
                 />}
               </div>
-            </div>
+            </a>
 
             {/** CHANNEL INFO - VERTICAL */}
-            <div className={cn(
-              `flex flex-col`
-              )}>
+            <a className={cn(
+              `flex flex-row sm:flex-col`,
+              `transition-all duration-200 ease-in-out`,
+              `cursor-pointer`,
+              )}
+              href={`https://huggingface.co/datasets/${video.channel.datasetUser}/${video.channel.datasetName}`}
+              target="_blank">
               <div className={cn(
                 `flex flex-row items-center`,
-                `text-zinc-100 text-base font-medium space-x-1`,
+                `transition-all duration-200 ease-in-out`,
+                `text-zinc-100 text-sm lg:text-base font-medium space-x-1`,
                 )}>
                 <div>{video.channel.label}</div>
                 {isCertifiedUser(video.channel.datasetUser) ? <div className="text-sm text-neutral-400"><RiCheckboxCircleFill className="" /></div> : null}
@@ -161,10 +174,12 @@ export function PublicVideoView() {
                 <div>0 followers</div>
                 <div></div>
               </div>
-            </div>
+            </a>
+
+
           </div>
 
-          {/** RIGHT PART FO THE TOOLBAR */}
+          {/** RIGHT PART OF THE TOOLBAR */}
           <div className={cn(
             `flex flex-row`,
             `items-center`,
@@ -178,14 +193,7 @@ export function PublicVideoView() {
               <CopyToClipboard
                 text={`https://huggingface.co/spaces/jbilcke-hf/ai-tube?v=${video.id}`}
                 onCopy={() => setCopied(true)}>
-                <div className={cn(
-                  `flex flex-row space-x-2 pl-3 pr-4 h-9`,
-                  `items-center justify-center text-center`,
-                  `rounded-2xl`,
-                  `cursor-pointer`,
-                  `text-sm font-medium`,
-                  `bg-neutral-700/50 hover:bg-neutral-700/90 text-zinc-100`
-                )}>
+                <div className={actionButtonClassName}>
                   <div className="flex items-center justify-center">
                     {
                       copied ? <LuCopyCheck className="w-4 h-4" />
@@ -234,17 +242,19 @@ export function PublicVideoView() {
         {/** VIDEO DESCRIPTION - VERTICAL */}
         <div className={cn(
           `flex flex-col p-3`,
+          `transition-all duration-200 ease-in-out`,
           `rounded-xl`,
           `bg-neutral-700/50`,
-          `text-sm`
+          `text-sm`,
         )}>
           <p>{video.description}</p>
         </div>
       </div>
       <div className={cn(
-        `sm:w-56 md:w-[450px]`,
+        `w-40 sm:w-56 md:w-64 lg:w-72 xl:w-[450px]`,
+        `transition-all duration-200 ease-in-out`,
         `hidden sm:flex flex-col`,
-        `pl-5 pr-8`,
+        `pl-5 pr-1 sm:pr-2 md:pr-3 lg:pr-4 xl:pr-6 2xl:pr-8`,
       )}>
        <RecommendedVideos video={video} />
       </div>

src/app/views/user-account-view/index.tsx

@@ -10,6 +10,7 @@ import { ChannelList } from "@/app/interface/channel-list"
 import { localStorageKeys } from "@/app/state/localStorageKeys"
 import { defaultSettings } from "@/app/state/defaultSettings"
 import { Input } from "@/components/ui/input"
+import { ChannelInfo } from "@/types"
 
 export function UserAccountView() {
   const [_isPending, startTransition] = useTransition()
@@ -73,13 +74,22 @@ export function UserAccountView() {
         <h2 className="text-3xl font-bold">Your custom channels:</h2>
         {userChannels?.length ? <ChannelList
           layout="grid"
-          channels={userChannels}
+          channels={[
+            // add a fake button to the list, at the beginning
+            // { id: "" } as ChannelInfo,
+
+            ...userChannels
+          ]}
           onSelect={(userChannel) => {
-            setUserChannel(userChannel)
+            if (userChannel.id) {
+              setUserChannel(userChannel)
+            }
             setView("user_channel")
           }}
-        /> : <p>Ask <span className="font-mono">@jbilcke-hf</span> for help to create a channel!</p>}
+        />
+        : isLoaded ? <p>You don&apos;t seem to have any channel yet. See @flngr on X to learn more about how to do this!</p> : <p>Loading channels..</p>}
       </div> : null}
+
     </div>
   )
 }

src/app/views/user-channel-view/index.tsx

@@ -17,6 +17,7 @@ import { PendingVideoList } from "@/app/interface/pending-video-list"
 import { getChannelVideos } from "@/app/server/actions/ai-tube-hf/getChannelVideos"
 import { parseVideoModelName } from "@/app/server/actions/utils/parseVideoModelName"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { defaultVideoModel, defaultVoice } from "@/app/config"
 
 export function UserChannelView() {
   const [_isPending, startTransition] = useTransition()
@@ -24,11 +25,7 @@ export function UserChannelView() {
     localStorageKeys.huggingfaceApiKey,
     defaultSettings.huggingfaceApiKey
   )
-
-  const defaultVideoModel = "SVD"
-  const defaultVoice = "Julian"
   
-
   const [titleDraft, setTitleDraft] = useState("")
   const [descriptionDraft, setDescriptionDraft] = useState("")
   const [tagsDraft, setTagsDraft] = useState("")