Skip to content

edm #1

Open
Open
edm#1
@xoxoxo-af

Description

@xoxoxo-af
xoxoxo-af
opened on May 28, 2026

import { useState, useEffect, useRef } from 'react';

/**

  • DREAM OS v2 - Cyberpunk Neon Workstation (Monetization & Content Edition)
  • Design Philosophy: Cyberpunk Neon Maximalism
  • Features:
    • Play, Edit Beat (Overdrive), Synthesize New Beat, Download Master
    • Live Content Monitor (Simulated Sub Count, Est. Revenue, Realtime Views)
    • Marketplace Distribution System (Export to Splice, Gumroad, YouTube)
      */

interface Track {
title: string;
album: string;
genre: string;
bpm: number;
src: string;
lyrics: string[];
price: number; // ราคาสำหรับส่งขาย
}

export default function Home() {
// --- TRACKS DATA FOR MONETIZATION ---
const [tracks, setTracks] = useState<Track[]>([
{
title: "Neural Wake",
album: "Grid Locked",
genre: "Cyberpunk Bass House",
bpm: 128,
src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
lyrics: [
"[0.0:] DREAM OS, neural core online.",
"[3.8:] Data-stream in perfect time.",
"[7.5:] Global grid, a steady pace.",
"[11.2:] Feel the bass across all space.",
"[15.0:] Market pulse and neon glow.",
"[18.8:] Let the Cyber Bass House flow.",
"[22.5:] I AM THE BEAT, I AM THE CODE."
],
price: 29.99
},
{
title: "Cyber Pulse",
album: "Neon Horizon",
genre: "Electro House / Synthwave",
bpm: 132,
src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
lyrics: [
"[0.0:] Booting synth modules...",
"[4.0:] Neon signs flickering in the rain.",
"[8.0:] Digital pulse running through my veins.",
"[12.0:] Catch the rhythm, break the firewall.",
"[16.0:] High voltage EDM inside the grid core!"
],
price: 34.99
}
]);

// --- STATES ---
const [currentTrackIdx, setCurrentTrackIdx] = useState(0);
const [isPlaying, setIsPlaying] = useState(false);
const [activeStep, setActiveStep] = useState(0);
const [currentTime, setCurrentTime] = useState('00:00:00');
const [beatBars, setBeatBars] = useState<number[]>(Array(32).fill(10));

// Audio Mod States
const [isEditing, setIsEditing] = useState(false);
const [isGenerating, setIsGenerating] = useState(false);
const [sysLog, setSysLog] = useState("ระบบเวิร์กสเตชันพร้อมจัดทำแพ็กเกจส่งออกขาย...");

// 📈 Content & Revenue Live States (สถิติจำลองการสร้างรายได้จริง)
const [liveViews, setLiveViews] = useState(1420);
const [estRevenue, setEstRevenue] = useState(345.50);
const [subscribers, setSubscribers] = useState(12840);
const [isDistributing, setIsDistributing] = useState(false);

const currentTrack = tracks[currentTrackIdx];

// --- REFS ---
const audioRef = useRef<HTMLAudioElement | null>(null);
const animationRef = useRef<number | null>(null);

// --- REALTIME COUNTER SIMULATION (สร้างบรรยากาศ Live Studio ในยูทูป/ติ๊กต็อก) ---
useEffect(() => {
const timer = setInterval(() => {
const now = new Date();
setCurrentTime(now.toTimeString().split(' ')[0]);

  if (isPlaying) {
    // ยอดวิวและรายได้จะขยับขึ้นเรียลไทม์เมื่อเล่นเพลง (จำลองการทำ Live Stream)
    setLiveViews(prev => prev + Math.floor(Math.random() * 5));
    setEstRevenue(prev => prev + parseFloat((Math.random() * 0.15).toFixed(2)));
    if (Math.random() > 0.85) setSubscribers(prev => prev + 1);
  }
}, 1000);
return () => clearInterval(timer);

}, [isPlaying]);

// --- REALTIME AUDIO VISUALIZER LOGIC ---
const updateVisualizer = () => {
if (!isPlaying) return;
setBeatBars(() =>
Array(32).fill(0).map((_, idx) => {
const multiplier = isEditing ? 1.3 : 1.0;
if (idx < 6) return Math.min(100, (Math.random() > 0.4 ? Math.random() * 85 + 15 : Math.random() * 40) * multiplier);
if (idx >= 6 && idx < 22) return Math.min(100, (Math.random() * 70 + 20) * multiplier);
return Math.min(100, (Math.random() * 45 + 5) * multiplier);
})
);
animationRef.current = requestAnimationFrame(updateVisualizer);
};

useEffect(() => {
if (isPlaying) {
animationRef.current = requestAnimationFrame(updateVisualizer);
} else {
if (animationRef.current) cancelAnimationFrame(animationRef.current);
setBeatBars(Array(32).fill(10));
}
return () => {
if (animationRef.current) cancelAnimationFrame(animationRef.current);
};
}, [isPlaying, isEditing]);

// --- BASIC TRACK CONTROLS ---
const handlePlayToggle = () => {
if (!audioRef.current) return;
if (isPlaying) {
audioRef.current.pause();
setIsPlaying(false);
setSysLog("หยุดมอนิเตอร์บีทชั่วคราว...");
} else {
audioRef.current.play().catch(() => {});
setIsPlaying(true);
setSysLog("กำลังสตรีมสัญญาณสด และเปิดระบบจำลอง Monetization...");
}
};

const handleEditBeat = () => {
setIsEditing(!isEditing);
if (!isEditing) {
if (audioRef.current) audioRef.current.playbackRate = 1.2;
setSysLog("🔥 OVERDRIVE ACTIVE: เพิ่มจังหวะบีท 20% เพื่อตัดคลิปลง TikTok/Reels ให้ไวรัลได้ง่ายขึ้น");
} else {
if (audioRef.current) audioRef.current.playbackRate = 1.0;
setSysLog("คืนค่าจังหวะบีทมาตรฐานสำหรับตรวจสอบความถูกต้องของ Master Audio");
}
};

const handleCreateNewBeat = () => {
setIsGenerating(true);
setIsPlaying(false);
if (audioRef.current) audioRef.current.pause();
setSysLog("🧬 AI LAB: กำลังสุ่มวิเคราะห์คีย์เวิร์ดไวรัลเพื่อจัดทำบีทเพลง EDM ตลาดต้องการชิ้นใหม่...");

setTimeout(() => {
  const newTrack: Track = {
    title: `Phonk Grid Vol.${tracks.length + 1}`,
    album: "Cyber Digital Vault",
    genre: "Cyberpunk Drift Phonk / EDM",
    bpm: Math.floor(Math.random() * 15) + 140, // 140-155 BPM แนวเต้นกระแทก
    src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3",
    lyrics: [
      "[0.0:] DRIFT CORE ACTIVATED",
      "[4.5:] Catch me in the neon shade.",
      "[9.0:] High revenue, fully paid.",
      "[13.5:] Make it louuuud!"
    ],
    price: 39.99
  };

  setTracks([...tracks, newTrack]);
  setCurrentTrackIdx(tracks.length);
  setIsGenerating(false);
  setSysLog(`🎉 SUCCESS: สังเคราะห์แทร็กเชิงพาณิชย์ใหม่สำเร็จ: "${newTrack.title}" ตั้งราคาขายที่ $${newTrack.price}`);
}, 2000);

};

// 🌐 4. DISTRIBUTION SYSTEM (จำลองการกดส่งออกขายและจัดจำหน่ายเข้าแพลตฟอร์มสร้างรายได้)
const handleDistribute = (platform: string) => {
setIsDistributing(true);
setSysLog(🚀 EXPEDITING: กำลังส่งออกไฟล์มิกซ์และสิทธิ์การใช้งาน (License Pack) ของ "${currentTrack.title}" ไปยัง ${platform}...);

setTimeout(() => {
  setIsDistributing(false);
  if (platform === 'YouTube/TikTok') {
    setSysLog(`✅ UPLOAD COMPLETE: อัปโหลดวิดีโอประกอบคีย์เวิร์ดไวรัลเข้าสู่ระบบหลังบ้าน ${platform} แล้ว! รอรับค่า AdSense/สตรีมมิ่ง`);
    setSubscribers(prev => prev + Math.floor(Math.random() * 120) + 30);
  } else {
    setSysLog(`💰 MARKETPLACE LIVE: วางจำหน่ายบน ${platform} เรียบร้อยแล้วที่ราคา $${currentTrack.price} (เปิดรับสิทธิ์ Ghost Production / Exclusive License)`);
  }
}, 2000);

};

return (
<div className="min-h-screen bg-[#030712] text-white p-4 font-mono select-none relative overflow-hidden"
style={{
backgroundImage: 'linear-gradient(rgba(0, 245, 255, 0.01) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 245, 255, 0.01) 1px, transparent 1px)',
backgroundSize: '20px 20px'
}}>

  {/* HEADER */}
  <header className="border border-[rgba(0,245,255,0.2)] bg-[#060b19]/85 backdrop-blur-md p-3 px-5 flex justify-between items-center mb-4 shadow-[0_0_15px_rgba(0,245,255,0.05)]">
    <div className="font-['Orbitron'] font-black text-xl text-[#00f5ff]" style={{ textShadow: '0 0 10px #00f5ff' }}>
      DREAM OS // EDM MONETIZATION DECK
    </div>
    <div className="flex gap-5 text-xs text-[#00ff88]">
      <div className="animate-pulse"><span className="text-white/50">YOUTUBE STREAM:</span> LIVE</div>
      <div><span className="text-white/50">STORE CONNECTION:</span> ENCRYPTED</div>
      <div><span className="text-white/50">SYS TIME:</span> {currentTime}</div>
    </div>
  </header>

  {/* MAIN LAYOUT */}
  <div className="grid grid-cols-1 lg:grid-cols-[1fr_400px] gap-4 h-[calc(100vh-100px)] min-h-0">
    
    {/* LEFT COMPONENT: AUDIO WORKSTATION & MARKET DISTRIBUTION */}
    <div className="flex flex-col gap-4 min-h-0">
      
      {/* TRACK MIXER & PLAYER */}
      <div className="bg-[#060b19]/85 border border-[rgba(0,245,255,0.2)] p-5 relative rounded flex flex-col gap-4 backdrop-blur-xl shadow-[0_0_20px_rgba(0,245,255,0.03)]">
        <div className="absolute top-[-1px] left-[-1px] w-3 h-3 border-t-2 border-l-2 border-[#ff0090]" />
        <div className="absolute bottom-[-1px] right-[-1px] w-3 h-3 border-b-2 border-r-2 border-[#00f5ff]" />
        
        <div className="flex justify-between items-center">
          <div className="text-[10px] font-bold tracking-[2px] text-[#ff0090] uppercase">// DIGITAL AUDIO ENGINE & EXPORT PANEL</div>
          <div className="text-xs text-[#00ff88] font-bold bg-[#00ff88]/10 px-2 py-0.5 border border-[#00ff88] rounded">
            COMMERCIAL VALUE: ${currentTrack.price} / LICENSE
          </div>
        </div>

        {/* Meta */}
        <div className="flex justify-between items-start border-b border-dashed border-[rgba(0,245,255,0.2)] pb-3">
          <div>
            <h2 className="font-['Orbitron'] text-xl text-[#00f5ff] font-bold tracking-wide">{currentTrack.title}</h2>
            <p className="text-white/50 text-xs mt-0.5">Style: <span className="text-[#bf00ff]">{currentTrack.genre}</span> | Target Platform: Shorts, Reels, Marketplace</p>
          </div>
          <div className="bg-[#ff0090]/10 border border-[#ff0090] text-[#ff0090] px-2 py-0.5 font-bold text-xs rounded">
            {currentTrack.bpm} BPM
          </div>
        </div>

        {/* VISUALIZER */}
        <div className="h-28 flex items-end gap-[3px] py-1 bg-black/30 px-2 rounded border border-white/5">
          {beatBars.map((height, i) => (
            <div
              key={i}
              className="flex-1 transition-all duration-[80ms] ease-out rounded-t-xs"
              style={{
                height: `${height}%`,
                background: isEditing ? 'linear-gradient(to top, #ff0090, #ff6600)' : 'linear-gradient(to top, #bf00ff, #00f5ff)',
                boxShadow: isPlaying ? `0 0 6px ${isEditing ? '#ff0090' : '#00f5ff'}` : 'none'
              }}
            />
          ))}
        </div>

        {/* CORE AUDIO ACTIONS */}
        <div className="flex flex-wrap gap-2 items-center justify-between">
          <div className="flex gap-2">
            <button onClick={handlePlayToggle} disabled={isGenerating || isDistributing} className="px-3 py-1.5 font-['Orbitron'] text-xs font-bold border border-[#00f5ff] text-[#00f5ff] hover:bg-[#00f5ff]/10">
              {isPlaying ? "PAUSE MONITOR" : "PLAY MONITOR"}
            </button>
            <button onClick={handleEditBeat} disabled={isGenerating || isDistributing} className={`px-3 py-1.5 text-xs font-bold border ${isEditing ? 'border-[#ff6600] text-[#ff6600] bg-[#ff6600]/10' : 'border-[#ff0090] text-[#ff0090]'}`}>
              {isEditing ? "❌ REGULAR MODE" : "🎛️ SPEED UP (TikTok Edit)"}
            </button>
          </div>

          <button onClick={handleCreateNewBeat} disabled={isGenerating || isDistributing} className="px-3 py-1.5 text-xs font-['Orbitron'] border border-[#00ff88] text-[#00ff88] hover:bg-[#00ff88]/10">
            {isGenerating ? "🧬 COMPILING BEAT..." : "✨ SYNTH NEW STOCK BEAT"}
          </button>
        </div>
        
        <audio ref={audioRef} src={currentTrack.src} className="hidden" />
      </div>

      {/* 🌟 NEW CHANNELS FOR EARNING: MARKETPLACE DISTRIBUTION COMPONENT */}
      <div className="bg-[#060b19]/85 border border-[rgba(0,245,255,0.2)] p-4 rounded flex-1 min-height-0 overflow-y-auto">
        <div className="text-[10px] font-bold tracking-[2px] text-[#ff0090] uppercase mb-3">// DISTRIBUTION MATRIX (ส่งออกทำเงิน)</div>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
          
          {/* ตลาดที่ 1: ขายสิทธิ์คนทำเพลง / คอนเทนต์ */}
          <div className="p-3 border border-white/5 bg-white/[0.01] rounded flex flex-col justify-between gap-3">
            <div>
              <div className="text-[10px] text-white/40">OPTION A // PRODUCER MARKET</div>
              <h4 className="text-xs font-bold text-[#00f5ff] my-1">Splice / Loopmasters PACK</h4>
              <p className="text-[11px] text-white/60 leading-normal">สับหั่นเสียงเบสและไฟล์กลองแยกแทร็ก (Stem Files) ส่งขายเป็นชุด Sample Pack สำหรับดีเจทั่วโลก</p>
            </div>
            <button onClick={() => handleDistribute('Splice Loops')} disabled={isDistributing} className="w-full text-[11px] py-1 bg-[#bf00ff]/20 text-[#e0b0ff] border border-[#bf00ff] hover:bg-[#bf00ff]/40">
              EXPORT STEMS PACK
            </button>
          </div>

          {/* ตลาดที่ 2: ขายขาดลิขสิทธิ์ / วางหน้าร้านเว็บตัวเอง */}
          <div className="p-3 border border-white/5 bg-white/[0.01] rounded flex flex-col justify-between gap-3">
            <div>
              <div className="text-[10px] text-white/40">OPTION B // EXCLUSIVE LICENSE</div>
              <h4 className="text-xs font-bold text-[#ff0090] my-1">Gumroad / Beatstars Store</h4>
              <p className="text-[11px] text-white/60 leading-normal">ขายสัญญาลิขสิทธิ์ขาด (Ghost Production) ให้แบรนด์สินค้า ยูทูบเบอร์ช่องใหญ่ หรือค่ายเกมอินดี้นำไปใช้เปิดตัว</p>
            </div>
            <button onClick={() => handleDistribute('Gumroad Store')} disabled={isDistributing} className="w-full text-[11px] py-1 bg-[#ff0090]/20 text-[#ff80cc] border border-[#ff0090] hover:bg-[#ff0090]/40">
              PUT EXCLUSIVE CONTRACT
            </button>
          </div>

          {/* ตลาดที่ 3: ทำคอนเทนต์สะสมยอดวิว */}
          <div className="p-3 border border-white/5 bg-white/[0.01] rounded flex flex-col justify-between gap-3">
            <div>
              <div className="text-[10px] text-white/40">OPTION C // SOCIAL MEDIA REVENUE</div>
              <h4 className="text-xs font-bold text-[#00ff88] my-1">YouTube / TikTok Upload</h4>
              <p className="text-[11px] text-white/60 leading-normal">ใส่เอฟเฟกต์ภาพ Visualizer ลื่นๆ แล้วส่งไฟล์มิวสิกวิดีโอขึ้นไปสะสมยอดวิวเพื่อรับเงินค่าโฆษณา AdSense</p>
            </div>
            <button onClick={() => handleDistribute('YouTube/TikTok')} disabled={isDistributing} className="w-full text-[11px] py-1 bg-[#00ff88]/20 text-[#aaffcc] border border-[#00ff88] hover:bg-[#00ff88]/40">
              PUBLISH VIDEO REVENUE
            </button>
          </div>

        </div>
      </div>

    </div>

    {/* RIGHT PANEL: LIVE SOCIAL CONTENT & REVENUE MONITOR */}
    <div className="bg-[#060b19]/85 border border-[rgba(0,245,255,0.2)] p-4 rounded flex flex-col min-h-0">
      <div className="text-[10px] font-bold tracking-[2px] text-[#ff0090] uppercase mb-3">// LIVE ANALYTICS ENGINE (วิเคราะห์รายได้)</div>
      
      <div className="flex-1 overflow-y-auto space-y-4 pr-1">
        
        {/* 📈 กล่องแสดงสถิติและตัวเงินเรียลไทม์ */}
        <div className="grid grid-cols-2 gap-2 bg-black/40 p-3 border border-white/5 rounded">
          <div className="p-2 border border-[rgba(0,245,255,0.1)] rounded bg-white/[0.01]">
            <div className="text-[9px] text-white/40 uppercase">Est. Revenue (USD)</div>
            <div className="text-lg font-bold text-[#00ff88] mt-0.5">${estRevenue.toFixed(2)}</div>
          </div>
          <div className="p-2 border border-[rgba(0,245,255,0.1)] rounded bg-white/[0.01]">
            <div className="text-[9px] text-white/40

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions