taro-uno-ui 0.9.0 → 1.0.0

package/src/components/basic/Video/Video.styles.ts

@@ -0,0 +1,777 @@
+/**
+ * Taro-Uno Video Component Styles
+ * 视频组件样式定义
+ */
+
+import type { CSSProperties } from 'react';
+import { createNamespace } from '../../../utils/createNamespace';
+import { useTheme } from '../../../hooks/useTheme';
+import type { VideoSize, VideoVariant, VideoStatus, VideoControlsConfig } from './Video.types';
+
+const { bem } = createNamespace('video');
+
+/** 基础样式 */
+export const baseStyle: CSSProperties = {
+  position: 'relative',
+  display: 'inline-block',
+  overflow: 'hidden',
+  backgroundColor: '#000',
+  borderRadius: 0,
+  boxSizing: 'border-box',
+  userSelect: 'none',
+  cursor: 'pointer',
+  transition: 'all 0.3s ease',
+};
+
+/** 尺寸样式 */
+export const sizeStyles: Record<VideoSize, CSSProperties> = {
+  sm: {
+    width: 320,
+    height: 180,
+  },
+  md: {
+    width: 640,
+    height: 360,
+  },
+  lg: {
+    width: 800,
+    height: 450,
+  },
+  xl: {
+    width: 1024,
+    height: 576,
+  },
+  full: {
+    width: '100%',
+    height: '100%',
+  },
+};
+
+/** 变体样式 */
+export const variantStyles: Record<VideoVariant, CSSProperties> = {
+  default: {
+    borderRadius: 0,
+    border: 'none',
+    boxShadow: 'none',
+  },
+  rounded: {
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  bordered: {
+    border: '1px solid #d9d9d9',
+    borderRadius: 4,
+  },
+  shadow: {
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+    borderRadius: 8,
+  },
+};
+
+/** 状态样式 */
+export const statusStyles: Record<VideoStatus, CSSProperties> = {
+  idle: {
+    opacity: 1,
+  },
+  playing: {
+    opacity: 1,
+  },
+  paused: {
+    opacity: 1,
+  },
+  ended: {
+    opacity: 0.8,
+  },
+  error: {
+    opacity: 0.8,
+    backgroundColor: '#f5f5f5',
+  },
+  loading: {
+    opacity: 1,
+  },
+};
+
+/** 视频元素样式 */
+export const videoStyle: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'contain',
+  backgroundColor: '#000',
+  outline: 'none',
+  WebkitTapHighlightColor: 'transparent',
+};
+
+/** 视频封面样式 */
+export const posterStyle: CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  transition: 'opacity 0.3s ease',
+  zIndex: 1,
+};
+
+/** 视频控制栏基础样式 */
+export const controlsBaseStyle: CSSProperties = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  height: 44,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '0 16px',
+  backgroundColor: 'rgba(0, 0, 0, 0.8)',
+  color: '#fff',
+  transition: 'all 0.3s ease',
+  zIndex: 10,
+  boxSizing: 'border-box',
+};
+
+/** 控制栏位置样式 */
+export const controlsPositionStyles: Record<'top' | 'bottom' | 'both', CSSProperties> = {
+  top: {
+    top: 0,
+    bottom: 'auto',
+  },
+  bottom: {
+    bottom: 0,
+    top: 'auto',
+  },
+  both: {
+    // Both positions are handled by having two control bars
+  },
+};
+
+/** 控制栏样式 */
+export const controlsStyle = (config: VideoControlsConfig): CSSProperties => {
+  return {
+    ...controlsBaseStyle,
+    ...(config.height && { height: config.height }),
+    ...(config.opacity !== undefined && { opacity: config.opacity }),
+    ...(config.style || {}),
+  };
+};
+
+/** 控制栏上半部分样式 */
+export const controlsTopStyle: CSSProperties = {
+  ...controlsBaseStyle,
+  top: 0,
+  justifyContent: 'flex-end',
+  height: 32,
+  padding: '0 8px',
+};
+
+/** 控制栏下半部分样式 */
+export const controlsBottomStyle: CSSProperties = {
+  ...controlsBaseStyle,
+  bottom: 0,
+  justifyContent: 'space-between',
+  flexDirection: 'column',
+  height: 'auto',
+  padding: '8px 16px',
+  gap: 8,
+};
+
+/** 控制栏进度条样式 */
+export const progressContainerStyle: CSSProperties = {
+  position: 'relative',
+  flex: 1,
+  height: 4,
+  margin: '0 8px',
+  backgroundColor: 'rgba(255, 255, 255, 0.3)',
+  borderRadius: 2,
+  cursor: 'pointer',
+  overflow: 'hidden',
+  transition: 'height 0.2s ease',
+};
+
+/** 控制栏进度条悬停样式 */
+export const progressContainerHoverStyle: CSSProperties = {
+  height: 8,
+};
+
+/** 控制栏缓冲进度样式 */
+export const bufferedStyle: CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  height: '100%',
+  backgroundColor: 'rgba(255, 255, 255, 0.5)',
+  transition: 'width 0.3s ease',
+};
+
+/** 控制栏播放进度样式 */
+export const progressStyle: CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  height: '100%',
+  backgroundColor: '#1677ff',
+  transition: 'width 0.1s ease',
+};
+
+/** 控制栏进度条滑块样式 */
+export const progressHandleStyle: CSSProperties = {
+  position: 'absolute',
+  top: 50,
+  right: -6,
+  width: 12,
+  height: 12,
+  backgroundColor: '#fff',
+  border: '2px solid #1677ff',
+  borderRadius: '50%',
+  transform: 'translateY(-50%)',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease',
+  zIndex: 1,
+};
+
+/** 控制栏进度条滑块悬停样式 */
+export const progressHandleHoverStyle: CSSProperties = {
+  transform: 'translateY(-50%) scale(1.2)',
+  boxShadow: '0 0 8px rgba(22, 119, 255, 0.6)',
+};
+
+/** 控制栏按钮样式 */
+export const buttonStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 32,
+  height: 32,
+  padding: 0,
+  margin: 0,
+  backgroundColor: 'transparent',
+  border: 'none',
+  borderRadius: '50%',
+  color: '#fff',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease',
+  fontSize: 16,
+};
+
+/** 控制栏按钮悬停样式 */
+export const buttonHoverStyle: CSSProperties = {
+  backgroundColor: 'rgba(255, 255, 255, 0.2)',
+  transform: 'scale(1.1)',
+};
+
+/** 控制栏按钮激活样式 */
+export const buttonActiveStyle: CSSProperties = {
+  backgroundColor: 'rgba(255, 255, 255, 0.3)',
+  transform: 'scale(0.95)',
+};
+
+/** 播放按钮样式 */
+export const playButtonStyle: CSSProperties = {
+  ...buttonStyle,
+  width: 48,
+  height: 48,
+  fontSize: 24,
+};
+
+/** 中心播放按钮样式 */
+export const centerPlayButtonStyle: CSSProperties = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 80,
+  height: 80,
+  backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  border: '2px solid #fff',
+  borderRadius: '50%',
+  color: '#fff',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: 32,
+  cursor: 'pointer',
+  transition: 'all 0.3s ease',
+  zIndex: 5,
+};
+
+/** 中心播放按钮悬停样式 */
+export const centerPlayButtonHoverStyle: CSSProperties = {
+  backgroundColor: 'rgba(22, 119, 255, 0.8)',
+  transform: 'translate(-50%, -50%) scale(1.1)',
+  boxShadow: '0 0 20px rgba(22, 119, 255, 0.6)',
+};
+
+/** 控制栏左侧样式 */
+export const controlsLeftStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+};
+
+/** 控制栏右侧样式 */
+export const controlsRightStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+};
+
+/** 控制栏中间样式 */
+export const controlsMiddleStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  flex: 1,
+  gap: 12,
+};
+
+/** 时间显示样式 */
+export const timeStyle: CSSProperties = {
+  fontSize: 12,
+  color: '#fff',
+  minWidth: 80,
+  textAlign: 'center',
+  userSelect: 'none',
+};
+
+/** 音量控制样式 */
+export const volumeStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+  minWidth: 100,
+};
+
+/** 音量滑块样式 */
+export const volumeSliderStyle: CSSProperties = {
+  width: 60,
+  height: 4,
+  backgroundColor: 'rgba(255, 255, 255, 0.3)',
+  borderRadius: 2,
+  cursor: 'pointer',
+  position: 'relative',
+  overflow: 'hidden',
+};
+
+/** 音量滑块进度样式 */
+export const volumeProgressStyle: CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  height: '100%',
+  backgroundColor: '#1677ff',
+  transition: 'width 0.1s ease',
+};
+
+/** 音量滑块手柄样式 */
+export const volumeHandleStyle: CSSProperties = {
+  position: 'absolute',
+  top: 50,
+  right: -4,
+  width: 8,
+  height: 8,
+  backgroundColor: '#fff',
+  borderRadius: '50%',
+  transform: 'translateY(-50%)',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease',
+};
+
+/** 标题样式 */
+export const titleStyle: CSSProperties = {
+  position: 'absolute',
+  top: 16,
+  left: 16,
+  right: 80,
+  color: '#fff',
+  fontSize: 16,
+  fontWeight: 'bold',
+  textShadow: '0 1px 2px rgba(0, 0, 0, 0.8)',
+  zIndex: 5,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+};
+
+/** 描述样式 */
+export const descriptionStyle: CSSProperties = {
+  position: 'absolute',
+  top: 40,
+  left: 16,
+  right: 16,
+  color: '#fff',
+  fontSize: 12,
+  textShadow: '0 1px 2px rgba(0, 0, 0, 0.8)',
+  zIndex: 5,
+  overflow: 'hidden',
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical' as const,
+};
+
+/** 水印样式 */
+export const watermarkStyle: CSSProperties = {
+  position: 'absolute',
+  padding: '8px 16px',
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  color: '#fff',
+  fontSize: 12,
+  borderRadius: 4,
+  zIndex: 100,
+  userSelect: 'none',
+  pointerEvents: 'none',
+};
+
+/** 水印位置样式 */
+export const watermarkPositionStyles: Record<'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center', CSSProperties> = {
+  'top-left': {
+    top: 16,
+    left: 16,
+  },
+  'top-right': {
+    top: 16,
+    right: 16,
+  },
+  'bottom-left': {
+    bottom: 16,
+    left: 16,
+  },
+  'bottom-right': {
+    bottom: 16,
+    right: 16,
+  },
+  center: {
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  },
+};
+
+/** 加载样式 */
+export const loadingStyle: CSSProperties = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  color: '#fff',
+  fontSize: 24,
+  zIndex: 15,
+};
+
+/** 错误样式 */
+export const errorStyle: CSSProperties = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  color: '#fff',
+  textAlign: 'center',
+  zIndex: 15,
+  padding: '16px',
+  backgroundColor: 'rgba(0, 0, 0, 0.8)',
+  borderRadius: 8,
+  maxWidth: '80%',
+};
+
+/** 错误标题样式 */
+export const errorTitleStyle: CSSProperties = {
+  fontSize: 16,
+  fontWeight: 'bold',
+  marginBottom: 8,
+  color: '#ff4d4f',
+};
+
+/** 错误消息样式 */
+export const errorMessageStyle: CSSProperties = {
+  fontSize: 12,
+  lineHeight: 1.5,
+  color: '#ccc',
+};
+
+/** 结束样式 */
+export const endedStyle: CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: 'rgba(0, 0, 0, 0.8)',
+  color: '#fff',
+  zIndex: 15,
+  gap: 16,
+};
+
+/** 结束标题样式 */
+export const endedTitleStyle: CSSProperties = {
+  fontSize: 18,
+  fontWeight: 'bold',
+};
+
+/** 结束消息样式 */
+export const endedMessageStyle: CSSProperties = {
+  fontSize: 14,
+  color: '#ccc',
+};
+
+/** 选项菜单样式 */
+export const optionsMenuStyle: CSSProperties = {
+  position: 'absolute',
+  bottom: 60,
+  right: 16,
+  backgroundColor: 'rgba(0, 0, 0, 0.9)',
+  color: '#fff',
+  borderRadius: 8,
+  padding: 8,
+  minWidth: 160,
+  zIndex: 20,
+  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)',
+};
+
+/** 选项项样式 */
+export const optionsItemStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '8px 12px',
+  cursor: 'pointer',
+  borderRadius: 4,
+  transition: 'all 0.2s ease',
+  fontSize: 14,
+};
+
+/** 选项项悬停样式 */
+export const optionsItemHoverStyle: CSSProperties = {
+  backgroundColor: 'rgba(255, 255, 255, 0.2)',
+};
+
+/** 选项项选中样式 */
+export const optionsItemSelectedStyle: CSSProperties = {
+  backgroundColor: 'rgba(22, 119, 255, 0.4)',
+  color: '#1677ff',
+  fontWeight: 'bold',
+};
+
+/** 章节标记样式 */
+export const chapterMarkerStyle: CSSProperties = {
+  position: 'absolute',
+  top: '50%',
+  right: 8,
+  transform: 'translateY(-50%)',
+  width: 4,
+  height: 4,
+  backgroundColor: 'rgba(255, 255, 255, 0.6)',
+  borderRadius: '50%',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease',
+  zIndex: 6,
+};
+
+/** 章节标记悬停样式 */
+export const chapterMarkerHoverStyle: CSSProperties = {
+  backgroundColor: '#1677ff',
+  transform: 'translateY(-50%) scale(1.5)',
+  boxShadow: '0 0 8px rgba(22, 119, 255, 0.6)',
+};
+
+/** 章节标记激活样式 */
+export const chapterMarkerActiveStyle: CSSProperties = {
+  backgroundColor: '#ff4d4f',
+  transform: 'translateY(-50%) scale(1.2)',
+};
+
+/** 章节弹出样式 */
+export const chapterPopupStyle: CSSProperties = {
+  position: 'absolute',
+  right: 24,
+  top: '50%',
+  transform: 'translateY(-50%)',
+  backgroundColor: 'rgba(0, 0, 0, 0.9)',
+  color: '#fff',
+  padding: '8px 12px',
+  borderRadius: 4,
+  fontSize: 12,
+  whiteSpace: 'nowrap',
+  zIndex: 20,
+  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
+  pointerEvents: 'none',
+};
+
+/** 广告样式 */
+export const adStyle: CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: '#000',
+  color: '#fff',
+  zIndex: 20,
+  gap: 16,
+};
+
+/** 广告关闭按钮样式 */
+export const adCloseButtonStyle: CSSProperties = {
+  ...buttonStyle,
+  position: 'absolute',
+  top: 16,
+  right: 16,
+  backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  width: 24,
+  height: 24,
+  fontSize: 16,
+};
+
+/** 广告倒计时样式 */
+export const adCountdownStyle: CSSProperties = {
+  position: 'absolute',
+  top: 16,
+  left: 16,
+  backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  padding: '4px 8px',
+  borderRadius: 4,
+  fontSize: 12,
+  color: '#fff',
+};
+
+/** 广告跳过按钮样式 */
+export const adSkipButtonStyle: CSSProperties = {
+  position: 'absolute',
+  bottom: 16,
+  right: 16,
+  backgroundColor: 'rgba(22, 119, 255, 0.8)',
+  color: '#fff',
+  border: 'none',
+  borderRadius: 4,
+  padding: '8px 16px',
+  cursor: 'pointer',
+  fontSize: 14,
+  transition: 'all 0.2s ease',
+};
+
+/** 广告跳过按钮悬停样式 */
+export const adSkipButtonHoverStyle: CSSProperties = {
+  backgroundColor: 'rgba(22, 119, 255, 1)',
+  transform: 'scale(1.05)',
+};
+
+/** 获取视频组件样式 */
+export const getVideoStyle = (size?: VideoSize, variant?: VideoVariant, status?: VideoStatus): CSSProperties => {
+  return {
+    ...baseStyle,
+    ...(size && sizeStyles[size]),
+    ...(variant && variantStyles[variant]),
+    ...(status && statusStyles[status]),
+  };
+};
+
+/** 视频容器样式 */
+export const videoContainerStyle = (size?: VideoSize, variant?: VideoVariant): CSSProperties => {
+  return {
+    ...getVideoStyle(size, variant),
+    ...(variant === 'rounded' && { borderRadius: 8 }),
+    ...(variant === 'bordered' && { border: '1px solid #d9d9d9' }),
+    ...(variant === 'shadow' && { boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)' }),
+  };
+};
+
+/** 视频组件样式钩子 */
+export const useVideoStyle = (size?: VideoSize, variant?: VideoVariant) => {
+  useTheme();
+  return {
+    container: videoContainerStyle(size, variant),
+    video: videoStyle,
+    poster: posterStyle,
+    title: {
+      position: 'absolute' as const,
+      top: 10,
+      left: 10,
+      color: '#fff',
+      fontSize: 16,
+      fontWeight: 'bold' as const,
+      textShadow: '0 1px 2px rgba(0, 0, 0, 0.8)',
+      zIndex: 5,
+      overflow: 'hidden' as const,
+      display: '-webkit-box' as const,
+      WebkitLineClamp: 1,
+      WebkitBoxOrient: 'vertical' as const,
+    },
+    description: {
+      position: 'absolute' as const,
+      top: 35,
+      left: 10,
+      color: '#fff',
+      fontSize: 12,
+      textShadow: '0 1px 2px rgba(0, 0, 0, 0.8)',
+      zIndex: 5,
+      overflow: 'hidden' as const,
+      display: '-webkit-box' as const,
+      WebkitLineClamp: 2,
+      WebkitBoxOrient: 'vertical' as const,
+    },
+    controls: controlsStyle,
+    controlsTop: controlsTopStyle,
+    controlsBottom: controlsBottomStyle,
+    progressContainer: progressContainerStyle,
+    progress: progressStyle,
+    buffered: bufferedStyle,
+    progressHandle: progressHandleStyle,
+    button: buttonStyle,
+    playButton: playButtonStyle,
+    centerPlayButton: centerPlayButtonStyle,
+    controlsLeft: controlsLeftStyle,
+    controlsRight: controlsRightStyle,
+    controlsMiddle: controlsMiddleStyle,
+    time: timeStyle,
+    volume: volumeStyle,
+    volumeSlider: volumeSliderStyle,
+    volumeProgress: volumeProgressStyle,
+    volumeHandle: volumeHandleStyle,
+    watermark: watermarkStyle,
+    loading: loadingStyle,
+    error: errorStyle,
+    ended: endedStyle,
+    optionsMenu: optionsMenuStyle,
+    optionsItem: optionsItemStyle,
+    optionsItemSelected: {
+      backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    },
+    chapterMarker: chapterMarkerStyle,
+    chapterMarkerActive: {
+      backgroundColor: '#1677ff',
+      width: 4,
+    },
+    ad: adStyle,
+    adCountdown: {
+      position: 'absolute' as const,
+      top: 10,
+      left: 10,
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      color: '#fff',
+      padding: '4px 8px',
+      borderRadius: 4,
+      fontSize: 12,
+      zIndex: 10,
+    },
+    adSkipButton: {
+      position: 'absolute' as const,
+      bottom: 10,
+      right: 10,
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      color: '#fff',
+      padding: '4px 12px',
+      borderRadius: 4,
+      fontSize: 12,
+      zIndex: 10,
+      cursor: 'pointer' as const,
+      border: 'none' as const,
+    },
+  };
+};
+
+export { bem };