From d2c93cc2fdec3e5f8472aafde506d932bcc8b044 Mon Sep 17 00:00:00 2001 From: Sivan Agranov <88330203+SivanA-Kaltura@users.noreply.github.com> Date: Thu, 16 Mar 2023 15:50:22 +0200 Subject: [PATCH] fix(FEC-12957): Transcript Plugin - move download transcript inside the plugin menu and "release" the download button. Remove download and print icons Add popover menu for download and print Use close button from common --- cypress/e2e/transcript.cy.ts | 29 ++++- package.json | 6 +- src/components/close-button/close-button.scss | 11 -- src/components/close-button/index.tsx | 29 ----- src/components/icons/index.ts | 6 - src/components/popover-menu/index.ts | 2 + src/components/popover-menu/popover-menu.scss | 73 ++++++++++++ src/components/popover-menu/popover-menu.tsx | 107 +++++++++++++++++ src/components/transcript-menu/index.ts | 2 + .../transcript-menu/transcript-menu.tsx | 56 +++++++++ src/components/transcript/transcript.scss | 7 +- src/components/transcript/transcript.tsx | 24 +++- src/transcript-plugin.tsx | 79 +++---------- yarn.lock | 111 ++++++++++-------- 14 files changed, 366 insertions(+), 176 deletions(-) delete mode 100644 src/components/close-button/close-button.scss delete mode 100644 src/components/close-button/index.tsx create mode 100644 src/components/popover-menu/index.ts create mode 100644 src/components/popover-menu/popover-menu.scss create mode 100644 src/components/popover-menu/popover-menu.tsx create mode 100644 src/components/transcript-menu/index.ts create mode 100644 src/components/transcript-menu/transcript-menu.tsx diff --git a/cypress/e2e/transcript.cy.ts b/cypress/e2e/transcript.cy.ts index 308d7f4..db591c1 100644 --- a/cypress/e2e/transcript.cy.ts +++ b/cypress/e2e/transcript.cy.ts @@ -44,8 +44,8 @@ const clickTranscriptPluginButton = () => { }; const clickClosePluginButton = () => { - cy.get('[data-testid="transcriptCloseButton"]').should('exist'); - cy.get('[data-testid="transcriptCloseButton"]').click({force: true}); + cy.get('[data-testid="transcriptCloseButton"] button').should('exist'); + cy.get('[data-testid="transcriptCloseButton"] button').click({force: true}); }; const checkRequest = (reqBody: any, service: string, action: string) => { @@ -197,19 +197,32 @@ describe('Transcript plugin', () => { }); }); + describe('popover menu', () => { + it('should not render when print and download are disabled', () => { + mockTranscript(); + preparePage({printDisabled: true, downloadDisabled: true}); + initiatePlay(); + cy.get(`[data-testid="popover-anchor-container"]`).should('not.exist'); + }); + }); + describe('print', () => { it('should render print button', () => { mockTranscript(); preparePage({printDisabled: false}); initiatePlay(); - cy.get('[data-testid="transcript_printButton"]').should('exist'); + cy.get(`[data-testid="popover-anchor-container"]`).should('exist'); + cy.get(`[data-testid="popover-anchor-container"]`).click(); + cy.get(`[data-testid="print-menu-item"]`).should('exist'); }); it('should not render print button', () => { mockTranscript(); preparePage({printDisabled: true}); initiatePlay(); - cy.get('[data-testid="transcript_printButton"]').should('not.exist'); + cy.get(`[data-testid="popover-anchor-container"]`).should('exist'); + cy.get(`[data-testid="popover-anchor-container"]`).click(); + cy.get(`[data-testid="print-menu-item"]`).should('not.exist'); }); }); @@ -218,14 +231,18 @@ describe('Transcript plugin', () => { mockTranscript(); preparePage({downloadDisabled: false}); initiatePlay(); - cy.get('[data-testid="transcript_downloadButton"]').should('exist'); + cy.get(`[data-testid="popover-anchor-container"]`).should('exist'); + cy.get(`[data-testid="popover-anchor-container"]`).click(); + cy.get(`[data-testid="download-menu-item"]`).should('exist'); }); it('should not render download button', () => { mockTranscript(); preparePage({downloadDisabled: true}); initiatePlay(); - cy.get('[data-testid="transcript_downloadButton"]').should('not.exist'); + cy.get(`[data-testid="popover-anchor-container"]`).should('exist'); + cy.get(`[data-testid="popover-anchor-container"]`).click(); + cy.get(`[data-testid="download-menu-item"]`).should('not.exist'); }); }); }); diff --git a/package.json b/package.json index 1714cc7..42ecf15 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "conventional-github-releaser": "3.1.3", "cross-env": "^7.0.3", "css-loader": "^6.7.1", - "kaltura-player-js": "https://github.com/kaltura/kaltura-player-js.git#master", + "kaltura-player-js": "https://github.com/kaltura/kaltura-player-js.git#v3.12.1", "preact": "^10.4.1", "prettier": "^2.6.2", "sass": "^1.54.3", @@ -31,7 +31,7 @@ "webpack-dev-server": "^4.9.0" }, "peerDependencies": { - "kaltura-player-js": "https://github.com/kaltura/kaltura-player-js.git#master" + "kaltura-player-js": "https://github.com/kaltura/kaltura-player-js.git#v3.12.1" }, "scripts": { "clean": "rm -rf ./dist", @@ -68,7 +68,7 @@ "html5 player" ], "dependencies": { - "@playkit-js/common": "^1.1.2", + "@playkit-js/common": "1.1.6", "@playkit-js/playkit-js-ui": "^0.73.0", "@playkit-js/ui-managers": "^1.3.2", "cypress": "^12.3.0", diff --git a/src/components/close-button/close-button.scss b/src/components/close-button/close-button.scss deleted file mode 100644 index 1ca2750..0000000 --- a/src/components/close-button/close-button.scss +++ /dev/null @@ -1,11 +0,0 @@ -.close-btn { - position: absolute; - top: 20px; - right: 14px; - width: 24px; - height: 24px; - padding: 0; - background-color: transparent; - border: none; - cursor: pointer; -} diff --git a/src/components/close-button/index.tsx b/src/components/close-button/index.tsx deleted file mode 100644 index 597b359..0000000 --- a/src/components/close-button/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import {h} from 'preact'; -import * as styles from './close-button.scss'; -import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper'; -import {icons} from '../icons'; -const {Icon} = KalturaPlayer.ui.components; -const {withText, Text} = KalturaPlayer.ui.preacti18n; - -const translates = { - closeLabel: Hide Transcript -}; - -interface CloseButtonProps { - onClick: () => void; - closeLabel?: string; -} - -export const CloseButton = withText(translates)((props: CloseButtonProps) => ( - - - -)); diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 359d414..6788fc1 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -1,12 +1,6 @@ export namespace icons { export const PLUGIN_ICON = 'M23.1111111,19 C23.6020309,19 24,19.4477153 24,20 C24,20.5522847 23.6020309,21 23.1111111,21 L8.88888889,21 C8.39796911,21 8,20.5522847 8,20 C8,19.4477153 8.39796911,19 8.88888889,19 L23.1111111,19 Z M24.8695652,3 C26.5984566,3 28,4.24720677 28,5.78571429 L28,26.2142857 C28,27.7527932 26.5984566,29 24.8695652,29 L7.13043478,29 C5.40154339,29 4,27.7527932 4,26.2142857 L4,5.78571429 C4,4.24720677 5.40154339,3 7.13043478,3 L24.8695652,3 Z M26,17 L6,17 L6,26.0833333 C6,26.5895944 6.47127921,27 7.05263158,27 L24.9473684,27 C25.5287208,27 26,26.5895944 26,26.0833333 L26,17 Z M8.88888889,23 L23.1111111,23 C23.6020309,23 24,23.4477153 24,24 C24,24.5128358 23.6568532,24.9355072 23.2147743,24.9932723 L23.1111111,25 L8.88888889,25 C8.39796911,25 8,24.5522847 8,24 C8,23.4871642 8.34314684,23.0644928 8.78522567,23.0067277 L8.88888889,23 L23.1111111,23 L8.88888889,23 Z M24.9473684,5 L7.05263158,5 C6.47127921,5 6,5.41040565 6,5.91666667 L6,15 L26,15 L26,5.91666667 C26,5.41040565 25.5287208,5 24.9473684,5 Z'; - export const CLOSE_ICON = - 'M17.9113162,16 L24.6072325,9.30408374 C25.1313645,8.77995172 25.1287183,7.92687249 24.6009229,7.3990771 C24.0694478,6.86760201 23.220227,6.86845682 22.6959163,7.39276754 L16,14.0886838 L9.30408374,7.39276754 C8.77995172,6.86863552 7.92687249,6.8712817 7.3990771,7.3990771 C6.86760201,7.93055219 6.86845682,8.77977302 7.39276754,9.30408374 L14.0886838,16 L7.39276754,22.6959163 C6.86863552,23.2200483 6.8712817,24.0731275 7.3990771,24.6009229 C7.93055219,25.132398 8.77977302,25.1315432 9.30408374,24.6072325 L16,17.9113162 L22.6959163,24.6072325 C23.2200483,25.1313645 24.0731275,25.1287183 24.6009229,24.6009229 C25.132398,24.0694478 25.1315432,23.220227 24.6072325,22.6959163 L17.9113162,16 Z'; - export const DOWNLOAD_ICON = - 'M26,25 C26.5522847,25 27,25.4477153 27,26 C27,26.5522847 26.5522847,27 26,27 L26,27 L7,27 C6.44771525,27 6,26.5522847 6,26 C6,25.4477153 6.44771525,25 7,25 L7,25 Z M15.897,20.797 L15.817,20.73 L15.8163834,20.7298413 L8.34305882,13.7298413 C7.93997861,13.3522902 7.91928313,12.7194636 8.29683417,12.3163834 C8.67438521,11.9133032 9.30721188,11.8926077 9.71029209,12.2701587 L15.4996721,17.693 L15.5,6 C15.5,5.48716416 15.8860402,5.06449284 16.3833789,5.00672773 L16.5,5 C17.0522847,5 17.5,5.44771525 17.5,6 L17.4996721,17.694 L23.2951711,12.2699211 C23.6673663,11.9215418 24.2352038,11.9125649 24.6172049,12.230382 L24.7086128,12.3166371 C25.0860237,12.7198486 25.0651082,13.352668 24.6618968,13.7300789 L17.1833629,20.7300789 L17.1610165,20.7503813 L17.1610165,20.7503813 C17.1421868,20.7669999 17.1224361,20.7831339 17.102079,20.7985075 C17.0891381,20.8082894 17.0764369,20.8174134 17.0635772,20.826204 C17.0434306,20.8399634 17.0223437,20.8532674 17.0007451,20.8657864 C16.9872099,20.8736423 16.9734873,20.8811624 16.959633,20.8883367 L16.8877511,20.9220455 L16.8877511,20.9220455 C16.8756318,20.927087 16.8632234,20.9320132 16.8507409,20.9366814 C16.83028,20.9444208 16.8097352,20.9513578 16.7889039,20.9576336 C16.7705976,20.9630349 16.752126,20.968019 16.7335525,20.9724647 C16.6585039,20.9905214 16.5803589,21 16.5,21 C16.4170842,21 16.3365254,20.9899086 16.2594848,20.9708871 C16.2500284,20.9684434 16.2399293,20.9657886 16.2298654,20.9629733 C16.2028024,20.9554899 16.1769173,20.947049 16.1515197,20.9376057 C16.1370523,20.9321598 16.1223107,20.9262914 16.1076867,20.9200585 C16.0832011,20.9096448 16.0596143,20.8984375 16.036557,20.886357 C16.025923,20.8807972 16.0148138,20.8747205 16.0037984,20.8684173 C15.9792921,20.8543502 15.955966,20.8396537 15.9333153,20.8240474 L15.898,20.798 L15.897,20.797 Z M15.867,20.774 L15.888,20.79 L15.8735171,20.7794831 L15.8735171,20.7794831 L15.867,20.774 Z M15.817,20.73 L15.9035191,20.8027045 C15.8784859,20.7840722 15.8543541,20.7642966 15.831201,20.7434548 L15.817,20.73 Z'; - export const PRINT_ICON = - 'M21,3 C22.0543618,3 22.9181651,3.81587779 22.9945143,4.85073766 L23,5 L23,9 L26,9 C27.1045695,9 28,9.8954305 28,11 L28,21 C28,22.1045695 27.1045695,23 26,23 L23,23 L23,28 C23,29.1045695 22.1045695,30 21,30 L11,30 C9.8954305,30 9,29.1045695 9,28 L9,23 L6,23 C4.8954305,23 4,22.1045695 4,21 L4,11 C4,9.8954305 4.8954305,9 6,9 L9,9 L9,5 C9,3.9456382 9.81587779,3.08183488 10.8507377,3.00548574 L11,3 L21,3 Z M21,19 L11,19 L11,28 L21,28 L21,19 Z M26,11 L6,11 L6,21 L9,21 L9,19 C8.44771525,19 8,18.5522847 8,18 C8,17.4477153 8.44771525,17 9,17 L23,17 C23.5522847,17 24,17.4477153 24,18 C24,18.5522847 23.5522847,19 23,19 L23,21 L26,21 L26,11 Z M21,5 L11,5 L11,9 L21,9 L21,5 Z'; export const BigSize = 32; export const MediumSize = 24; export const SmallSize = 16; diff --git a/src/components/popover-menu/index.ts b/src/components/popover-menu/index.ts new file mode 100644 index 0000000..a01911b --- /dev/null +++ b/src/components/popover-menu/index.ts @@ -0,0 +1,2 @@ +import {PopoverMenu, PopoverMenuItemData} from './popover-menu'; +export {PopoverMenu, PopoverMenuItemData}; diff --git a/src/components/popover-menu/popover-menu.scss b/src/components/popover-menu/popover-menu.scss new file mode 100644 index 0000000..152a9c3 --- /dev/null +++ b/src/components/popover-menu/popover-menu.scss @@ -0,0 +1,73 @@ +@import './variables.scss'; + +.popover-anchor-container { + cursor: pointer; + margin-left: 8px; + border-radius: $roundness-1; + + &:hover { + background-color: $tone-4-color; + } + + &.active { + background-color: $tone-6-color; + } + + .popover-anchor { + pointer-events: none; + } +} + +.popover-container { + position: relative; + + .popover-component { + background-color: $tone-7-color; + border-radius: $roundness-1; + display: block; + font-size: 15px; + margin-top: 6px; + position: absolute; + right: 0px; + z-index: 1; + + &.hidden { + display: none; + } + + &.bottom { + top: 100%; + margin-top: 6px; + } + + &.left { + right: 0px; + } + } +} +.popover-menu-item { + align-items: center; + display: flex; + font-size: 15px; + line-height: 18px; + min-height: 30px; + padding: 9px 24px 9px 16px; + white-space: nowrap; + margin: 4px; + + &:hover { + background-color: $tone-6-color; + border-radius: $roundness-1; + cursor: pointer; + } + + &:focus { + outline: 1px solid #222; + } +} + +.popover-menu { + padding-top: 6px; + padding-bottom: 6px; +} + diff --git a/src/components/popover-menu/popover-menu.tsx b/src/components/popover-menu/popover-menu.tsx new file mode 100644 index 0000000..b35e9fc --- /dev/null +++ b/src/components/popover-menu/popover-menu.tsx @@ -0,0 +1,107 @@ +import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper'; +import {h, Component, VNode} from 'preact'; + +const {withEventManager} = KalturaPlayer.ui.Event; +const {ENTER, ESC, SPACE} = KalturaPlayer.ui.utils.KeyMap; + +import * as styles from './popover-menu.scss'; + +interface PopoverMenuItemData { + testId: string; + label: string; + onClick: () => void; +} + +interface PopoverMenuProps { + eventManager?: any; + children?: VNode; + items: Array; +} + +interface PopoverMenuState { + isOpen: boolean; +} + +@withEventManager +class PopoverMenu extends Component { + private _controlElementRef: HTMLDivElement | null = null; + private _popoverElementRef: HTMLDivElement | null = null; + + eventManager: any; + + constructor(props: PopoverMenuProps) { + super(props); + this.state = {isOpen: false}; + + this.props.eventManager?.listen(document, 'click', this.handleMouseEvent); + this.props.eventManager?.listen(document, 'keydown', this.handleKeyboardEvent); + } + + private handleMouseEvent = (event: MouseEvent) => { + if (!this._controlElementRef?.contains(event.target as Node | null)) { + this.closePopover(); + } + }; + + private handleKeyboardEvent = (event: KeyboardEvent) => { + if (this._controlElementRef?.contains(event.target as Node | null) && [ENTER, SPACE].includes(event.keyCode)) { + // use handler of control element + event.preventDefault(); + return; + } + if (this._popoverElementRef?.contains(event.target as Node | null) && event.keyCode !== ESC) { + // use handler of popover element + return; + } + this.closePopover(); + }; + + private closePopover() { + this.setState({isOpen: false}); + } + + private togglePopover = () => { + this.setState({isOpen: !this.state.isOpen}); + }; + + render() { + const {children, items} = this.props; + + return ( +
+ +
{ + this._controlElementRef = node; + }}> +
{children}
+
+ + +
+ {this.state.isOpen + ? items.map(({label, onClick, testId}) => { + return ( + { + this.closePopover(); + onClick(); + }}> + { +
+ {label} +
+ } + + ); + }) + : null} +
+
+ ); + } +} + +export {PopoverMenu, PopoverMenuItemData}; diff --git a/src/components/transcript-menu/index.ts b/src/components/transcript-menu/index.ts new file mode 100644 index 0000000..f6102bf --- /dev/null +++ b/src/components/transcript-menu/index.ts @@ -0,0 +1,2 @@ +import {TranscriptMenu} from './transcript-menu'; +export {TranscriptMenu}; diff --git a/src/components/transcript-menu/transcript-menu.tsx b/src/components/transcript-menu/transcript-menu.tsx new file mode 100644 index 0000000..7066c94 --- /dev/null +++ b/src/components/transcript-menu/transcript-menu.tsx @@ -0,0 +1,56 @@ +import {Component, h} from 'preact'; +import {PopoverMenu} from '../popover-menu'; +import {PopoverMenuItemData} from '../popover-menu'; + +import {Button, ButtonType} from '@playkit-js/common/dist/components/button'; + +interface TranscriptMenuProps { + printDownloadAreaLabel?: string; + printTranscript?: string; + downloadTranscript?: string; + onDownload: () => void; + onPrint: () => void; + downloadDisabled?: boolean; + printDisabled?: boolean; +} + +interface TranscriptMenuState { + isOpen: boolean; + items: Array; +} + +class TranscriptMenu extends Component { + constructor(props: TranscriptMenuProps) { + super(); + + const {downloadDisabled, onDownload, printDisabled, onPrint, printDownloadAreaLabel, printTranscript, downloadTranscript} = props; + const items = []; + if (!downloadDisabled) { + items.push({ + testId: 'download-menu-item', + label: 'Download transcript', + onClick: onDownload + }); + } + + if (!printDisabled) { + items.push({ + testId: 'print-menu-item', + label: 'Print transcript', + onClick: onPrint + }); + } + + this.state = {isOpen: false, items}; + } + + render() { + return this.state.items.length ? ( + + + + ) : null; + } +} + +export {TranscriptMenu}; diff --git a/src/components/transcript/transcript.scss b/src/components/transcript/transcript.scss index c9c9514..024429e 100644 --- a/src/components/transcript/transcript.scss +++ b/src/components/transcript/transcript.scss @@ -60,12 +60,7 @@ margin-bottom: 8px; padding-left: 16px; font-size: 16px; - &.small-width { - padding-right: 44px; - } - &.medium-width { - padding-right: 22px; - } + padding-right: 16px; } .body { diff --git a/src/components/transcript/transcript.tsx b/src/components/transcript/transcript.tsx index 18258fb..c02f7a7 100644 --- a/src/components/transcript/transcript.tsx +++ b/src/components/transcript/transcript.tsx @@ -1,14 +1,16 @@ import {h, Component} from 'preact'; -import {OnClickEvent, OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper'; import {debounce} from '../../utils'; import * as styles from './transcript.scss'; import {Spinner} from '../spinner'; import {Search} from '../search'; import {CaptionList} from '../caption-list'; import {HighlightedMap, CuePointData} from '../../types'; -import {CloseButton} from '../close-button'; import {ErrorIcon} from './error-icon'; import {AutoscrollButton} from '../autoscroll-button'; +import {TranscriptMenu} from '../transcript-menu'; + +import {Button, ButtonType, ButtonSize} from '@playkit-js/common/dist/components/button'; +import {OnClickEvent, OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper'; const {ENTER, SPACE, TAB, ESC} = KalturaPlayer.ui.utils.KeyMap; const {withText, Text} = KalturaPlayer.ui.preacti18n; @@ -39,6 +41,10 @@ export interface TranscriptProps { skipTranscript?: string; errorTitle?: string; errorDescripton?: string; + downloadDisabled: boolean; + onDownload: () => void; + printDisabled: boolean; + onPrint: () => void; } interface TranscriptState { @@ -177,7 +183,7 @@ export class Transcript extends Component { }; private _renderHeader = () => { - const {toggledWithEnter, kitchenSinkActive} = this.props; + const {toggledWithEnter, kitchenSinkActive, downloadDisabled, onDownload, printDisabled, onPrint} = this.props; const {search, activeSearchIndex, totalSearchResults} = this.state; return (
@@ -190,6 +196,16 @@ export class Transcript extends Component { toggledWithEnter={toggledWithEnter} kitchenSinkActive={kitchenSinkActive} /> + +
+ +
); }; @@ -360,8 +376,6 @@ export class Transcript extends Component {
{this._renderHeader()} - - {renderTranscriptButtons && this._renderSkipTranscriptButton()}
0 || downloadDisabled) { - // download icon already exist or download disabled - return; - } - const translate = { - label: Download current transcript - }; - this._downloadIcon = this.upperBarManager!.add({ - label: translate.label as any, - svgIcon: {path: icons.DOWNLOAD_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`}, - onClick: this._handleDownload, - component: withText(translate)((props: {label: string}) => ( - - )) - }) as number; - } - private _addPrintIcon(): void { - const {printDisabled} = this.config; - if (this._printIcon > 0 || printDisabled) { - // print icon already exist or download disabled - return; - } - const translate = { - label: Print current transcript - }; - this._printIcon = this.upperBarManager!.add({ - label: translate.label as any, - svgIcon: {path: icons.PRINT_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`}, - onClick: this._handlePrint, - component: withText(translate)((props: {label: string}) => ( - - )) - }) as number; - } - private _addTranscriptItem(): void { if (Math.max(this._transcriptPanel, this._transcriptIcon) > 0) { // transcript panel or icon already exist return; } - const {expandMode, position, expandOnFirstPlay, showTime, scrollOffset, searchDebounceTimeout, searchNextPrevDebounceTimeout} = this.config; + const { + expandMode, + position, + expandOnFirstPlay, + showTime, + scrollOffset, + searchDebounceTimeout, + searchNextPrevDebounceTimeout, + downloadDisabled, + printDisabled + } = this.config; this._transcriptPanel = this.sidePanelsManager!.add({ label: 'Transcript', panelComponent: () => { @@ -282,6 +237,10 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin { kitchenSinkActive={this._isPluginActive()} toggledWithEnter={this._triggeredByKeyboard} onClose={this._handleClose} + downloadDisabled={getConfigValue(downloadDisabled, isBoolean, false)} + onDownload={this._handleDownload} + printDisabled={getConfigValue(printDisabled, isBoolean, false)} + onPrint={this._handlePrint} /> ); }, @@ -368,14 +327,6 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin { this._transcriptIcon = -1; this._pluginButtonRef = null; } - if (this._printIcon > 0) { - this.upperBarManager!.remove(this._printIcon); - this._printIcon = -1; - } - if (this._downloadIcon > 0) { - this.upperBarManager!.remove(this._downloadIcon); - this._downloadIcon = -1; - } this._captionMap = new Map(); this._activeCaptionMapId = ''; this._isLoading = false; diff --git a/yarn.lock b/yarn.lock index 5c42aa7..d86e575 100644 --- a/yarn.lock +++ b/yarn.lock @@ -130,28 +130,29 @@ resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b" integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A== -"@playkit-js/common@^1.1.2": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@playkit-js/common/-/common-1.1.2.tgz#35e86126d87f9006795033bce7e3d9a1b885b61f" - integrity sha512-N/mcYl9sKpdRs56lUwNxdRZZtljQE35+K8XeY15d7Vcalnh5tWgcY4zqTYAqT3mz4wL1hY15fHe5rYuDF0WH1A== +"@playkit-js/common@1.1.6": + version "1.1.6" + resolved "https://registry.yarnpkg.com/@playkit-js/common/-/common-1.1.6.tgz#4e3ec59e3b9e0273a9d0c6bfa0425468f597d01a" + integrity sha512-NNulGulMfK0crRDdOJTBIUUd2z8Ap1vf88PkSeVUK32j/ULgCII9djKEdxyBgn5lSj9ZI+UObDCPezDcMwniWA== dependencies: "@playkit-js/playkit-js-ui" "^0.74.0" + classnames "^2.3.2" linkify-it "^4.0.1" -"@playkit-js/playkit-js-dash@1.30.2": - version "1.30.2" - resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js-dash/-/playkit-js-dash-1.30.2.tgz#b539a16dff6dae1afa89f7113d779b7dcb804309" - integrity sha512-v1HZfp0iShCMY79zR6uqmsnvbjTy5nP2+oi5N2xxidZl3Be19ZeePHXsOoZ65kkQJthYhbnOnVUlEQbRzg3kwA== +"@playkit-js/playkit-js-dash@1.33.0": + version "1.33.0" + resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js-dash/-/playkit-js-dash-1.33.0.tgz#1c8bc86f6080ce89ed4997978429c4167c5779d5" + integrity sha512-3v+Q6/krt4GGe78ra2HC9X5llGbp6+bGdqH8K1DdDiuSu9PRP809OH7Sl8+EJNN6ZbAk+oW9aCPQPycDYMB6sw== -"@playkit-js/playkit-js-hls@1.30.1": - version "1.30.1" - resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js-hls/-/playkit-js-hls-1.30.1.tgz#1c6298cafadfabe9510e013f319774f486f3a4c6" - integrity sha512-92nrsOXBQveF+BmKqC2LxLp+zGjqKvBCh5vL8Ea0+COzha/jPovKtwhGxzyF3gTIukYoocMC8IisFFQCIPkCmw== +"@playkit-js/playkit-js-hls@1.32.0": + version "1.32.0" + resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js-hls/-/playkit-js-hls-1.32.0.tgz#aff7b637334e0a000ce1f3777c11c46991498eb4" + integrity sha512-lvoytiaibQhI/RptISPQTFfi2EbPbtKyuLbEBrR4fEx8ZAMHrvu2TL648TnVYbkyyJOCXV26Bn7cH/qpDXD2Ug== -"@playkit-js/playkit-js-ui@^0.72.0": - version "0.72.0" - resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js-ui/-/playkit-js-ui-0.72.0.tgz#d8b855f2a339903c3207f04c5890a25538f22933" - integrity sha512-+NSxOET30Ut4W/WNaepZCnaBHJSLOoAPZbBrXwVucA5Z3NG8wTmsoEd58FCwpT8vWTUwVSFxzli/uUiwfXlYHQ== +"@playkit-js/playkit-js-ui@0.75.2": + version "0.75.2" + resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js-ui/-/playkit-js-ui-0.75.2.tgz#4ab978b83ff18d58a41469b8bcc98d80d455a284" + integrity sha512-VLSWcQSBUsjaT0blolXFX09B5WLclLxxxHKn/wrlqGMuWdrBwFHLQWJAExb0IRF0FYjxdEMikexducmmrXKegA== dependencies: preact "^10.3.4" preact-i18n "^2.0.0-preactx.2" @@ -178,10 +179,10 @@ react-redux "^7.2.0" redux "^4.0.5" -"@playkit-js/playkit-js@^0.80.3": - version "0.80.3" - resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js/-/playkit-js-0.80.3.tgz#07e47e560aeadc6ca3b20afde87dfdf4ab8f7ac0" - integrity sha512-l7WWGLqL4KnP+TZZzGxsgQLj4chYZYsdF+35laSzFSxzJXsTi7ra8HCtNCWNHu5y3mfer2jjhl5kjMyCU6dt4Q== +"@playkit-js/playkit-js@0.82.0": + version "0.82.0" + resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js/-/playkit-js-0.82.0.tgz#c0be3644927eca65fe7d2bb0d0a0c369a3c362fc" + integrity sha512-JzVzM3FB+zjGc780QYBB7A8eUrCQbbEY6OhyAj7pO77NxhFTOLQgDAZcj1ZyWyrC8LCb6kUOQd6z7VNYEWCxoQ== dependencies: js-logger "^1.6.0" ua-parser-js "1.0.2" @@ -316,6 +317,13 @@ resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301" integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw== +"@types/preact-i18n@^2.3.1": + version "2.3.2" + resolved "https://registry.yarnpkg.com/@types/preact-i18n/-/preact-i18n-2.3.2.tgz#7b5a31e1c84ead424e8c6ed3d57a02487d430fc7" + integrity sha512-j1J/f9yzds7X3RP7oIO5wL+owXJyULv0qRWcX/eVGP/Ojw8SdTjXAi722vv2Iv5GtMgshVCS1QEQFJRT8/qwHQ== + dependencies: + preact "^10.0.0" + "@types/prop-types@*": version "15.7.5" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" @@ -1031,6 +1039,11 @@ ci-info@^3.2.0: resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.3.2.tgz#6d2967ffa407466481c6c90b6e16b3098f080128" integrity sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg== +classnames@^2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" + integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== + clean-stack@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b" @@ -1810,10 +1823,10 @@ electron-to-chromium@^1.4.188: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.202.tgz#0c2ed733f42b02ec49a955c5badfcc65888c390b" integrity sha512-JYsK2ex9lmQD27kj19fhXYxzFJ/phLAkLKHv49A5UY6kMRV2xED3qMMLg/voW/+0AR6wMiI+VxlmK9NDtdxlPA== -eme-encryption-scheme-polyfill@^2.0.3: - version "2.1.0" - resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.1.0.tgz#bb5a6975eff3039a102b1961150921be6a3b0c9f" - integrity sha512-vdkP1WyZTBI2LEU+FvbYrjawkz+5fOgSY0qicaWjs/ouVzBKvdbUHfbZ1mLHFOi3l+cdvSq4U6K55mD7J/SEbg== +eme-encryption-scheme-polyfill@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.1.1.tgz#91c823ed584e8ec5a9f03a6a676def8f80c57a4c" + integrity sha512-njD17wcUrbqCj0ArpLu5zWXtaiupHb/2fIUQGdInf83GlI+Q6mmqaPGLdrke4savKAu15J/z1Tg/ivDgl14g0g== emoji-regex@^8.0.0: version "8.0.0" @@ -2476,10 +2489,10 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" -hls.js@^1.1.5: - version "1.2.0" - resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.2.0.tgz#e213773be09d6f99f08cefbf608c4a1fe226f998" - integrity sha512-QIEQIUpBRhcpBMq3NA+/qozG8lbNfVekuX7kCMUlhiVu4382xFWsnwcuBe/CA4Gp/wB/pf2aRBaGRFlxh/FN8g== +hls.js@1.3.1: + version "1.3.1" + resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.3.1.tgz#2e43949aeaee8f3d54cabd7c4c1a9a718a03e7c2" + integrity sha512-6f4Qyrfj9sNUWMzNFKruqeD2KdisOwQ1GQJqnWAgMQ1hequlFK7e2dmF9qQD3mF/RI76hvztCMBptlPb+HcDow== hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" @@ -2971,20 +2984,21 @@ jsprim@^2.0.2: json-schema "0.4.0" verror "1.10.0" -"kaltura-player-js@https://github.com/kaltura/kaltura-player-js.git#master": - version "3.4.0" - resolved "https://github.com/kaltura/kaltura-player-js.git#4abd4c33fc3c24a4c498f874117021ecf97addc4" +"kaltura-player-js@https://github.com/kaltura/kaltura-player-js.git#v3.12.1": + version "3.12.1" + resolved "https://github.com/kaltura/kaltura-player-js.git#3288e70b0bdc1e8ea1e126327790f8e07f6123bf" dependencies: "@babel/polyfill" "^7.0.0" - "@playkit-js/playkit-js" "^0.80.3" - "@playkit-js/playkit-js-dash" "1.30.2" - "@playkit-js/playkit-js-hls" "1.30.1" - "@playkit-js/playkit-js-ui" "^0.72.0" - hls.js "^1.1.5" + "@playkit-js/playkit-js" "0.82.0" + "@playkit-js/playkit-js-dash" "1.33.0" + "@playkit-js/playkit-js-hls" "1.32.0" + "@playkit-js/playkit-js-ui" "0.75.2" + "@types/preact-i18n" "^2.3.1" + hls.js "1.3.1" intersection-observer "^0.12.0" - playkit-js-providers "https://github.com/kaltura/playkit-js-providers.git#v2.35.1" + playkit-js-providers "https://github.com/kaltura/playkit-js-providers.git#v2.39.0" proxy-polyfill "^0.3.0" - shaka-player "3.3.3" + shaka-player "4.3.3" keyv@3.0.0: version "3.0.0" @@ -3826,9 +3840,9 @@ pkg-dir@^4.2.0: dependencies: find-up "^4.0.0" -"playkit-js-providers@https://github.com/kaltura/playkit-js-providers.git#v2.35.1": - version "2.35.1" - resolved "https://github.com/kaltura/playkit-js-providers.git#6e6d586c5c4695cdaab8f2b9fe16c9a36477e1f3" +"playkit-js-providers@https://github.com/kaltura/playkit-js-providers.git#v2.39.0": + version "2.39.0" + resolved "https://github.com/kaltura/playkit-js-providers.git#ddaac7ae611eab35ad33249061bbca8f3e4fc787" postcss-modules-extract-imports@^3.0.0: version "3.0.0" @@ -3887,6 +3901,11 @@ preact-i18n@^2.0.0-preactx.2: dependencies: dlv "^1.1.2" +preact@^10.0.0: + version "10.13.0" + resolved "https://registry.yarnpkg.com/preact/-/preact-10.13.0.tgz#f8bd3cf257a4dbe41da71a52131b79916d4ca89d" + integrity sha512-ERdIdUpR6doqdaSIh80hvzebHB7O6JxycOhyzAeLEchqOq/4yueslQbfnPwXaNhAYacFTyCclhwkEbOumT0tHw== + preact@^10.3.4, preact@^10.4.1: version "10.10.0" resolved "https://registry.yarnpkg.com/preact/-/preact-10.10.0.tgz#7434750a24b59dae1957d95dc0aa47a4a8e9a180" @@ -4466,12 +4485,12 @@ setprototypeof@1.2.0: resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424" integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw== -shaka-player@3.3.3: - version "3.3.3" - resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-3.3.3.tgz#c94b12c5ffafd8cbf67baa654cdb4a01fc9ff722" - integrity sha512-E6VRILD9rKunKCQ+lbUnNqqxAvoKuw/6vNaIC+Gz9nW2lYfLX22XCu0wjGZlkvwaR9Q1H+PF7A9iZzzoctSWwg== +shaka-player@4.3.3: + version "4.3.3" + resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-4.3.3.tgz#8e35bd3f6faad4002395590c259d487c79240d64" + integrity sha512-UMaTwebmrpwYNFNnP8iRSR8cMdOvUMnisDa38Wkmmd63rWOQWbPq1DI1BIEu9oAUPIKXav6teelLRycdTnWKaQ== dependencies: - eme-encryption-scheme-polyfill "^2.0.3" + eme-encryption-scheme-polyfill "^2.1.1" shallow-clone@^3.0.0: version "3.0.1"