ZSCGR/KVideo
1
0
Fork 0
mirror of https://github.com/KuekHaoYang/KVideo.git synced 2026-08-12 23:33:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(player): expand the default player viewport

Browse Source 
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
This commit is contained in:
kuekhaoyang
2026-04-12 10:51:48 +08:00
parent 15f6e434c8
commit e2d7549a70
6 changed files with 29 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/player/DesktopVideoPlayer.tsx
+4 -3
View File
@@ -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 */}
components/player/VideoPlayer.tsx
+1 -4
View File
@@ -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>
);
}
components/player/web-fullscreen.css
+5
View File
@@ -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;