ranui 0.1.10-alpha.9 → 0.2.0-alpha.1

package/dist/components/player/core/state.d.ts

@@ -0,0 +1,27 @@
+export interface PlayerContextState<TAction = unknown, TLevel = unknown> {
+    action: TAction;
+    currentState: string;
+    duration: number;
+    currentTime: number;
+    volume: number;
+    playbackRate: number;
+    fullScreen: boolean;
+    levels: Array<TLevel>;
+    url: string;
+    levelMap: Map<string, string>;
+    clarity: string;
+}
+export interface PlayerRuntimeState<TPending = unknown> {
+    moveProgress: {
+        percentage: number;
+        mouseDown: boolean;
+    };
+    isSeeking: boolean;
+    wasPlayingBeforeSeek: boolean;
+    isBuffering: boolean;
+    pendingPlaybackRestore?: TPending;
+}
+export declare function createDefaultPlayerContext<TAction, TLevel = unknown>(action: TAction): PlayerContextState<TAction, TLevel>;
+export declare function resetSourceContextState(ctx: PlayerContextState): void;
+export declare function createDefaultRuntimeState<TPending = unknown>(): PlayerRuntimeState<TPending>;
+export declare function resetTransientRuntimeState<TPending>(state: PlayerRuntimeState<TPending>): void;

package/dist/components/player/core/view.d.ts

@@ -0,0 +1,38 @@
+import type { Progress } from '@/components/progress';
+export interface SpeedOption {
+    label: string;
+    value: number;
+}
+export interface PlayerViewRefs {
+    player: HTMLDivElement;
+    container: HTMLDivElement;
+    playerBtn: HTMLDivElement;
+    playerController: HTMLDivElement;
+    progress: HTMLDivElement;
+    progressWrap: HTMLDivElement;
+    progressWrapBuffer: HTMLDivElement;
+    progressWrapValue: HTMLDivElement;
+    progressDot: HTMLDivElement;
+    playerControllerBottom: HTMLDivElement;
+    playerControllerBottomRight: HTMLDivElement;
+    playerControllerBottomLeft: HTMLDivElement;
+    playerControllerBottomPlayBtn: HTMLDivElement;
+    playerControllerBottomTimeCurrent: HTMLDivElement;
+    playerControllerBottomTimeDuration: HTMLDivElement;
+    playerControllerBottomTimeDivide: HTMLDivElement;
+    playControllerBottomClarity: HTMLElement;
+    playControllerBottomSpeed: HTMLDivElement;
+    playControllerBottomSpeedIcon: HTMLDivElement;
+    playControllerBottomVolumeProgress: Progress;
+    playControllerBottomRightFullScreen: HTMLDivElement;
+    playControllerBottomVolume: HTMLDivElement;
+    playControllerBottomSpeedPopover: HTMLElement;
+    playerTip: HTMLDivElement;
+    playerTipTime: HTMLDivElement;
+    playerTipText: HTMLDivElement;
+}
+export declare function ensurePlayerView(input: {
+    shadowDom: ShadowRoot;
+    speedOptions: SpeedOption[];
+    onSpeedChange: (e: Event) => void;
+}): PlayerViewRefs;

package/dist/components/player/index.d.ts

