@douyinfe/semi-foundation 2.79.0 → 2.80.0

package/lib/es/videoPlayer/constants.d.ts

@@ -0,0 +1,30 @@
+declare const cssClasses: {
+    readonly PREFIX: "semi-videoPlayer";
+    readonly PREFIX_CONTROLS: "semi-videoPlayer-controls";
+    readonly PREFIX_PROGRESS: "semi-videoPlayer-progress";
+};
+declare const strings: {
+    readonly DARK: "dark";
+    readonly LIGHT: "light";
+    readonly PLAY: "play";
+    readonly NEXT: "next";
+    readonly TIME: "time";
+    readonly VOLUME: "volume";
+    readonly PLAYBACK_RATE: "playbackRate";
+    readonly QUALITY: "quality";
+    readonly ROUTE: "route";
+    readonly MIRROR: "mirror";
+    readonly FULLSCREEN: "fullscreen";
+    readonly PICTURE_IN_PICTURE: "pictureInPicture";
+};
+declare const numbers: {
+    readonly DEFAULT_VOLUME: 100;
+    readonly DEFAULT_SEEK_TIME: 10;
+    readonly DEFAULT_VOLUME_STEP: 10;
+    readonly DEFAULT_PLAYBACK_RATE: 1;
+};
+declare const DEFAULT_PLAYBACK_RATE: {
+    label: string;
+    value: number;
+}[];
+export { cssClasses, strings, numbers, DEFAULT_PLAYBACK_RATE };

package/lib/es/videoPlayer/constants.js

