优化移动端体验
This commit is contained in:
+16
-16
@@ -2996,8 +2996,8 @@ function PlayPageClient() {
|
|||||||
{/* 第三方应用打开按钮 */}
|
{/* 第三方应用打开按钮 */}
|
||||||
{videoUrl && (
|
{videoUrl && (
|
||||||
<div className='mt-3 px-2 lg:flex-shrink-0 flex justify-end'>
|
<div className='mt-3 px-2 lg:flex-shrink-0 flex justify-end'>
|
||||||
<div className='bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-lg p-2 border border-gray-200/50 dark:border-gray-700/50 w-auto'>
|
<div className='bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-lg p-2 border border-gray-200/50 dark:border-gray-700/50 w-full lg:w-auto overflow-x-auto'>
|
||||||
<div className='flex flex-wrap gap-1.5 justify-end'>
|
<div className='flex gap-1.5 justify-end lg:flex-wrap'>
|
||||||
{/* 下载按钮 */}
|
{/* 下载按钮 */}
|
||||||
<button
|
<button
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
@@ -3030,7 +3030,7 @@ function PlayPageClient() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
className='group relative flex items-center gap-1 px-2 py-1.5 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-green-400'
|
className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-green-400 flex-shrink-0'
|
||||||
title='下载视频'
|
title='下载视频'
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@@ -3046,7 +3046,7 @@ function PlayPageClient() {
|
|||||||
d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
|
d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span className='max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-white'>
|
<span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-white'>
|
||||||
下载
|
下载
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
@@ -3057,7 +3057,7 @@ function PlayPageClient() {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
window.open(`potplayer://${videoUrl}`, '_blank');
|
window.open(`potplayer://${videoUrl}`, '_blank');
|
||||||
}}
|
}}
|
||||||
className='group relative flex items-center gap-1 px-2 py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600'
|
className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
|
||||||
title='PotPlayer'
|
title='PotPlayer'
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
@@ -3065,7 +3065,7 @@ function PlayPageClient() {
|
|||||||
alt='PotPlayer'
|
alt='PotPlayer'
|
||||||
className='w-4 h-4 flex-shrink-0'
|
className='w-4 h-4 flex-shrink-0'
|
||||||
/>
|
/>
|
||||||
<span className='max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
|
<span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
|
||||||
PotPlayer
|
PotPlayer
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
@@ -3076,7 +3076,7 @@ function PlayPageClient() {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
window.open(`vlc://${videoUrl}`, '_blank');
|
window.open(`vlc://${videoUrl}`, '_blank');
|
||||||
}}
|
}}
|
||||||
className='group relative flex items-center gap-1 px-2 py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600'
|
className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
|
||||||
title='VLC'
|
title='VLC'
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
@@ -3084,7 +3084,7 @@ function PlayPageClient() {
|
|||||||
alt='VLC'
|
alt='VLC'
|
||||||
className='w-4 h-4 flex-shrink-0'
|
className='w-4 h-4 flex-shrink-0'
|
||||||
/>
|
/>
|
||||||
<span className='max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
|
<span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
|
||||||
VLC
|
VLC
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
@@ -3095,7 +3095,7 @@ function PlayPageClient() {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
window.open(`mpv://${videoUrl}`, '_blank');
|
window.open(`mpv://${videoUrl}`, '_blank');
|
||||||
}}
|
}}
|
||||||
className='group relative flex items-center gap-1 px-2 py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600'
|
className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
|
||||||
title='MPV'
|
title='MPV'
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
@@ -3103,7 +3103,7 @@ function PlayPageClient() {
|
|||||||
alt='MPV'
|
alt='MPV'
|
||||||
className='w-4 h-4 flex-shrink-0'
|
className='w-4 h-4 flex-shrink-0'
|
||||||
/>
|
/>
|
||||||
<span className='max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
|
<span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
|
||||||
MPV
|
MPV
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
@@ -3122,7 +3122,7 @@ function PlayPageClient() {
|
|||||||
'_blank'
|
'_blank'
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
className='group relative flex items-center gap-1 px-2 py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600'
|
className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
|
||||||
title='MX Player'
|
title='MX Player'
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
@@ -3130,7 +3130,7 @@ function PlayPageClient() {
|
|||||||
alt='MX Player'
|
alt='MX Player'
|
||||||
className='w-4 h-4 flex-shrink-0'
|
className='w-4 h-4 flex-shrink-0'
|
||||||
/>
|
/>
|
||||||
<span className='max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
|
<span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
|
||||||
MX Player
|
MX Player
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
@@ -3141,7 +3141,7 @@ function PlayPageClient() {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
window.open(`nplayer-${videoUrl}`, '_blank');
|
window.open(`nplayer-${videoUrl}`, '_blank');
|
||||||
}}
|
}}
|
||||||
className='group relative flex items-center gap-1 px-2 py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600'
|
className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
|
||||||
title='nPlayer'
|
title='nPlayer'
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
@@ -3149,7 +3149,7 @@ function PlayPageClient() {
|
|||||||
alt='nPlayer'
|
alt='nPlayer'
|
||||||
className='w-4 h-4 flex-shrink-0'
|
className='w-4 h-4 flex-shrink-0'
|
||||||
/>
|
/>
|
||||||
<span className='max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
|
<span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
|
||||||
nPlayer
|
nPlayer
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
@@ -3165,7 +3165,7 @@ function PlayPageClient() {
|
|||||||
'_blank'
|
'_blank'
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
className='group relative flex items-center gap-1 px-2 py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600'
|
className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
|
||||||
title='IINA'
|
title='IINA'
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
@@ -3173,7 +3173,7 @@ function PlayPageClient() {
|
|||||||
alt='IINA'
|
alt='IINA'
|
||||||
className='w-4 h-4 flex-shrink-0'
|
className='w-4 h-4 flex-shrink-0'
|
||||||
/>
|
/>
|
||||||
<span className='max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
|
<span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
|
||||||
IINA
|
IINA
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user