202508281721

加入 己點歌曲

app/Enums/OrderedSongStatus.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Enums;
+
+use App\Enums\Traits\HasLabels;
+
+
+enum OrderedSongStatus: string
+{
+    case NotPlayed       = 'NotPlayed';
+    case Playing         = 'Playing';
+    case Played          = 'Played';
+    case NoFile          = 'NoFile';
+    case Skipped         = 'Skipped';
+    case InsertPlayback  = 'InsertPlayback';
+
+    public function labels(): string
+    {
+        return match($this) {
+            self::NotPlayed     => __('enums.NotPlayed'),
+            self::Playing       => __('enums.Playing'),
+            self::Played        => __('enums.Played'),
+            self::NoFile        => __('enums.NoFile'),
+            self::Skipped       => __('enums.Skipped'),
+            self::InsertPlayback => __('enums.InsertPlayback'),
+        };
+    }
+}

app/Livewire/Layout/Navigation.php

@@ -16,9 +16,7 @@ class Navigation extends Component
     private array $roomMenus = [
         ['name' => '已點歌曲', 'route' => 'clicked-song'],
         ['name' => '聲音控制', 'route' => 'sound-control'],
-        ['name' => '社群媒體', 'route' => 'social-media'],
         ['name' => '真情告白', 'route' => 'love-message'],
-        ['name' => '心情貼圖', 'route' => 'mood-stickers'],
     ];
     public array $menus = [];
 

app/Livewire/Modals/StickerModal.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Livewire\Modals;
+
+use Livewire\Component;
+
+class StickerModal extends Component
+{
+    protected $listeners = [
+        'openModal','closeModal'
+    ];
+    public bool $showModal = false;
+    public $selectedSticker = null;
+    public $stickers = [];
+
+    public function mount()
+    {
+        $this->stickers = collect(glob(storage_path('app/public/superstar-pic/*.png')))
+            //->map(fn($path) => 'superstar-pic/' . basename($path))
+            ->map(fn($path) => basename($path))
+            ->toArray();
+    }
+
+    public function openModal()
+    {
+        $this->showModal = true;
+    }
+    public function closeModal()
+    {
+        $this->showModal = false;
+    }
+
+    public function select($sticker)
+    {
+        $this->dispatch('stickerSelected', $sticker);
+        $this->selectedSticker =$sticker;
+        $this->showModal = false;
+    }
+
+    public function render()
+    {
+        return view('livewire.modals.sticker-modal');
+    }
+}

app/Livewire/Pages/Home.php