@@ -0,0 +1,43 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-videoPlayer`,
+  PREFIX_CONTROLS: `${BASE_CLASS_PREFIX}-videoPlayer-controls`,
+  PREFIX_PROGRESS: `${BASE_CLASS_PREFIX}-videoPlayer-progress`
+};
+const strings = {
+  DARK: 'dark',
+  LIGHT: 'light',
+  PLAY: 'play',
+  NEXT: 'next',
+  TIME: 'time',
+  VOLUME: 'volume',
+  PLAYBACK_RATE: 'playbackRate',
+  QUALITY: 'quality',
+  ROUTE: 'route',
+  MIRROR: 'mirror',
+  FULLSCREEN: 'fullscreen',
+  PICTURE_IN_PICTURE: 'pictureInPicture'
+};
+const numbers = {
+  DEFAULT_VOLUME: 100,
+  DEFAULT_SEEK_TIME: 10,
+  DEFAULT_VOLUME_STEP: 10,
+  DEFAULT_PLAYBACK_RATE: 1
+};
+const DEFAULT_PLAYBACK_RATE = [{
+  label: '2.0x',
+  value: 2
+}, {
+  label: '1.5x',
+  value: 1.5
+}, {
+  label: '1.25x',
+  value: 1.25
+}, {
+  label: '1.0x',
+  value: 1
+}, {
+  label: '0.75x',
+  value: 0.75
+}];
+export { cssClasses, strings, numbers, DEFAULT_PLAYBACK_RATE };

package/lib/es/videoPlayer/foundation.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="lodash" />
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface VideoPlayerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getVideo: () => HTMLVideoElement | null;
+    getVideoWrapper: () => HTMLDivElement | null;
+    notifyPause: () => void;
+    notifyPlay: () => void;
+    notifyQualityChange: (quality: string) => void;
+    notifyRateChange: (rate: number) => void;
+    notifyRouteChange: (route: string) => void;
+    notifyVolumeChange: (volume: number) => void;
+    setBufferedValue: (bufferedValue: number) => void;
+    setCurrentTime: (currentTime: number) => void;
+    setIsError: (isError: boolean) => void;
+    setIsMirror: (isMirror: boolean) => void;
+    setIsPlaying: (isPlaying: boolean) => void;
+    setMuted: (muted: boolean) => void;
+    setNotificationContent: (content: string) => void;
+    setPlaybackRate: (rate: number) => void;
+    setQuality: (quality: string) => void;
+    setRoute: (route: string) => void;
+    setShowControls: (showControls: boolean) => void;
+    setShowNotification: (showNotification: boolean) => void;
+    setTotalTime: (totalTime: number) => void;
+    setVolume: (volume: number) => void;
+}
+export default class VideoPlayerFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<VideoPlayerAdapter<P, S>, P, S> {
+    constructor(adapter: VideoPlayerAdapter<P, S>);
+    private controlsTimer;
+    private scrollPosition;
+    init(): void;
+    destroy(): void;
+    shouldShowControlItem(name: string): boolean;
+    clearTimer(): void;
+    handleMouseMove: import("lodash").DebouncedFuncLeading<() => void>;
+    handleTimeChange(value: number): void;
+    handleTimeUpdate(): void;
+    handleDurationChange(): void;
+    handleError(): void;
+    handlePlayOrPause(): void;
+    handlePlay(): void;
+    handlePause(): void;
+    handleCanPlay: () => void;
+    handleWaiting: (locale: any) => void;
+    handleStalled: (locale: any) => void;
+    handleProgress: () => void;
+    handleEnded: () => void;
+    handleVolumeChange(value: number): void;
+    handleVolumeSilent: () => void;
+    checkFullScreen(): boolean;
+    handleFullscreen: () => void;
+    handleRateChange(rate: {
+        label: string;
+        value: number;
+    }, locale: any): void;
+    handleQualityChange(quality: {
+        label: string;
+        value: string;
+    }, locale: any): void;
+    handleRouteChange(route: {
+        label: string;
+        value: string;
+    }, locale: any): void;
+    handleMirror: (locale: any) => void;
+    handlePictureInPicture: () => void;
+    handleLeavePictureInPicture: () => void;
+    handleTemporaryNotification: (content: string) => void;
+    restorePlayPosition(): void;
+    handleMouseEnterWrapper: () => void;
+    handleMouseLeaveWrapper: () => void;
+    handleFullscreenChange: () => void;
+    registerEvent: () => void;
+    unregisterEvent: () => void;
+    handleBodyKeyDown(e: KeyboardEvent): void;
+}

package/lib/es/videoPlayer/foundation.js

@@ -0,0 +1,283 @@
+import _throttle from "lodash/throttle";
+import BaseFoundation from '../base/foundation';
+export default class VideoPlayerFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.scrollPosition = null;
+    this.handleMouseMove = _throttle(() => {
+      this._adapter.setShowControls(true);
+      this.clearTimer();
+      this.controlsTimer = setTimeout(() => {
+        this._adapter.setShowControls(false);
+      }, 3000);
+    }, 200);
+    this.handleCanPlay = () => {
+      this._adapter.setShowNotification(false);
+    };
+    this.handleWaiting = locale => {
+      this._adapter.setNotificationContent(locale.loading);
+      this._adapter.setShowNotification(true);
+    };
+    this.handleStalled = locale => {
+      this._adapter.setNotificationContent(locale.stall);
+      this._adapter.setShowNotification(true);
+    };
+    this.handleProgress = () => {
+      const video = this._adapter.getVideo();
+      if (video && video.buffered.length > 0) {
+        const bufferedEnd = video.buffered.end(video.buffered.length - 1);
+        this._adapter.setBufferedValue(bufferedEnd);
+      }
+    };
+    this.handleEnded = () => {
+      this._adapter.setIsPlaying(false);
+      this._adapter.setShowControls(true);
+    };
+    this.handleVolumeSilent = () => {
+      const video = this._adapter.getVideo();
+      const {
+        volume,
+        muted
+      } = this.getStates();
+      if (!video) return;
+      if (muted) {
+        video.volume = volume / 100;
+        this._adapter.setVolume(volume);
+        this._adapter.setMuted(false);
+      } else {
+        video.volume = 0;
+        this._adapter.setMuted(true);
+      }
+    };
+    this.handleFullscreen = () => {
+      const videoWrapper = this._adapter.getVideoWrapper();
+      const isFullScreen = this.checkFullScreen();
+      if (videoWrapper) {
+        if (isFullScreen) {
+          document.exitFullscreen();
+        } else {
+          // record scroll position before entering fullscreen
+          this.scrollPosition = {
+            x: window.scrollX,
+            y: window.scrollY
+          };
+          videoWrapper.requestFullscreen();
+        }
+      }
+    };
+    this.handleMirror = locale => {
+      const {
+        isMirror
+      } = this.getStates();
+      this._adapter.setIsMirror(!isMirror);
+      this.handleTemporaryNotification(!isMirror ? locale.mirror : locale.cancelMirror);
+    };
+    this.handlePictureInPicture = () => {
+      const video = this._adapter.getVideo();
+      if (!video) return;
+      video.requestPictureInPicture();
+    };
+    this.handleLeavePictureInPicture = () => {
+      const video = this._adapter.getVideo();
+      if (!video) return;
+      this._adapter.setIsPlaying(!video.paused);
+    };
+    this.handleTemporaryNotification = content => {
+      this._adapter.setNotificationContent(content);
+      this._adapter.setShowNotification(true);
+      setTimeout(() => {
+        this._adapter.setShowNotification(false);
+      }, 1000);
+    };
+    this.handleMouseEnterWrapper = () => {
+      this._adapter.setShowControls(true);
+    };
+    this.handleMouseLeaveWrapper = () => {
+      const {
+        isPlaying
+      } = this.getStates();
+      if (isPlaying) {
+        this._adapter.setShowControls(false);
+      }
+    };
+    this.handleFullscreenChange = () => {
+      const isFullScreen = this.checkFullScreen();
+      if (isFullScreen) {
+        document.addEventListener('mousemove', this.handleMouseMove);
+      } else {
+        // according to the exit fullScreen has two way, Esc && click the button
+        // so we need to restore scroll position after exiting fullscreen
+        if (this.scrollPosition) {
+          setTimeout(() => {
+            window.scrollTo(this.scrollPosition.x, this.scrollPosition.y);
+            this.scrollPosition = null;
+          }, 0);
+        }
+        document.removeEventListener('mousemove', this.handleMouseMove);
+      }
+    };
+    this.registerEvent = () => {
+      const video = this._adapter.getVideo();
+      if (!video) return;
+      document.addEventListener('keydown', e => this.handleBodyKeyDown(e));
+      document.addEventListener('fullscreenchange', this.handleFullscreenChange);
+      video.addEventListener('leavepictureinpicture', this.handleLeavePictureInPicture);
+    };
+    this.unregisterEvent = () => {
+      const video = this._adapter.getVideo();
+      if (!video) return;
+      document.removeEventListener('keydown', e => this.handleBodyKeyDown(e));
+      document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
+      video.removeEventListener('leavepictureinpicture', this.handleLeavePictureInPicture);
+    };
+  }
+  init() {
+    const {
+      volume,
+      muted
+    } = this.getProps();
+    const video = this._adapter.getVideo();
+    if (video) {
+      this._adapter.setTotalTime(video.duration);
+      this.handleVolumeChange(muted ? 0 : volume);
+    }
+    this.registerEvent();
+  }
+  destroy() {
+    this.unregisterEvent();
+    this.clearTimer();
+  }
+  shouldShowControlItem(name) {
+    const {
+      controlsList
+    } = this.getProps();
+    if (controlsList.includes(name)) {
+      return true;
+    }
+    return false;
+  }
+  clearTimer() {
+    if (this.controlsTimer) {
+      clearTimeout(this.controlsTimer);
+    }
+  }
+  handleTimeChange(value) {
+    const video = this._adapter.getVideo();
+    if (!video) return;
+    if (!Number.isNaN(value)) {
+      video.currentTime = value;
+      this._adapter.setCurrentTime(value);
+    }
+  }
+  handleTimeUpdate() {
+    const video = this._adapter.getVideo();
+    if (!video) return;
+    this._adapter.setCurrentTime(video.currentTime);
+  }
+  handleDurationChange() {
+    const video = this._adapter.getVideo();
+    if (!video) return;
+    this._adapter.setTotalTime(video.duration);
+  }
+  handleError() {
+    this._adapter.setIsError(true);
+  }
+  handlePlayOrPause() {
+    const video = this._adapter.getVideo();
+    if (!video) return;
+    video.paused ? this.handlePlay() : this.handlePause();
+  }
+  handlePlay() {
+    const video = this._adapter.getVideo();
+    if (video) {
+      video.play();
+      this._adapter.setIsPlaying(true);
+      this._adapter.notifyPlay();
+    }
+  }
+  handlePause() {
+    const video = this._adapter.getVideo();
+    if (video) {
+      video.pause();
+      this._adapter.setIsPlaying(false);
+      this._adapter.notifyPause();
+    }
+  }
+  handleVolumeChange(value) {
+    const video = this._adapter.getVideo();
+    if (!video) return;
+    const volume = Math.floor(value > 0 ? value : 0);
+    video.volume = volume / 100;
+    this._adapter.setVolume(volume);
+    this._adapter.setMuted(volume === 0 ? true : false);
+  }
+  checkFullScreen() {
+    const videoWrapper = this._adapter.getVideoWrapper();
+    if (!videoWrapper) return false;
+    return !!(document.fullscreenElement === videoWrapper ||
+    // @ts-ignore
+    (document === null || document === void 0 ? void 0 : document.webkitFullscreenElement) === videoWrapper ||
+    // @ts-ignore
+    (document === null || document === void 0 ? void 0 : document.mozFullScreenElement) === videoWrapper ||
+    // @ts-ignore
+    (document === null || document === void 0 ? void 0 : document.msFullscreenElement) === videoWrapper || (
+    // @ts-ignore
+    videoWrapper === null || videoWrapper === void 0 ? void 0 : videoWrapper.webkitDisplayingFullscreen) // iOS Safari 特殊处理
+    );
+  }
+  handleRateChange(rate, locale) {
+    const video = this._adapter.getVideo();
+    if (!video) return;
+    video.playbackRate = rate.value;
+    this._adapter.setPlaybackRate(rate.value);
+    this._adapter.notifyRateChange(rate.value);
+    this.handleTemporaryNotification(locale.rateChange.replace('${rate}', rate.label));
+  }
+  handleQualityChange(quality, locale) {
+    this._adapter.setQuality(quality.value);
+    this._adapter.notifyQualityChange(quality.value);
+    this.handleTemporaryNotification(locale.qualityChange.replace('${quality}', quality.label));
+    this.restorePlayPosition();
+  }
+  handleRouteChange(route, locale) {
+    var _a, _b;
+    this._adapter.setRoute(route.value);
+    (_b = (_a = this._adapter).notifyRouteChange) === null || _b === void 0 ? void 0 : _b.call(_a, route.value);
+    this.handleTemporaryNotification(locale.routeChange.replace('${route}', route.label));
+    this.restorePlayPosition();
+  }
+  restorePlayPosition() {
+    const video = this._adapter.getVideo();
+    if (!video) return;
+    const wasPlaying = !video.paused;
+    const currentTime = video.currentTime;
+    const handleLoaded = () => {
+      video.currentTime = currentTime;
+      if (wasPlaying) {
+        video.play();
+      }
+      video.removeEventListener('loadeddata', handleLoaded);
+    };
+    video.addEventListener('loadeddata', handleLoaded);
+  }
+  handleBodyKeyDown(e) {
+    const {
+      currentTime,
+      volume
+    } = this.getStates();
+    const {
+      seekTime
+    } = this.getProps();
+    if (e.key === ' ') {
+      this.handlePlayOrPause();
+      // } else if (e.key === 'ArrowUp') {
+      //     this.handleVolumeChange(volume + numbers.DEFAULT_VOLUME_STEP);
+      // } else if (e.key === 'ArrowDown') { 
+      //     this.handleVolumeChange(volume - numbers.DEFAULT_VOLUME_STEP);   
+    } else if (e.key === 'ArrowLeft') {
+      this.handleTimeChange(currentTime - seekTime);
+    } else if (e.key === 'ArrowRight') {
+      this.handleTimeChange(currentTime + seekTime);
+    }
+  }
+}

package/lib/es/videoPlayer/progressFoundation.d.ts

@@ -0,0 +1,38 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface MarkerListItem {
+    start: number;
+    end: number;
+    title: string;
+    width: string;
+    left: string;
+}
+export interface Marker {
+    start: number;
+    title: string;
+}
+export interface VideoProgressAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getSliderRef: () => HTMLDivElement | null;
+    getMarkersList: () => MarkerListItem[];
+    setIsDragging: (isDragging: boolean) => void;
+    setIsHandleHovering: (isHandleHovering: boolean) => void;
+    setActiveIndex: (activeIndex: number) => void;
+    setMovingInfo: (movingInfo: {
+        progress: number;
+        offset: number;
+        value: number;
+    } | null) => void;
+}
+export default class VideoProgressFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<VideoProgressAdapter<P, S>, P, S> {
+    constructor(adapter: VideoProgressAdapter<P, S>);
+    handleDocumentMouseMove: (e: MouseEvent) => void;
+    handleDocumentMouseUp: () => void;
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: () => void;
+    handleMouseEvent: (e: any, shouldSetValue?: boolean) => void;
+    handleSliderMouseEnter: (index: number) => void;
+    handleSliderMouseLeave: (index: number) => void;
+    setActiveIndex: (currentValue: number) => void;
+    getValueWidth: (marker: MarkerListItem, value: number) => string;
+    getPlayedWidth: (marker: MarkerListItem) => string;
+    getLoadedWidth: (marker: MarkerListItem) => string;
+}

package/lib/es/videoPlayer/progressFoundation.js

@@ -0,0 +1,123 @@
+import BaseFoundation from '../base/foundation';
+export default class VideoProgressFoundation extends BaseFoundation {
+  constructor(adapter) {
+    var _this;
+    super(Object.assign({}, adapter));
+    _this = this;
+    this.handleDocumentMouseMove = e => {
+      const {
+        isDragging
+      } = this.getStates();
+      if (isDragging) {
+        this.handleMouseEvent(e, true);
+      }
+    };
+    this.handleDocumentMouseUp = () => {
+      const {
+        isDragging
+      } = this.getStates();
+      if (isDragging) {
+        this._adapter.setIsDragging(false);
+      }
+      document.removeEventListener('mousemove', this.handleDocumentMouseMove);
+      document.removeEventListener('mouseup', this.handleDocumentMouseUp);
+    };
+    this.handleMouseDown = e => {
+      this._adapter.setIsDragging(true);
+      this.handleMouseEvent(e, true);
+      document.addEventListener('mousemove', this.handleDocumentMouseMove);
+      document.addEventListener('mouseup', this.handleDocumentMouseUp);
+    };
+    this.handleMouseUp = () => {
+      const {
+        isDragging
+      } = this.getStates();
+      if (isDragging) {
+        this._adapter.setIsDragging(false);
+      }
+    };
+    this.handleMouseEvent = function (e) {
+      let shouldSetValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      const {
+        isDragging
+      } = _this.getStates();
+      const {
+        onChange,
+        max
+      } = _this.getProps();
+      const sliderRef = _this._adapter.getSliderRef();
+      if (!sliderRef) return;
+      const rect = sliderRef.getBoundingClientRect();
+      const offset = e.clientX - rect.left;
+      const total = rect.width;
+      const percentage = Math.min(Math.max(offset / total, 0), 1);
+      const value = percentage * max;
+      if (shouldSetValue && (isDragging || e.type === 'mousedown')) {
+        _this.setActiveIndex(value);
+        onChange(value);
+      }
+      _this._adapter.setMovingInfo({
+        progress: percentage,
+        offset: offset - rect.width / 2,
+        value
+      });
+    };
+    this.handleSliderMouseEnter = index => {
+      const {
+        value: currentValue
+      } = this.getProps();
+      const markersList = this._adapter.getMarkersList();
+      const currentSlider = markersList[index];
+      if (currentSlider.start < currentValue && currentSlider.end > currentValue) {
+        this._adapter.setIsHandleHovering(true);
+      } else {
+        this._adapter.setIsHandleHovering(false);
+      }
+    };
+    this.handleSliderMouseLeave = index => {
+      const {
+        value: currentValue
+      } = this.getProps();
+      const markersList = this._adapter.getMarkersList();
+      const currentSlider = markersList[index];
+      if (currentSlider.start < currentValue && currentSlider.end > currentValue) {
+        this._adapter.setIsHandleHovering(false);
+      }
+    };
+    this.setActiveIndex = currentValue => {
+      const markersList = this._adapter.getMarkersList();
+      markersList.map((marker, index) => {
+        if (currentValue < marker.end && currentValue > marker.start) {
+          this._adapter.setIsHandleHovering(true);
+          this._adapter.setActiveIndex(index);
+        }
+      });
+    };
+    this.getValueWidth = (marker, value) => {
+      const {
+        start,
+        end
+      } = marker;
+      if (value > end) {
+        return 'calc(100% - 2px)';
+      } else if (value < start) {
+        return '0%';
+      } else {
+        return `${(value - start) / (end - start) * 100}%`;
+      }
+    };
+    // Get the width of the video being played
+    this.getPlayedWidth = marker => {
+      const {
+        value: currentValue
+      } = this.getProps();
+      return this.getValueWidth(marker, currentValue);
+    };
+    this.getLoadedWidth = marker => {
+      const {
+        bufferedValue
+      } = this.getProps();
+      return this.getValueWidth(marker, bufferedValue);
+    };
+  }
+}

package/lib/es/videoPlayer/variables.scss

@@ -0,0 +1,75 @@
+// Color
+$color-videoPlayer_theme_dark-text: var(--semi-color-bg-0); // dark theme 字体色
+$color-videoPlayer_theme_dark-bg: rgba(var(--semi-grey-8), 1); // dark theme 背景色
+$color-videoPlayer_theme_light-text: rgba(var(--semi-grey-8), 1); // light theme 字体色
+$color-videoPlayer_theme_light-bg: var(--semi-color-disabled-bg); // light theme 背景色
+$color-videoPlayer_pause-bg: var(--semi-color-text-1); // 暂停按钮颜色
+$color-videoPlayer_notification-bg: var(--semi-color-overlay-bg); // notification 背景色
+$color-videoPlayer_notification-text: var(--semi-color-default); // notification 字体色
+$color-videoPlayer_controls-bg: rgba(28, 31, 35, 0.8); // 控制栏背景色
+$color-videoPlayer_controls_item-bg: var(--semi-color-overlay-bg); // 控制栏 item 背景色
+$color-videoPlayer_controls-text: #fff; // 控制栏文字色
+$color-videoPlayer_controls_item_popup-bg-default: var(--semi-color-overlay-bg); // 控制栏弹层背景色
+$color-videoPlayer_controls_item_popup-bg-hover: rgba(67, 68, 74, 1); // 控制栏弹层背景色 - hover
+$color-videoPlayer_controls_popup_item-text-default: rgba(#fff, 0.7); // 控制栏文字色
+$color-videoPlayer_controls_popup_item-text-active: var(--semi-color-primary); // 控制栏弹层文字色 - 选中
+$color-videoPlayer_progress_bar-bg-played: var(--semi-color-primary); // 进度条已播放部分背景色
+$color-videoPlayer_progress_bar-bg-loaded: rgba(var(--semi-grey-3), 1); // 进度条已加载部分背景色
+$color-videoPlayer_progress_bar-bg-unplayed: rgba(var(--semi-grey-5), 1); // 进度条未播放部分背景色
+$color-videoPlayer_progress_bar_handle-bg: #fff; // handle 背景色
+$color-videoPlayer_progress_bar_handle-border: var(--semi-color-primary); // handle 边框色
+$color-videoPlayer_progress_bar_handle-shadow: var(--semi-color-shadow); // handle 阴影色
+
+// Width/Height
+$height-videoPlayer_progress_bar_hotSpot-default: 20px; // 进度条热区 default 高度
+$height-videoPlayer_progress_bar-default: 4px; // 进度条 default 高度
+$height-videoPlayer_progress_bar-hover: 10px; // 进度条 hover 高度
+$height-videoPlayer_progress_bar_handle: 16px; // 进度条 handle 高度
+$height-videoPlayer_controls_menu-default: 56px; // 控制栏 default 高度
+$height-videoPlayer_controls_volume-default: 160px; // 控制栏音量 default 高度
+$height-videoPlayer_controls_popup-default: 24px; // 控制栏弹层类元素 default 高度
+$height-videoPlayer_controls_popup_item-default: 32px; // 控制栏弹层类元素 item default 高度
+$width-videoPlayer_controls_volume-default: 40px; // 控制栏音量 default 宽度
+$width-videoPlayer_controls_popup_item-default: 50px; // 控制栏弹层类元素 default 宽度
+$width-videoPlayer_controls_popup-default: 48px; // 控制栏弹层 default 宽度
+
+// Spacing
+$spacing-videoPlayer-progress_bar_chapter-marginRight: 2px; // 进度条分节间距
+$spacing-videoPlayer_notification-bottom: 22px; // notification 距离菜单栏距离
+$spacing-videoPlayer_notification-left: 8px; // notification 距离菜单栏左侧距离
+$spacing-videoPlayer_notification_text-paddingY: 8px; // notification 文字垂直方向 padding
+$spacing-videoPlayer_notification_text-paddingX: 12px; // notification 文字水平方向 padding
+$spacing-videoPlayer-controls-padding: $spacing-base-tight $spacing-base; // 控制栏 padding
+$spacing-videoPlayer-controls_item-gap: $spacing-tight; // 控制栏 item 间距
+$spacing-videoPlayer-controls_time-paddingX: 8px; // 控制栏时间 paddingX
+$spacing-videoPlayer-controls_volume_title-paddingX: 10px; // 控制栏音量标题文字 paddingX
+$spacing-videoPlayer-controls_volume_title-paddingY: 0px; // 控制栏音量标题文字 paddingX
+$spacing-videoPlayer-controls_volume_popup-paddingY: 0px; // 控制栏音量弹层 paddingX
+$spacing-videoPlayer-controls_volume_popup-paddingX: $spacing-extra-tight; // 控制栏音量弹层 paddingX
+$spacing-videoPlayer-controls_popup-paddingX: $spacing-tight; // 控制栏弹层元素 paddingX
+$spacing-videoPlayer-controls_popup-paddingY: 0px; // 控制栏弹层元素 paddingY
+$spacing-videoPlayer-progress_bar_wrapper-marginX: $spacing-tight; // 进度条 wrapper marginX
+$spacing-videoPlayer-progress_bar_wrapper-marginY: 0px; // 进度条 wrapper marginY
+$spacing-videoPlayer-progress_bar_tooltip-top: 6px; // 进度条 Tooltip top 值
+$spacing-videoPlayer_progress_bar_handle-top: 15px; // 进度条 handle top 值
+$spacing-videoPlayer_error_svg-marginBottom: 12px; // error svg marginBottom
+
+// Radius
+$radius-videoPlayer_notification: 3px; // notification 圆角
+$radius-videoPlayer_progress_bar_handle: 50%; // 进度条 handle 圆角
+$radius-videoPlayer_progress_bar: 999px; // 进度条圆角
+$radius-videoPlayer_controls_item: 3px; // 控制栏 item 圆角
+$radius-videoPlayer_controls_popup: 4px; // 控制栏弹层圆角
+
+// Font
+$font-videoPlayer_notification-fontSize: $font-size-regular; // notification 字体大小
+$font-videoPlayer_controls_item-fontSize: $font-size-small; // 控制栏 item 字体大小
+$font-videoPlayer_controls_time_text-fontSize: $font-size-regular; // 控制栏时间字体大小
+$font-videoPlayer_error-fontSize: $font-size-regular; // error 字体大小
+$font-videoPlayer_notification-lineHeight: 20px; // notification 行高
+$font-videoPlayer_controls_popup_item-lineHeight: 16px; // 控制栏 item 行高
+$font-videoPlayer_controls_popup_item-fontWeight: 600; // 控制栏 item 字体粗细
+$font-videoPlayer_error-fontWeight: 600; // error 字体粗细
+
+
+