@@ -0,0 +1,276 @@
+import { SyncHook } from 'ranuts/utils';
+import '../../assets/js/hls.js';
+import type { Progress } from '@/components/progress';
+import '@/components/select';
+import { type PlayerControllerElements, type PlayerControllerHandlers } from './core/controller';
+import { type PlaybackSnapshot } from './core/playback';
+import { type PlayerMediaHandlers } from './core/media';
+import { type PlayerRuntimeState } from './core/state';
+type Callback = (...args: unknown[]) => unknown;
+type EventName = string | symbol;
+type EventItem = {
+    name?: string | symbol;
+    callback: Callback;
+    initialCallback?: Callback;
+};
+export declare class SHook {
+    private _events;
+    constructor();
+    tap: (eventName: EventName, eventItem: EventItem | Callback) => void;
+    call: (eventName: EventName, ...args: Array<unknown>) => void;
+    callSync: (eventName: EventName, ...args: Array<unknown>) => Promise<void>;
+    once: (eventName: EventName, eventItem: EventItem | Callback) => void;
+    off: (eventName: EventName, eventItem: EventItem | Callback) => void;
+}
+export interface HlsPlayer {
+    startLoad(): () => void;
+    off: (s: string, f: Function) => void;
+    on: (s: string, f: Function) => void;
+    loadSource: (s: string) => void;
+    attachMedia: (v: HTMLVideoElement) => void;
+    destroy: () => void;
+}
+export interface Level {
+    audioCodec: string;
+    bitrate: number;
+    height: number;
+    width: number;
+    name: string;
+    url: string;
+    videoCodec: string;
+}
+export interface Context {
+    action: SyncHook;
+    currentState: string;
+    duration: number;
+    currentTime: number;
+    volume: number;
+    playbackRate: number;
+    fullScreen: boolean;
+    levels: Partial<Level>[];
+    url: string;
+    levelMap: Map<string, string>;
+    clarity: string;
+}
+interface Hls {
+    Events: {
+        MANIFEST_LOADED: 'hlsManifestLoaded';
+        ERROR: 'error';
+    };
+    isSupported: () => boolean;
+}
+type HLS = Hls & (new () => HlsPlayer);
+declare global {
+    interface Window {
+        Hls: HLS;
+    }
+}
+declare const RanPlayer_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+export declare class RanPlayer extends RanPlayer_base {
+    ctx: Context;
+    _player: HTMLDivElement;
+    _container: HTMLDivElement;
+    _playerController: HTMLDivElement;
+    _playerBtn: HTMLDivElement;
+    _progress: HTMLDivElement;
+    _progressDot: HTMLDivElement;
+    _progressWrap: HTMLDivElement;
+    _progressWrapBuffer: HTMLDivElement;
+    _progressWrapValue: HTMLDivElement;
+    requestAnimationFrameId?: number;
+    moveProgress: {
+        percentage: number;
+        mouseDown: boolean;
+    };
+    _isSeeking: boolean;
+    _wasPlayingBeforeSeek: boolean;
+    _isBuffering: boolean;
+    _isSwitchingSource: boolean;
+    _playerControllerBottom: HTMLDivElement;
+    _playerControllerBottomRight: HTMLDivElement;
+    _playerControllerBottomLeft: HTMLDivElement;
+    _playerControllerBottomPlayBtn: HTMLDivElement;
+    _playerControllerBottomTimeCurrent: HTMLDivElement;
+    _playerControllerBottomTimeDuration: HTMLDivElement;
+    _playerControllerBottomTimeDivide: HTMLDivElement;
+    _playControllerBottomClarity: HTMLElement;
+    _playControllerBottomSpeed: HTMLDivElement;
+    _playControllerBottomSpeedIcon: HTMLDivElement;
+    _playControllerBottomVolumeProgress: Progress;
+    _playControllerBottomRightFullScreen: HTMLDivElement;
+    _playControllerBottomVolume: HTMLDivElement;
+    _playControllerBottomSpeedPopover: HTMLElement;
+    controllerBarTimeId?: NodeJS.Timeout;
+    _playerTip: HTMLDivElement;
+    _playerTipTime: HTMLDivElement;
+    _playerTipText: HTMLDivElement;
+    _shadowDom: ShadowRoot;
+    _volume?: number;
+    _video?: HTMLVideoElement;
+    _hls?: HlsPlayer;
+    _pendingPlaybackRestore?: PlaybackSnapshot;
+    static get observedAttributes(): string[];
+    /**
+     * @description: 初始化 view 和 video 的全局上下文
+     * @return {*}
+     */
+    constructor();
+    get src(): string;
+    set src(value: string);
+    get debug(): string;
+    set debug(value: string);
+    get volume(): string;
+    set volume(value: string);
+    get currentTime(): string;
+    set currentTime(value: string);
+    get playbackRate(): string;
+    set playbackRate(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    getRuntimeState: () => PlayerRuntimeState<PlaybackSnapshot>;
+    applyRuntimeState: (state: PlayerRuntimeState<PlaybackSnapshot>) => void;
+    resetTransientState: () => void;
+    capturePlaybackSnapshot: () => PlaybackSnapshot;
+    restorePlaybackSnapshot: (snapshot: PlaybackSnapshot) => void;
+    changeClarity: (e: Event) => void;
+    createClaritySelect: () => void;
+    manifestLoaded: (type: string, data: {
+        levels: Level[];
+        url: string;
+    }) => void;
+    /**
+     * @description: 初始化 video 和更新 video 方法
+     * @return {*}
+     */
+    updatePlayer: () => void;
+    hlsError: (event: unknown, data: unknown) => void;
+    change: (name: string, value: unknown) => void;
+    onCanplay: (e: Event) => void;
+    onCanplaythrough: (e: Event) => void;
+    onComplete: (e: Event) => void;
+    onDurationchange: (e: Event) => void;
+    onEmptied: (e: Event) => void;
+    onEnded: (e: Event) => void;
+    onError: (e: Event) => void;
+    onLoadedmetadata: (e: Event) => void;
+    onLoadstart: (e: Event) => void;
+    onProgress: (e: Event) => void;
+    onRatechange: (e: Event) => void;
+    onSeeked: (e: Event) => void;
+    onSeeking: (e: Event) => void;
+    onStalled: (e: Event) => void;
+    onSuspend: (e: Event) => void;
+    onLoadeddata: (e: Event) => void;
+    onTimeupdate: (e: Event) => void;
+    onVolumechange: (e: Event) => void;
+    onWaiting: (e: Event) => void;
+    onPlay: (e: Event) => void;
+    onPlaying: (e: Event) => void;
+    onPause: (e: Event) => void;
+    getMediaHandlers: () => PlayerMediaHandlers;
+    clearListenerEvent: () => void;
+    /**
+     * @description: 用户行为和 video 之间的交互
+     * @return {*}
+     */
+    listenEvent: () => void;
+    showControllerBar: (e?: MouseEvent) => void;
+    setLoadingState: (loading: boolean) => void;
+    updateBufferedProgress: () => void;
+    syncProgressByPercentage: (percentage: number) => void;
+    seekToPercentage: (percentage: number) => void;
+    /**
+     * @description: 进度条点击事件
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    progressClick: (e: MouseEvent) => void;
+    /**
+     * @description: 进度条鼠标按下事件
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    progressDotMouseDown: () => void;
+    /**
+     * @description: 进度条鼠标移动事件
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    progressDotMouseMove: (e: MouseEvent) => void;
+    progressDotMouseMoveDocument: (e: MouseEvent) => void;
+    /**
+     * @description: 进度条鼠标松开事件
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    progressDotMouseUp: () => void;
+    /**
+     * @description: 更新页面样式
+     * @param {Function} fn
+     * @return {*}
+     */
+    requestAnimationFrame: (fn: Function) => void;
+    /**
+     * @description: 取消页面动画
+     * @param {Function} fn
+     * @return {*}
+     */
+    cancelAnimationFrame: () => void;
+    /**
+     * @description: 更新进度条
+     * @param {*} void
+     * @return {*}
+     */
+    updateCurrentProgress: () => void;
+    changeAttribute: (k: string, o: string, n: string, attribute: string, callback: Function) => void;
+    /**
+     * @description: 点击整个视频时，触发的事件
+     * @param {*} void
+     * @return {*}
+     */
+    dispatchClickPlayerContainerAction: (e: Event) => void;
+    /**
+     * @description: 空格事件
+     * @param {KeyboardEvent} e
+     * @return {*}
+     */
+    SpaceKeyDown: (e: KeyboardEvent) => void;
+    /**
+     * @description: 点击 player-btn，触发的事件
+     * @param {*} void
+     * @return {*}
+     */
+    dispatchClickPlayerBtnAction: (e: Event) => void;
+    changeVolumeProgress: (e: Event) => void;
+    customRequestFullscreen: () => Promise<void>;
+    customExitFullscreen: () => Promise<void>;
+    openFullScreen: () => void;
+    changeSpeed: (e: Event) => void;
+    progressMouseEnter: (e: MouseEvent) => void;
+    progressMouseLeave: (e: MouseEvent) => void;
+    progressMouseMove: (e: MouseEvent) => void;
+    changePlayerVolume: () => void;
+    resize: () => void;
+    fullScreenChange: () => void;
+    getPlaybackRate: () => number;
+    setPlaybackRate: (n: number) => number;
+    setVolume: (n: number) => number;
+    getVolume: () => number;
+    setCurrentTime: (n: number) => number;
+    getCurrentTime: () => number;
+    getTotalTime: () => number;
+    safePlay: (showLoading: boolean) => void;
+    play: (n?: number) => void;
+    pause: () => void;
+    getControllerElements: () => PlayerControllerElements;
+    getControllerHandlers: () => PlayerControllerHandlers;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(k: string, o: string, n: string): void;
+}
+declare const _default: typeof RanPlayer;
+export default _default;

package/dist/components/popover/content/index.d.ts

@@ -0,0 +1,12 @@
+import { RanElement } from '@/utils/index';
+export declare class Content extends RanElement {
+    observer: MutationObserver;
+    _shadowDom: ShadowRoot;
+    _slot: HTMLElement;
+    constructor();
+    callback: (mutations: MutationRecord[]) => void;
+    onChange: (mutation: MutationRecord) => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export default Content;

package/dist/components/popover/index.d.ts

@@ -0,0 +1,93 @@
+import { RanElement } from '@/utils/index';
+import '@/components/popover/content';
+import '@/components/dropdown';
+import { EventManager } from '@/utils/builder';
+export type PlacementDirection = Record<string, Record<string, string>>;
+export declare enum PLACEMENT_TYPE {
+    TOP = "top",
+    BOTTOM = "bottom",
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare class Popover extends RanElement {
+    _events: EventManager;
+    _slot: HTMLSlotElement;
+    popoverBlock: HTMLDivElement;
+    popoverContent?: HTMLElement;
+    popoverInner?: HTMLDivElement;
+    popoverInnerBlock?: HTMLDivElement;
+    _shadowDom: ShadowRoot;
+    dropDownInTimeId?: NodeJS.Timeout;
+    dropDownOutTimeId?: NodeJS.Timeout;
+    removeTimeId?: NodeJS.Timeout;
+    static get observedAttributes(): string[];
+    readonly closePopover: () => void;
+    constructor();
+    get placement(): string;
+    set placement(value: string);
+    get trigger(): string;
+    set trigger(value: string);
+    get getPopupContainerId(): string;
+    set getPopupContainerId(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    initAria: () => void;
+    updateAriaExpanded: (isExpanded: boolean) => void;
+    stopPropagation: (e: Event) => void;
+    /**
+     * @description: 创建下拉框
+     * @param {HTMLCollection} content
+     * @return {*}
+     */
+    createContent: (content: HTMLCollection) => void;
+    /**
+     * @description: 观察内容变化
+     * @param {Event} e
+     * @return {*}
+     */
+    watchContent: (e: Event) => void;
+    /**
+     * @description: 焦点移除的情况，需要移除下拉框
+     * @return {*}
+     */
+    blur: any;
+    /**
+     * @description: 移除下拉框
+     * @return {*}
+     */
+    removeDropDownTimeId: any;
+    /**
+     * @description: 添加 dropdown
+     * @return {*}
+     */
+    setDropdownDisplayBlock: any;
+    /**
+     * @description: 移除 select dropdown
+     * @return {*}
+     */
+    setDropdownDisplayNone: any;
+    /**
+     * @description: 设置 popover 位置
+     * @param {*} void
+     * @return {*}
+     */
+    placementPosition: () => void;
+    /**
+     * @description: 鼠标移入
+     * @param {Event} e
+     * @return {*}
+     */
+    hoverPopover: (e: Event) => void;
+    clickContent: (e: Event) => void;
+    clickPopover: (e: Event) => void;
+    keydownPopover: (e: KeyboardEvent) => void;
+    clickRemovePopover: (e: Event) => void;
+    popoverTrigger: () => void;
+    hoverRemovePopover: (e: Event) => void;
+    changePlacement: any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(n: string, o: string, v: string): void;
+}
+export default Popover;

package/dist/components/progress/index.d.ts

@@ -0,0 +1,40 @@
+import { EventManager, RanElement } from '@/utils/index';
+export declare class Progress extends RanElement {
+    _progress: HTMLDivElement;
+    _progressWrap: HTMLDivElement;
+    _progressWrapValue: HTMLDivElement;
+    _progressDot: HTMLDivElement;
+    _shadowDom: ShadowRoot;
+    _events: EventManager;
+    moveProgress: {
+        mouseDown: boolean;
+    };
+    static get observedAttributes(): string[];
+    constructor();
+    get percent(): string;
+    set percent(value: string);
+    get total(): string;
+    set total(value: string);
+    get type(): string;
+    set type(value: string);
+    get dot(): string;
+    set dot(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    progressClick: (e: MouseEvent) => void;
+    progressDotMouseDown: (e: MouseEvent) => void;
+    progressDotMouseMove: (e: MouseEvent) => void;
+    progressDotMouseUp: () => void;
+    updateUI: (percentage: number) => void;
+    _preSerialize(): void;
+    change: () => void;
+    appendProgressDot: () => void;
+    updateCurrentProgress: () => void;
+    dragEvent: () => void;
+    private resize;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+export default Progress;

package/dist/components/radar/index.d.ts

@@ -0,0 +1,52 @@
+import { RanElement } from '@/utils/index';
+interface AbilityTags {
+    abilityName: string;
+    scoreRate: number;
+    backgroundColor: string;
+    fontSize: string;
+    fontFamily: string;
+    fontColor: string;
+}
+export declare class RadarChart extends RanElement {
+    mData?: Array<AbilityTags>;
+    mCount?: number;
+    mW?: number;
+    mCenter?: number;
+    mRadius?: number;
+    mAngle?: number;
+    static get observedAttributes(): string[];
+    abilityRadarChartContainer: HTMLDivElement;
+    abilityRadarChart: HTMLCanvasElement;
+    _iconElement?: HTMLElement;
+    _shadowDom: ShadowRoot;
+    resizeObserver: ResizeObserver;
+    constructor();
+    resize: () => void;
+    get abilitys(): any;
+    set abilitys(value: any);
+    _cssVar(name: string): string;
+    get colorPolygon(): string;
+    set colorPolygon(value: string);
+    get colorLine(): string;
+    set colorLine(value: string);
+    get fontColor(): string;
+    get fillColor(): string;
+    set fillColor(value: string);
+    get strokeColor(): string;
+    set strokeColor(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    refreshData(): void;
+    drawSide(ctx: CanvasRenderingContext2D): void;
+    drawPolygon(ctx: CanvasRenderingContext2D): void;
+    drawLines(ctx: CanvasRenderingContext2D): void;
+    drawText(ctx: CanvasRenderingContext2D): void;
+    drawButton(ctx: CanvasRenderingContext2D, color: string, x: number, y: number, width: number, height: number, radius: number, text: string, fontColor: string, fontFamily: string, fontSize: string | number): void;
+    drawRegion(ctx: CanvasRenderingContext2D): void;
+    drawCircle(ctx: CanvasRenderingContext2D): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+export default RadarChart;

package/dist/components/route/index.d.ts

@@ -0,0 +1,26 @@
+import { EventManager } from '@/utils/builder';
+import { RanElement } from '@/utils/index';
+export declare class Route extends RanElement {
+    static get observedAttributes(): string[];
+    _events: EventManager;
+    _shadowDom: ShadowRoot;
+    _params: Record<string, string>;
+    constructor();
+    get path(): string;
+    set path(v: string);
+    get exact(): boolean;
+    get params(): Record<string, string>;
+    get sheet(): string;
+    set sheet(v: string);
+    handlerExternalCss: () => void;
+    _matchPath(currentPath: string): {
+        matched: boolean;
+        params: Record<string, string>;
+    };
+    _update(currentPath: string): void;
+    _preSerialize(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, old: string, next: string): void;
+}
+export default Route;

package/dist/components/router/index.d.ts

@@ -0,0 +1,24 @@
+import { EventManager } from '@/utils/builder';
+import { RanElement } from '@/utils/index';
+export declare class Router extends RanElement {
+    static get observedAttributes(): string[];
+    _events: EventManager;
+    _shadowDom: ShadowRoot;
+    _slot: HTMLSlotElement;
+    _currentPath: string;
+    constructor();
+    get mode(): 'history' | 'hash';
+    get base(): string;
+    get sheet(): string;
+    set sheet(v: string);
+    handlerExternalCss: () => void;
+    _getPath(): string;
+    navigate(path: string, replace?: boolean): void;
+    _syncRoutes(): void;
+    _handlePopState: () => void;
+    _handleNavigate: (e: Event) => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, old: string, next: string): void;
+}
+export default Router;

package/dist/components/scratch/index.d.ts

@@ -0,0 +1,19 @@
+import { RanElement } from '@/utils/index';
+declare class ScratchTicket extends RanElement {
+    scratchTicketContainer: HTMLDivElement;
+    scratchTicket: HTMLCanvasElement;
+    state: {
+        touchStart: boolean;
+        scratchArea: number;
+    };
+    scratchAward: HTMLDivElement;
+    _shadowDom: ShadowRoot;
+    static get observedAttributes(): string[];
+    constructor();
+    touchStartScratch: (e: TouchEvent) => void;
+    touchMoveScratch: () => void;
+    touchEndScratch: () => void;
+    drawScratchTicket: () => void;
+    attributeChangedCallback(): void;
+}
+export default ScratchTicket;

package/dist/components/section/index.d.ts

@@ -0,0 +1,23 @@
+import { EventManager } from '@/utils/builder';
+import { RanElement } from '@/utils/index';
+export declare class Section extends RanElement {
+    _shadowDom: ShadowRoot;
+    _headerEl: HTMLDivElement;
+    _headingEl: HTMLDivElement;
+    _subtitleEl: HTMLDivElement;
+    _events: EventManager;
+    static get observedAttributes(): string[];
+    constructor();
+    get heading(): string;
+    set heading(value: string);
+    get subtitle(): string;
+    set subtitle(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    private _syncHeading;
+    private _syncSubtitle;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+export default Section;

package/dist/components/select/dropdown-item/index.d.ts

@@ -0,0 +1,21 @@
+import { RanElement } from '@/utils/index';
+export declare class DropdownItem extends RanElement {
+    ionDropdownItem: HTMLElement;
+    _slot: HTMLSlotElement;
+    _shadowDom: ShadowRoot;
+    ionDropdownItemContent: HTMLElement;
+    static get observedAttributes(): string[];
+    constructor();
+    get value(): string;
+    set value(value: string);
+    get active(): string;
+    set active(value: string);
+    get title(): string;
+    set title(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _: string, newValue: string): void;
+}
+export default DropdownItem;