@vkontakte/videoplayer 1.1.47-dev.f76cced4.0 → 1.1.48-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/videoplayer",
-  "version": "1.1.47-dev.f76cced4.0",
+  "version": "1.1.48-beta.0",
   "author": "vk.com",
   "description": "Videoplayer based on the vk.com platform",
   "homepage": "https://vk.com",
@@ -49,9 +49,9 @@
     "**/*.d.ts"
   ],
   "dependencies": {
-    "@vkontakte/videoplayer-core": "2.0.114-dev.8971454f.0",
-    "@vkontakte/videoplayer-interactive": "1.0.22-dev.55fd61d6.0",
-    "@vkontakte/videoplayer-shared": "1.0.46-dev.9c2f91d3.0",
-    "@vkontakte/videoplayer-statistics": "1.0.61-dev.26c8946e.0"
+    "@vkontakte/videoplayer-core": "2.0.115-beta.0",
+    "@vkontakte/videoplayer-interactive": "1.0.23-beta.0",
+    "@vkontakte/videoplayer-shared": "^1.0.46",
+    "@vkontakte/videoplayer-statistics": "1.0.62-beta.0"
   }
 }

package/types/VKVideoPlayer/index.d.ts

@@ -6,6 +6,7 @@ import { type PlaybackRate } from '@vkontakte/videoplayer-core';
 import type { IStatContext } from '@vkontakte/videoplayer-statistics';
 import { AnnotationsApi } from '../utils/webAPI/annotationsApi/annotationsApi';
 import type { AdditionalContextMenuItem, AdditionalSettingsMenuItem } from '../components/Menus/types';