@@ -11,7 +11,7 @@ class Home extends Component
     public function mount()
     {
         // 先從 URL 取得 room_code，再存進 session
-        session()->forget('room_code');
+        //session()->forget('room_code');
         $this->roomCode = request()->query('room_code', session('room_code', null));
         if ($this->roomCode) {
             session(['room_code' => $this->roomCode]);

app/Livewire/Pages/LoveMessage.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Livewire\Pages;
+
+use Livewire\Component;
+
+class LoveMessage extends Component
+{
+    protected $listeners = ['stickerSelected' => 'handleSticker'];
+    public $message = '';
+    public $selectedSticker=null;
+    
+    public function handleSticker($sticker)
+    {
+        $this->selectedSticker = $sticker;
+    }
+    public function submitMessage()
+    {
+        // 實際存留言時，可同時存貼圖
+        $data = [
+            'message' => $this->message,
+            'sticker' => $this->selectedSticker,
+            'user' => auth()->user()?->name ?? '訪客',
+        ];
+        // 存到資料庫或送到 API
+        // ...
+        session()->flash('success', '留言已送出！');
+
+        // 重置
+        $this->message = '';
+        $this->selectedSticker = null;
+    }
+
+    public function render()
+    {
+        return view('livewire.pages.love-message');
+    }
+}

app/Livewire/Pages/OrderedSongList.php

@@ -0,0 +1,58 @@
+<?php
+
+namespace App\Livewire\Pages;
+
+use Livewire\Component;
+use Illuminate\Database\Eloquent\Collection as EloquentCollection;
+use App\Models\RoomSession;
+use App\Models\OrderedSong;
+
+class OrderedSongList extends Component
+{
+    public ?string $roomSessionId = null;
+
+    public EloquentCollection $playing ;
+    public EloquentCollection $notPlayed ;
+    public EloquentCollection $finished ;
+    
+
+    public function mount()
+    {
+        $this->playing = new EloquentCollection();
+        $this->nextSong = new EloquentCollection();
+        $this->finished = new EloquentCollection();
+        $roomSession = $this->getRoomSession(session('room_code'))?->id ;
+        if ($roomSession) {
+            $this->roomSessionId = $roomSession->id;
+            $this->loadSongs($this->roomSessionId);
+        }
+    }
+    private function getRoomSession($api_token): ?RoomSession
+    {
+        if (!$apiToken) return null;
+        return RoomSession::where('api_token', $api_token)
+            ->whereIn('status', ['active', 'maintain'])
+            ->first();
+    }
+    
+    public function refreshSongs()
+    {
+        if ($this->roomSessionId) {
+            $this->loadSongs($this->roomSessionId);
+        }
+    }
+    protected function loadSongs(string $roomSessionId)
+    {
+        $this->playing   = OrderedSong::forSession($roomSessionId)->playing()->get();
+        $this->nextSong = OrderedSong::forSession($roomSessionId)->nextSong()->get();
+        $this->finished  = OrderedSong::forSession($roomSessionId)->finished()->get();
+    }
+    public function render()
+    {   
+        return view('livewire.pages.ordered-song-list', [
+            'playing' => $this->playing,
+            'nextSong' => $this->nextSong,
+            'finished' => $this->finished,
+        ]);
+    }
+}

app/Livewire/Pages/SoundControl.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Livewire\Pages;
+
+use Livewire\Component;
+
+class SoundControl extends Component
+{
+    public $buttons = [
+        ['img'=>'音控-01.jpg', 'action'=>'pause'],
+        ['img'=>'音控-02.jpg', 'action'=>'volume_up'],
+        ['img'=>'音控-04.jpg', 'action'=>'mic_up'],
+        ['img'=>'音控-06.jpg', 'action'=>'mute'],
+        ['img'=>'音控-03.jpg', 'action'=>'volume_down'],
+        ['img'=>'音控-05.jpg', 'action'=>'mic_down'],
+        ['img'=>'音控-07.jpg', 'action'=>'original_song'],
+        ['img'=>'音控-08.jpg', 'action'=>'service'],
+        ['img'=>'音控-09.jpg', 'action'=>'replay'],
+        ['img'=>'音控-11.jpg', 'action'=>'male_key'],
+        ['img'=>'音控-12.jpg', 'action'=>'female_key'],
+        ['img'=>'音控-10.jpg', 'action'=>'cut'],
+        ['img'=>'音控-15.jpg', 'action'=>'lower_key'],
+        ['img'=>'音控-14.jpg', 'action'=>'standard_key'],
+        ['img'=>'音控-13.jpg', 'action'=>'raise_key'],
+    ];
+
+    public function sendVolumeControl(string $action)
+    {
+        // 這裡可以加你的 API 或邏輯
+        // 範例：發送到後台控制音量
+        info("Sound control action: ".$action);
+
+        $this->dispatchBrowserEvent('notify', [
+            'message' => "已執行操作: {$action}"
+        ]);
+    }
+
+    public function render()
+    {
+        return view('livewire.pages.sound-control');
+    }
+}

app/Models/OrderedSong.php

@@ -0,0 +1,83 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use App\Enums\OrderedSongStatus;
+
+class OrderedSong extends Model
+{
+    use HasFactory;
+
+    public $timestamps = false;
+
+    protected $fillable = [
+        'room_session_id',
+        'from_by',
+        'order_number',
+        'song_id',
+        'song_name',
+        'artist_name',
+        'status',
+        'ordered_at',
+        'started_at',
+        'finished_at',
+        
+    ];
+
+    protected $casts = [
+        'ordered_at' => 'datetime',
+        'started_at' => 'datetime',
+        'finished_at' => 'datetime',
+        'status' => \App\Enums\OrderedSongStatus::class,
+    ];
+    
+
+    public function session()
+    {
+        return $this->belongsTo(RoomSession::class, 'room_session_id');
+    }
+
+    public function song()
+    {
+        return $this->belongsTo(Song::class);
+    }
+    public function scopeWithPartialSong($query)
+    {
+        return $query->with([
+            'song' => function ($q) {
+                $q->select('id', 'name','filename','db_change','vocal','situation'); // 精簡版
+            }
+        ]);
+    }
+    public function scopeForSession($query, $roomSessionId)
+    {
+        return $query->where('room_session_id', $roomSessionId);
+    }
+
+    public function scopePlaying($query)
+    {
+        return $query->where('status', OrderedSongStatus::Playing);
+    }
+
+    public function scopeNextSong($query)
+    {
+        return $query->whereIn('status', [OrderedSongStatus::InsertPlayback, OrderedSongStatus::NotPlayed])
+            ->orderByRaw("FIELD(status, ?, ?)", [
+                OrderedSongStatus::InsertPlayback->value,
+                OrderedSongStatus::NotPlayed->value,
+            ])
+            ->orderByRaw("CASE WHEN status=? THEN ordered_at END DESC", [OrderedSongStatus::InsertPlayback->value])
+            ->orderByRaw("CASE WHEN status=? THEN ordered_at END ASC", [OrderedSongStatus::NotPlayed->value]);
+    }
+
+    public function scopeFinished($query)
+    {
+        return $query->whereIn('status', [
+            OrderedSongStatus::Played,
+            OrderedSongStatus::Skipped,
+            OrderedSongStatus::NoFile,
+        ])->orderByDesc('finished_at');
+    }
+}

app/Models/RoomSession.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class RoomSession extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'room_id',
+        'started_at',
+        'ended_at',
+        'status',
+        'mode',
+        'close_reason',
+        'api_token',
+    ];
+
+    protected $casts = [
+        'started_at' => 'datetime',
+        'ended_at'   => 'datetime',
+    ];
+
+    // 狀態常數
+    public const STATUS_ACTIVE       = 'active';
+    public const STATUS_CLOSED     = 'closed';
+    public const STATUS_FORCE_CLOSED = 'force_closed';
+    public const STATUS_FIRE_CLOSED  = 'fire_closed';
+
+    // 模式常數
+    public const MODE_NORMAL = 'normal';
+    public const MODE_VIP    = 'vip';
+    public const MODE_TEST   = 'test';
+
+    public function room()
+    {
+        return $this->belongsTo(Room::class);
+    }
+}

resources/views/clicked-song.blade.php

@@ -0,0 +1,10 @@
+<x-app-layout>
+    <x-slot name="header">
+        <div class="header">超級巨星 自助式KTV</div>
+        <div class="banner">
+            <img src="{{ asset('手機點歌/BANNER-07.png') }}" alt="超級巨星 Banner">
+        </div>
+    </x-slot>
+
+    <livewire:pages.ordered-song-list />
+</x-app-layout>

resources/views/components/button/flat-card.blade.php

@@ -3,12 +3,17 @@
     'href' => null,
 ])
 
+@php
+// 使用 Tailwind aspect-auto 保持圖片原始比例
+$classes = 'relative w-full rounded-lg overflow-hidden shadow-md hover:scale-105 transition-transform cursor-pointer';
+@endphp
+
 @if($href)
-    <a href="{{ $href }}" {{ $attributes->merge(['class' => 'relative w-full h-48 rounded-lg overflow-hidden shadow-md hover:scale-105 transition-transform cursor-pointer']) }}>
+    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
-        <img src="{{ $image }}" alt="" class="w-full h-full object-cover">
+        <img src="{{ $image }}" alt="" class="w-full h-auto object-contain">
     </a>
 @else
-    <div {{ $attributes->merge(['class' => 'relative w-full h-48 rounded-lg overflow-hidden shadow-md hover:scale-105 transition-transform cursor-pointer']) }}>
+    <div {{ $attributes->merge(['class' => $classes]) }}>
-        <img src="{{ $image }}" alt="" class="w-full h-full object-cover">
+        <img src="{{ $image }}" alt="" class="w-full h-auto object-contain">
     </div>
 @endif

resources/views/livewire/modals/sticker-modal.blade.php

@@ -0,0 +1,27 @@
+
+<x-modal id="sticker-modal"  wire:model.defer="showModal" persistent>
+    <x-card class="border border-gray-200">
+        <x-slot name="action">
+            <button class="cursor-pointer p-1 rounded-full focus:outline-none focus:outline-hidden focus:ring-2 focus:ring-secondary-200 text-secondary-300"
+                wire:click="closeModal"
+                tabindex="-1"
+            >
+                <x-dynamic-component :component="WireUi::component('icon')" name="x-mark" class="w-5 h-5" />
+            </button>
+        </x-slot>
+        <x-slot name="title">
+            選擇貼圖
+        </x-slot>
+    
+        <div class="flex flex-wrap gap-2 max-h-64 overflow-y-auto">
+            @foreach($stickers as $sticker)
+                <img 
+                    src="{{ asset('superstar-pic/'.$sticker) }}" 
+                    wire:click="select('{{ $sticker }}')" 
+                    class="w-16 h-16 object-contain bg-white border-2 rounded cursor-pointer 
+                        {{ $selectedSticker === $sticker ? 'border-pink-500' : 'border-transparent' }}"
+                >
+            @endforeach
+        </div>
+    </x-card>
+</x-modal>

