From 6a136115604360ed722ea1c66587f329d7b1b4c6 Mon Sep 17 00:00:00 2001 From: Roee Dean Date: Tue, 24 Dec 2024 10:06:42 +0200 Subject: [PATCH] FEC-14246-add-cypress-tests + prettier/eslintrc fixes --- .eslintrc.json | 3 +- .github/workflows/run_canary.yaml | 4 +- .github/workflows/run_canary_full_flow.yaml | 8 +- .github/workflows/run_prod.yaml | 8 +- .github/workflows/run_tests.yaml | 4 +- README.md | 2 - cypress/e2e/related.cy.ts | 87 +-- cypress/e2e/utils/expects.ts | 2 +- cypress/e2e/utils/setup.ts | 11 +- cypress/e2e/utils/values.ts | 2 +- cypress/public/index.html | 20 +- cypress/tsconfig.json | 5 +- docs/api.md | 632 ++++++++---------- package.json | 4 +- src/components/entry/entry.scss | 43 +- .../list-toggle-button.scss | 12 +- .../multiline-text/multiline-text.scss | 2 +- .../related-countdown-preview.scss | 114 ++-- src/components/related-grid/related-grid.scss | 36 +- src/components/related-list/related-list.scss | 54 +- src/components/scrollable/scrollable.scss | 56 +- src/components/thumbnail/thumbnail.scss | 2 +- yarn.lock | 20 + 23 files changed, 521 insertions(+), 610 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 0988bf5..e34bc3a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,7 +5,8 @@ "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "preact", "plugin:jsdoc/recommended"], "globals": { "KalturaPlayer": true, - "KalturaPlayerTypes": true + "KalturaPlayerTypes": true, + "cypress/globals": true }, "rules": { "prettier/prettier": "error", diff --git a/.github/workflows/run_canary.yaml b/.github/workflows/run_canary.yaml index cb1562a..f7076d4 100644 --- a/.github/workflows/run_canary.yaml +++ b/.github/workflows/run_canary.yaml @@ -17,7 +17,7 @@ jobs: uses: kaltura/playkit-js-common/.github/workflows/canary_plugin.yaml@master secrets: inherit with: - schema-type: "playerV3Versions" + schema-type: 'playerV3Versions' tests-yarn-run-to-execute: 'eslint' enabled-openssl-legacy-provider: 'false' - node-version: "18.x" + node-version: '18.x' diff --git a/.github/workflows/run_canary_full_flow.yaml b/.github/workflows/run_canary_full_flow.yaml index 604887d..37f6d61 100644 --- a/.github/workflows/run_canary_full_flow.yaml +++ b/.github/workflows/run_canary_full_flow.yaml @@ -21,9 +21,9 @@ jobs: PLAYER_MSTEAMS_WEBHOOK: ${{ secrets.PLAYER_MSTEAMS_WEBHOOK }} PLAYER_GITHUB_BOT_TOKEN: ${{ secrets.PLAYER_GITHUB_BOT_TOKEN }} with: - type: "plugin" - stage: "canary" - schema-type: "playerV3Versions" + type: 'plugin' + stage: 'canary' + schema-type: 'playerV3Versions' tests-yarn-run-to-execute: 'eslint' enabled-openssl-legacy-provider: 'false' - node-version: "18.x" + node-version: '18.x' diff --git a/.github/workflows/run_prod.yaml b/.github/workflows/run_prod.yaml index 54b5b7b..f1e5294 100644 --- a/.github/workflows/run_prod.yaml +++ b/.github/workflows/run_prod.yaml @@ -18,9 +18,9 @@ jobs: PLAYER_MSTEAMS_WEBHOOK: ${{ secrets.PLAYER_MSTEAMS_WEBHOOK }} PLAYER_GITHUB_BOT_TOKEN: ${{ secrets.PLAYER_GITHUB_BOT_TOKEN }} with: - type: "plugin" - env: "prod" - schema-type: "playerV3Versions" + type: 'plugin' + env: 'prod' + schema-type: 'playerV3Versions' tests-yarn-run-to-execute: 'eslint' enabled-openssl-legacy-provider: 'false' - node-version: "18.x" + node-version: '18.x' diff --git a/.github/workflows/run_tests.yaml b/.github/workflows/run_tests.yaml index 95980cf..af2a7dc 100644 --- a/.github/workflows/run_tests.yaml +++ b/.github/workflows/run_tests.yaml @@ -5,7 +5,7 @@ run-name: Player And Plugin Tests on: pull_request: branches: - - "*" + - '*' jobs: tests: @@ -15,7 +15,7 @@ jobs: uses: kaltura/ovp-pipelines-pub/.github/workflows/player_tests.yaml@master with: yarn-run-to-execute: 'eslint' - node-version: "18.x" + node-version: '18.x' notification: if: always() diff --git a/README.md b/README.md index 5a81059..71846bc 100644 --- a/README.md +++ b/README.md @@ -135,5 +135,3 @@ We use [SemVer](http://semver.org/) for versioning. For the versions available, ## License This project is licensed under the AGPL-3.0 License - see the [LICENSE.md](LICENSE.md) file for details - - diff --git a/cypress/e2e/related.cy.ts b/cypress/e2e/related.cy.ts index 0b7e160..dc31471 100644 --- a/cypress/e2e/related.cy.ts +++ b/cypress/e2e/related.cy.ts @@ -7,12 +7,7 @@ declare global { } } -import { - clickOnNextButton, - clickOnListToggle, - clickOnCloseButton, - clickOnRelatedEntry -} from './utils/actions'; +import {clickOnNextButton, clickOnListToggle, clickOnCloseButton, clickOnRelatedEntry} from './utils/actions'; import { expectElementContains, expectElementDoesntExist, @@ -122,36 +117,46 @@ describe('Related plugin', () => { } }); - setupAndExpect({ - playlistId: 'test_playlist', - entryList: mockRelatedEntries, - sourcesList: mockRelatedEntries, - useContext: true - }, loadPlayerAndSetMedia, () => { - clickOnListToggle(); - expectElementExists(getRelatedListElement); - expectElementContains(getRelatedListElement, [playlistEntries[0].name]); - expectElementDoesntExist(() => cy.contains(mockRelatedEntries[0].name)); - }); + setupAndExpect( + { + playlistId: 'test_playlist', + entryList: mockRelatedEntries, + sourcesList: mockRelatedEntries, + useContext: true + }, + loadPlayerAndSetMedia, + () => { + clickOnListToggle(); + expectElementExists(getRelatedListElement); + expectElementContains(getRelatedListElement, [playlistEntries[0].name]); + expectElementDoesntExist(() => cy.contains(mockRelatedEntries[0].name)); + } + ); }); it('should prioritize entryList over sourcesList and context', () => { - const sourcesList = [{ - id: 'source_1', - metadata: { name: 'Source Video' }, - progressive: [{ mimetype: 'video/mp4', url: 'test.mp4' }] - }]; + const sourcesList = [ + { + id: 'source_1', + metadata: {name: 'Source Video'}, + progressive: [{mimetype: 'video/mp4', url: 'test.mp4'}] + } + ]; - setupAndExpect({ - entryList: mockRelatedEntries, - sourcesList, - useContext: true - }, loadPlayerAndSetMedia, () => { - clickOnListToggle(); - expectElementExists(getRelatedListElement); - expectElementContains(getRelatedListElement, [mockRelatedEntries[0].name]); - expectElementDoesntExist(() => cy.contains('Source Video')); - }); + setupAndExpect( + { + entryList: mockRelatedEntries, + sourcesList, + useContext: true + }, + loadPlayerAndSetMedia, + () => { + clickOnListToggle(); + expectElementExists(getRelatedListElement); + expectElementContains(getRelatedListElement, [mockRelatedEntries[0].name]); + expectElementDoesntExist(() => cy.contains('Source Video')); + } + ); }); }); @@ -226,18 +231,14 @@ describe('Related plugin', () => { }); it('should auto continue to next video after countdown', () => { - setupAndExpect( - {entryList: mockRelatedEntries, autoContinue: true, autoContinueTime: 1}, - loadPlayerAndSetMedia, - player => { - player.currentTime = player.duration; - cy.wait(1500).then(() => { - cy.window().then(win => { - expect((win as any).KalturaPlayer.getPlayer().sources.id).to.equal(mockRelatedEntries[0].id); - }); + setupAndExpect({entryList: mockRelatedEntries, autoContinue: true, autoContinueTime: 1}, loadPlayerAndSetMedia, player => { + player.currentTime = player.duration; + cy.wait(1500).then(() => { + cy.window().then(win => { + expect((win as any).KalturaPlayer.getPlayer().sources.id).to.equal(mockRelatedEntries[0].id); }); - } - ); + }); + }); }); }); diff --git a/cypress/e2e/utils/expects.ts b/cypress/e2e/utils/expects.ts index f386448..3bcb0dd 100644 --- a/cypress/e2e/utils/expects.ts +++ b/cypress/e2e/utils/expects.ts @@ -31,4 +31,4 @@ export const expectRelatedListVisible = (pluginConfig: any) => { setupAndExpect(pluginConfig, loadPlayerAndSetMedia, () => { expectElementExists(getRelatedListElement); }); -}; \ No newline at end of file +}; diff --git a/cypress/e2e/utils/setup.ts b/cypress/e2e/utils/setup.ts index 5460f96..4d4a427 100644 --- a/cypress/e2e/utils/setup.ts +++ b/cypress/e2e/utils/setup.ts @@ -12,15 +12,15 @@ export const mockRelatedEntries = [ { id: '1', name: 'Test Video 1', - "poster": "./media/thumbnail1.jpg", - "mediaUrl": "./media/video1.mp4", + poster: './media/thumbnail1.jpg', + mediaUrl: './media/video1.mp4', duration: 120 }, { id: '2', name: 'Test Video 2', - "poster": "./media/thumbnail2.jpg", - "mediaUrl": "./media/video2.mp4", + poster: './media/thumbnail2.jpg', + mediaUrl: './media/video2.mp4', duration: 90 } ]; @@ -77,6 +77,5 @@ export const loadPlayerAndSetMedia = (pluginConf: any, playbackConf: Record _player; - diff --git a/cypress/e2e/utils/values.ts b/cypress/e2e/utils/values.ts index 211ba8a..5434605 100644 --- a/cypress/e2e/utils/values.ts +++ b/cypress/e2e/utils/values.ts @@ -1,2 +1,2 @@ export const DEFAULT_COUNTDOWN_TIME = 5; -export const DEFAULT_ENTRIES_LIMIT = 12; \ No newline at end of file +export const DEFAULT_ENTRIES_LIMIT = 12; diff --git a/cypress/public/index.html b/cypress/public/index.html index 88cc8c8..b412e06 100644 --- a/cypress/public/index.html +++ b/cypress/public/index.html @@ -1,12 +1,12 @@ - - - - - Related plugin tests - - - -
- + + + + + Related plugin tests + + + +
+ diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json index e5255b5..ca40099 100644 --- a/cypress/tsconfig.json +++ b/cypress/tsconfig.json @@ -1,9 +1,6 @@ { "extends": "../tsconfig.json", - "include": [ - "../../node_modules/cypress", - "**/*.ts" - ], + "include": ["../../node_modules/cypress", "**/*.ts"], "compilerOptions": { "noEmit": false, "sourceMap": false, diff --git a/docs/api.md b/docs/api.md index b112fc0..25dc45d 100644 --- a/docs/api.md +++ b/docs/api.md @@ -2,111 +2,111 @@ ### Table of Contents -* [CloseButton][1] - * [Parameters][2] -* [Countdown][3] - * [Parameters][4] -* [DurationLabel][5] - * [Parameters][6] -* [EntryImage][7] - * [Parameters][8] -* [BaseNextEntry][9] - * [Parameters][10] -* [GridEntry][11] - * [Parameters][12] -* [ListEntryPlaceholder][13] - * [Parameters][14] -* [ListEntry][15] - * [Parameters][16] -* [MinimalGridEntry][17] - * [Parameters][18] -* [MinimalNextEntry][19] - * [Parameters][20] -* [NextEntry][21] - * [Parameters][22] -* [ListToggleButton][23] - * [Parameters][24] -* [MultilineText][25] - * [Parameters][26] -* [Next][27] - * [Parameters][28] -* [ArrowLeft][29] - * [Parameters][30] -* [ArrowLeftDisabled][31] -* [ArrowRight][32] - * [Parameters][33] -* [ArrowRightDisabled][34] -* [PrePlaybackPlayOverlayWrapper][35] - * [Parameters][36] -* [RelatedCountdownPreview][37] -* [RelatedGrid][38] - * [Parameters][39] -* [RelatedListHeader][40] -* [RelatedList][41] - * [Parameters][42] -* [RelatedOverlay][43] - * [Parameters][44] -* [Scrollable][45] - * [Parameters][46] -* [Thumbnail][47] - * [Parameters][48] -* [RelatedManager][49] - * [load][50] - * [Parameters][51] - * [startOver][52] - * [playNext][53] - * [Parameters][54] - * [playSelected][55] - * [Parameters][56] - * [clearNextEntryTimeout][57] - * [listen][58] - * [Parameters][59] - * [unlisten][60] - * [Parameters][61] - * [getImageUrl][62] - * [Parameters][63] - * [isHiddenByUser][64] - * [Parameters][65] - * [showOnPlaybackPaused][66] - * [countdownTime][67] - * [entries][68] - * [Parameters][69] - * [entries][70] - * [isInitialized][71] - * [isGridVisible][72] - * [isGridVisible][73] - * [Parameters][74] - * [isListVisible][75] - * [isListVisible][76] - * [Parameters][77] -* [Related][78] - * [Parameters][79] - * [defaultConfig][80] - * [isValid][81] - * [loadMedia][82] - * [addRelatedListComponents][83] -* [RelatedEvent][84] - * [RELATED\_CLICKED][85] - * [RELATED\_SELECTED][86] -* [RelatedInternalEvent][87] - * [RELATED\_ENTRIES\_CHANGED][88] - * [HIDDEN\_STATE\_CHANGED][89] - * [GRID\_VISIBILITY\_CHANGED][90] - * [LIST\_VISIBILITY\_CHANGED][91] -* [RelatedConfig][92] - * [autoContinue][93] - * [autoContinueTime][94] - * [showOnPlaybackPaused][95] - * [playlistId][96] - * [entryList][97] - * [sourcesList][98] - * [useContext][99] - * [entriesByContextLimit][100] - * [position][101] - * [expandMode][102] -* [Sources][103] - * [internalIndex][104] - * [durationText][105] +- [CloseButton][1] + - [Parameters][2] +- [Countdown][3] + - [Parameters][4] +- [DurationLabel][5] + - [Parameters][6] +- [EntryImage][7] + - [Parameters][8] +- [BaseNextEntry][9] + - [Parameters][10] +- [GridEntry][11] + - [Parameters][12] +- [ListEntryPlaceholder][13] + - [Parameters][14] +- [ListEntry][15] + - [Parameters][16] +- [MinimalGridEntry][17] + - [Parameters][18] +- [MinimalNextEntry][19] + - [Parameters][20] +- [NextEntry][21] + - [Parameters][22] +- [ListToggleButton][23] + - [Parameters][24] +- [MultilineText][25] + - [Parameters][26] +- [Next][27] + - [Parameters][28] +- [ArrowLeft][29] + - [Parameters][30] +- [ArrowLeftDisabled][31] +- [ArrowRight][32] + - [Parameters][33] +- [ArrowRightDisabled][34] +- [PrePlaybackPlayOverlayWrapper][35] + - [Parameters][36] +- [RelatedCountdownPreview][37] +- [RelatedGrid][38] + - [Parameters][39] +- [RelatedListHeader][40] +- [RelatedList][41] + - [Parameters][42] +- [RelatedOverlay][43] + - [Parameters][44] +- [Scrollable][45] + - [Parameters][46] +- [Thumbnail][47] + - [Parameters][48] +- [RelatedManager][49] + - [load][50] + - [Parameters][51] + - [startOver][52] + - [playNext][53] + - [Parameters][54] + - [playSelected][55] + - [Parameters][56] + - [clearNextEntryTimeout][57] + - [listen][58] + - [Parameters][59] + - [unlisten][60] + - [Parameters][61] + - [getImageUrl][62] + - [Parameters][63] + - [isHiddenByUser][64] + - [Parameters][65] + - [showOnPlaybackPaused][66] + - [countdownTime][67] + - [entries][68] + - [Parameters][69] + - [entries][70] + - [isInitialized][71] + - [isGridVisible][72] + - [isGridVisible][73] + - [Parameters][74] + - [isListVisible][75] + - [isListVisible][76] + - [Parameters][77] +- [Related][78] + - [Parameters][79] + - [defaultConfig][80] + - [isValid][81] + - [loadMedia][82] + - [addRelatedListComponents][83] +- [RelatedEvent][84] + - [RELATED_CLICKED][85] + - [RELATED_SELECTED][86] +- [RelatedInternalEvent][87] + - [RELATED_ENTRIES_CHANGED][88] + - [HIDDEN_STATE_CHANGED][89] + - [GRID_VISIBILITY_CHANGED][90] + - [LIST_VISIBILITY_CHANGED][91] +- [RelatedConfig][92] + - [autoContinue][93] + - [autoContinueTime][94] + - [showOnPlaybackPaused][95] + - [playlistId][96] + - [entryList][97] + - [sourcesList][98] + - [useContext][99] + - [entriesByContextLimit][100] + - [position][101] + - [expandMode][102] +- [Sources][103] + - [internalIndex][104] + - [durationText][105] ## CloseButton @@ -114,10 +114,10 @@ Button to toggle off related list visibility. ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.onClick` **[Function][107]** onClick event handler. - * `props.closeText` **[string][108]** Button label. + - `props.onClick` **[Function][107]** onClick event handler. + - `props.closeText` **[string][108]** Button label. ## Countdown @@ -125,9 +125,9 @@ Counts down from an initial number of seconds and renders the number of seconds ### Parameters -* `props` **[object][106]** Countdown props. +- `props` **[object][106]** Countdown props. - * `props.seconds` **[number][109]** Initial number of seconds. + - `props.seconds` **[number][109]** Initial number of seconds. ## DurationLabel @@ -135,10 +135,10 @@ Displays formatted duration of entry playback, or a live label for live entries. ### Parameters -* `props` **[object][106]** Duration label props. -* `type` **[string][108]** Entry type. -* `duration` **[number][109]** Entry playack duration. -* `liveText` **[string][108]** Live label text. +- `props` **[object][106]** Duration label props. +- `type` **[string][108]** Entry type. +- `duration` **[number][109]** Entry playack duration. +- `liveText` **[string][108]** Live label text. ## EntryImage @@ -146,14 +146,14 @@ Entry image with a duration label. ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.poster` **[string][108]** Entry thumbnail url. - * `props.type` **[string][108]** Entry type. - * `props.duration` **[number][109]** Entry playback duration. - * `props.width` **[number][109]** Image width. - * `props.height` **[number][109]** Image height. - * `props.children` **[object][106]** Child components. + - `props.poster` **[string][108]** Entry thumbnail url. + - `props.type` **[string][108]** Entry type. + - `props.duration` **[number][109]** Entry playback duration. + - `props.width` **[number][109]** Image width. + - `props.height` **[number][109]** Image height. + - `props.children` **[object][106]** Child components. ## BaseNextEntry @@ -161,22 +161,22 @@ Base next entry component with entry image. ### Parameters -* `props` **[object][106]** Component props. - - * `props.title` **[string][108]** Entry title. - * `props.id` **[number][109]** Internal id. - * `props.children` **[object][106]** Component children. - * `props.duration` **[number][109]** Entry playback duration. - * `props.type` **[string][108]** Entry type. - * `props.poster` **[string][108]** Entry poster - * `props.entryDimensions` **[object][106]** Entry render dimensions. - * `props.live` **[string][108]** Live label. - * `props.description` **[string][108]** Entry description. - * `props.countdown` **[number][109]** Countdown for playback of next entry. - * `props.sizeClass` **[string][108]** CSS Class for entry of specific size. - * `props.cancelLabel` **[string][108]** Cancel button label. - * `props.playNowLabel` **[string][108]** Play now button label. - * `props.alwaysShowButtons` **[boolean][110]** If true indicates that buttons should be visible even when countdown is not in progress. +- `props` **[object][106]** Component props. + + - `props.title` **[string][108]** Entry title. + - `props.id` **[number][109]** Internal id. + - `props.children` **[object][106]** Component children. + - `props.duration` **[number][109]** Entry playback duration. + - `props.type` **[string][108]** Entry type. + - `props.poster` **[string][108]** Entry poster + - `props.entryDimensions` **[object][106]** Entry render dimensions. + - `props.live` **[string][108]** Live label. + - `props.description` **[string][108]** Entry description. + - `props.countdown` **[number][109]** Countdown for playback of next entry. + - `props.sizeClass` **[string][108]** CSS Class for entry of specific size. + - `props.cancelLabel` **[string][108]** Cancel button label. + - `props.playNowLabel` **[string][108]** Play now button label. + - `props.alwaysShowButtons` **[boolean][110]** If true indicates that buttons should be visible even when countdown is not in progress. ## GridEntry @@ -184,16 +184,16 @@ Full size grid entry with image and title. ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.title` **[string][108]** Entry title. - * `props.id` **[number][109]** Internal entry id. - * `props.children` **ComponentChildren** Component children. - * `props.duration` **[number][109]** Entry duration. - * `props.type` **[string][108]** Entry type. - * `props.poster` **[string][108]** Entry poster. - * `props.entryDimensions` **[object][106]** Dimensions for entry render. - * `props.live` **[string][108]** Live label. + - `props.title` **[string][108]** Entry title. + - `props.id` **[number][109]** Internal entry id. + - `props.children` **ComponentChildren** Component children. + - `props.duration` **[number][109]** Entry duration. + - `props.type` **[string][108]** Entry type. + - `props.poster` **[string][108]** Entry poster. + - `props.entryDimensions` **[object][106]** Dimensions for entry render. + - `props.live` **[string][108]** Live label. ## ListEntryPlaceholder @@ -201,9 +201,9 @@ Animated placeholder for a list entry. ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.isVertical` **[boolean][110]** If true, indicates that the entry placeholder is vertical, otherwise it's horizontal. + - `props.isVertical` **[boolean][110]** If true, indicates that the entry placeholder is vertical, otherwise it's horizontal. ## ListEntry @@ -211,16 +211,16 @@ List entry with image and title. ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.title` **[string][108]** Entry title. - * `props.id` **[number][109]** Entry internal id. - * `props.duration` **[number][109]** Entry duration. - * `props.type` **[string][108]** Entry type. - * `props.poster` **[string][108]** Entry poster. - * `props.entryDimensions` **[object][106]** Dimensions for entry render. - * `props.live` **[string][108]** Live label. - * `props.isVertical` **[boolean][110]** If true, indicates that the list entry is vertical, if false indicates that it's horizontal. + - `props.title` **[string][108]** Entry title. + - `props.id` **[number][109]** Entry internal id. + - `props.duration` **[number][109]** Entry duration. + - `props.type` **[string][108]** Entry type. + - `props.poster` **[string][108]** Entry poster. + - `props.entryDimensions` **[object][106]** Dimensions for entry render. + - `props.live` **[string][108]** Live label. + - `props.isVertical` **[boolean][110]** If true, indicates that the list entry is vertical, if false indicates that it's horizontal. ## MinimalGridEntry @@ -228,16 +228,16 @@ Minimal grid entry with image and title. ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.title` **[string][108]** Entry title. - * `props.id` **[number][109]** Entry internal id. - * `props.children` **[object][106]** Component children. - * `props.duration` **[number][109]** Entry duration. - * `props.type` **[string][108]** Entry type. - * `props.poster` **[string][108]** Entry poster. - * `props.entryDimensions` **[object][106]** Dimensions for entry render. - * `props.live` **[string][108]** Live label. + - `props.title` **[string][108]** Entry title. + - `props.id` **[number][109]** Entry internal id. + - `props.children` **[object][106]** Component children. + - `props.duration` **[number][109]** Entry duration. + - `props.type` **[string][108]** Entry type. + - `props.poster` **[string][108]** Entry poster. + - `props.entryDimensions` **[object][106]** Dimensions for entry render. + - `props.live` **[string][108]** Live label. ## MinimalNextEntry @@ -246,20 +246,20 @@ Wraps BaseNextEntry. ### Parameters -* `props` **[object][106]** Component props. - - * `props.title` **[string][108]** Entry title. - * `props.id` **[number][109]** Entry internal id. - * `props.children` **[object][106]** Component children. - * `props.duration` **[number][109]** Entry playback duration. - * `props.type` **[string][108]** Entry type. - * `props.poster` **[string][108]** Entry poster. - * `props.entryDimensions` **[object][106]** Entry render dimensions. - * `props.live` **[string][108]** Live label. - * `props.description` **[string][108]** Entry description. - * `props.countdown` **[number][109]** Countdown for playback of next entry. - * `props.upNext` **[string][108]** Up next label. - * `props.upNextIn` **[string][108]** Up next in label. +- `props` **[object][106]** Component props. + + - `props.title` **[string][108]** Entry title. + - `props.id` **[number][109]** Entry internal id. + - `props.children` **[object][106]** Component children. + - `props.duration` **[number][109]** Entry playback duration. + - `props.type` **[string][108]** Entry type. + - `props.poster` **[string][108]** Entry poster. + - `props.entryDimensions` **[object][106]** Entry render dimensions. + - `props.live` **[string][108]** Live label. + - `props.description` **[string][108]** Entry description. + - `props.countdown` **[number][109]** Countdown for playback of next entry. + - `props.upNext` **[string][108]** Up next label. + - `props.upNextIn` **[string][108]** Up next in label. ## NextEntry @@ -268,20 +268,20 @@ Wraps BaseNextEntry. ### Parameters -* `props` **[object][106]** Component props. - - * `props.title` **[string][108]** Entry title. - * `props.id` **[number][109]** Entry internal id. - * `props.children` **[object][106]** Component children. - * `props.duration` **[number][109]** Entry playback duration. - * `props.type` **[string][108]** Entry type. - * `props.poster` **[string][108]** Entry poster. - * `props.entryDimensions` **[object][106]** Entry render dimensions. - * `props.live` **[string][108]** Live label. - * `props.description` **[string][108]** Entry description. - * `props.countdown` **[number][109]** Countdown for playback of next entry. - * `props.upNext` **[string][108]** Up next label. - * `props.upNextIn` **[string][108]** Up next in label. +- `props` **[object][106]** Component props. + + - `props.title` **[string][108]** Entry title. + - `props.id` **[number][109]** Entry internal id. + - `props.children` **[object][106]** Component children. + - `props.duration` **[number][109]** Entry playback duration. + - `props.type` **[string][108]** Entry type. + - `props.poster` **[string][108]** Entry poster. + - `props.entryDimensions` **[object][106]** Entry render dimensions. + - `props.live` **[string][108]** Live label. + - `props.description` **[string][108]** Entry description. + - `props.countdown` **[number][109]** Countdown for playback of next entry. + - `props.upNext` **[string][108]** Up next label. + - `props.upNextIn` **[string][108]** Up next in label. ## ListToggleButton @@ -289,10 +289,10 @@ Related list toggle button. ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.disabled` **[boolean][110]** Disabled state indication. - * `props.relatedVideosText` **[string][108]** Button label. + - `props.disabled` **[boolean][110]** Disabled state indication. + - `props.relatedVideosText` **[string][108]** Button label. ## MultilineText @@ -300,11 +300,11 @@ Displays text truncated to a set number of lines, with an ellipsis in case of ov ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.text` **[string][108]** Text to be displayed. - * `props.lineHeight` **[number][109]** Line height for a single line of text. - * `props.lines` **[number][109]** Max number of visible lines. + - `props.text` **[string][108]** Text to be displayed. + - `props.lineHeight` **[number][109]** Line height for a single line of text. + - `props.lines` **[number][109]** Max number of visible lines. ## Next @@ -312,12 +312,12 @@ Play next entry button. ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.showPreview` **[boolean][110]** Indicates whether next entry preview should be visible. - * `props.onLoaded` **[Function][107]** Handler for component loaded event. - * `props.onUnloaded` **[Function][107]** Handler for component loaded event. - * `props.onClick` **[Function][107]** onClick event handler. + - `props.showPreview` **[boolean][110]** Indicates whether next entry preview should be visible. + - `props.onLoaded` **[Function][107]** Handler for component loaded event. + - `props.onUnloaded` **[Function][107]** Handler for component loaded event. + - `props.onClick` **[Function][107]** onClick event handler. ## ArrowLeft @@ -325,9 +325,9 @@ Left pagination arrow. ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.onClick` **[Function][107]** onClick event handler. + - `props.onClick` **[Function][107]** onClick event handler. ## ArrowLeftDisabled @@ -339,9 +339,9 @@ Right pagination arrow. ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.onClick` **[Function][107]** onClick event handler. + - `props.onClick` **[Function][107]** onClick event handler. ## ArrowRightDisabled @@ -353,15 +353,15 @@ Overlay which is displayed on playback end instead of the default playback end o ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.isPlaybackEnded` **[boolean][110]** Indicates whether playback has ended. - * `props.sizeBreakpoint` **[string][108]** Player size breakpoint. - * `props.relatedManager` **[RelatedManager][49]** Related manager instance. - * `props.onLoaded` **[Function][107]** Handler for component loaded event. - * `props.onUnloaded` **[Function][107]** Handler for component unloaded event. - * `props.next` **[string][108]** Next label text. - * `props.startOver` **[string][108]** Start over label text. + - `props.isPlaybackEnded` **[boolean][110]** Indicates whether playback has ended. + - `props.sizeBreakpoint` **[string][108]** Player size breakpoint. + - `props.relatedManager` **[RelatedManager][49]** Related manager instance. + - `props.onLoaded` **[Function][107]** Handler for component loaded event. + - `props.onUnloaded` **[Function][107]** Handler for component unloaded event. + - `props.next` **[string][108]** Next label text. + - `props.startOver` **[string][108]** Start over label text. ## RelatedCountdownPreview @@ -374,11 +374,11 @@ The grid view changes according to player size. ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.data` **[object][106]** Related entries data. - * `props.countdown` **[number][109]** Next entry auto continue countdown time. - * `props.sizeBreakpoint` **[string][108]** Player size breakpoint. + - `props.data` **[object][106]** Related entries data. + - `props.countdown` **[number][109]** Next entry auto continue countdown time. + - `props.sizeBreakpoint` **[string][108]** Player size breakpoint. ## RelatedListHeader @@ -390,10 +390,10 @@ Displays related entries in horizontal or vertical list. ### Parameters -* `props` **[object][106]** Component props. -* `relatedManager` **[RelatedManager][49]** Related manager instance. -* `relatedVideosText` **[string][108]** Related videos label text. -* `isVertical` **[boolean][110]** Indicates whether the list is vertical. +- `props` **[object][106]** Component props. +- `relatedManager` **[RelatedManager][49]** Related manager instance. +- `relatedVideosText` **[string][108]** Related videos label text. +- `isVertical` **[boolean][110]** Indicates whether the list is vertical. ## RelatedOverlay @@ -401,12 +401,12 @@ Overlay which wraps the related grid and controls its layout and visibility. ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.relatedManager` **[RelatedManager][49]** Related manager instance. - * `props.isPaused` **[boolean][110]** Indicates whether playback is paused. - * `props.isPlaybackEnded` **[boolean][110]** Indicates whether playback has ended. - * `props.sizeBreakpoint` **[string][108]** Player size breakpoint. + - `props.relatedManager` **[RelatedManager][49]** Related manager instance. + - `props.isPaused` **[boolean][110]** Indicates whether playback is paused. + - `props.isPlaybackEnded` **[boolean][110]** Indicates whether playback has ended. + - `props.sizeBreakpoint` **[string][108]** Player size breakpoint. ## Scrollable @@ -414,10 +414,10 @@ Wraps around child components and displays a styled scrollbar with vertical or h ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.children` **ComponentChildren** Child components. - * `props.isVertical` **[boolean][110]** If true, scrollbar has vertical orientation, otherwise - it has horizontal orientation. + - `props.children` **ComponentChildren** Child components. + - `props.isVertical` **[boolean][110]** If true, scrollbar has vertical orientation, otherwise - it has horizontal orientation. ## Thumbnail @@ -425,11 +425,11 @@ Image with fixed dimensions and a fallback option for images which failed to loa ### Parameters -* `props` **[object][106]** Component props. +- `props` **[object][106]** Component props. - * `props.poster` **[string][108]** Base image url. (optional, default `''`) - * `props.width` **[number][109]** Image width. - * `props.height` **[number][109]** Image height. + - `props.poster` **[string][108]** Base image url. (optional, default `''`) + - `props.width` **[number][109]** Image width. + - `props.height` **[number][109]** Image height. ## RelatedManager @@ -441,7 +441,7 @@ Load related entries list according to the configuration options. #### Parameters -* `config` **[RelatedConfig][92]** related plugin config +- `config` **[RelatedConfig][92]** related plugin config ### startOver @@ -453,7 +453,7 @@ Play the next entry in the list. #### Parameters -* `seconds` **[number][109]?** seconds to wait before next entry playback +- `seconds` **[number][109]?** seconds to wait before next entry playback ### playSelected @@ -461,7 +461,7 @@ Play the selected entry. #### Parameters -* `internalIndex` **[number][109]** index of the entry to be played +- `internalIndex` **[number][109]** index of the entry to be played ### clearNextEntryTimeout @@ -473,8 +473,8 @@ Register an event listener for a plugin event. #### Parameters -* `name` **[string][108]** event name -* `listener` **any** callback function +- `name` **[string][108]** event name +- `listener` **any** callback function ### unlisten @@ -482,8 +482,8 @@ Unregister an event listener for a plugin event. #### Parameters -* `name` **[string][108]** event name -* `listener` **any** callback function +- `name` **[string][108]** event name +- `listener` **any** callback function ### getImageUrl @@ -492,7 +492,7 @@ If possible, get an entry with specific dimensions. #### Parameters -* `url` **[string][108]** initial thumbnail url +- `url` **[string][108]** initial thumbnail url Returns **any** {(Promise\)} promise which returns the full url or null if failed to load @@ -504,7 +504,7 @@ Type: [boolean][110] #### Parameters -* `isHiddenByUser` **[boolean][110]** +- `isHiddenByUser` **[boolean][110]** ### showOnPlaybackPaused @@ -524,13 +524,13 @@ Returns **[number][109]** ### entries -Set related entries array and fire RELATED\_ENTRIES\_CHANGED event. +Set related entries array and fire RELATED_ENTRIES_CHANGED event. Type: [Array][111]<[Sources][103]> #### Parameters -* `entries` **[Array][111]<[Sources][103]>** +- `entries` **[Array][111]<[Sources][103]>** ### entries @@ -558,13 +558,13 @@ Returns **[boolean][110]** ### isGridVisible -Set grid visibility inidication and fire GRID\_VISIBILITY\_CHANGED event. +Set grid visibility inidication and fire GRID_VISIBILITY_CHANGED event. Type: [boolean][110] #### Parameters -* `isGridVisible` **[boolean][110]** +- `isGridVisible` **[boolean][110]** ### isListVisible @@ -582,7 +582,7 @@ Type: [boolean][110] #### Parameters -* `isListVisible` **[boolean][110]** +- `isListVisible` **[boolean][110]** ## Related @@ -590,9 +590,9 @@ Type: [boolean][110] ### Parameters -* `name` **[string][108]** Plugin name. -* `player` **KalturaPlayerTypes.Player** Current kaltura player instance. -* `config` **[RelatedConfig][92]** Related plugin configuation. +- `name` **[string][108]** Plugin name. +- `player` **KalturaPlayerTypes.Player** Current kaltura player instance. +- `config` **[RelatedConfig][92]** Related plugin configuation. ### defaultConfig @@ -616,13 +616,13 @@ Inject related list panel and list toggle icon components into the ui. Related plugin events which are dispatched externally through the player. -### RELATED\_CLICKED +### RELATED_CLICKED Fired when the user toggles list visibility on. Type: [string][108] -### RELATED\_SELECTED +### RELATED_SELECTED Fired when the user clicks on a grid or list entry. @@ -634,25 +634,25 @@ Related plugin events which are dispatched internally inside the plugin. Type: [string][108] -### RELATED\_ENTRIES\_CHANGED +### RELATED_ENTRIES_CHANGED Fired every time the list of related entries is changed. Type: [string][108] -### HIDDEN\_STATE\_CHANGED +### HIDDEN_STATE_CHANGED Fired when the a next entry autoplay is manually cancelled by the user on playback end. Type: [string][108] -### GRID\_VISIBILITY\_CHANGED +### GRID_VISIBILITY_CHANGED Fired when the related grid is shown or hidden. Type: [string][108] -### LIST\_VISIBILITY\_CHANGED +### LIST_VISIBILITY_CHANGED Fired when the related list is shown or hidden. @@ -741,223 +741,113 @@ Formatted entry duration text. Type: [string][108] [1]: #closebutton - [2]: #parameters - [3]: #countdown - [4]: #parameters-1 - [5]: #durationlabel - [6]: #parameters-2 - [7]: #entryimage - [8]: #parameters-3 - [9]: #basenextentry - [10]: #parameters-4 - [11]: #gridentry - [12]: #parameters-5 - [13]: #listentryplaceholder - [14]: #parameters-6 - [15]: #listentry - [16]: #parameters-7 - [17]: #minimalgridentry - [18]: #parameters-8 - [19]: #minimalnextentry - [20]: #parameters-9 - [21]: #nextentry - [22]: #parameters-10 - [23]: #listtogglebutton - [24]: #parameters-11 - [25]: #multilinetext - [26]: #parameters-12 - [27]: #next - [28]: #parameters-13 - [29]: #arrowleft - [30]: #parameters-14 - [31]: #arrowleftdisabled - [32]: #arrowright - [33]: #parameters-15 - [34]: #arrowrightdisabled - [35]: #preplaybackplayoverlaywrapper - [36]: #parameters-16 - [37]: #relatedcountdownpreview - [38]: #relatedgrid - [39]: #parameters-17 - [40]: #relatedlistheader - [41]: #relatedlist - [42]: #parameters-18 - [43]: #relatedoverlay - [44]: #parameters-19 - [45]: #scrollable - [46]: #parameters-20 - [47]: #thumbnail - [48]: #parameters-21 - [49]: #relatedmanager - [50]: #load - [51]: #parameters-22 - [52]: #startover - [53]: #playnext - [54]: #parameters-23 - [55]: #playselected - [56]: #parameters-24 - [57]: #clearnextentrytimeout - [58]: #listen - [59]: #parameters-25 - [60]: #unlisten - [61]: #parameters-26 - [62]: #getimageurl - [63]: #parameters-27 - [64]: #ishiddenbyuser - [65]: #parameters-28 - [66]: #showonplaybackpaused - [67]: #countdowntime - [68]: #entries - [69]: #parameters-29 - [70]: #entries-1 - [71]: #isinitialized - [72]: #isgridvisible - [73]: #isgridvisible-1 - [74]: #parameters-30 - [75]: #islistvisible - [76]: #islistvisible-1 - [77]: #parameters-31 - [78]: #related - [79]: #parameters-32 - [80]: #defaultconfig - [81]: #isvalid - [82]: #loadmedia - [83]: #addrelatedlistcomponents - [84]: #relatedevent - [85]: #related_clicked - [86]: #related_selected - [87]: #relatedinternalevent - [88]: #related_entries_changed - [89]: #hidden_state_changed - [90]: #grid_visibility_changed - [91]: #list_visibility_changed - [92]: #relatedconfig - [93]: #autocontinue - [94]: #autocontinuetime - [95]: #showonplaybackpaused-1 - [96]: #playlistid - [97]: #entrylist - [98]: #sourceslist - [99]: #usecontext - [100]: #entriesbycontextlimit - [101]: #position - [102]: #expandmode - [103]: #sources - [104]: #internalindex - [105]: #durationtext - [106]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object - [107]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function - [108]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String - [109]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number - [110]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean - [111]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array diff --git a/package.json b/package.json index 754fd07..b358ee0 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,8 @@ "html5 player" ], "dependencies": { - "copyfiles": "^2.4.1" + "@playkit-js/playkit-js": "^0.84.18-canary.0-f050ffc", + "copyfiles": "^2.4.1", + "shaka-player": "4.3.0" } } diff --git a/src/components/entry/entry.scss b/src/components/entry/entry.scss index 8c3ca65..581c0ea 100644 --- a/src/components/entry/entry.scss +++ b/src/components/entry/entry.scss @@ -1,35 +1,39 @@ @-webkit-keyframes change-background-color { 0% { - background-color: rgba(255, 255, 255, .2); + background-color: rgba(255, 255, 255, 0.2); } - 25%, 50% { - background-color: rgba(255, 255, 255, .3); + 25%, + 50% { + background-color: rgba(255, 255, 255, 0.3); } - 75%, 100% { - background-color: rgba(255, 255, 255, .2); + 75%, + 100% { + background-color: rgba(255, 255, 255, 0.2); } } @keyframes change-background-color { 0% { - background-color: rgba(255, 255, 255, .2); + background-color: rgba(255, 255, 255, 0.2); } - 25%, 50% { - background-color: rgba(255, 255, 255, .3); + 25%, + 50% { + background-color: rgba(255, 255, 255, 0.3); } - 75%, 100% { - background-color: rgba(255, 255, 255, .2); + 75%, + 100% { + background-color: rgba(255, 255, 255, 0.2); } } @mixin animate-background { - background-color: rgba(255, 255, 255, .2); + background-color: rgba(255, 255, 255, 0.2); -webkit-animation: 2s ease-in-out infinite change-background-color; - animation: 2s ease-in-out infinite change-background-color; + animation: 2s ease-in-out infinite change-background-color; } button { @@ -98,7 +102,7 @@ button { /* specific entries */ .next-entry { - flex-shrink: 0; + flex-shrink: 0; .entry-content { padding: 8px 16px 16px; @@ -224,16 +228,16 @@ button { border-radius: 4px; padding: 8px; position: relative; - + .entry-content { background-color: transparent; width: 100%; } - + .thumbnail-wrapper * { border-radius: 4px; } - + &.horizontal { height: 100%; @@ -244,13 +248,13 @@ button { .thumbnail-wrapper { height: 100%; } - + .entry-content { margin-top: 4px; height: 35px; } } - + &.vertical { display: flex; flex-direction: row; @@ -282,7 +286,6 @@ button { .entry-content { margin-left: 16px; } - } .entry-image { @@ -310,7 +313,7 @@ button { } &:hover { - background-color: rgba(255, 255, 255, .12); + background-color: rgba(255, 255, 255, 0.12); .entry-content { background-color: transparent; diff --git a/src/components/list-toggle-button/list-toggle-button.scss b/src/components/list-toggle-button/list-toggle-button.scss index 91f59e7..3fead81 100644 --- a/src/components/list-toggle-button/list-toggle-button.scss +++ b/src/components/list-toggle-button/list-toggle-button.scss @@ -1,7 +1,7 @@ -.list-toggle-button { - &:disabled { - &:hover { - background-color: transparent; - } +.list-toggle-button { + &:disabled { + &:hover { + background-color: transparent; } -} \ No newline at end of file + } +} diff --git a/src/components/multiline-text/multiline-text.scss b/src/components/multiline-text/multiline-text.scss index 8f3c3e5..57a8e64 100644 --- a/src/components/multiline-text/multiline-text.scss +++ b/src/components/multiline-text/multiline-text.scss @@ -1,5 +1,5 @@ .multiline-text { - -webkit-box-orient: vertical; + -webkit-box-orient: vertical; display: -webkit-box; height: 100%; overflow: hidden; diff --git a/src/components/related-countdown-preview/related-countdown-preview.scss b/src/components/related-countdown-preview/related-countdown-preview.scss index 89c27fc..832ea2b 100644 --- a/src/components/related-countdown-preview/related-countdown-preview.scss +++ b/src/components/related-countdown-preview/related-countdown-preview.scss @@ -1,67 +1,67 @@ @-webkit-keyframes slideIn { - 0% { - right: -160px; - } - 100% { - right: 0; - } + 0% { + right: -160px; + } + 100% { + right: 0; + } } @keyframes slideIn { - 0% { - right: -160px; - } - 100% { - right: 0; - } + 0% { + right: -160px; + } + 100% { + right: 0; + } } .related-countdown-preview { - -webkit-animation: slideIn 500ms 500ms forwards; - animation: slideIn 500ms 500ms forwards; - background-color: rgba(0, 0, 0, .7); - border-radius: 4px; - bottom: 0; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 8px 60px -16px rgba(0, 0, 0, 0.2); - cursor: pointer; - display: flex; - font-size: 14px; - right: -160px; - position: absolute; - transition: opacity 400ms, bottom 300ms; - width: 280px; + -webkit-animation: slideIn 500ms 500ms forwards; + animation: slideIn 500ms 500ms forwards; + background-color: rgba(0, 0, 0, 0.7); + border-radius: 4px; + bottom: 0; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 8px 60px -16px rgba(0, 0, 0, 0.2); + cursor: pointer; + display: flex; + font-size: 14px; + right: -160px; + position: absolute; + transition: opacity 400ms, bottom 300ms; + width: 280px; - &.minimal { - width: 160px; - } - - &:hover { - background-color: #000; - } - - img { - border-radius: 4px 0 0 4px; + &.minimal { + width: 160px; + } + + &:hover { + background-color: #000; + } + + img { + border-radius: 4px 0 0 4px; + } + + .content { + margin: 8px; + + .header { + color: #ccc; + display: flex; + justify-content: space-between; + margin-bottom: 8px; + + .close-button { + position: absolute; + top: 5px; + right: -3px; + } } - - .content { - margin: 8px; - - .header { - color: #ccc; - display: flex; - justify-content: space-between; - margin-bottom: 8px; - - .close-button { - position: absolute; - top: 5px; - right: -3px; - } - } - - .entry-text { - color: #fff; - width: 136px; - } + + .entry-text { + color: #fff; + width: 136px; } -} \ No newline at end of file + } +} diff --git a/src/components/related-grid/related-grid.scss b/src/components/related-grid/related-grid.scss index 69475fb..e8a9c44 100644 --- a/src/components/related-grid/related-grid.scss +++ b/src/components/related-grid/related-grid.scss @@ -99,9 +99,9 @@ $arrow-margin-y-xl: 127px; $grid-gap: 16px; -@include grid-animation("m", $grid-width-m); -@include grid-animation("l", $grid-width-l); -@include grid-animation("xl", $grid-width-xl); +@include grid-animation('m', $grid-width-m); +@include grid-animation('l', $grid-width-l); +@include grid-animation('xl', $grid-width-xl); .medium { @include arrow($arrow-margin-x-m, $arrow-margin-y-m); @@ -113,14 +113,14 @@ $grid-gap: 16px; &.slide-left { .grid-pages { -webkit-animation-name: slide-left-m; - animation-name: slide-left-m; - } + animation-name: slide-left-m; + } } &.slide-right { .grid-pages { -webkit-animation-name: slide-right-m; - animation-name: slide-right-m; - } + animation-name: slide-right-m; + } } } } @@ -135,14 +135,14 @@ $grid-gap: 16px; &.slide-left { .grid-pages { -webkit-animation-name: slide-left-l; - animation-name: slide-left-l; - } + animation-name: slide-left-l; + } } &.slide-right { .grid-pages { -webkit-animation-name: slide-right-l; - animation-name: slide-right-l; - } + animation-name: slide-right-l; + } } } } @@ -157,14 +157,14 @@ $grid-gap: 16px; &.slide-left { .grid-pages { -webkit-animation-name: slide-left-xl; - animation-name: slide-left-xl; - } + animation-name: slide-left-xl; + } } &.slide-right { .grid-pages { -webkit-animation-name: slide-right-xl; - animation-name: slide-right-xl; - } + animation-name: slide-right-xl; + } } } } @@ -177,11 +177,11 @@ $grid-gap: 16px; display: flex; position: absolute; -webkit-animation-duration: 0.3s; - animation-duration: 0.3s; + animation-duration: 0.3s; -webkit-animation-timing-function: ease; - animation-timing-function: ease; + animation-timing-function: ease; -webkit-animation-direction: normal; - animation-direction: normal; + animation-direction: normal; .grid-page { display: flex; diff --git a/src/components/related-list/related-list.scss b/src/components/related-list/related-list.scss index a422ab1..ce11b0b 100644 --- a/src/components/related-list/related-list.scss +++ b/src/components/related-list/related-list.scss @@ -1,32 +1,32 @@ .related-list { - -webkit-backdrop-filter: blur(8px); - backdrop-filter: blur(8px); - background: rgba(0, 0, 0, 0.6); - font-family: sans-serif; - height: 100%; - padding: 16px; - padding-right: 4px; - width: 100%; + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + background: rgba(0, 0, 0, 0.6); + font-family: sans-serif; + height: 100%; + padding: 16px; + padding-right: 4px; + width: 100%; - .header { - display: flex; - justify-content: space-between; - margin-right: 13px; + .header { + display: flex; + justify-content: space-between; + margin-right: 13px; - .title { - color: white; - font-size: 16px; - font-style: normal; - font-weight: 700; - line-height: 21px; - overflow: hidden; - padding-top: 2px; - text-overflow: ellipsis; - white-space: nowrap; - } + .title { + color: white; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 21px; + overflow: hidden; + padding-top: 2px; + text-overflow: ellipsis; + white-space: nowrap; } + } - & > div:nth-child(2) { - height: calc(100% - 24px); - } -} \ No newline at end of file + & > div:nth-child(2) { + height: calc(100% - 24px); + } +} diff --git a/src/components/scrollable/scrollable.scss b/src/components/scrollable/scrollable.scss index bbde7bc..7ab81bc 100644 --- a/src/components/scrollable/scrollable.scss +++ b/src/components/scrollable/scrollable.scss @@ -1,31 +1,31 @@ .scrollable { - display: flex; - width: 100%; + display: flex; + width: 100%; - &.horizontal { - flex-direction: row; - overflow: auto hidden; - } - &.vertical { - flex-direction: column; - height: 100%; - overflow: hidden auto; - } - &::-webkit-scrollbar { - height: 4px; - width: 4px; - } - &::-webkit-scrollbar-track { - background: rgba(33, 33, 33, 0.9); - visibility: hidden; - } - &::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 0.3); - border-radius: 3px; - visibility: hidden; - } - &.scrolling::-webkit-scrollbar-track, - &.scrolling::-webkit-scrollbar-thumb { - visibility: visible; - } + &.horizontal { + flex-direction: row; + overflow: auto hidden; + } + &.vertical { + flex-direction: column; + height: 100%; + overflow: hidden auto; + } + &::-webkit-scrollbar { + height: 4px; + width: 4px; + } + &::-webkit-scrollbar-track { + background: rgba(33, 33, 33, 0.9); + visibility: hidden; + } + &::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 0.3); + border-radius: 3px; + visibility: hidden; + } + &.scrolling::-webkit-scrollbar-track, + &.scrolling::-webkit-scrollbar-thumb { + visibility: visible; + } } diff --git a/src/components/thumbnail/thumbnail.scss b/src/components/thumbnail/thumbnail.scss index f860967..1d25aa0 100644 --- a/src/components/thumbnail/thumbnail.scss +++ b/src/components/thumbnail/thumbnail.scss @@ -9,4 +9,4 @@ visibility: hidden; width: auto; } -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index 894eb46..a3987cb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -643,6 +643,14 @@ js-logger "^1.6.0" ua-parser-js "1.0.2" +"@playkit-js/playkit-js@^0.84.18-canary.0-f050ffc": + version "0.84.18-canary.0-f050ffc" + resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js/-/playkit-js-0.84.18-canary.0-f050ffc.tgz#4d734ba2f8c3e4b83fe83100e0930f07797b3865" + integrity sha512-1aaXIFWDsnE/+M5VJW2e8sz0vorCTh1kFaGD1PXteZ0y2det8bXAnRmQfGKHCSEJjP72pjOCZZp4dugSOyp9bw== + dependencies: + js-logger "^1.6.0" + ua-parser-js "^1.0.36" + "@playkit-js/ui-managers@canary": version "1.3.9-canary.0-01b272e" resolved "https://registry.yarnpkg.com/@playkit-js/ui-managers/-/ui-managers-1.3.9-canary.0-01b272e.tgz#48157c4fe5c37a2660c192f459b66bd4e04e2394" @@ -7122,6 +7130,13 @@ setprototypeof@1.2.0: resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424" integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw== +shaka-player@4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-4.3.0.tgz#1508e1949232b2a47718ce69524b63c777e69f1e" + integrity sha512-3obEhekQc6UZJFKWWlPkF6AHO4uA7vQpYDm23LXwuau3+UVlulkYyoZLbAvs1/WJ89h/PA0wk5W97FYPTzgNAw== + dependencies: + eme-encryption-scheme-polyfill "^2.1.1" + shaka-player@4.3.5: version "4.3.5" resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-4.3.5.tgz#304d60ad867fb7a0780b850b32a9614296b842db" @@ -7824,6 +7839,11 @@ ua-parser-js@1.0.2: resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.2.tgz#e2976c34dbfb30b15d2c300b2a53eac87c57a775" integrity sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg== +ua-parser-js@^1.0.36: + version "1.0.40" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.40.tgz#ac6aff4fd8ea3e794a6aa743ec9c2fc29e75b675" + integrity sha512-z6PJ8Lml+v3ichVojCiB8toQJBuwR42ySM4ezjXIqXK3M0HczmKQ3LF4rhU55PfD99KEEXQG6yb7iOMyvYuHew== + uc.micro@^1.0.1: version "1.0.6" resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"