[V0_FILE]typescriptreact:file="app/reels/page.tsx" import { Suspense } from "react" import ReelsFeed from "@/components/reels/reels-feed" import ReelsLoading from "@/components/reels/reels-loading" import { ReelsHeader } from "@/components/reels/reels-header" export const metadata = { title: "Mixify Reels", description: "Discover and share short music videos", } export default function ReelsPage() { return (

) } [V0_FILE]typescriptreact:file="components/reels/reels-feed.tsx" "use client" import { useEffect, useRef, useState } from "react" import { ReelCard } from "./reel-card" import { Button } from "@/components/ui/button" import { PlusCircle } from "lucide-react" import { useRouter } from "next/navigation" import { getReels } from "@/lib/reels" import type { Reel } from "@/types/reel" export default function ReelsFeed() { const [reels, setReels] = useState([]) const [activeReelIndex, setActiveReelIndex] = useState(0) const [loading, setLoading] = useState(true) const feedRef = useRef(null) const router = useRouter() useEffect(() => { const fetchReels = async () => { try { const fetchedReels = await getReels() setReels(fetchedReels) } catch (error) { console.error("Failed to fetch reels:", error) } finally { setLoading(false) } } fetchReels() }, []) const handleScroll = () => { if (!feedRef.current) return const scrollTop = feedRef.current.scrollTop const reelHeight = feedRef.current.clientHeight const index = Math.round(scrollTop / reelHeight) if (index !== activeReelIndex) { setActiveReelIndex(index) } } const handleCreateReel = () => { router.push("/reels/create") } if (loading) { return

Loading reels...

} if (reels.length === 0) { return (

No reels yet

Be the first to create a reel and share your music moments!

) } return (

{reels.map((reel, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/reels/reel-card.tsx" "use client" import { useState, useRef, useEffect } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Heart, MessageCircle, Share2, Music, Play } from "lucide-react" import type { Reel } from "@/types/reel" interface ReelCardProps { reel: Reel isActive: boolean } export function ReelCard({ reel, isActive }: ReelCardProps) { const [isPlaying, setIsPlaying] = useState(false) const [liked, setLiked] = useState(false) const [likeCount, setLikeCount] = useState(reel.likes) const videoRef = useRef(null) useEffect(() => { if (isActive && videoRef.current) { videoRef.current.currentTime = 0 videoRef.current.play() setIsPlaying(true) } else if (!isActive && videoRef.current) { videoRef.current.pause() setIsPlaying(false) } }, [isActive]) const togglePlay = () => { if (videoRef.current) { if (isPlaying) { videoRef.current.pause() } else { videoRef.current.play() } setIsPlaying(!isPlaying) } } const handleLike = () => { setLiked(!liked) setLikeCount((prev) => (liked ? prev - 1 : prev + 1)) } return (

{/* Overlay for controls */}

{/* Top section with user info */}

{reel.user.username.substring(0, 2).toUpperCase()}

{reel.user.username}

{reel.createdAt}

{/* Bottom section with caption and music info */}

{reel.caption}

{reel.songName} • {reel.artistName}

{/* Right side actions */}

{likeCount}

{reel.comments}

{/* Play/Pause button overlay */}

{!isPlaying && ( )}

) } [V0_FILE]typescriptreact:file="components/reels/reels-header.tsx" "use client" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { ArrowLeft, Camera } from "lucide-react" export function ReelsHeader() { const router = useRouter() return (

Reels

) } [V0_FILE]typescriptreact:file="components/reels/reels-loading.tsx" import { Skeleton } from "@/components/ui/skeleton" export default function ReelsLoading() { return (

) } [V0_FILE]typescriptreact:file="app/reels/create/page.tsx" import { CreateReelForm } from "@/components/reels/create-reel-form" export const metadata = { title: "Create Reel | Mixify", description: "Create and share your music moments", } export default function CreateReelPage() { return (

) } [V0_FILE]typescriptreact:file="components/reels/create-reel-form.tsx" "use client" import type React from "react" import { useState, useRef } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { ArrowLeft, Upload, X, Music, Check } from "lucide-react" import { createReel } from "@/lib/reels" export function CreateReelForm() { const [videoFile, setVideoFile] = useState(null) const [videoPreview, setVideoPreview] = useState(null) const [caption, setCaption] = useState("") const [songName, setSongName] = useState("") const [artistName, setArtistName] = useState("") const [isUploading, setIsUploading] = useState(false) const [uploadProgress, setUploadProgress] = useState(0) const fileInputRef = useRef(null) const router = useRouter() const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file && file.type.startsWith("video/")) { setVideoFile(file) const url = URL.createObjectURL(file) setVideoPreview(url) } } const handleRemoveVideo = () => { setVideoFile(null) setVideoPreview(null) if (fileInputRef.current) { fileInputRef.current.value = "" } } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!videoFile) return try { setIsUploading(true) // Simulate upload progress const interval = setInterval(() => { setUploadProgress((prev) => { if (prev >= 95) { clearInterval(interval) return 95 } return prev + 5 }) }, 200) await createReel({ videoFile, caption, songName, artistName, }) clearInterval(interval) setUploadProgress(100) // Redirect to reels page after successful upload setTimeout(() => { router.push("/reels") }, 1000) } catch (error) { console.error("Failed to create reel:", error) setIsUploading(false) setUploadProgress(0) } } return (

Create Reel

Video {videoPreview ? (

) : (

fileInputRef.current?.click()} >

Click to upload video

MP4, MOV or WebM (max 60s)

)}

Caption

setCaption(e.target.value)}
            className="resize-none"
            rows={3}
          />
        </div>