resources/views/livewire/pages/love-message.blade.php

@@ -0,0 +1,50 @@
+<div class="max-w-lg mx-auto py-12 px-4 sm:px-6 lg:px-8">
+    <div class="bg-white shadow rounded-lg p-6 space-y-4">
+        <h2 class="text-2xl font-semibold text-center">真情告白</h2>
+
+        <div class="space-y-2">
+            <input 
+                type="text" 
+                maxlength="64"
+                placeholder="請輸入您的留言"
+                wire:model.lazy="message"
+                class="w-full border rounded-lg p-3 focus:ring-2 focus:ring-pink-400 focus:outline-none"
+            />
+            <div class="text-gray-500 text-sm text-right">
+                字串長度：{{ strlen($message) }} 個單位
+            </div>
+        </div>
+        <x-button
+            wire:click="submitMessage"
+            pink
+            label="確認送出"
+            class="w-full mt-4 text-xl font-semibold py-2 px-4 rounded-lg transition"
+        />
+
+        {{-- 打開貼圖 Modal --}}
+        <x-card 
+            class="mt-2 w-full cursor-pointer hover:bg-gray-50 transition"
+            wire:click="$dispatchTo('modals.sticker-modal','openModal')"
+        >
+            <div class="flex flex-col items-center text-gray-400">
+                <span class="text-gray-600 mb-2">已選貼圖：</span>
+                @if($selectedSticker)
+                    <img src="{{ asset('superstar-pic/'.$selectedSticker) }}" class="w-16 h-16 object-contain bg-white border-2 rounded cursor-pointer ">
+                @else
+                    <span class="w-16 h-16 flex items-center justify-center text-gray-400 text-sm text-center">選擇貼圖</span>
+                @endif
+                <span class="text-sm">點擊此處選擇</span>
+            </div>
+        </x-card>
+    </div>
+
+    <div class="mt-6 bg-yellow-50 border-l-4 border-yellow-400 p-4 text-sm text-yellow-700 rounded-lg space-y-1">
+        <ul class="list-disc pl-5 space-y-1">
+            <li>注意：不要使用特殊符號，可能無法正常顯示！</li>
+            <li>播歌畫面可顯示的字串長度為64（會員名稱 + 訊息內容）！</li>
+            <li>如果非要給這愛加個期限，我希望是一萬年…真情告白，等您留言！（每則留言輪播三次）</li>
+        </ul>
+    </div>
+    <livewire:modals.sticker-modal />
+</div>
+

resources/views/livewire/pages/ordered-song-list.blade.php