+import type { AdditionalButton } from '../components/Controls/types';
 export declare class VKVideoPlayer extends HTMLElement {
     private svelteStubComponent?;
     private svelteRootComponent?;
@@ -54,7 +55,6 @@ export declare class VKVideoPlayer extends HTMLElement {
     private createPlayerWithCurrentVideo;
     private playPrevChapter;
     private seekToInteractive;
-    private toggleGraph;
     private initInteractives;
     initPlayer(videoConfig: IVKVideoPlayerConfig, sdkConfig?: Partial<ISDKConfig>): void;
     private isOneVideoPlaylist;
@@ -93,5 +93,8 @@ export declare class VKVideoPlayer extends HTMLElement {
     updateAdditionalContextItem(itemId: string, fields: Partial<Omit<AdditionalContextMenuItem, 'id'>>): void;
     addAdditionalContextItem(newItem: AdditionalContextMenuItem): void;
     removeAdditionalContextItem(itemId: string): void;
+    updateAdditionalButton(itemId: string, fields: Partial<Omit<AdditionalButton, 'id' | 'type'>>): void;
+    addAdditionalButton(newButton: AdditionalButton): void;
+    removeAdditionalButton(itemId: string): void;
     updateStatContext(statContext: Partial<IStatContext>): void;
 }

package/types/components/Controls/contants/desktopButtonsLeftIds.d.ts

@@ -0,0 +1,10 @@
+export declare enum DesktopButtonsLeftIds {
+    PREV = "prevButton",
+    PLAY = "playButton",
+    REPLAY = "replayButton",
+    NEXT = "nextButton",
+    INTERACTIVE_PREV = "playPrevChapterButton",
+    INTERACTIVE_SEEK = "seekToInteractiveButton",
+    INTERACTIVE_GRAPH = "interactiveGraphButton",
+    LIVE = "liveButton"
+}

package/types/components/Controls/contants/desktopButtonsLeftWeights.d.ts

@@ -0,0 +1,4 @@
+import { DesktopButtonsLeftIds } from './desktopButtonsLeftIds';
+export declare const desktopButtonsLeftWeights: {
+    [key in DesktopButtonsLeftIds]: number;
+};

package/types/components/Controls/contants/desktopButtonsRightIds.d.ts

@@ -0,0 +1,9 @@
+export declare enum DesktopButtonsRightIds {
+    LOGO = "vkLogo",
+    VOLUME = "volume",
+    SUBTITLES = "subtitles",
+    SETTINGS = "settings",
+    CONTEXT = "context",
+    FULLSCREEN = "fullscreen",
+    CHROMECAST = "chromecast"
+}

package/types/components/Controls/contants/desktopButtonsRightWeights.d.ts

@@ -0,0 +1,4 @@
+import { DesktopButtonsRightIds } from './desktopButtonsRightIds';
+export declare const desktopButtonsRightWeights: {
+    [key in DesktopButtonsRightIds]: number;
+};

package/types/components/Controls/types.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentType } from 'svelte';
+import { GridTypes } from '../../constans';
+export declare enum ControlButtonType {
+    DESKTOP_CONTROL_PANEL_LEFT = "desktop-control-panel-left",
+    DESKTOP_CONTROL_PANEL_RIGHT = "desktop-control-panel-right"
+}
+interface BaseButton {
+    id: string;
+    weight: number;
+    disabled?: boolean;
+}
+interface BaseInnerButton extends BaseButton {
+    buttonComponent: ComponentType;
+    buttonComponentProps?: Record<string, unknown>;
+    ariaKeyShortCut?: string;
+    ariaExpanded?: boolean;
+}
+interface BaseAdditionalButton extends BaseButton {
+    icon: string;
+    testId?: string;
+    onClick?: () => void;
+    ariaLabel: string;
+}
+export interface DesktopControlPanelButton extends BaseInnerButton {
+    type: ControlButtonType.DESKTOP_CONTROL_PANEL_LEFT | ControlButtonType.DESKTOP_CONTROL_PANEL_RIGHT;
+    tooltipText?: string;
+    disabledTooltipContent?: string;
+    className?: string;
+}
+export interface AdditionalDesktopControlPanelButton extends BaseAdditionalButton {
+    type: ControlButtonType.DESKTOP_CONTROL_PANEL_RIGHT;
+    tooltipText?: string;
+    disabledTooltipContent?: string;
+    hideOnDesktopGridTypes?: GridTypes[];
+}
+export type AdditionalButton = AdditionalDesktopControlPanelButton;
+export {};

package/types/components/Controls/utils/isInnerButtonGuard.d.ts

@@ -0,0 +1,2 @@
+import type { AdditionalDesktopControlPanelButton, DesktopControlPanelButton } from '../types';
+export declare const isInnerButtonGuard: (btn: DesktopControlPanelButton | AdditionalDesktopControlPanelButton) => btn is DesktopControlPanelButton;

package/types/config.d.ts

@@ -102,12 +102,14 @@ export interface IUIConfig {
         saveDebugInfoToFile: boolean;
         saveTraceInfoToFile: boolean;
         additionalButtons: boolean;
+        additionalButtonsDesktopControlPanelRight: boolean;
         additionalSettingsMenuItems: boolean;
         additionalContextMenuItems: boolean;
         contextMenuButton: boolean;
         audioLanguages: boolean;
         saveRate: boolean;
         fullscreenInternalTargetPlayerContainer: boolean;
+        autoplayNext: boolean;
     };
     interactive: {
         historyMaxLength: number;

package/types/constans/controls.d.ts

@@ -18,7 +18,8 @@ export declare enum Controls {
     VK_BUTTON = "VK_BUTTON",
     EPISODE_BUTTON = "EPISODE_BUTTON",
     INCREMENT_PLAYBACK_RATE = "INCREMENT_PLAYBACK_RATE",
-    DECREMENT_PLAYBACK_RATE = "DECREMENT_PLAYBACK_RATE"
+    DECREMENT_PLAYBACK_RATE = "DECREMENT_PLAYBACK_RATE",
+    AUTOPLAY_NEXT_TOGGLE = "AUTOPLAY_NEXT_TOGGLE"
 }
 export declare const PLAYER_CONTROLS_HEIGHT = 40;
 export declare const PLAYER_CONTROLS_DESKTOP_MARGIN_LEFT_ELEMENTS = 4;

package/types/index.d.ts

@@ -1,5 +1,5 @@
 import { VKVideoPlayer } from './VKVideoPlayer';
-import type { IVKVideoPlayerConfig, IControlInfo, IVKVideoPlayerCallbacks, IVideoData, AdsParams, HotKeyMapData, HotKeyMapItem, HotKeyMapGroup, IVideoLive, IInteractiveData, AdditionalButton } from './types';
+import type { IVKVideoPlayerConfig, IControlInfo, IVKVideoPlayerCallbacks, IVideoData, AdsParams, HotKeyMapData, HotKeyMapItem, HotKeyMapGroup, IVideoLive, IInteractiveData, AdditionalButtonDeprecated } from './types';
 import { GridTypes } from './constans';
 import type { LanguagePack, LanguageConfig } from './translation/types';
 import type { ISources, IDashSource, URLSource, RawSource, URLSourceWithSeek } from '@vkontakte/videoplayer-core';
@@ -7,7 +7,8 @@ import type { Milliseconds, QualityLimits } from '@vkontakte/videoplayer-shared'
 export { VERSION } from './env';
 export declare const registerPlayerWebComponent: () => void;
 export { type AdditionalSettingsMenuItem, MenuItemType, type AdditionalClickSettingsMenuItem, type AdditionalSwitchSettingsMenuItem, type AdditionalContextMenuItem, } from './components/Menus/types';
-export type { VKVideoPlayer, IVKVideoPlayerConfig, IControlInfo, IVKVideoPlayerCallbacks, IVideoData, AdsParams, HotKeyMapData, HotKeyMapItem, HotKeyMapGroup, ISources, IDashSource, URLSource, RawSource, URLSourceWithSeek, LanguagePack, LanguageConfig, Milliseconds, IVideoLive, IInteractiveData, AdditionalButton, QualityLimits, };
+export { type AdditionalButton, ControlButtonType, } from './components/Controls/types';
+export type { VKVideoPlayer, IVKVideoPlayerConfig, IControlInfo, IVKVideoPlayerCallbacks, IVideoData, AdsParams, HotKeyMapData, HotKeyMapItem, HotKeyMapGroup, ISources, IDashSource, URLSource, RawSource, URLSourceWithSeek, LanguagePack, LanguageConfig, Milliseconds, IVideoLive, IInteractiveData, AdditionalButtonDeprecated, QualityLimits, };
 export { GridTypes, };
 export { InterfaceLanguage, VKNumericLanguage, loadVKLangPack, } from '@vkontakte/videoplayer-shared';
 export { VideoQuality, VideoFormat, } from '@vkontakte/videoplayer-core';

package/types/store/index.d.ts

@@ -7,12 +7,13 @@ import { type InteractiveRange } from '@vkontakte/videoplayer-interactive';
 import type { Readable, Writable } from 'svelte/store';
 import { AdmanWrapper } from '../components/Ads/admanWrapper';
 import type { LanguageConfig } from '../translation/types';
-import type { AdditionalButton, ControlsKeys, HotKeyMapData, IAnnotationsApi, IControlInfo, IDisabledControls, IInteractiveData, IPictureInPictureApi, IPlayerPhase, ITimelinePreviewThumbsData, IVideoEpisode, IVKVideoPlayerCallbacks, IVKVideoPlayerUICallbacks, Position, VideoPlaybackRate, VideoQualityForRender, VideoQualityUI, VideoSubtitle, VideoSubtitleParsed } from '../types';
+import type { AdditionalButtonDeprecated, ControlsKeys, HotKeyMapData, IAnnotationsApi, IControlInfo, IDisabledControls, IInteractiveData, IPictureInPictureApi, IPlayerPhase, ITimelinePreviewThumbsData, IVideoEpisode, IVKVideoPlayerCallbacks, IVKVideoPlayerUICallbacks, Position, VideoPlaybackRate, VideoQualityForRender, VideoQualityUI, VideoSubtitle, VideoSubtitleParsed } from '../types';
 import { AdsPlaybackState, PictureInPictureType } from '../types';
 import type { DebugData } from './utils';
 import { GridTypes, type PlayPrevChapterDisabledTooltipKey } from '../constans';
 import { UIOneStat } from '../services/statistics';
 import type { AdditionalContextMenuItem, AdditionalSettingsMenuItem, ContextMenuItem, SettingsMenuItem } from '../components/Menus/types';
+import type { AdditionalButton, AdditionalDesktopControlPanelButton } from '../components/Controls/types';
 export interface IAdsState {
     position: Writable<number>;
     duration: Writable<number>;
@@ -45,6 +46,7 @@ export interface IUIState {
         vkLogo: Writable<IControlInfo | undefined>;
         interactiveTimeIndicator: Writable<IControlInfo | undefined>;
         timeline: Writable<IControlInfo | undefined>;
+        autoplayNextToggle: Writable<IControlInfo | undefined>;
         disabledControls$: IDisabledControls;
         additionalButtons: Writable<IControlInfo | undefined>[];
     };
@@ -88,11 +90,13 @@ export interface IUIState {
     pictureInPictureType$: Readable<PictureInPictureType>;
     currentGridType$: Readable<GridTypes>;
     interactiveHideMobileControls: Writable<boolean>;
-    additionalButtons$: Readable<AdditionalButton[]>;
+    additionalButtonsDeprecated$: Readable<AdditionalButtonDeprecated[]>;
+    additionalDesktopControlPanelRightButtons$: Readable<AdditionalDesktopControlPanelButton[]>;
     additionalSettingsMenuItems$: Readable<SettingsMenuItem[]>;
     additionalContextMenuItems$: Readable<ContextMenuItem[]>;
     overlayContainer$: Writable<HTMLDivElement | undefined>;
     startedByKeyboard$: Writable<boolean>;
+    autoplayNextEnabled$: Writable<boolean>;
 }
 export interface IWebApi {
     pictureInPictureApi?: IPictureInPictureApi;
@@ -175,6 +179,7 @@ export interface IStore {
         internal: {
             preload: () => void;
             firstStart: (showAds: boolean) => void;
+            play: () => void;
             pause: () => void;
             togglePlay: () => void;
             toggleMuted: () => void;
@@ -234,6 +239,7 @@ export interface IStore {
             stopPlayer?: () => void;
             setLooped: (isLooped: boolean) => void;
             reportProblem: () => void;
+            setAutoplayNextEnabled: (autoplayNext: boolean) => void;
         };
         external: {
             firstStart: (showAds: boolean) => void;
@@ -253,6 +259,9 @@ export interface IStore {
             updateAdditionalContextItem: (itemId: string, fields: Partial<Omit<AdditionalContextMenuItem, 'id'>>) => void;
             addAdditionalContextItem: (newItem: AdditionalContextMenuItem) => void;
             removeAdditionalContextItem: (itemId: string) => void;
+            updateAdditionalButton: (itemId: string, fields: Partial<Omit<AdditionalButton, 'id' | 'type'>>) => void;
+            addAdditionalButton: (newButton: AdditionalButton) => void;
+            removeAdditionalButton: (itemId: string) => void;
         };
     };
     callbacks?: IVKVideoPlayerCallbacks;
@@ -285,7 +294,7 @@ interface IStoreParams {
     hasInteractiveBranches?: boolean;
     disabledControls: ControlsKeys;
     playPrevChapterDisabledTooltip: PlayPrevChapterDisabledTooltipKey;
-    additionalButtons: AdditionalButton[];
+    additionalButtons: Array<AdditionalButtonDeprecated | AdditionalDesktopControlPanelButton>;
     additionalSettingsMenuItems: AdditionalSettingsMenuItem[];
     additionalContextMenuItems: AdditionalContextMenuItem[];
     looped?: boolean;

package/types/store/micro/base.d.ts

@@ -4,5 +4,5 @@ export declare class BaseMicroStore<StateName extends keyof IMicroStores = keyof
     readonly stateName: StateName;
     state$: IMicroStores[StateName];
     subscription: Subscription;
-    init({ store, microStores, config }: InitMicroStoreParams): Subscription;
+    init({ store, microStores, interactiveController, config }: InitMicroStoreParams): Subscription;
 }

package/types/store/micro/graphIsOpened.d.ts

@@ -0,0 +1,15 @@
+import { BaseMicroStore } from './base';
+import type { InitMicroStoreParams } from '../../types';
+import { GridTypes } from '../../constans';
+export default class GraphIsOpened extends BaseMicroStore {
+    readonly stateName = "graphIsOpened$";
+    private graphMadePause;
+    state$: {
+        toggle: () => void;
+        set(this: void, value: boolean | null): void;
+        update(this: void, updater: import("svelte/store").Updater<boolean | null>): void;
+        subscribe(this: void, run: import("svelte/store").Subscriber<boolean | null>, invalidate?: import("svelte/store").Invalidator<boolean | null> | undefined): import("svelte/store").Unsubscriber;
+    };
+    checkIfShouldHide: (currentGridType: GridTypes) => boolean;
+    init(initStoreParams: InitMicroStoreParams): import("@vkontakte/videoplayer-shared").Subscription;
+}

package/types/store/utils.d.ts

@@ -2,7 +2,8 @@ import type { Readable } from 'svelte/store';
 import type { IValueObservable } from '@vkontakte/videoplayer-shared';
 import type { IPlayer, IConfig, IObservable } from '@vkontakte/videoplayer-core';
 import type { IStore } from '.';
-import type { IMicroStores } from '../types';
+import type { AdditionalButtonDeprecated, IMicroStores } from '../types';
+import type { AdditionalDesktopControlPanelButton } from '../components/Controls/types';
 export declare const setStores: (store: IStore, microStores: IMicroStores) => void;
 export declare const getStore: () => IStore;
 export declare const getMicroStores: () => IMicroStores;
@@ -33,6 +34,8 @@ export type DebugData = {
 };
 export declare const constructDebugPanelData: (player: IPlayer, config: IConfig, store: IStore) => DebugData;
 export declare const fetchVideoFile: (url: string, filename: string) => void;
+export declare const isDeprecatedAdditionalButtonGuard: (btn: AdditionalButtonDeprecated | AdditionalDesktopControlPanelButton) => btn is AdditionalButtonDeprecated;
+export declare const isAdditionalButtonGuard: (btn: AdditionalButtonDeprecated | AdditionalDesktopControlPanelButton) => btn is AdditionalDesktopControlPanelButton;
 export declare const createDequeCache: <T>() => {
     add: (key: string, value: T) => void;
     find: (key: string) => [string, T] | undefined;

package/types/types/index.d.ts

@@ -1,6 +1,6 @@
 import type { VideoQuality, VideoFormat, ISources, IExternalTextTrack } from '@vkontakte/videoplayer-core';
 import type { IValueObservable, InterfaceLanguage, Subscription } from '@vkontakte/videoplayer-shared';
-import type { Manifest, VideoInfo, InteractiveProjectInfo } from '@vkontakte/videoplayer-interactive';
+import type { Manifest, VideoInfo, Interactives, InteractiveProjectInfo } from '@vkontakte/videoplayer-interactive';
 import { PlaybackState } from '@vkontakte/videoplayer-core';
 import type { Writable, Readable } from 'svelte/store';
 import type { ISDKConfig } from '../config';
@@ -69,6 +69,7 @@ export interface IVKVideoPlayerCallbacks {
     onLogoClicked?: () => void;
     onCopyEmbedCodeClicked?: () => string;
     onVSIDChanged?: (vsid?: string) => void;
+    onAutoplaySoundProhibited?: () => void;
     uiInfo?: {
         onControlsVisibleChanged?: (value?: boolean) => void;
         onIsMobileChanged?: (value?: boolean) => void;
@@ -183,7 +184,12 @@ export interface IInteractiveData {
     projectInfo?: InteractiveProjectInfo;
     tooltipHelpHintActive?: boolean;
 }
-export interface AdditionalButton {
+/**
+ * @deprecated
+ *
+ * Старый механизм добавления кнопок, будет удален в будущих релизах
+ */
+export interface AdditionalButtonDeprecated {
     iconUrl: string;
     onClick?: (event?: MouseEvent) => void;
     tooltip?: string;
@@ -230,7 +236,7 @@ export interface IVKVideoPlayerConfig {
     showThumbTimer?: boolean;
     is3DVideo?: boolean;
     callbacks?: IVKVideoPlayerCallbacks;
-    additionalButtons?: AdditionalButton[];
+    additionalButtons?: AdditionalButtonDeprecated[];
     additionalSettingsMenuItems?: AdditionalSettingsMenuItem[];
     additionalContextMenuItems?: AdditionalContextMenuItem[];
     refDomain?: string;
@@ -271,6 +277,7 @@ export interface IPlayerControlsRef {
     vkLogo?: HTMLElement;
     interactiveTimeIndicator?: HTMLElement;
     timeline?: HTMLElement;
+    autoplayNextToggle?: HTMLElement;
 }
 export interface IPlayerDesktopControlsWidth {
     prevButton: number;
@@ -474,11 +481,13 @@ export interface IMicroStores {
         set: (newValue: boolean, useTimeout: boolean) => void;
         clearTimeout: () => void;
     };
+    graphIsOpened$: ToggleableMicroStore;
 }
 export interface InitMicroStoreParams {
     store: IStore;
     microStores: IMicroStores;
     config: IVKVideoPlayerConfig;
+    interactiveController?: Interactives;
 }
 export interface IMicroStore<StateName extends keyof IMicroStores = keyof IMicroStores> {
     readonly stateName: StateName;

package/types/utils/roundFps.d.ts

@@ -1 +1 @@
-export declare const roundFps: (fps: number) => "" | 50 | 60 | 120 | 240;
+export declare const roundFps: (fps: number) => 60 | "" | 50 | 120 | 240;

package/types/utils/sorts.d.ts

@@ -0,0 +1,5 @@
+export declare const sortByWeightAsc: (a: {
+    weight: number;
+}, b: {
+    weight: number;
+}) => number;

package/types/utils/userSettings.d.ts

@@ -13,3 +13,5 @@ export declare const getPreferredStreamLanguage: () => string | undefined;
 export declare const savePreferredStreamLanguage: (language: string) => void;
 export declare const savePreferredRate: (rate: PlaybackRate) => void;
 export declare const getPreferredRate: () => PlaybackRate | undefined;
+export declare const savePreferredAutoplayNext: (autoplayNext: boolean) => void;
+export declare const getPreferredAutoplayNext: () => boolean;