@mazees/mark 5.0.0

package/src/renderer/src/components/YoutubeMusicPlayer.jsx

@@ -0,0 +1,375 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useYoutubeMusic } from '../contexts/YoutubeMusicContext'
+import {
+  Play,
+  Pause,
+  SkipForward,
+  SkipBack,
+  Volume,
+  Volume2,
+  VolumeX,
+  ListMusic,
+  ChevronDown,
+  Music,
+  ImageIcon,
+  Tv,
+  X
+} from 'lucide-react'
+
+function formatTime(seconds) {
+  if (!seconds || isNaN(seconds)) return '0:00'
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs < 10 ? '0' : ''}${secs}`
+}
+
+export const YoutubeMusicPlayer = () => {
+  const {
+    currentTrack,
+    queue,
+    isPlaying,
+    isMuted,
+    volume,
+    currentTime,
+    duration,
+    viewMode,
+    isPlayerOpen,
+    containerId,
+    setIsPlayerOpen,
+    togglePlayer,
+    setViewMode,
+    playTrack,
+    playPause,
+    nextTrack,
+    prevTrack,
+    seekTo,
+    setVolume,
+    toggleMute
+  } = useYoutubeMusic()
+
+  const [isSeeking, setIsSeeking] = useState(false)
+  const [seekValue, setSeekValue] = useState(0)
+  const [showQueue, setShowQueue] = useState(false)
+
+  // Web Bridge / IPC command synchronization
+  const playTrackRef = useRef(playTrack)
+  const nextTrackRef = useRef(nextTrack)
+  const prevTrackRef = useRef(prevTrack)
+  const playPauseRef = useRef(playPause)
+
+  useEffect(() => {
+    playTrackRef.current = playTrack
+    nextTrackRef.current = nextTrack
+    prevTrackRef.current = prevTrack
+    playPauseRef.current = playPause
+  }, [playTrack, nextTrack, prevTrack, playPause])
+
+  useEffect(() => {
+    if (window.api?.onExecuteMusicCommand) {
+      window.api.onExecuteMusicCommand((command, payload) => {
+        if (command === 'play' && payload) {
+          if (typeof payload === 'object') {
+            playTrackRef.current(payload)
+          } else {
+            window.api.searchMusic(payload).then((res) => {
+              if (res && res.length > 0) {
+                playTrackRef.current(res[0], res)
+              }
+            })
+          }
+        } else if (command === 'next') nextTrackRef.current()
+        else if (command === 'prev') prevTrackRef.current()
+        else if (command === 'toggle') playPauseRef.current()
+      })
+    }
+  }, [])
+
+  const currentSeek = isSeeking ? seekValue : currentTime
+  const progressRatio =
+    duration > 0 ? Math.min(100, Math.max(0, (currentSeek / duration) * 100)) : 0
+  const remainingTime = duration > currentSeek ? duration - currentSeek : 0
+
+  return (
+    <div className="fixed bottom-5 right-5 z-120 flex flex-col items-end gap-2 select-none pointer-events-none">
+      {/* Player Main Card */}
+      <div
+        className={`
+          transition-all duration-300 ease-out origin-bottom-right
+          ${
+            isPlayerOpen
+              ? 'opacity-100 scale-100 translate-y-0 pointer-events-auto visible'
+              : 'opacity-0 scale-95 translate-y-3 pointer-events-none invisible'
+          }
+        `}
+        style={{ pointerEvents: isPlayerOpen ? 'auto' : 'none' }}
+      >
+        <div className="relative w-80 sm:w-84 rounded-3xl overflow-hidden shadow-[0_25px_60px_-15px_rgba(0,0,0,0.9)] border border-white/10 bg-[#0d0d0e]/95 backdrop-blur-2xl text-white flex flex-col p-4">
+          {/* Subtle Ambient Red Glow Background */}
+          {currentTrack.thumbnail && (
+            <div
+              className="absolute inset-0 bg-cover bg-center blur-3xl opacity-20 pointer-events-none scale-150 transition-opacity duration-700"
+              style={{ backgroundImage: `url(${currentTrack.thumbnail})` }}
+            />
+          )}
+
+          {/* Top Bar (Dismiss handle & View Mode Toggle) */}
+          <div className="relative z-10 flex items-center justify-between pb-3">
+            <button
+              onClick={() => setIsPlayerOpen(false)}
+              className="w-8 h-8 rounded-full flex items-center justify-center text-zinc-400 hover:text-white hover:bg-white/10 active:scale-95 transition-all cursor-pointer"
+              title="Tutup Player"
+            >
+              <ChevronDown size={18} />
+            </button>
+
+            {/* Video vs Cover Pill Switcher */}
+            <div className="flex items-center bg-white/10 p-0.5 rounded-full border border-white/5 backdrop-blur-md">
+              <button
+                onClick={() => setViewMode('thumbnail')}
+                className={`px-2.5 py-1 rounded-full text-[11px] font-medium transition-all flex items-center gap-1.5 cursor-pointer ${
+                  viewMode === 'thumbnail'
+                    ? 'bg-red-600 text-white shadow-sm'
+                    : 'text-zinc-400 hover:text-zinc-200'
+                }`}
+              >
+                <ImageIcon size={12} />
+                <span>Cover</span>
+              </button>
+              <button
+                onClick={() => setViewMode('video')}
+                className={`px-2.5 py-1 rounded-full text-[11px] font-medium transition-all flex items-center gap-1.5 cursor-pointer ${
+                  viewMode === 'video'
+                    ? 'bg-red-600 text-white shadow-sm'
+                    : 'text-zinc-400 hover:text-zinc-200'
+                }`}
+              >
+                <Tv size={12} />
+                <span>Video</span>
+              </button>
+            </div>
+
+            {/* Queue Toggle Button */}
+            <button
+              onClick={() => setShowQueue(!showQueue)}
+              className={`w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer ${
+                showQueue
+                  ? 'bg-red-600 text-white shadow-sm shadow-red-600/50'
+                  : 'text-zinc-400 hover:text-white hover:bg-white/10'
+              }`}
+              title="Daftar Antrean"
+            >
+              <ListMusic size={17} />
+            </button>
+          </div>
+
+          {/* Media Display Screen (Artwork / Single Unified Embedded Video) */}
+          <div className="relative z-10 w-full aspect-square rounded-2xl overflow-hidden shadow-2xl shadow-black/80 bg-black/60 border border-white/5 group my-1 flex items-center justify-center">
+            {/* SATU-SATUNYA IFRAME PLAYER ASLI (Selalu ter-mount, hanya opacity/z-index yang berganti) */}
+            <div
+              className={`absolute inset-0 w-full h-full transition-opacity duration-200 ${
+                isPlayerOpen && viewMode === 'video'
+                  ? 'opacity-100 pointer-events-auto z-20'
+                  : 'opacity-0 pointer-events-none z-0'
+              }`}
+            >
+              <div
+                id={containerId}
+                className="w-full h-full"
+                style={{ pointerEvents: isPlayerOpen && viewMode === 'video' ? 'auto' : 'none' }}
+              />
+            </div>
+
+            {/* Cover / Artwork View (Tampil saat viewMode === 'thumbnail') */}
+            <div
+              className={`absolute inset-0 flex items-center justify-center transition-opacity duration-200 ${
+                viewMode === 'thumbnail'
+                  ? 'opacity-100 pointer-events-auto z-10'
+                  : 'opacity-0 pointer-events-none z-0'
+              }`}
+            >
+              {currentTrack.thumbnail ? (
+                <>
+                  <img
+                    src={currentTrack.thumbnail}
+                    alt={currentTrack.title}
+                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
+                  />
+                  <div className="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-black/20 pointer-events-none" />
+                </>
+              ) : (
+                <div className="flex flex-col items-center gap-2 text-zinc-600">
+                  <Music size={40} strokeWidth={1.5} />
+                  <span className="text-xs font-mono">Belum ada lagu</span>
+                </div>
+              )}
+
+              {/* Soundwave Animation Badge */}
+              {isPlaying && (
+                <div className="absolute bottom-3 right-3 flex items-end gap-0.5 px-2 py-1.5 rounded-full bg-black/60 backdrop-blur-md border border-white/10 shadow-lg">
+                  <span className="w-0.5 bg-red-500 rounded-full animate-[pulse_0.6s_ease-in-out_infinite] h-2.5" />
+                  <span className="w-0.5 bg-red-500 rounded-full animate-[pulse_0.9s_ease-in-out_infinite] h-4" />
+                  <span className="w-0.5 bg-red-500 rounded-full animate-[pulse_0.4s_ease-in-out_infinite] h-2" />
+                  <span className="w-0.5 bg-red-500 rounded-full animate-[pulse_0.7s_ease-in-out_infinite] h-3.5" />
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Queue List Overlay Panel */}
+          {showQueue && queue && queue.length > 0 && (
+            <div className="relative z-20 my-2 max-h-36 overflow-y-auto no-scrollbar rounded-2xl bg-black/80 border border-white/10 p-1.5 flex flex-col gap-0.5 text-xs backdrop-blur-xl">
+              {queue.map((item, idx) => {
+                const isCurrent = (item.videoId || item.id) === currentTrack.videoId
+                return (
+                  <div
+                    key={idx}
+                    onClick={() => playTrack(item)}
+                    className={`flex items-center justify-between px-3 py-2 rounded-xl cursor-pointer transition-colors ${
+                      isCurrent
+                        ? 'bg-red-600/20 text-red-400 font-medium'
+                        : 'hover:bg-white/5 text-zinc-400 hover:text-zinc-200'
+                    }`}
+                  >
+                    <div className="flex items-center gap-2.5 truncate">
+                      <span className="text-[11px] text-zinc-500 font-mono w-4">{idx + 1}</span>
+                      <span className="truncate text-xs">{item.title}</span>
+                    </div>
+                    <span className="text-[10px] text-zinc-500 font-mono shrink-0 ml-2">
+                      {item.timestamp || ''}
+                    </span>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+
+          {/* Song Meta (Title & Artist) */}
+          <div className="relative z-10 mt-3 mb-2 flex items-center justify-between">
+            <div className="flex flex-col min-w-0 pr-2">
+              <span
+                className="font-semibold text-base text-white truncate tracking-tight"
+                title={currentTrack.title}
+              >
+                {currentTrack.title || 'Tidak ada lagu aktif'}
+              </span>
+              <span className="text-xs text-zinc-400 truncate mt-0.5" title={currentTrack.artist}>
+                {currentTrack.artist || 'Pilih lagu untuk memulai'}
+              </span>
+            </div>
+          </div>
+
+          {/* Progress Scrubber (Apple Music Style) */}
+          <div className="relative z-10 flex flex-col gap-1 my-1">
+            <div className="relative flex items-center group">
+              <input
+                type="range"
+                min={0}
+                max={duration || 100}
+                value={currentSeek}
+                onMouseDown={() => setIsSeeking(true)}
+                onChange={(e) => setSeekValue(Number(e.target.value))}
+                onMouseUp={(e) => {
+                  setIsSeeking(false)
+                  seekTo(Number(e.target.value))
+                }}
+                className="w-full h-1 bg-white/15 rounded-full appearance-none cursor-pointer accent-red-500 focus:outline-none transition-all group-hover:h-1.5"
+                style={{
+                  background: `linear-gradient(to right, #ef4444 ${progressRatio}%, rgba(255, 255, 255, 0.15) ${progressRatio}%)`
+                }}
+              />
+            </div>
+            <div className="flex justify-between text-[11px] font-mono text-zinc-400">
+              <span>{formatTime(currentSeek)}</span>
+              <span>{duration > 0 ? `-${formatTime(remainingTime)}` : '0:00'}</span>
+            </div>
+          </div>
+
+          {/* Main Playback Controls Cluster */}
+          <div className="relative z-10 flex items-center justify-center gap-6 py-2">
+            <button
+              onClick={prevTrack}
+              className="w-10 h-10 rounded-full flex items-center justify-center text-zinc-300 hover:text-white hover:bg-white/5 active:scale-90 transition-all cursor-pointer"
+              title="Sebelumnya"
+            >
+              <SkipBack size={22} fill="currentColor" />
+            </button>
+
+            <button
+              onClick={playPause}
+              className="w-13 h-13 rounded-full bg-white text-black flex items-center justify-center hover:scale-105 active:scale-95 transition-all shadow-xl shadow-white/10 cursor-pointer"
+              title={isPlaying ? 'Pause' : 'Play'}
+            >
+              {isPlaying ? (
+                <Pause size={22} fill="currentColor" />
+              ) : (
+                <Play size={22} fill="currentColor" className="ml-0.5" />
+              )}
+            </button>
+
+            <button
+              onClick={nextTrack}
+              className="w-10 h-10 rounded-full flex items-center justify-center text-zinc-300 hover:text-white hover:bg-white/5 active:scale-90 transition-all cursor-pointer"
+              title="Berikutnya"
+            >
+              <SkipForward size={22} fill="currentColor" />
+            </button>
+          </div>
+
+          {/* Volume Control Bar */}
+          <div className="relative z-10 flex items-center gap-2 px-1 pt-1 pb-0.5">
+            <button
+              onClick={toggleMute}
+              className="text-zinc-400 hover:text-white transition-colors cursor-pointer"
+              title={isMuted ? 'Unmute' : 'Mute'}
+            >
+              {isMuted || volume === 0 ? <VolumeX size={14} /> : <Volume size={14} />}
+            </button>
+
+            <input
+              type="range"
+              min="0"
+              max="100"
+              value={isMuted ? 0 : volume}
+              onChange={(e) => setVolume(Number(e.target.value))}
+              className="w-full h-1 bg-white/15 rounded-full appearance-none cursor-pointer accent-white focus:outline-none"
+              style={{
+                background: `linear-gradient(to right, rgba(255, 255, 255, 0.8) ${isMuted ? 0 : volume}%, rgba(255, 255, 255, 0.15) ${isMuted ? 0 : volume}%)`
+              }}
+            />
+
+            <Volume2 size={14} className="text-zinc-400 shrink-0" />
+          </div>
+        </div>
+      </div>
+
+      {/* Floating Mini Action Button */}
+      <button
+        onClick={togglePlayer}
+        className={`
+          group relative w-10 h-10 rounded-full flex items-center justify-center pointer-events-auto
+          shadow-lg shadow-black/80 border border-white/10
+          transition-all duration-200 ease-out cursor-pointer
+          hover:scale-105 active:scale-95
+          ${
+            isPlayerOpen
+              ? 'bg-white/15 text-white hover:bg-white/20'
+              : 'bg-[#121214] text-white hover:border-red-500/40'
+          }
+        `}
+        title={isPlayerOpen ? 'Tutup' : 'YouTube Music'}
+      >
+        {isPlaying && !isPlayerOpen && (
+          <span className="absolute inset-0 rounded-full bg-red-600/30 animate-ping pointer-events-none" />
+        )}
+
+        {isPlayerOpen ? (
+          <X size={15} strokeWidth={2} />
+        ) : (
+          <Music size={16} className={isPlaying ? 'text-red-500 animate-pulse' : 'text-zinc-300'} />
+        )}
+      </button>
+    </div>
+  )
+}
+
+export default YoutubeMusicPlayer