@@ -0,0 +1,88 @@
+<div wire:poll.5s="refreshSongs" class="space-y-6 p-4">
+
+    <x-table bordered striped size="sm" class="w-full">
+        <x-slot name="header">
+            <tr>
+                <th class="px-4 py-2 w-16 text-center">編號</th>
+                <th class="px-4 py-2">歌曲</th>
+                <th class="px-4 py-2 w-24 text-center">狀態</th>
+            </tr>
+        </x-slot>
+
+        {{-- 正在播放 --}}
+        <tr>
+            <td class="px-4 py-2 text-center text-blue-600 font-semibold" colspan="3">
+                🎵 正在播放
+            </td>
+        </tr>
+        @forelse($playing as $song)
+            <tr class="hover:bg-gray-50 cursor-pointer">
+                <td class="px-4 py-2 text-center">{{ $song->song_id }}</td>
+                <td class="px-4 py-2">
+                    <div class="flex flex-col">
+                        <span class="text-lg font-semibold">{{ $song->song_name }}</span>
+                        <span class="text-xs text-gray-500 self-end">{{ $song->artist_name }}</span>
+                    </div>
+                </td>
+                <td class="px-4 py-2 text-blue-500 text-center">{{ $song->status->labels() }}</td>
+            </tr>
+        @empty
+            <tr>
+                <td class="px-4 py-4 text-center text-gray-400" colspan="3">
+                    目前沒有正在播放的歌曲
+                </td>
+            </tr>
+        @endforelse
+
+        {{-- 待播 / 插播 --}}
+        <tr>
+            <td class="px-4 py-2 text-center text-yellow-600 font-semibold" colspan="3">
+                ⏳ 待播 / 插播
+            </td>
+        </tr>
+        @forelse($nextSong as $song)
+            <tr class="hover:bg-gray-50 cursor-pointer">
+                <td class="px-4 py-2 text-center">{{ $song->song_id }}</td>
+                <td class="px-4 py-2">
+                    <div class="flex flex-col">
+                        <span class="text-lg font-semibold">{{ $song->song_name }}</span>
+                        <span class="text-xs text-gray-500 self-end">{{ $song->artist_name }}</span>
+                    </div>
+                </td>
+                <td class="px-4 py-2 text-yellow-500 text-center">{{ $song->status->labels() }}</td>
+            </tr>
+        @empty
+            <tr>
+                <td class="px-4 py-4 text-center text-gray-400" colspan="3">
+                    目前沒有待播歌曲
+                </td>
+            </tr>
+        @endforelse
+
+        {{-- 已結束播放 --}}
+        <tr>
+            <td class="px-4 py-2 text-center text-gray-600 font-semibold" colspan="3">
+                ✅ 已結束播放
+            </td>
+        </tr>
+        @forelse($finished as $song)
+            <tr class="hover:bg-gray-50 cursor-pointer">
+                <td class="px-4 py-2 text-center">{{ $song->song_id }}</td>
+                <td class="px-4 py-2">
+                    <div class="flex flex-col">
+                        <span class="text-lg font-semibold">{{ $song->song_name }}</span>
+                        <span class="text-xs text-gray-500 self-end">{{ $song->artist_name }}</span>
+                    </div>
+                </td>
+                <td class="px-4 py-2 text-gray-500 text-center">{{ $song->status->labels() }}</td>
+            </tr>
+        @empty
+            <tr>
+                <td class="px-4 py-4 text-center text-gray-400" colspan="3">
+                    尚無結束播放的歌曲
+                </td>
+            </tr>
+        @endforelse
+
+    </x-table>
+</div>

resources/views/livewire/pages/sound-control.blade.php

@@ -0,0 +1,10 @@
+<div class="py-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="grid grid-cols-3 gap-6">
+        @foreach($buttons as $btn)
+            <x-button.flat-card 
+                image="{{ asset('手機點歌/'.$btn['img']) }}" 
+                wire:click="sendVolumeControl('{{ $btn['action'] }}')"
+            />
+        @endforeach
+    </div>
+</div>

resources/views/love-message.blade.php

@@ -0,0 +1,10 @@
+<x-app-layout>
+    <x-slot name="header">
+        <div class="header">超級巨星 自助式KTV</div>
+        <div class="banner">
+            <img src="{{ asset('手機點歌/BANNER-12.png') }}" alt="超級巨星 Banner">
+        </div>
+    </x-slot>
+
+    <livewire:pages.love-message />
+</x-app-layout>

resources/views/sound-control.blade.php

@@ -0,0 +1,10 @@
+<x-app-layout>
+    <x-slot name="header">
+        <div class="header">超級巨星 自助式KTV</div>
+        <div class="banner">
+            <img src="{{ asset('手機點歌/BANNER-09.png') }}" alt="超級巨星 Banner">
+        </div>
+    </x-slot>
+
+    <livewire:pages.sound-control />
+</x-app-layout>

routes/web.php

@@ -7,6 +7,9 @@ Route::view('/welcome', 'welcome')->name('welcome');
 Route::view('/new-songs', 'new-songs')->name('new-songs');
 Route::view('/top-ranking', 'top-ranking')->name('top-ranking');
 Route::view('/search-song', 'search-song')->name('search-song');
+Route::view('/clicked-song', 'clicked-song')->name('clicked-song');
+Route::view('/sound-control', 'sound-control')->name('sound-control');
+Route::view('/love-message', 'love-message')->name('love-message');
 
 Route::view('dashboard', 'dashboard')
     ->middleware(['auth', 'verified'])

開發手冊.ini

@@ -1,2 +1,5 @@
 npm install && npm run build
 
+https://ktvremote.test/?room_code=abc123
+
+php artisan storage:link