From e2d7549a70255a4751efe25de2e778df021a63cc Mon Sep 17 00:00:00 2001
From: kuekhaoyang <kuekhaoyang@Gmail.com>
Date: Sun, 12 Apr 2026 10:51:48 +0800
Subject: [PATCH] fix(player): expand the default player viewport

Remove the extra player shell, make the inline player full width on phones, align portrait web fullscreen to the top, and bump the app version to 4.8.2.

Closes #154
---
 app/player/page.tsx                      | 30 +++++++++++++-----------
 components/player/DesktopVideoPlayer.tsx |  7 +++---
 components/player/VideoPlayer.tsx        |  5 +---
 components/player/web-fullscreen.css     |  5 ++++
 package-lock.json                        |  4 ++--
 package.json                             |  2 +-
 6 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/app/player/page.tsx b/app/player/page.tsx
index 75fc010..bc866ee 100644
--- a/app/player/page.tsx
+++ b/app/player/page.tsx
@@ -416,20 +416,22 @@ function PlayerContent() {
                   className="min-w-[240px]"
                 />
               </div>
-              <VideoPlayer
-                playUrl={playUrl}
-                videoId={videoId || undefined}
-                currentEpisode={currentEpisode}
-                onBack={() => router.back()}
-                totalEpisodes={videoData?.episodes?.length || 0}
-                onNextEpisode={handleNextEpisode}
-                isReversed={isReversed}
-                isPremium={isPremium}
-                videoTitle={videoData?.vod_name || title || ''}
-                episodeName={videoData?.episodes?.[currentEpisode]?.name || ''}
-                externalTimeRef={playerTimeRef}
-                onResolutionDetected={setDetectedResolution}
-              />
+              <div className="-mx-4 sm:mx-0">
+                <VideoPlayer
+                  playUrl={playUrl}
+                  videoId={videoId || undefined}
+                  currentEpisode={currentEpisode}
+                  onBack={() => router.back()}
+                  totalEpisodes={videoData?.episodes?.length || 0}
+                  onNextEpisode={handleNextEpisode}
+                  isReversed={isReversed}
+                  isPremium={isPremium}
+                  videoTitle={videoData?.vod_name || title || ''}
+                  episodeName={videoData?.episodes?.[currentEpisode]?.name || ''}
+                  externalTimeRef={playerTimeRef}
+                  onResolutionDetected={setDetectedResolution}
+                />
+              </div>
               <div className="hidden lg:block">
                 <VideoMetadata
                   videoData={videoData}
diff --git a/components/player/DesktopVideoPlayer.tsx b/components/player/DesktopVideoPlayer.tsx
index 49ac611..7d83e4a 100644
--- a/components/player/DesktopVideoPlayer.tsx
+++ b/components/player/DesktopVideoPlayer.tsx
@@ -315,6 +315,7 @@ export function DesktopVideoPlayer({
   const stageClassName = data.fullscreenMode === 'window'
     ? 'kvideo-stage kvideo-web-fullscreen-stage'
     : 'kvideo-stage absolute inset-0';
+  const isTopAlignedWebFullscreen = data.fullscreenMode === 'window' && isMobile && !isLandscape && !shouldForceLandscape;
 
   // Mobile double-tap gesture for skip forward/backward
   const { handleTap } = useDoubleTap({
@@ -341,15 +342,15 @@ export function DesktopVideoPlayer({
   return (
     <div
       ref={containerRef}
-      className={`kvideo-container relative aspect-video bg-black rounded-[var(--radius-2xl)] group ${data.fullscreenMode === 'window' ? 'is-web-fullscreen' : ''
-        } ${shouldForceLandscape ? 'force-landscape' : ''}`}
+      className={`kvideo-container relative aspect-video bg-black group ${data.fullscreenMode === 'window' ? 'is-web-fullscreen' : ''
+        } ${shouldForceLandscape ? 'force-landscape' : ''} ${isTopAlignedWebFullscreen ? 'top-align-stage' : ''} overflow-hidden rounded-none sm:rounded-[var(--radius-2xl)]`}
       style={webFullscreenStyle}
       onMouseMove={() => { handleMouseMove(); }}
       onMouseLeave={() => isPlaying && setShowControls(false)}
     >
       <div className={stageClassName}>
         {/* Clipping Wrapper for video and overlays - Restores the 'Liquid Glass' rounded look */}
-        <div className={`absolute inset-0 overflow-hidden pointer-events-none ${data.fullscreenMode === 'window' ? 'rounded-0' : 'rounded-[var(--radius-2xl)]'
+        <div className={`absolute inset-0 overflow-hidden pointer-events-none ${data.fullscreenMode === 'window' ? 'rounded-none' : 'rounded-none sm:rounded-[var(--radius-2xl)]'
           }`}>
           <div className="absolute inset-0 pointer-events-auto">
           {/* Video Element */}
diff --git a/components/player/VideoPlayer.tsx b/components/player/VideoPlayer.tsx
index 1ac3d9e..c5d8c02 100644
--- a/components/player/VideoPlayer.tsx
+++ b/components/player/VideoPlayer.tsx
@@ -2,7 +2,6 @@
 
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { Card } from '@/components/ui/Card';
 import { useHistory } from '@/lib/store/history-store';
 import { CustomVideoPlayer } from './CustomVideoPlayer';
 import { VideoPlayerError } from './VideoPlayerError';
@@ -181,8 +180,7 @@ export function VideoPlayer({
   }
 
   return (
-    <div data-no-spatial>
-    <Card hover={false} className="p-0 relative">
+    <div data-no-spatial className="relative">
       {/* Mode Indicator Badge - controlled by settings */}
       {showModeIndicator && (
         <div className="absolute top-3 right-3 z-30">
@@ -220,7 +218,6 @@ export function VideoPlayer({
           onResolutionDetected={onResolutionDetected}
         />
       )}
-    </Card>
     </div>
   );
 }
diff --git a/components/player/web-fullscreen.css b/components/player/web-fullscreen.css
index f46f00c..5918ea5 100644
--- a/components/player/web-fullscreen.css
+++ b/components/player/web-fullscreen.css
@@ -16,6 +16,11 @@
     --kvideo-web-scale: 1;
 }
 
+.kvideo-container.is-web-fullscreen.top-align-stage {
+    align-items: flex-start !important;
+    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(0px, 1.5vh, 16px)) !important;
+}
+
 .kvideo-container.is-web-fullscreen .kvideo-web-fullscreen-stage {
     position: relative !important;
     width: min(calc(var(--kvideo-stage-viewport-width, var(--kvideo-viewport-width, 100vw)) * var(--kvideo-web-scale)), calc(var(--kvideo-stage-viewport-height, var(--kvideo-viewport-height, 100vh)) * var(--kvideo-web-scale) * 16 / 9)) !important;
diff --git a/package-lock.json b/package-lock.json
index aa11570..1b507dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "kvideo",
-  "version": "4.8.1",
+  "version": "4.8.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "kvideo",
-      "version": "4.8.1",
+      "version": "4.8.2",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
diff --git a/package.json b/package.json
index c9619fa..7b6d4db 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kvideo",
-  "version": "4.8.1",
+  "version": "4.8.2",
   "private": true,
   "scripts": {
     "dev": "next dev --port ${PORT:-3000}",