<div className="space-y-4 bg-muted/30 p-4 rounded-lg">
          <div className="flex items-center gap-2">
            <Music className="h-5 w-5 text-muted-foreground" />
            <h3 className="font-medium">Music</h3>
          </div>

<div className="space-y-2">
            <Label htmlFor="songName">Song Name</Label>
            <Input
              id="songName"
              placeholder="Add song name"
              value={songName}
              onChange={(e) => setSongName(e.target.value)}
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="artistName">Artist</Label>
            <Input
              id="artistName"
              placeholder="Add artist name"
              value={artistName}
              onChange={(e) => setArtistName(e.target.value)}
            />
          </div>
        </div>

<Button type="submit" className="mt-auto" disabled={!videoFile || isUploading}>
          {isUploading ? (
            <>
              <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
              Uploading {uploadProgress}%
            </>
          ) : uploadProgress === 100 ? (
            <>
              <Check className="mr-2 h-4 w-4" />
              Uploaded!
            </>
          ) : (
            "Post Reel"
          )}
        </Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="types/reel.ts"
export interface User {
  id: string
  username: string
  avatarUrl: string
}

export interface Reel {
  id: string
  videoUrl: string
  thumbnailUrl: string
  caption: string
  songName: string
  artistName: string
  likes: number
  comments: number
  shares: number
  createdAt: string
  user: User
}

export interface CreateReelData {
  videoFile: File
  caption: string
  songName: string
  artistName: string
}

[V0_FILE]typescriptreact:file="lib/reels.ts"
import type { Reel, CreateReelData } from "@/types/reel"

// Mock data for reels
const mockReels: Reel[] = [
  {
    id: "1",
    videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
    thumbnailUrl: "/placeholder.svg?height=1920&width=1080",
    caption: "Vibing to this new track! 🎵 #MusicMoments",
    songName: "Blinding Lights",
    artistName: "The Weeknd",
    likes: 1245,
    comments: 89,
    shares: 32,
    createdAt: "2 hours ago",
    user: {
      id: "user1",
      username: "musiclover",
      avatarUrl: "/placeholder.svg?height=100&width=100",
    },
  },
  {
    id: "2",
    videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
    thumbnailUrl: "/placeholder.svg?height=1920&width=1080",
    caption: "This beat drop is everything! 🔥 #NewMusic",
    songName: "Save Your Tears",
    artistName: "The Weeknd & Ariana Grande",
    likes: 2389,
    comments: 156,
    shares: 78,
    createdAt: "5 hours ago",
    user: {
      id: "user2",
      username: "beatmaker",
      avatarUrl: "/placeholder.svg?height=100&width=100",
    },
  },
  {
    id: "3",
    videoUrl: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
    thumbnailUrl: "/placeholder.svg?height=1920&width=1080",
    caption: "Late night studio session 🌙 #MakingMusic",
    songName: "Levitating",
    artistName: "Dua Lipa",
    likes: 3567,
    comments: 245,
    shares: 112,
    createdAt: "1 day ago",
    user: {
      id: "user3",
      username: "producer_vibes",
      avatarUrl: "/placeholder.svg?height=100&width=100",
    },
  },
]

/**
 * Fetch reels from the API
 */
export async function getReels(): Promise<Reel[]> {
  // Simulate API call
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(mockReels)
    }, 1000)
  })
}

/**
 * Create a new reel
 */
export async function createReel(data: CreateReelData): Promise<Reel> {
  // Simulate API call
  return new Promise((resolve) => {
    setTimeout(() => {
      const newReel: Reel = {
        id: `reel-${Date.now()}`,
        videoUrl: URL.createObjectURL(data.videoFile),
        thumbnailUrl: "/placeholder.svg?height=1920&width=1080",
        caption: data.caption,
        songName: data.songName,
        artistName: data.artistName,
        likes: 0,
        comments: 0,
        shares: 0,
        createdAt: "Just now",
        user: {
          id: "current-user",
          username: "you",
          avatarUrl: "/placeholder.svg?height=100&width=100",
        },
      }

resolve(newReel)
    }, 2000)
  })
}

[V0_FILE]typescriptreact:file="components/reels/reels-nav-link.tsx"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Film } from "lucide-react"
import { cn } from "@/lib/utils"

interface ReelsNavLinkProps {
  className?: string
}

export function ReelsNavLink({ className }: ReelsNavLinkProps) {
  const pathname = usePathname()
  const isActive = pathname === "/reels"

return (
    <Link
      href="/reels"
      className={cn(
        "flex items-center gap-2 px-3 py-2 rounded-md transition-colors",
        isActive ? "bg-primary/10 text-primary" : "hover:bg-muted",
        className,
      )}
    >
      <Film className="h-5 w-5" />
      <span className="font-medium">Reels</span>
    </Link>
  )
}
</article></body></html>