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

package/videoPlayer/foundation.ts

@@ -0,0 +1,332 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { numbers } from './constants';
+import { throttle } from 'lodash';
+
+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>) {
+        super({ ...adapter });
+    }
+
+    private controlsTimer: NodeJS.Timeout | null;
+    private scrollPosition: { x: number; y: number } | null = null;
+
+    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: string) {
+        const { controlsList } = this.getProps();
+        if (controlsList.includes(name)) {
+            return true;
+        }
+        return false;
+    }
+
+    clearTimer() {
+        if (this.controlsTimer) {
+            clearTimeout(this.controlsTimer);
+        }
+    }
+
+    handleMouseMove = throttle(() => {
+        this._adapter.setShowControls(true);
+        this.clearTimer();
+        this.controlsTimer = setTimeout(() => {
+            this._adapter.setShowControls(false);
+        }, 3000);
+    }, 200);
+
+
+    handleTimeChange(value: number) {
+        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();
+        }
+    }
+
+    handleCanPlay = () => {
+        this._adapter.setShowNotification(false);
+    }
+
+    handleWaiting = (locale: any) => {
+        this._adapter.setNotificationContent(locale.loading);
+        this._adapter.setShowNotification(true);
+    }
+
+    handleStalled = (locale: any) => {
+        this._adapter.setNotificationContent(locale.stall);
+        this._adapter.setShowNotification(true);
+    }
+
+    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);
+        }
+    }
+
+    handleEnded = () => {
+        this._adapter.setIsPlaying(false);
+        this._adapter.setShowControls(true);
+    }
+
+    handleVolumeChange(value: number) {
+        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);
+    }
+
+    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);
+        }
+    }
+
+    checkFullScreen() {
+        const videoWrapper = this._adapter.getVideoWrapper();
+        if (!videoWrapper) return false;
+        return !!(
+            document.fullscreenElement === videoWrapper ||
+            // @ts-ignore
+            document?.webkitFullscreenElement === videoWrapper ||
+            // @ts-ignore
+            document?.mozFullScreenElement === videoWrapper ||
+            // @ts-ignore
+            document?.msFullscreenElement === videoWrapper ||
+            // @ts-ignore
+            videoWrapper?.webkitDisplayingFullscreen  // iOS Safari 特殊处理
+        );
+    }
+
+    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();
+            }
+        }
+    }
+
+    handleRateChange(rate: { label: string; value: number }, locale: any) {
+        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: { label: string; value: string }, locale: any) {
+        this._adapter.setQuality(quality.value);
+        this._adapter.notifyQualityChange(quality.value);
+        this.handleTemporaryNotification(locale.qualityChange.replace('${quality}', quality.label));
+        this.restorePlayPosition();
+    }
+
+    handleRouteChange(route: { label: string; value: string }, locale: any) {
+        this._adapter.setRoute(route.value);
+        this._adapter.notifyRouteChange?.(route.value);
+        this.handleTemporaryNotification(locale.routeChange.replace('${route}', route.label));
+        this.restorePlayPosition();
+    }
+
+    handleMirror = (locale: any) => {
+        const { isMirror } = this.getStates();
+        this._adapter.setIsMirror(!isMirror);
+        this.handleTemporaryNotification(!isMirror ? locale.mirror : locale.cancelMirror);
+    }
+
+    handlePictureInPicture = () => {
+        const video = this._adapter.getVideo();
+        if (!video) return;
+        video.requestPictureInPicture();
+    }
+
+    handleLeavePictureInPicture = () => {
+        const video = this._adapter.getVideo();
+        if (!video) return;
+        this._adapter.setIsPlaying(!video.paused);
+    };
+
+    handleTemporaryNotification = (content: string) => {
+        this._adapter.setNotificationContent(content);
+        this._adapter.setShowNotification(true);
+        setTimeout(() => {
+            this._adapter.setShowNotification(false);
+        }, 1000);
+    }
+
+    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);
+    }
+
+    handleMouseEnterWrapper = () => {
+        this._adapter.setShowControls(true);
+    }
+
+    handleMouseLeaveWrapper = () => {
+        const { isPlaying } = this.getStates();
+        if (isPlaying) {
+            this._adapter.setShowControls(false);
+        }
+    }
+
+    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);
+        }
+    }
+
+    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);
+    }
+
+    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);
+    }
+
+    handleBodyKeyDown(e: KeyboardEvent) {
+        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/videoPlayer/progressFoundation.ts

@@ -0,0 +1,136 @@
+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>) {
+        super({ ...adapter });
+    }
+
+    handleDocumentMouseMove = (e: MouseEvent) => {
+        const { isDragging } = this.getStates();
+        if (isDragging) {
+            this.handleMouseEvent(e, true);
+        }
+    };
+
+    handleDocumentMouseUp = () => {
+        const { isDragging } = this.getStates();
+        if (isDragging) {
+            this._adapter.setIsDragging(false);
+        }
+        document.removeEventListener('mousemove', this.handleDocumentMouseMove);
+        document.removeEventListener('mouseup', this.handleDocumentMouseUp);
+    };
+
+    handleMouseDown = (e: any) => {
+        this._adapter.setIsDragging(true);
+        this.handleMouseEvent(e, true);
+        document.addEventListener('mousemove', this.handleDocumentMouseMove);
+        document.addEventListener('mouseup', this.handleDocumentMouseUp);
+    };
+
+    handleMouseUp = () => {
+        const { isDragging } = this.getStates();
+        if (isDragging) {
+            this._adapter.setIsDragging(false);
+        }
+    };
+
+    handleMouseEvent = (e: any, shouldSetValue: boolean = 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
+        });
+    };
+
+    handleSliderMouseEnter = (index: number) => {
+        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);
+        }
+    }
+
+    handleSliderMouseLeave = (index: number) => {
+        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);
+        }
+    }
+
+    setActiveIndex = (currentValue: number) => {
+        const markersList = this._adapter.getMarkersList();
+        markersList.map((marker: MarkerListItem, index: number) => {
+            if (currentValue < marker.end && currentValue > marker.start) {
+                this._adapter.setIsHandleHovering(true);
+                this._adapter.setActiveIndex(index);
+            }
+        });
+    }
+
+    getValueWidth = (marker: MarkerListItem, value: number) => {
+        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
+    getPlayedWidth = (marker: MarkerListItem) => {
+        const { value: currentValue } = this.getProps();
+        return this.getValueWidth(marker, currentValue);
+    }
+
+    getLoadedWidth = (marker: MarkerListItem) => {
+        const { bufferedValue } = this.getProps();
+        return this.getValueWidth(marker, bufferedValue);
+    }
+
+
+}   

package/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 字体粗细
+
+
+