@douyinfe/semi-foundation 2.79.0 → 2.80.0-beta.0

package/lib/cjs/videoPlayer/animation.scss

@@ -0,0 +1,7 @@
+$animation_duration-videoPlayer_controls-show: 500ms; // videoPlayer菜单栏-弹出动画-动画持续时间
+$animation_duration-videoPlayer_slider-in: 300ms; // videoPlayer进度条-弹出动画-动画持续时间
+$animation_duration-videoPlayer_slider-out: 300ms; // videoPlayer进度条-收起动画-动画持续时间
+
+
+$animation_function-videoPlayer_slider-in: cubic-bezier(0.62, 0.05, 0.36, 0.95); // videoPlayer进度条-弹出动画-动画插值函数
+$animation_function-videoPlayer_slider-out: cubic-bezier(0.62, 0.05, 0.36, 0.95); // videoPlayer进度条-收起动画-动画插值函数

package/lib/cjs/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/cjs/videoPlayer/constants.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.strings = exports.numbers = exports.cssClasses = exports.DEFAULT_PLAYBACK_RATE = void 0;
+var _constants = require("../base/constants");
+const cssClasses = exports.cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-videoPlayer`,
+  PREFIX_CONTROLS: `${_constants.BASE_CLASS_PREFIX}-videoPlayer-controls`,
+  PREFIX_PROGRESS: `${_constants.BASE_CLASS_PREFIX}-videoPlayer-progress`
+};
+const strings = exports.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 = exports.numbers = {
+  DEFAULT_VOLUME: 100,
+  DEFAULT_SEEK_TIME: 10,
+  DEFAULT_VOLUME_STEP: 10,
+  DEFAULT_PLAYBACK_RATE: 1
+};
+const DEFAULT_PLAYBACK_RATE = exports.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
+}];

package/lib/cjs/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/cjs/videoPlayer/foundation.js

@@ -0,0 +1,291 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class VideoPlayerFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.scrollPosition = null;
+    this.handleMouseMove = (0, _throttle2.default)(() => {
+      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);
+    }
+  }
+}
+exports.default = VideoPlayerFoundation;

package/lib/cjs/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/cjs/videoPlayer/progressFoundation.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class VideoProgressFoundation extends _foundation.default {
+  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);
+    };
+  }
+}
+exports.default = VideoProgressFoundation;