package/src/renderer/src/components/camera/CameraPreview.jsx

@@ -0,0 +1,236 @@
+import { useEffect, useRef, useState, useCallback } from 'react'
+import { Camera } from 'lucide-react'
+
+export const CameraPreview = ({
+  isOpen,
+  onCapture,
+  onClose,
+  deviceId = null,
+  countdown = 5,
+  isAutonomous = false
+}) => {
+  const videoRef = useRef(null)
+  const streamRef = useRef(null)
+  const canvasRef = useRef(null)
+  const [timeLeft, setTimeLeft] = useState(countdown)
+  const [error, setError] = useState(null)
+  const [isReady, setIsReady] = useState(false)
+  const hasCapturedRef = useRef(false)
+
+  const stopStream = useCallback(() => {
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop())
+      streamRef.current = null
+    }
+  }, [])
+
+  const captureFrame = useCallback(() => {
+    console.log('[CameraPreview] captureFrame called. hasCaptured:', hasCapturedRef.current, 'video:', !!videoRef.current, 'canvas:', !!canvasRef.current)
+    if (hasCapturedRef.current || !videoRef.current || !canvasRef.current) {
+      console.log('[CameraPreview] captureFrame aborted!')
+      return
+    }
+    hasCapturedRef.current = true
+
+    try {
+      const video = videoRef.current
+      const canvas = canvasRef.current
+      const ctx = canvas.getContext('2d')
+
+      // Maintain aspect ratio, max 1280x720
+      let width = video.videoWidth || 1280
+      let height = video.videoHeight || 720
+      
+      if (width > 1280 || height > 720) {
+        const ratio = Math.min(1280 / width, 720 / height)
+        width = Math.floor(width * ratio)
+        height = Math.floor(height * ratio)
+      }
+
+      canvas.width = width
+      canvas.height = height
+      ctx.drawImage(video, 0, 0, width, height)
+
+      // Convert to base64 JPEG 70%
+      const base64Data = canvas.toDataURL('image/jpeg', 0.7)
+      console.log('[CameraPreview] Frame captured, size:', Math.round(base64Data.length / 1024), 'KB')
+      stopStream()
+      onCapture(base64Data)
+    } catch (e) {
+      console.error('[CameraPreview] Error during captureFrame:', e)
+      stopStream()
+      onCapture(null)
+    }
+  }, [onCapture, stopStream])
+
+  // Main effect: open/close camera
+  useEffect(() => {
+    if (!isOpen) {
+      setIsReady(false)
+      return
+    }
+
+    let isMounted = true
+    hasCapturedRef.current = false
+    setTimeLeft(countdown)
+    setError(null)
+    setIsReady(false)
+
+    const initCamera = async () => {
+      try {
+        console.log('[CameraPreview] Requesting camera access..., deviceId:', deviceId)
+        
+        // Start with simple constraints first, then try specific deviceId
+        const constraints = {
+          video: deviceId && deviceId !== 'default'
+            ? { deviceId: { exact: deviceId } }
+            : true,
+          audio: false
+        }
+        
+        console.log('[CameraPreview] getUserMedia constraints:', JSON.stringify(constraints))
+        const stream = await navigator.mediaDevices.getUserMedia(constraints)
+        console.log('[CameraPreview] Got stream:', stream.getVideoTracks().length, 'video tracks')
+
+        if (!isMounted) {
+          stream.getTracks().forEach(t => t.stop())
+          return
+        }
+
+        streamRef.current = stream
+
+        if (videoRef.current) {
+          videoRef.current.srcObject = stream
+          
+          // Wait for video to actually start playing
+          videoRef.current.onloadedmetadata = () => {
+            console.log('[CameraPreview] Video metadata loaded, dimensions:', videoRef.current.videoWidth, 'x', videoRef.current.videoHeight)
+            if (!isMounted) return
+            
+            videoRef.current.play().then(() => {
+              console.log('[CameraPreview] Video playing. isAutonomous prop value:', isAutonomous)
+              if (!isMounted) return
+              setIsReady(true)
+
+              if (isAutonomous) {
+                // Wait a bit for auto-focus, then snap instantly
+                setTimeout(() => {
+                  console.log('[CameraPreview] setTimeout 800ms finished. isMounted:', isMounted, 'hasCaptured:', hasCapturedRef.current)
+                  if (isMounted && !hasCapturedRef.current) captureFrame()
+                }, 800)
+              }
+            }).catch(err => {
+              console.error('[CameraPreview] Play error:', err)
+            })
+          }
+        }
+      } catch (err) {
+        console.error('[CameraPreview] Camera access error:', err.name, err.message)
+        if (isMounted) {
+          setError(err.message)
+          stopStream()
+          // Delay onClose slightly so error is visible
+          setTimeout(() => {
+            if (isMounted) onClose()
+          }, 2000)
+        }
+      }
+    }
+
+    initCamera()
+
+    return () => {
+      isMounted = false
+      stopStream()
+    }
+  }, [isOpen]) // Minimal deps - only re-run when isOpen changes
+
+  // Countdown timer (only when camera is ready and not autonomous)
+  useEffect(() => {
+    if (!isOpen || !isReady || isAutonomous || error || hasCapturedRef.current) return
+
+    if (timeLeft <= 0) {
+      captureFrame()
+      return
+    }
+
+    const timer = setTimeout(() => {
+      setTimeLeft(prev => prev - 1)
+    }, 1000)
+
+    return () => clearTimeout(timer)
+  }, [isOpen, isReady, isAutonomous, timeLeft, error, captureFrame])
+
+  // Don't render UI if closed or autonomous mode, but keep video for autonomous
+  if (!isOpen) return null
+  if (isAutonomous) {
+    return (
+      <div className="fixed bottom-0 right-0 w-1 h-1 opacity-0 pointer-events-none overflow-hidden">
+        <video ref={videoRef} autoPlay playsInline muted className="w-full h-full" />
+        <canvas ref={canvasRef} className="w-full h-full" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="fixed bottom-24 right-6 z-50 animate-[slideUpFadeIn_0.3s_ease-out]">
+      <div className="w-[320px] rounded-2xl border border-white/10 bg-base-100/70 backdrop-blur-xl shadow-2xl overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="px-4 py-3 flex items-center justify-between border-b border-white/5 bg-base-200/50">
+          <div className="flex items-center gap-2">
+            <Camera className="w-4 h-4 text-primary" />
+            <span className="font-semibold text-sm">Mark Glance</span>
+          </div>
+          {error ? (
+            <div className="badge badge-sm border-0 bg-error/20 text-error font-bold">Error</div>
+          ) : !isReady ? (
+            <span className="loading loading-dots loading-xs text-primary"></span>
+          ) : (
+            <div className={`badge badge-sm border-0 font-bold ${
+              timeLeft > 3 ? 'bg-primary/20 text-primary' : 
+              timeLeft > 1 ? 'bg-warning/20 text-warning' : 
+              'bg-error/20 text-error'
+            }`}>
+              {timeLeft}s
+            </div>
+          )}
+        </div>
+
+        {/* Video Container */}
+        <div className="relative bg-black w-full aspect-video">
+          {error ? (
+            <div className="absolute inset-0 flex items-center justify-center text-error/70 text-xs p-4 text-center">
+              ⚠️ {error}
+            </div>
+          ) : (
+            <>
+              <video
+                ref={videoRef}
+                autoPlay
+                playsInline
+                muted
+                className="w-full h-full object-cover"
+              />
+              <canvas ref={canvasRef} className="hidden" />
+            </>
+          )}
+          
+          {/* Flash Effect on Capture */}
+          {timeLeft <= 0 && isReady && !error && (
+            <div className="absolute inset-0 bg-white/80 animate-pulse pointer-events-none" />
+          )}
+        </div>
+
+        {/* Progress Bar */}
+        {isReady && !error && (
+          <div className="h-1 w-full bg-base-300/50">
+            <div 
+              className="h-full bg-gradient-to-r from-primary to-secondary transition-all duration-1000 ease-linear"
+              style={{ width: `${(timeLeft / countdown) * 100}%` }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}