├── .env
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   ├── feature_request.md
    │   └── question.md
    └── workflows
    │   ├── deploy.yml
    │   └── main.yml
├── .gitignore
├── .nvmrc
├── LICENSE
├── README.md
├── e2e
    ├── advanced.spec.ts
    ├── basic.spec.ts
    ├── history.spec.ts
    ├── page.ts
    └── runner.js
├── manual-tests.md
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    ├── robots.txt
    └── ui.png
├── src
    ├── App.css
    ├── App.tsx
    ├── __tests__
    │   └── store
    │   │   ├── actions
    │   │       ├── history.test.ts
    │   │       ├── player.test.ts
    │   │       ├── playerOptions.test.ts
    │   │       ├── streamDetails.test.ts
    │   │       └── ui.test.ts
    │   │   ├── model
    │   │       ├── history.test.ts
    │   │       ├── messageResolver.test.ts
    │   │       ├── request-interceptors.test.ts
    │   │       ├── sharing.test.ts
    │   │       └── streamDetails.test.ts
    │   │   └── reducers
    │   │       ├── history.test.ts
    │   │       ├── information.test.ts
    │   │       ├── player.test.ts
    │   │       ├── playerOptions.test.ts
    │   │       ├── streamDetails.test.ts
    │   │       └── ui.test.ts
    ├── components
    │   ├── Header.tsx
    │   ├── HeaderRows.tsx
    │   ├── JsonEditor.tsx
    │   ├── SidebarSwitch.tsx
    │   └── react-split.d.ts
    ├── graphics
    │   ├── replay-logo.svg
    │   ├── streamlab-logo.svg
    │   └── vimond-logo.svg
    ├── index.css
    ├── index.tsx
    ├── panels
    │   ├── Advanced.tsx
    │   ├── Basic.tsx
    │   ├── FormHistory.tsx
    │   ├── HeaderBar.tsx
    │   ├── Information.tsx
    │   ├── Player.tsx
    │   ├── PlayerOptions.tsx
    │   ├── Sharing.tsx
    │   ├── Sidebar.tsx
    │   ├── StreamDetails.tsx
    │   └── VideoStreamerResolver.tsx
    ├── react-app-env.d.ts
    ├── serviceWorker.ts
    └── store
    │   ├── actions
    │       ├── history.ts
    │       ├── index.ts
    │       ├── player.ts
    │       ├── playerOptions.ts
    │       ├── streamDetails.ts
    │       └── ui.ts
    │   ├── migrations.ts
    │   ├── model
    │       ├── history.ts
    │       ├── messageResolver.ts
    │       ├── messages.ts
    │       ├── request-interceptors
    │       │   ├── hlsjsRequestInterceptor.ts
    │       │   ├── index.ts
    │       │   └── shakaRequestInterceptor.ts
    │       ├── sharing-old.js
    │       ├── sharing.ts
    │       └── streamDetails.ts
    │   ├── persistentStore.ts
    │   └── reducers
    │       ├── history.ts
    │       ├── index.ts
    │       ├── information.ts
    │       ├── player.ts
    │       ├── playerOptions.ts
    │       ├── streamDetails.ts
    │       └── ui.ts
├── tsconfig.json
└── yarn.lock


/.env:
--------------------------------------------------------------------------------
1 | REACT_APP_VERSION=$npm_package_version
2 | PORT=3030
3 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Report a problem with Streamlab
 4 | title: '[BUG] '
 5 | labels: 'bug'
 6 | 
 7 | ---
 8 | 
 9 | **Is the problem actually a Streamlab bug?**
10 | 
11 | Streamlab and its player Replay facilitates stream playback with different technologies. However, for this it mainly relies on native browser features and/or third party libraries.
12 | 
13 | Bug reports that in reality appear to be requests for troubleshooting playback issues with specific streams, will mainly be rejected.
14 | 
15 | Before considering submitting a bug report, please get an understanding of whether the experienced issue is in fact a Streamlab bug, or if it is related to the stream or underlying third party player libraries.
16 | 
17 | If you are not confident Streamlab is capable of playing your stream properly, you can test it in the demo/test pages for the third party player libraries themselves:
18 | 
19 |  https://hls-js.netlify.com/demo
20 |  http://shaka-player-demo.appspot.com/
21 |  https://developers.canal-plus.com/rx-player/
22 |  
23 | If your stream also doesn't play here, refrain from submitting a Streamlab bug report.
24 | 
25 | **Describe the bug**
26 | 
27 | A clear and concise description of what the bug is.
28 | 
29 | **To Reproduce**
30 | 
31 | Use the Sharing feature to a share your stream setup/form data needed for reproduction:
32 | 
33 | [Paste link here]
34 | 
35 | Further steps to reproduce the behavior:
36 | 
37 | 1. Click on '....'
38 | 2. Scroll down to '....'
39 | 3. See error [possibly in the Developer console]
40 | 
41 | **Expected behavior**
42 | 
43 | A clear and concise description of what you expected to happen.
44 | 
45 | **Screenshots**
46 | 
47 | If applicable, add screenshots to help explain your problem.
48 | 
49 | **Desktop (please complete the following information):**
50 | 
51 |  - OS: [e.g. iOS]
52 |  - Browser [e.g. chrome, safari]
53 |  - Version [e.g. 22]
54 | 
55 | **Smartphone (please complete the following information):**
56 | 
57 |  - Device: [e.g. iPhone6]
58 |  - OS: [e.g. iOS8.1]
59 |  - Browser [e.g. stock browser, safari]
60 |  - Version [e.g. 22]
61 | 
62 | **Additional context**
63 | 
64 |  - Video/stream type, characteristics (e.g. DVR, subtitles) and stream technologies (DASH, HLS) related to the problem.
65 |  - Add any other context about the problem here.
66 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: '[FEATURE] '
 5 | 
 6 | ---
 7 | 
 8 | **Is your suggestion within the scope of the Streamlab project?**
 9 | 
10 | Some features should perhaps be added as part of the underlying player libraries, or in general externally to this project.
11 | 
12 | **Is your feature request related to a problem? Please describe.**
13 | 
14 | A clear and concise description of what the problem is.
15 | 
16 | **Describe the solution you'd like**
17 | 
18 | A clear and concise description of what you want to happen.
19 | 
20 | **Describe alternatives you've considered**
21 | 
22 | A clear and concise description of any alternative solutions or features you've considered.
23 | 
24 | **Additional context**
25 | 
26 | Add any other context or screenshots about the feature request here.
27 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/question.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Question
3 | about: Anything about Streamlab, except a bug report or feature request
4 | title: '[QUESTION] '
5 | labels: question
6 | 
7 | ---
8 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy to GitHub pages
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - 'v[0-9]+.[0-9]+.[0-9]+'
 7 | 
 8 | jobs:
 9 |   deploy:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - name: Checkout
13 |         uses: actions/checkout@v2.3.1
14 |         with:
15 |           persist-credentials: false
16 | 
17 |       - name: Set up Node.js 12
18 |         uses: actions/setup-node@v1
19 |         with:
20 |           node-version: '12'
21 | 
22 |       - name: Install dependencies
23 |         run: yarn install
24 | 
25 |       - name: Test
26 |         run: |
27 |           yarn lint
28 |           yarn test
29 | 
30 |       - name: Build
31 |         run: yarn build
32 | 
33 |       - name: Deploy 🚀
34 |         uses: JamesIves/github-pages-deploy-action@3.7.1
35 |         with:
36 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
37 |           BRANCH: gh-pages
38 |           FOLDER: build
39 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: Test
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ master ]
 6 |     tags-ignore:
 7 |       - 'v[0-9]+.[0-9]+.[0-9]+*'
 8 |   workflow_dispatch:
 9 | 
10 | jobs:
11 |   unittests:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |     - uses: actions/checkout@v2
15 |     - uses: actions/setup-node@v1
16 |       with:
17 |         node-version: 14
18 |     - run: yarn install
19 |     - run: yarn test
20 |       env:
21 |         CI: true
22 |   e2esetup:
23 |     runs-on: windows-latest
24 |     steps:
25 |       - uses: actions/checkout@v1
26 |       - uses: actions/setup-node@v1
27 |         with:
28 |           node-version: 14
29 |       - name: Cache node_modules
30 |         uses: actions/cache@v1
31 |         with:
32 |           path: node_modules
33 |           key: e2e-yarn-${{ hashFiles('**\yarn.lock') }}
34 |           restore-keys: e2e-yarn-
35 |       - run: yarn
36 |   e2etests:
37 |     needs: [e2esetup]
38 |     runs-on: windows-latest
39 |     strategy:
40 |       matrix:
41 |         browser: [chrome,firefox]
42 |     steps:
43 |       - uses: actions/checkout@v1
44 |       - uses: actions/setup-node@v1
45 |         with:
46 |           node-version: 14
47 |       - name: Restore node_modules cache
48 |         uses: actions/cache@v1
49 |         with:
50 |           path: node_modules
51 |           key: e2e-yarn-${{ hashFiles('**\yarn.lock') }}
52 |           restore-keys: e2e-yarn-
53 |       - run: yarn
54 |       - name: Run test
55 |         run: yarn test:e2e
56 |         env:
57 |           BROWSER: ${{ matrix.browser }}
58 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .npmrc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | .idea
27 | *.iml
28 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 14.15.4
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <img src="/src/graphics/streamlab-logo.svg" alt="Streamlab" width="30%"/>
 2 | 
 3 | [Streamlab](https://vimond.github.io/streamlab/) is a cross-technology stream test tool for the browser, created by, and used by [Vimond](https://vimond.com) developers.
 4 | 
 5 | Experiment with, verify, or troubleshoot MPEG-DASH, HLS, CMAF, and smooth streams, or progressive video files. 
 6 | 
 7 | The Streamlab provides a consistent and convenient user interface for playing adaptive streams through [Shaka Player](https://github.com/google/shaka-player), [RxPlayer](https://github.com/canalplus/rx-player), and [HLS.js](https://github.com/video-dev/hls.js), or directly through the browser's internal stream support in the HTML `<video>` element.
 8 | 
 9 | It is built upon [Replay](https://github.com/vimond/replay), a full-featured open source React video player component facilitating adaptive stream playback, wrapping the mentioned adaptive streaming players.
10 | 
11 | ## Features
12 | 
13 | Streamlab is intended to bring convenience to trying out streams in the browser.
14 | 
15 | Fill in stream URLs and configure playback, and the setup will be persisted between browser sessions (and closed/reopened tabs). All playback attempts are added to a history, and earlier stream URLs and other details can be restored and retried. 
16 | 
17 | It displays context-aware messages providing information and guidance on technical stream details, and attempts to bring error details up to the surface when the stream doesn't play.
18 | 
19 | Streamlab supports live/DVR streams, DRM, subtitles, multiple audio tracks, according to the features of the adaptive player libraries' mentioned above. All modern browsers are supported.
20 | 
21 | Streamlab provides auto-detection of stream technologies (formats), and selects a preferred player library for playing it back. This can be overridden with manual selection of the player libraries mentioned above.
22 | 
23 | [Try it out here](https://vimond.github.io/streamlab/).
24 | 
25 | ## Working with the source code
26 | 
27 | Sometimes it can be convenient running Streamlab locally in order to tweak extra settings, add more debugging, or get the benefit of less browser limitations through `localhost`. In brief, follow these steps to get it up and running, assuming having [Node.js](https://nodejs.org) 10.16 or newer installed on your computer, along with npm.
28 | 
29 | 1. Clone this repo to your local computer.
30 | 2. Run `npm install`.
31 | 3. Run `npm start`.
32 | 
33 | Streamlab is a React app, written with [TypeScript](https://www.typescriptlang.org/), and built with the magnificent UI library [Chakra UI](https://chakra-ui.com/).
34 | 
35 | It is simply an unejected [Create React App](https://create-react-app.dev/docs/getting-started/), and adheres to the templates and routines provided by this scaffold. Along with that comes using [Jest](https://jestjs.io/) for unit tests, while [Prettier](https://prettier.io/) is added on top for consistent code formatting. [Yarn 1.x](https://classic.yarnpkg.com/lang/en/) has been used for dependency management, however npm should also work fine.
36 | 
37 | ## About
38 | 
39 | Streamlab is an open source initiative from [Vimond Media Solutions](https://vimond.com).
40 | 
41 | ### License
42 | 
43 | Streamlab is released under the [Apache 2.0 License](https://github.com/vimond/streamlab/blob/master/LICENSE).
44 | 
45 | ### Authors
46 | 
47 | Streamlab is developed by Tor Erik Alræk.
48 | 


--------------------------------------------------------------------------------
/e2e/basic.spec.ts:
--------------------------------------------------------------------------------
 1 | import { page } from './page';
 2 | 
 3 | const { sharing, basic, info, top, history, player, fixture } = page;
 4 | 
 5 | fixture('Basic playback');
 6 | 
 7 | const streamUrl = 'https://vimond.github.io/replay/public/example-media/adaptive.m3u8';
 8 | 
 9 | test('Inputting stream URL.', async (t) => {
10 |   const firstMessage = 'Auto detected stream type is HLS. Press Play to load it into the player.';
11 |   const secondMessage = /The player will use the HLS.js v(.*?) library for playing this stream./;
12 |   const shareUrl =
13 |     '?s={%22streamDetails%22:{%22streamResource%22:{%22url%22:%22https:%2F%2Fvimond.github.io%2Freplay%2Fpublic%2Fexample-media%2Fadaptive.m3u8%22,%22technology%22:0}}}';
14 | 
15 |   await t
16 |     .expect(basic.playButton.hasAttribute('disabled'))
17 |     .ok()
18 |     .typeText(basic.streamUrlField, streamUrl, { paste: true }) // No one types a URL key by key.
19 |     .expect(basic.playButton.hasAttribute('disabled'))
20 |     .notOk()
21 |     .expect(info.messageList.nth(0).textContent)
22 |     .contains(firstMessage)
23 |     .expect(info.messageList.nth(1).textContent)
24 |     .match(secondMessage)
25 |     .click(top.tabs.sharing)
26 |     .expect(sharing.shareUrlField.textContent)
27 |     .contains(shareUrl);
28 | });
29 | 
30 | test('Starting and ending playback.', async (t) => {
31 |   await t
32 |     .typeText(basic.streamUrlField, streamUrl, { paste: true })
33 |     .click(basic.playButton)
34 |     .expect(player.videoElement.getAttribute('src'))
35 |     .ok()
36 |     .click(player.controls.mute)
37 |     .wait(3000)
38 |     .expect(player.videoElement.duration)
39 |     .gt(10)
40 |     .hover(player.replay)
41 |     .click(player.controls.exit)
42 |     .expect(player.videoElement.getAttribute('src'))
43 |     .notOk()
44 |     .click(basic.streamUrlField)
45 |     .pressKey('enter')
46 |     .expect(player.videoElement.getAttribute('src'))
47 |     .ok()
48 |     .wait(3000)
49 |     .hover(player.replay)
50 |     .click(player.controls.exit)
51 |     .click(top.tabs.history)
52 |     .expect(history.entries.nth(1).exists)
53 |     .notOk() // Two identical playback starts give one entry.
54 |     .expect(history.entries.nth(0).textContent)
55 |     .contains('HLS stream on vimond.github.io');
56 | });
57 | 
58 | test('Incorrect stream technology selection with error reporting.', async (t) => {
59 |   await t
60 |     .typeText(basic.streamUrlField, streamUrl, { paste: true })
61 |     .click(basic.streamTechnologyButton)
62 |     .click(basic.progressiveVideoButton)
63 |     .click(basic.playButton)
64 |     .expect(info.messageList.nth(-1).textContent)
65 |     .contains('MEDIA_ERR_SRC_NOT_SUPPORTED')
66 |     .click(top.tabs.history)
67 |     .expect(history.entries.nth(0).textContent)
68 |     .contains('Progressive video stream on vimond.github.io')
69 |     .expect(history.entries.nth(0).find('.chakra-badge').withText('ERR').exists)
70 |     .ok()
71 |     .expect(top.tabs.info.find('.chakra-badge').withText('1').exists)
72 |     .ok();
73 | });
74 | 


--------------------------------------------------------------------------------
/e2e/history.spec.ts:
--------------------------------------------------------------------------------
  1 | import { page } from './page';
  2 | 
  3 | const { advanced, info, alert, top, history, player, fixture } = page;
  4 | 
  5 | fixture('Form history side panel');
  6 | 
  7 | const streamUrl = 'https://vimond.github.io/replay/public/example-media/adaptive.m3u8';
  8 | 
  9 | const fillHistory = (t: TestController) =>
 10 |   t
 11 |     .click(top.header.advancedSwitch)
 12 |     .click(advanced.clearButton)
 13 |     .click(alert.clearFormsButton)
 14 |     .typeText(advanced.streamDetails.streamUrlField, streamUrl, { paste: true })
 15 |     .typeText(advanced.streamDetails.startOffsetField, '16')
 16 |     .click(advanced.playButton)
 17 | 
 18 |     .click(advanced.clearButton)
 19 |     .click(alert.clearFormsButton)
 20 |     .click(advanced.stopButton)
 21 | 
 22 |     .click(advanced.clearButton)
 23 |     .click(alert.clearFormsButton)
 24 |     .typeText(advanced.streamDetails.streamUrlField, streamUrl + 'xyz', { paste: true })
 25 |     .click(advanced.playButton)
 26 | 
 27 |     .click(advanced.clearButton)
 28 |     .click(alert.clearFormsButton)
 29 |     .click(advanced.stopButton)
 30 | 
 31 |     .click(advanced.clearButton)
 32 |     .click(alert.clearFormsButton)
 33 |     .typeText(advanced.streamDetails.streamUrlField, streamUrl + '?some=parameters', { paste: true })
 34 |     .click(advanced.accordionButtons.playerOptions)
 35 |     .click(advanced.playerOptions.playerLibraryButton)
 36 |     .click(advanced.playerOptions.shakaPlayerButton)
 37 |     .click(advanced.playButton)
 38 | 
 39 |     .click(advanced.clearButton)
 40 |     .click(alert.clearFormsButton)
 41 |     .click(advanced.stopButton)
 42 |     .click(top.tabs.history);
 43 | 
 44 | test('Restore history entry into form', async (t) => {
 45 |   await fillHistory(t)
 46 |     .expect(advanced.streamDetails.streamUrlField.value)
 47 |     .eql('')
 48 |     .expect(advanced.streamDetails.startOffsetField.value)
 49 |     .eql('')
 50 | 
 51 |     .click(history.entries.nth(2))
 52 |     .click(history.selectedEntry.restoreButton)
 53 |     .expect(advanced.streamDetails.streamUrlField.value)
 54 |     .eql(streamUrl)
 55 |     .expect(advanced.streamDetails.startOffsetField.value)
 56 |     .eql('') // Currently we don't store the start offset in the history.
 57 |     .expect(advanced.playerOptions.playerLibraryButton.visible)
 58 |     .ok()
 59 | 
 60 |     .click(history.entries.nth(0))
 61 |     .click(history.selectedEntry.restoreButton)
 62 |     .expect(advanced.streamDetails.streamUrlField.value)
 63 |     .eql(streamUrl + '?some=parameters')
 64 |     .expect(advanced.playerOptions.playerLibraryButton.visible)
 65 |     .notOk()
 66 |     .expect(advanced.playerOptions.shakaPlayerButton.visible)
 67 |     .ok()
 68 |     .click(advanced.playButton)
 69 |     .expect(player.videoElement.getAttribute('src'))
 70 |     .ok()
 71 |     .click(top.tabs.info)
 72 |     .expect(info.hasMessageContaining('In Player options, the Shaka Player'))
 73 |     .ok();
 74 | });
 75 | 
 76 | test('Give history entry name', async (t) => {
 77 |   await fillHistory(t)
 78 |     .click(history.entries.nth(2))
 79 |     .expect(history.selectedEntry.nameField.value)
 80 |     .eql('')
 81 |     .typeText(history.selectedEntry.nameField, 'My usual test stream')
 82 |     .expect(history.entries.nth(2).textContent)
 83 |     .match(/My usual test stream/); // Leading space in actual DOM.
 84 | });
 85 | 
 86 | test('Delete history entry', async (t) => {
 87 |   await fillHistory(t)
 88 |     .expect(history.entries.nth(0).child('*').withText('ERR').exists)
 89 |     .notOk()
 90 |     .click(history.entries.nth(0))
 91 |     .click(history.selectedEntry.deleteButton)
 92 |     .expect(history.entries.count)
 93 |     .eql(2)
 94 |     .expect(history.entries.nth(0).child('*').withText('ERR').exists)
 95 |     .ok();
 96 | });
 97 | 
 98 | test('Delete unnamed history entries', async (t) => {
 99 |   await fillHistory(t)
100 |     .click(history.entries.nth(2))
101 |     .expect(history.selectedEntry.nameField.value)
102 |     .eql('')
103 |     .typeText(history.selectedEntry.nameField, 'My precious test stream', { paste: true })
104 |     .click(history.clearUnnamedButton)
105 |     .click(history.deleteUnnamedAlert.clearUnnamedButton)
106 |     .expect(history.entries.count)
107 |     .eql(1)
108 |     .expect(history.entries.nth(0).textContent)
109 |     .match(/My precious test stream/);
110 | });
111 | 
112 | test('Delete all history entries', async (t) => {
113 |   await fillHistory(t)
114 |     .click(history.entries.nth(2))
115 |     .expect(history.selectedEntry.nameField.value)
116 |     .eql('')
117 |     .typeText(history.selectedEntry.nameField, 'My precious test stream', { paste: true })
118 |     .click(history.clearHistoryButton)
119 |     .click(history.deleteHistoryAlert.clearHistoryButton)
120 |     .expect(history.entries.count)
121 |     .eql(0);
122 | });
123 | 


--------------------------------------------------------------------------------
/e2e/page.ts:
--------------------------------------------------------------------------------
  1 | import { Selector } from 'testcafe';
  2 | 
  3 | const isWindows = () => process.platform.startsWith('win');
  4 | const resizeWindow = async (t: TestController) => isWindows() && (await t.resizeWindow(5000, 200));
  5 | 
  6 | const tabs = Selector('*').withAttribute('role', 'tab');
  7 | const basicForm = Selector('*').withAttribute('aria-label', 'Basic form');
  8 | const advancedForms = Selector('*').withAttribute('aria-label', 'Advanced forms');
  9 | const streamDetailsForm = Selector('*').withAttribute('aria-label', 'Stream details form');
 10 | const playerOptionsForm = Selector('*').withAttribute('aria-label', 'Player options form');
 11 | const messageList = Selector('*').withAttribute('aria-label', 'Information panel').find('li');
 12 | const historyList = Selector('*').withAttribute('aria-label', 'Form history panel').find('li');
 13 | const selectedHistoryEntry = Selector('*').withAttribute('aria-label', 'Form history entry');
 14 | 
 15 | // Click latest history entry and get details.
 16 | // Extract details from share URL.
 17 | 
 18 | export const simplerEncodeUri = (str: string) =>
 19 |   encodeURIComponent(str)
 20 |     .replace(/%7B/g, '{')
 21 |     .replace(/%7D/g, '}')
 22 |     .replace(/%2C/g, ',')
 23 |     .replace(/%3A/g, ':')
 24 |     .replace(/%5B/g, '[')
 25 |     .replace(/%5D/g, ']');
 26 | 
 27 | export const reproduceShareUrlField = (key: string, value: string | number | boolean) =>
 28 |   simplerEncodeUri(typeof value === 'string' ? `"${key}":"${value}"` : `"${key}":${value}`);
 29 | 
 30 | interface VideoElementSelector extends Selector {
 31 |   currentTime: Promise<number>;
 32 |   duration: Promise<number>;
 33 | }
 34 | 
 35 | export const page = {
 36 |   top: {
 37 |     header: {
 38 |       // Accessibility selector would have been based on going via <label for="...">
 39 |       advancedSwitch: Selector('#advanced-switch').nextSibling(),
 40 |     },
 41 |     tabs: {
 42 |       info: tabs.withText('Info'),
 43 |       history: tabs.withText('History'),
 44 |       sharing: tabs.withText('Sharing'),
 45 |     },
 46 |   },
 47 |   basic: {
 48 |     streamUrlField: basicForm.find('input[placeholder="Stream URL"]'),
 49 |     streamTechnologyButton: basicForm.find('button').withText('Autodetect stream technology'), // TODO: Select menu label instead
 50 |     progressiveVideoButton: basicForm.find('button').withText('Progressive video'),
 51 |     playButton: basicForm.find('button').withText('Play'),
 52 |   },
 53 |   advanced: {
 54 |     accordionButtons: {
 55 |       streamDetails: advancedForms.find('button').withText('Stream details'),
 56 |       playerOptions: advancedForms.find('button').withText('Player options'),
 57 |     },
 58 |     streamDetails: {
 59 |       streamUrlField: streamDetailsForm.find('input[placeholder="Stream URL"]'),
 60 |       addStreamHeader: streamDetailsForm.find('button').withText('Add header').nth(0),
 61 |       streamTechnologyButton: streamDetailsForm.find('button').withText('Auto').nth(0), // TODO: Menu label
 62 |       hlsButton: streamDetailsForm.find('button').withText('HLS'),
 63 |       drmLicenseUrlField: streamDetailsForm.find('input[placeholder="DRM license URL"]'),
 64 |       addLicenseHeader: streamDetailsForm.find('button').withText('Add header').nth(1),
 65 |       drmLicenseTechnologyButton: streamDetailsForm.find('button').withText('Widevine').nth(0), // TODO: Menu label
 66 |       headerName: streamDetailsForm.find('input[placeholder="Header name"]'),
 67 |       headerValue: streamDetailsForm.find('input[placeholder="Header value"]'),
 68 |       removeHeaderButton: streamDetailsForm.find('button').withAttribute('aria-label', 'Remove header'),
 69 |       drmCertificateUrlField: streamDetailsForm.find('input[placeholder="DRM certificate URL"]'),
 70 |       drmCertificateTechnologyButton: streamDetailsForm.find('button').withText('Widevine').nth(1), // TODO: Menu label
 71 |       subtitlesUrlField: streamDetailsForm.find('input[placeholder="Subtitles URL"]'),
 72 |       subtitlesFormatButton: streamDetailsForm.find('button').withText('Auto').nth(1), // TODO: Menu label
 73 |       webVttButton: streamDetailsForm.find('button').withText('WebVTT'),
 74 |       startOffsetField: streamDetailsForm.find('input[type=number]'), // More specific?
 75 |     },
 76 |     playerOptions: {
 77 |       playerLibraryButton: playerOptionsForm.find('button').withText('Automatic selection'),
 78 |       shakaPlayerButton: playerOptionsForm.find('button').withText('Shaka Player'),
 79 |       warningLevelButton: playerOptionsForm.find('button').withText('WARNING'),
 80 |       debugLevelButton: playerOptionsForm.find('button').withText('DEBUG'),
 81 |       playbackMonitorSwitch: Selector('#playback-monitor-switch').nextSibling(),
 82 |     },
 83 |     playButton: advancedForms.find('button').withExactText('Play'),
 84 |     stopButton: advancedForms.find('button').withText('Stop'),
 85 |     clearButton: advancedForms.find('button').withText('Clear all forms'),
 86 |   },
 87 |   alert: {
 88 |     clearFormsButton: Selector('section').withAttribute('role', 'alertdialog').find('button').withText('Clear forms'),
 89 |   },
 90 |   player: {
 91 |     replay: Selector('.replay'),
 92 |     controls: {
 93 |       mute: Selector('.replay-mute-toggle'),
 94 |       exit: Selector('.replay-exit-button'),
 95 |     },
 96 |     playbackMonitor: Selector('.replay-playback-monitor'),
 97 |     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 98 |     videoElement: <VideoElementSelector>Selector('video').addCustomDOMProperties({
 99 |       currentTime: (video) => (video as HTMLVideoElement).currentTime,
100 |       duration: (video) => (video as HTMLVideoElement).duration,
101 |     }),
102 |   },
103 |   info: {
104 |     messageList,
105 |     hasMessageContaining: (text: string) => messageList.withText(text).exists,
106 |   },
107 |   history: {
108 |     entries: historyList,
109 |     latestEntry: historyList.nth(0),
110 |     selectedEntry: {
111 |       nameField: selectedHistoryEntry.find('input[placeholder="Enter a name for this entry"]'),
112 |       streamUrl: selectedHistoryEntry.find('label').withText('Stream URL').nextSibling('input'),
113 |       streamHeaders: selectedHistoryEntry.find('label').withText('Stream headers').nextSibling('div').find('input'),
114 |       drmLicenseUrl: selectedHistoryEntry.find('label').withText('DRM license URL').nextSibling('input'),
115 |       subtitlesUrl: selectedHistoryEntry.find('label').withText('Subtitles URL').nextSibling('input'),
116 |       drmLicenseHeaders: selectedHistoryEntry
117 |         .find('label')
118 |         .withText('DRM license headers')
119 |         .nextSibling('div')
120 |         .find('input'),
121 |       drmLicenseTechnology: selectedHistoryEntry.find('label').withText('DRM license technology').nextSibling('input'),
122 |       drmCertificateUrl: selectedHistoryEntry.find('label').withText('DRM certificate URL').nextSibling('input'),
123 |       drmCertificateTechnology: selectedHistoryEntry
124 |         .find('label')
125 |         .withText('DRM certificate technology')
126 |         .nextSibling('input'),
127 |       playerLibrary: selectedHistoryEntry.find('label').withText('Player library').nextSibling('input'),
128 |       showPlaybackMonitor: selectedHistoryEntry
129 |         .find('label')
130 |         .withText('Show playback monitor')
131 |         .nextSibling('label')
132 |         .find('input'),
133 |       playerLogLevel: selectedHistoryEntry.find('label').withText('Player log level').nextSibling('input'),
134 |       restoreButton: selectedHistoryEntry.find('button').withText('Restore into forms'),
135 |       deleteButton: selectedHistoryEntry.find('button').withText('Delete from history'),
136 |     },
137 |     clearUnnamedButton: Selector('button').withText('Clear unnamed entries'),
138 |     clearHistoryButton: Selector('button').withText('Clear history'),
139 |     deleteUnnamedAlert: {
140 |       clearUnnamedButton: Selector('section')
141 |         .withAttribute('role', 'alertdialog')
142 |         .find('button')
143 |         .withText('Clear history entries with no name'),
144 |     },
145 |     deleteHistoryAlert: {
146 |       clearHistoryButton: Selector('section')
147 |         .withAttribute('role', 'alertdialog')
148 |         .find('button')
149 |         .withText('Clear history completely'),
150 |     },
151 |   },
152 |   sharing: {
153 |     shareUrlField: Selector('*')
154 |       .withAttribute('aria-label', 'Sharing panel')
155 |       .find('*')
156 |       .withAttribute('aria-label', 'Copyable share URL'),
157 |   },
158 |   fixture: (name: string) =>
159 |     fixture(name)
160 |       .page(process.env.TEST_PAGE || '0.0.0.0:5000/')
161 |       .beforeEach(async (t) => await resizeWindow(t)),
162 | };
163 | 


--------------------------------------------------------------------------------
/e2e/runner.js:
--------------------------------------------------------------------------------
 1 | import * as child_process from 'child_process';
 2 | import crossSpawn from 'cross-spawn';
 3 | 
 4 | // https://medium.com/better-programming/cross-browser-testing-with-testcafe-on-github-actions-49ec58ac855cs
 5 | 
 6 | const spawn = (command) => {
 7 |   const [c, ...args] = command.split(' ');
 8 |   const ps = crossSpawn(c, args);
 9 |   ps.stdout.on('data', (data) => console.log('' + data));
10 |   ps.stderr.on('data', (data) => console.error('' + data));
11 |   return ps;
12 | };
13 | 
14 | const build = () => {
15 |   const result = child_process.execSync(`yarn build`, { env: { ...process.env, PUBLIC_URL: '/' } });
16 |   console.info('' + result);
17 | };
18 | 
19 | const serve = () => {
20 |   const server = spawn('yarn serve');
21 |   server.on('close', (code) => console.info('' + code));
22 |   return server;
23 | };
24 | 
25 | const test = (server) => {
26 |   const browser = process.env.BROWSER || 'chrome';
27 |   const e2e = spawn(`yarn testcafe ${browser} e2e/**/*.spec.{js,ts} --hostname localhost`);
28 |   e2e.on('close', (code) => {
29 |     server.kill();
30 |     process.exit(code);
31 |   });
32 | };
33 | 
34 | build();
35 | test(serve());
36 | 


--------------------------------------------------------------------------------
/manual-tests.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ## Manual tests
 3 | 
 4 | ### PlayReady
 5 | 
 6 | ### FairPlay with request headers
 7 | 
 8 | ### Subtitles display
 9 | 
10 | ## Potential automatic end-to-end tests
11 | 
12 | ### License request headers
13 | 
14 | ### Subtitles
15 | 
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "streamlab",
 3 |   "version": "3.6.0",
 4 |   "homepage": "https://vimond.github.io/streamlab",
 5 |   "repository": "https://github.com/vimond/streamlab/",
 6 |   "author": "Tor Erik Alræk",
 7 |   "license": "Apache-2.0",
 8 |   "description": "Advanced stream test tool",
 9 |   "type": "module",
10 |   "dependencies": {
11 |     "@chakra-ui/icons": "^1.0.0",
12 |     "@chakra-ui/react": "^1.0.0",
13 |     "@emotion/react": "^11.0.0",
14 |     "@emotion/styled": "^11.0.0",
15 |     "@types/hls.js": "^0.13.3",
16 |     "@types/jest": "^24.9.0",
17 |     "@types/node": "12.7.4",
18 |     "@types/react": "^16.9.43",
19 |     "@types/react-dom": "^16.9.8",
20 |     "@types/react-redux": "^7.1.4",
21 |     "codemirror": "^5.55.0",
22 |     "cross-spawn": "^7.0.3",
23 |     "framer-motion": "^2.9.4",
24 |     "jsonlint-mod": "^1.7.5",
25 |     "mux.js": "^5.7.0",
26 |     "prettier": "^2.0.5",
27 |     "react": "^16.13.1",
28 |     "react-codemirror2": "^7.2.1",
29 |     "react-dom": "^16.13.1",
30 |     "react-redux": "^7.1.1",
31 |     "react-scripts": "3.4.1",
32 |     "react-split": "^2.0.9",
33 |     "redux": "^4.0.4",
34 |     "redux-devtools-extension": "2.13.8",
35 |     "redux-persist": "^6.0.0",
36 |     "redux-thunk": "^2.3.0",
37 |     "rx-player": "^3.26.0",
38 |     "serve": "^11.3.2",
39 |     "testcafe": "^1.11.0",
40 |     "typescript": "3.9.6",
41 |     "vimond-replay": "^3.2.0"
42 |   },
43 |   "scripts": {
44 |     "start": "react-scripts start",
45 |     "build": "react-scripts build",
46 |     "prettier": "prettier --write \"./**/*.ts*\"",
47 |     "test": "react-scripts test",
48 |     "lint": "eslint . --ext ts --ext tsx --ext js --ext jsx",
49 |     "test:e2e:live": "TEST_PAGE=0.0.0.0:3030/streamlab/ testcafe chrome e2e/*.spec.ts -L --hostname=localhost",
50 |     "serve": "serve -s build",
51 |     "test:e2e": "node e2e/runner.js",
52 |     "eject": "react-scripts eject"
53 |   },
54 |   "eslintConfig": {
55 |     "extends": "react-app"
56 |   },
57 |   "browserslist": {
58 |     "production": [
59 |       ">0.2%",
60 |       "not dead",
61 |       "not op_mini all"
62 |     ],
63 |     "development": [
64 |       "last 1 chrome version",
65 |       "last 1 firefox version",
66 |       "last 1 safari version"
67 |     ]
68 |   },
69 |   "prettier": {
70 |     "printWidth": 120,
71 |     "singleQuote": true
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vimond/streamlab/a6b696c3ef9589544df084997a9274b2d2e30b7b/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 9 |     <title>Streamlab</title>
10 |     <meta property="og:site_name" content="Streamlab"/>
11 |     <meta property="og:title" content="Test adaptive streams with convenience."/>
12 |     <meta property="og:image" content="https://vimond.github.io/streamlab/ui.png"/>
13 |   </head>
14 |   <body>
15 |     <noscript>You need to enable JavaScript to run this app.</noscript>
16 |     <div id="root"></div>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vimond/streamlab/a6b696c3ef9589544df084997a9274b2d2e30b7b/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vimond/streamlab/a6b696c3ef9589544df084997a9274b2d2e30b7b/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Streamlab",
 3 |   "name": "Streamlab",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }	 
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | 


--------------------------------------------------------------------------------
/public/ui.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vimond/streamlab/a6b696c3ef9589544df084997a9274b2d2e30b7b/public/ui.png


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .replay img, .replay svg, .replay video, canvas, audio, iframe, embed, object {
 2 |   display: inline;
 3 |   vertical-align: baseline;
 4 | }
 5 | 
 6 | .react-codemirror2 .CodeMirror {
 7 |   height: 8em;
 8 |   border-radius: 0.25rem;
 9 |   border: 1px solid #E2E8F0;
10 | }
11 | 
12 | .gutter {
13 |   cursor: col-resize;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react';
 2 | import { Box, Flex, ChakraProvider, extendTheme } from '@chakra-ui/react';
 3 | import Advanced from './panels/Advanced';
 4 | import Sidebar from './panels/Sidebar';
 5 | import Basic from './panels/Basic';
 6 | import Split from 'react-split';
 7 | import { AppState } from './store/reducers';
 8 | import { useDispatch, useSelector } from 'react-redux';
 9 | import Player from './panels/Player';
10 | import HeaderBar from './panels/HeaderBar';
11 | import { updatePaneSize } from './store/actions/ui';
12 | import { applyBrowserEnvironment } from './store/actions/streamDetails';
13 | 
14 | import 'vimond-replay/index.css';
15 | import './App.css';
16 | 
17 | // Needed for menu dropdown to overlay subsequent items with custom z-index.
18 | const theme = extendTheme({
19 |   components: {
20 |     Menu: {
21 |       baseStyle: {
22 |         list: {
23 |           zIndex: 5,
24 |         },
25 |       },
26 |     },
27 |   },
28 | });
29 | 
30 | const gutterStyle = () => ({ backgroundColor: '#E2E8F0', width: '4px' });
31 | 
32 | const App: React.FC = () => {
33 |   const advancedMode = useSelector((state: AppState) => state.ui.advancedMode);
34 |   const rightPaneWidth = useSelector((state: AppState) => state.ui.rightPaneWidth || 33);
35 |   const isRightPaneExpanded = useSelector((state: AppState) => state.ui.isRightPaneExpanded);
36 |   const dispatch = useDispatch();
37 |   const handlePaneResize = (sizes: number[]) => dispatch(updatePaneSize(sizes[1]));
38 | 
39 |   useEffect(() => {
40 |     dispatch(applyBrowserEnvironment(navigator.userAgent, document.location.search));
41 |   }, [dispatch]);
42 | 
43 |   return (
44 |     <ChakraProvider theme={theme}>
45 |       <Split
46 |         onDragEnd={handlePaneResize}
47 |         sizes={[100 - rightPaneWidth, rightPaneWidth]}
48 |         direction="horizontal"
49 |         cursor="col-resize"
50 |         gutterAlign="end"
51 |         gutterSize={4}
52 |         gutterStyle={gutterStyle}
53 |         collapsed={isRightPaneExpanded ? undefined : 1}
54 |         minSize={isRightPaneExpanded ? 300 : 0}
55 |         style={{ display: 'flex' }}
56 |       >
57 |         <Flex height="100vh" direction="column">
58 |           <HeaderBar />
59 |           <Box flex="1 1 auto" overflowY="auto">
60 |             {advancedMode ? <Advanced /> : <Basic />}
61 |             <Player />
62 |           </Box>
63 |         </Flex>
64 |         <Sidebar />
65 |       </Split>
66 |     </ChakraProvider>
67 |   );
68 | };
69 | 
70 | export default App;
71 | 


--------------------------------------------------------------------------------
/src/__tests__/store/actions/history.test.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   DELETE_HISTORY,
 3 |   DELETE_HISTORY_ENTRY,
 4 |   DELETE_UNNAMED_HISTORY_ENTRIES,
 5 |   RESTORE_HISTORY_ENTRY,
 6 |   SELECT_HISTORY_ENTRY,
 7 |   SET_HISTORY_LIST_FILTER,
 8 |   UPDATE_HISTORY_ENTRY_NAME,
 9 |   deleteHistory,
10 |   deleteHistoryEntry,
11 |   deleteUnnamedHistoryEntries,
12 |   HistoryEntryFilter,
13 |   restoreHistoryEntry,
14 |   selectHistoryEntry,
15 |   setHistoryFilter,
16 |   updateSelectedHistoryEntryName,
17 | } from '../../../store/actions/history';
18 | import { HistoryEntry } from '../../../store/model/history';
19 | import { BaseTech } from '../../../store/model/streamDetails';
20 | 
21 | const resourceData = {
22 |   url: '',
23 |   useProxy: false,
24 |   headers: [],
25 |   technology: BaseTech.AUTO,
26 | };
27 | 
28 | const historyEntry: HistoryEntry = {
29 |   timestamp: '2020-01-11T19:40:17.405',
30 |   name: '',
31 |   formData: {
32 |     streamDetails: {
33 |       streamResource: resourceData,
34 |       drmLicenseResource: resourceData,
35 |       drmCertificateResource: resourceData,
36 |       subtitlesResource: resourceData,
37 |     },
38 |   },
39 | };
40 | 
41 | describe('History actions', () => {
42 |   test('Select history entry', () => {
43 |     expect(selectHistoryEntry(historyEntry)).toEqual({
44 |       type: SELECT_HISTORY_ENTRY,
45 |       value: historyEntry,
46 |     });
47 |   });
48 |   test('Update selected history entry name', () => {
49 |     expect(updateSelectedHistoryEntryName('A history entry')).toEqual({
50 |       type: UPDATE_HISTORY_ENTRY_NAME,
51 |       value: 'A history entry',
52 |     });
53 |   });
54 |   test('Restore history entry to forms', () => {
55 |     expect(restoreHistoryEntry(historyEntry)).toEqual({
56 |       type: RESTORE_HISTORY_ENTRY,
57 |       value: historyEntry,
58 |     });
59 |   });
60 |   test('Delete history entry', () => {
61 |     expect(deleteHistoryEntry(historyEntry)).toEqual({
62 |       type: DELETE_HISTORY_ENTRY,
63 |       value: historyEntry,
64 |     });
65 |   });
66 |   test('Delete history', () => {
67 |     expect(deleteHistory()).toEqual({
68 |       type: DELETE_HISTORY,
69 |     });
70 |   });
71 |   test('Delete unnamed history entries', () => {
72 |     expect(deleteUnnamedHistoryEntries()).toEqual({
73 |       type: DELETE_UNNAMED_HISTORY_ENTRIES,
74 |     });
75 |   });
76 |   test('Set history filter', () => {
77 |     expect(setHistoryFilter(HistoryEntryFilter.UNNAMED)).toEqual({
78 |       type: SET_HISTORY_LIST_FILTER,
79 |       value: HistoryEntryFilter.UNNAMED,
80 |     });
81 |   });
82 | });
83 | 


--------------------------------------------------------------------------------
/src/__tests__/store/actions/playerOptions.test.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   SET_LOG_LEVEL,
 3 |   SET_PLAYER_CONFIGURATION,
 4 |   SET_PLAYER_LIBRARY,
 5 |   setLogLevel,
 6 |   setPlayerConfiguration,
 7 |   setPlayerLibrary,
 8 |   TOGGLE_PLAYBACK_MONITOR,
 9 |   togglePlaybackMonitor,
10 | } from '../../../store/actions/playerOptions';
11 | import { PlayerLogLevel } from '../../../store/model/streamDetails';
12 | 
13 | describe('Player options Redux actions', () => {
14 |   test('Setting player log level', () => {
15 |     expect(setLogLevel(PlayerLogLevel.DEBUG)).toEqual({
16 |       type: SET_LOG_LEVEL,
17 |       value: PlayerLogLevel.DEBUG,
18 |     });
19 |     expect(setLogLevel(PlayerLogLevel.NONE)).toEqual({
20 |       type: SET_LOG_LEVEL,
21 |       value: PlayerLogLevel.NONE,
22 |     });
23 |   });
24 |   test('Setting player library to use', () => {
25 |     expect(setPlayerLibrary('RX_PLAYER')).toEqual({
26 |       type: SET_PLAYER_LIBRARY,
27 |       value: 'RX_PLAYER',
28 |     });
29 |     expect(setPlayerLibrary('AUTO')).toEqual({
30 |       type: SET_PLAYER_LIBRARY,
31 |       value: 'AUTO',
32 |     });
33 |   });
34 |   test('Toggling playback monitor visibility', () => {
35 |     expect(togglePlaybackMonitor(true)).toEqual({
36 |       type: TOGGLE_PLAYBACK_MONITOR,
37 |       value: true,
38 |     });
39 |     expect(togglePlaybackMonitor(false)).toEqual({
40 |       type: TOGGLE_PLAYBACK_MONITOR,
41 |       value: false,
42 |     });
43 |   });
44 |   test('Setting a player configuration as a JSON string', () => {
45 |     expect(setPlayerConfiguration('{"some":{"key":"value"}}')).toEqual({
46 |       type: SET_PLAYER_CONFIGURATION,
47 |       value: '{"some":{"key":"value"}}',
48 |     });
49 |   });
50 | });
51 | 


--------------------------------------------------------------------------------
/src/__tests__/store/actions/streamDetails.test.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   DRM_CERTIFICATE_RESOURCE_FIELD_CHANGE,
  3 |   DRM_LICENSE_RESOURCE_FIELD_CHANGE,
  4 |   APPLY_BROWSER_ENVIRONMENT,
  5 |   applyBrowserEnvironment,
  6 |   START_OFFSET_FIELD_CHANGE,
  7 |   STREAM_RESOURCE_FIELD_CHANGE,
  8 |   SUBTITLES_RESOURCE_FIELD_CHANGE,
  9 |   updateStreamDetailsField,
 10 | } from '../../../store/actions/streamDetails';
 11 | import { BaseTech, DrmTechnology } from '../../../store/model/streamDetails';
 12 | 
 13 | describe('Stream details Redux actions', () => {
 14 |   test('Stream field updates', () => {
 15 |     expect(
 16 |       updateStreamDetailsField({
 17 |         streamResource: {
 18 |           url: 'https://example.com/stream.m3u8',
 19 |         },
 20 |       })
 21 |     ).toEqual({
 22 |       type: STREAM_RESOURCE_FIELD_CHANGE,
 23 |       value: {
 24 |         url: 'https://example.com/stream.m3u8',
 25 |       },
 26 |     });
 27 |     expect(
 28 |       updateStreamDetailsField({
 29 |         drmLicenseResource: {
 30 |           useProxy: true,
 31 |           technology: DrmTechnology.PLAYREADY,
 32 |         },
 33 |       })
 34 |     ).toEqual({
 35 |       type: DRM_LICENSE_RESOURCE_FIELD_CHANGE,
 36 |       value: {
 37 |         useProxy: true,
 38 |         technology: DrmTechnology.PLAYREADY,
 39 |       },
 40 |     });
 41 |     expect(
 42 |       updateStreamDetailsField({
 43 |         drmCertificateResource: {
 44 |           url: 'https://example.com/certificate',
 45 |           technology: DrmTechnology.FAIRPLAY,
 46 |         },
 47 |       })
 48 |     ).toEqual({
 49 |       type: DRM_CERTIFICATE_RESOURCE_FIELD_CHANGE,
 50 |       value: {
 51 |         url: 'https://example.com/certificate',
 52 |         technology: DrmTechnology.FAIRPLAY,
 53 |       },
 54 |     });
 55 |     expect(
 56 |       updateStreamDetailsField({
 57 |         subtitlesResource: {
 58 |           url: 'https://example.com/subs.ttml',
 59 |           useProxy: false,
 60 |         },
 61 |       })
 62 |     ).toEqual({
 63 |       type: SUBTITLES_RESOURCE_FIELD_CHANGE,
 64 |       value: {
 65 |         url: 'https://example.com/subs.ttml',
 66 |         useProxy: false,
 67 |       },
 68 |     });
 69 |     expect(
 70 |       updateStreamDetailsField({
 71 |         startOffset: 123.456,
 72 |       })
 73 |     ).toEqual({
 74 |       type: START_OFFSET_FIELD_CHANGE,
 75 |       value: 123.456,
 76 |     });
 77 |     expect(
 78 |       updateStreamDetailsField({
 79 |         startOffset: '',
 80 |       })
 81 |     ).toEqual({
 82 |       type: START_OFFSET_FIELD_CHANGE,
 83 |       value: '',
 84 |     });
 85 |   });
 86 |   test('Setting browser specific stream details', () => {
 87 |     expect(
 88 |       applyBrowserEnvironment(
 89 |         'Mozilla/5.0 (Macintosh; Intel Mac OS X ' +
 90 |           '10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15',
 91 |         ''
 92 |       )
 93 |     ).toEqual({
 94 |       type: APPLY_BROWSER_ENVIRONMENT,
 95 |       value: {
 96 |         supportedDrmTechnologies: [DrmTechnology.FAIRPLAY],
 97 |         urlSetup: undefined,
 98 |       },
 99 |     });
100 |     expect(
101 |       applyBrowserEnvironment(
102 |         'Mozilla/5.0 (Windows NT 10.0; Win64; x64) ' +
103 |           'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36 Edg/84.0.522.44',
104 |         '?s={%22streamDetails%22:{%22streamResource%22:{%22url%22:%22https:%2F%2Fexample.com%2Fstream.m3u8%22,%22tech' +
105 |           'nology%22:0}}}'
106 |       )
107 |     ).toEqual({
108 |       type: APPLY_BROWSER_ENVIRONMENT,
109 |       value: {
110 |         supportedDrmTechnologies: [DrmTechnology.PLAYREADY, DrmTechnology.WIDEVINE],
111 |         urlSetup: {
112 |           streamDetails: {
113 |             streamResource: {
114 |               url: 'https://example.com/stream.m3u8',
115 |               technology: BaseTech.AUTO,
116 |             },
117 |           },
118 |         },
119 |       },
120 |     });
121 |   });
122 | });
123 | 


--------------------------------------------------------------------------------
/src/__tests__/store/actions/ui.test.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   toggleAdvancedMode,
 3 |   updatePaneSize,
 4 |   updateAdvancedAccordionExpansions,
 5 |   updateActiveRightPaneTab,
 6 |   TOGGLE_ADVANCED_MODE,
 7 |   PANE_RESIZE,
 8 |   ADVANCED_ACCORDION_CHANGE,
 9 |   RIGHT_PANE_TAB_CHANGE,
10 |   clearForms,
11 |   CLEAR_FORMS,
12 |   toggleRightPane,
13 |   TOGGLE_RIGHT_PANE,
14 | } from '../../../store/actions/ui';
15 | 
16 | describe('UI Redux actions', () => {
17 |   test('Toggle advanced mode', () => {
18 |     expect(toggleAdvancedMode(true)).toEqual({ type: TOGGLE_ADVANCED_MODE, value: true });
19 |   });
20 |   test('Pane resizing', () => {
21 |     expect(updatePaneSize(313)).toEqual({ type: PANE_RESIZE, value: 313 });
22 |   });
23 |   test('Advanced accordion expansion changes', () => {
24 |     expect(updateAdvancedAccordionExpansions([1, 3])).toEqual({ type: ADVANCED_ACCORDION_CHANGE, value: [1, 3] });
25 |   });
26 |   test('Changing the active tab in the right pane', () => {
27 |     expect(updateActiveRightPaneTab(2)).toEqual({ type: RIGHT_PANE_TAB_CHANGE, value: 2 });
28 |   });
29 |   test('Clear forms', () => {
30 |     expect(clearForms()).toEqual({ type: CLEAR_FORMS });
31 |   });
32 |   test('Collapse/expand sidebar', () => {
33 |     expect(toggleRightPane(false)).toEqual({ type: TOGGLE_RIGHT_PANE, value: false });
34 |     expect(toggleRightPane(true)).toEqual({ type: TOGGLE_RIGHT_PANE, value: true });
35 |   });
36 | });
37 | 


--------------------------------------------------------------------------------
/src/__tests__/store/model/history.test.ts:
--------------------------------------------------------------------------------
  1 | import { isDeepEqual } from '../../../store/model/history';
  2 | 
  3 | const base = {
  4 |   a: [{ b: true }, { b: undefined }, { c: 'foo' }],
  5 |   d: {
  6 |     e: 1,
  7 |     f: 2,
  8 |     g: 'bar',
  9 |   },
 10 |   h: {
 11 |     i: null,
 12 |     j: '42',
 13 |   },
 14 |   k: [],
 15 | };
 16 | 
 17 | // Identical
 18 | const equal1 = {
 19 |   a: [{ b: true }, { b: undefined }, { c: 'foo' }],
 20 |   d: {
 21 |     e: 1,
 22 |     f: 2,
 23 |     g: 'bar',
 24 |   },
 25 |   h: {
 26 |     i: null,
 27 |     j: '42',
 28 |   },
 29 |   k: [],
 30 |   l: '',
 31 | };
 32 | 
 33 | // Undefined/null prop removed, but in array it would have significance.
 34 | const equal2 = {
 35 |   a: [{ b: true }, { b: undefined }, { c: 'foo' }],
 36 |   d: {
 37 |     e: 1,
 38 |     f: 2,
 39 |     g: 'bar',
 40 |   },
 41 |   h: {
 42 |     j: '42',
 43 |   },
 44 | };
 45 | 
 46 | // Prop order changed.
 47 | const equal3 = {
 48 |   d: {
 49 |     e: 1,
 50 |     g: 'bar',
 51 |     f: 2,
 52 |   },
 53 |   a: [{ b: true }, { b: undefined }, { c: 'foo' }],
 54 |   h: {
 55 |     i: null,
 56 |     j: '42',
 57 |   },
 58 |   k: [],
 59 |   l: '',
 60 | };
 61 | 
 62 | // Primitive value inequality 1.
 63 | const unequal1 = {
 64 |   a: [{ b: true }, { b: undefined }, { c: 'foox' }],
 65 |   d: {
 66 |     e: 1,
 67 |     f: 2,
 68 |     g: 'bar',
 69 |   },
 70 |   h: {
 71 |     i: null,
 72 |     j: '42',
 73 |   },
 74 |   k: [],
 75 |   l: '',
 76 | };
 77 | 
 78 | // Primitive value inequality 2.
 79 | const unequal2 = {
 80 |   a: [{ b: false }, { b: undefined }, { c: 'foo' }],
 81 |   d: {
 82 |     e: 1,
 83 |     f: 3,
 84 |     g: 'bar',
 85 |   },
 86 |   h: {
 87 |     i: null,
 88 |     j: '42',
 89 |   },
 90 |   k: [],
 91 |   l: '',
 92 | };
 93 | 
 94 | // Top level prop missing.
 95 | const unequal3 = {
 96 |   a: [{ b: true }, { b: undefined }, { c: 'foo' }],
 97 |   d: {
 98 |     e: 1,
 99 |     f: 2,
100 |     g: 'bar',
101 |   },
102 |   k: [],
103 |   l: '',
104 | };
105 | 
106 | // Obvious inequality
107 | const unequal4 = {
108 |   a: [],
109 |   d: {},
110 |   h: {},
111 |   k: [],
112 |   l: '',
113 | };
114 | 
115 | // Changed array order is breaking equality. Arrays are currently used for
116 | // headers, and in theory header order might have significance.
117 | const unequal5 = {
118 |   a: [{ b: undefined }, { c: 'foo' }, { b: true }],
119 |   d: {
120 |     e: 1,
121 |     f: 2,
122 |     g: 'bar',
123 |   },
124 |   h: {
125 |     i: null,
126 |     j: '42',
127 |   },
128 |   k: [],
129 |   l: '',
130 | };
131 | 
132 | describe('Form history model', () => {
133 |   test('History entry duplicate detection with deep object comparison', () => {
134 |     expect(isDeepEqual(base, equal1)).toBe(true);
135 |     expect(isDeepEqual(base, equal2)).toBe(true);
136 |     expect(isDeepEqual(base, equal3)).toBe(true);
137 |     expect(isDeepEqual(base, unequal1)).toBe(false);
138 |     expect(isDeepEqual(base, unequal2)).toBe(false);
139 |     expect(isDeepEqual(base, unequal3)).toBe(false);
140 |     expect(isDeepEqual(base, unequal4)).toBe(false);
141 |     expect(isDeepEqual(base, unequal5)).toBe(false);
142 |   });
143 | });
144 | 


--------------------------------------------------------------------------------
/src/__tests__/store/model/messageResolver.test.ts:
--------------------------------------------------------------------------------
  1 | import { MessageLevel, MessageRule, resolveMessages } from '../../../store/model/messageResolver';
  2 | import { PANE_RESIZE } from '../../../store/actions/ui';
  3 | import { PLAYER_ERROR } from '../../../store/actions/player';
  4 | 
  5 | describe('Information message resolver', () => {
  6 |   test('Returning all messages matching the condition in the rule.', () => {
  7 |     const rules: MessageRule[] = [
  8 |       {
  9 |         id: 'rule-a',
 10 |         displayCondition: ({ nextState }) => nextState.ui.rightPaneWidth === 313,
 11 |         message: {
 12 |           level: MessageLevel.SUCCESS,
 13 |           text: 'Message A',
 14 |         },
 15 |       },
 16 |       {
 17 |         id: 'rule-b',
 18 |         displayCondition: ({ prevState, nextState, action }) =>
 19 |           !!prevState &&
 20 |           !!prevState.player.source &&
 21 |           nextState.ui.rightPaneWidth === 424 &&
 22 |           action.type === PANE_RESIZE,
 23 |         message: {
 24 |           level: MessageLevel.INFO,
 25 |           text: 'Message B',
 26 |         },
 27 |       },
 28 |       {
 29 |         id: 'rule-c',
 30 |         displayCondition: ({ action }) => action.type === PLAYER_ERROR,
 31 |         message: {
 32 |           level: MessageLevel.ERROR,
 33 |           text: 'Message C',
 34 |         },
 35 |       },
 36 |       {
 37 |         id: 'rule-d',
 38 |         displayCondition: () => true,
 39 |         message: {
 40 |           level: MessageLevel.WARNING,
 41 |           text: 'Message D',
 42 |         },
 43 |       },
 44 |     ];
 45 |     const prevState1 = undefined;
 46 |     const nextState1 = {
 47 |       ui: {
 48 |         advancedMode: false,
 49 |         rightPaneWidth: 0,
 50 |       },
 51 |     };
 52 |     const action1 = { type: 'SOMETHING' };
 53 | 
 54 |     // @ts-ignore No need to build a full state object, so suppressing type checks requiring so.
 55 |     const result1 = resolveMessages(rules, prevState1, action1, nextState1);
 56 |     expect(result1).toEqual([{ level: MessageLevel.WARNING, text: 'Message D' }]);
 57 | 
 58 |     const prevState2 = {
 59 |       player: {
 60 |         source: {},
 61 |       },
 62 |     };
 63 |     const nextState2 = {
 64 |       ui: {
 65 |         advancedMode: false,
 66 |         rightPaneWidth: 424,
 67 |       },
 68 |     };
 69 |     const action2 = { type: PANE_RESIZE };
 70 | 
 71 |     // @ts-ignore
 72 |     const result2 = resolveMessages(rules, prevState2, action2, nextState2);
 73 |     expect(result2).toEqual([
 74 |       {
 75 |         level: MessageLevel.INFO,
 76 |         text: 'Message B',
 77 |       },
 78 |       {
 79 |         level: MessageLevel.WARNING,
 80 |         text: 'Message D',
 81 |       },
 82 |     ]);
 83 | 
 84 |     const nextState3 = {
 85 |       ui: {
 86 |         rightPaneWidth: 313,
 87 |       },
 88 |     };
 89 | 
 90 |     // @ts-ignore
 91 |     const result3 = resolveMessages(rules, undefined, {}, nextState3);
 92 |     expect(result3).toEqual([
 93 |       {
 94 |         level: MessageLevel.SUCCESS,
 95 |         text: 'Message A',
 96 |       },
 97 |       {
 98 |         level: MessageLevel.WARNING,
 99 |         text: 'Message D',
100 |       },
101 |     ]);
102 | 
103 |     const nextState4 = {
104 |       ui: {},
105 |     };
106 |     const action4 = { type: PLAYER_ERROR };
107 | 
108 |     // @ts-ignore
109 |     const result4 = resolveMessages(rules, undefined, action4, nextState4);
110 |     expect(result4).toEqual([
111 |       {
112 |         level: MessageLevel.ERROR,
113 |         text: 'Message C',
114 |       },
115 |       {
116 |         level: MessageLevel.WARNING,
117 |         text: 'Message D',
118 |       },
119 |     ]);
120 |   });
121 | 
122 |   test('Message formatting based on current state and/or action', () => {
123 |     const rules: MessageRule[] = [
124 |       {
125 |         id: 'rule-a',
126 |         displayCondition: () => true,
127 |         message: (state, action) => ({
128 |           level: MessageLevel.INFO,
129 |           text: `Message A: ${state.ui.rightPaneWidth} ${action.type}`,
130 |         }),
131 |       },
132 |       {
133 |         id: 'rule-b',
134 |         displayCondition: () => true,
135 |         message: (state, action) => ({
136 |           level: MessageLevel.WARNING,
137 |           text: `Message B: ${JSON.stringify(action)}`,
138 |         }),
139 |       },
140 |     ];
141 |     const result = resolveMessages(
142 |       rules,
143 |       undefined,
144 |       { type: PANE_RESIZE, value: 313 },
145 |       // @ts-ignore
146 |       { ui: { advancedMode: true, rightPaneWidth: 535, expandedAdvancedAccordionIndices: [1] } }
147 |     );
148 |     expect(result).toEqual([
149 |       {
150 |         level: MessageLevel.INFO,
151 |         text: 'Message A: 535 PANE_RESIZE',
152 |       },
153 |       {
154 |         level: MessageLevel.WARNING,
155 |         text: 'Message B: {"type":"PANE_RESIZE","value":313}',
156 |       },
157 |     ]);
158 |   });
159 | });
160 | 


--------------------------------------------------------------------------------
/src/__tests__/store/model/request-interceptors.test.ts:
--------------------------------------------------------------------------------
  1 | import { applyRequestInterceptors } from '../../../store/model/request-interceptors';
  2 | import { AdditionalRequestData } from '../../../store/model/streamDetails';
  3 | 
  4 | const source = { streamUrl: 'https://example.com' };
  5 | const options = {};
  6 | 
  7 | describe('Request interceptors', () => {
  8 |   describe('Stream request headers', () => {
  9 |     test('Applied through xhrSetup in HLS.js', () => {
 10 |       const additionalRequestData: AdditionalRequestData = {
 11 |         headers: [
 12 |           { id: 123, name: 'Authorization', value: 'Bearer Xyz' },
 13 |           { id: 456, name: 'X-Custom-Data', value: 'def876' },
 14 |         ],
 15 |       };
 16 | 
 17 |       // @ts-ignore
 18 |       const { xhrSetup, licenseXhrSetup } = applyRequestInterceptors(
 19 |         source,
 20 |         options,
 21 |         additionalRequestData
 22 |         // @ts-ignore
 23 |       ).videoStreamer.hlsjs.customConfiguration;
 24 |       const xhr = {
 25 |         setRequestHeader: jest.fn(),
 26 |         withCredentials: undefined,
 27 |       };
 28 | 
 29 |       xhrSetup(xhr);
 30 |       expect(xhr.setRequestHeader).toHaveBeenCalledWith('Authorization', 'Bearer Xyz');
 31 |       expect(xhr.setRequestHeader).toHaveBeenCalledWith('X-Custom-Data', 'def876');
 32 |       expect(xhr.withCredentials).toBeUndefined();
 33 |       expect(licenseXhrSetup).toBeUndefined();
 34 |     });
 35 |     test('Applied through request filter in Shaka Player', () => {
 36 |       const additionalRequestData: AdditionalRequestData = {
 37 |         headers: [
 38 |           { id: 123, name: 'Authorization', value: 'Bearer Xyz' },
 39 |           { id: 456, name: 'X-Custom-Data', value: 'def876' },
 40 |         ],
 41 |       };
 42 | 
 43 |       // @ts-ignore
 44 |       const { shakaRequestFilter } = applyRequestInterceptors(
 45 |         source,
 46 |         options,
 47 |         additionalRequestData
 48 |         // @ts-ignore
 49 |       ).videoStreamer.shakaPlayer;
 50 |       const shakaRequest = {
 51 |         allowCrossSiteCredentials: undefined,
 52 |         headers: {},
 53 |       };
 54 | 
 55 |       shakaRequestFilter(1, shakaRequest);
 56 |       expect(shakaRequest).toEqual({
 57 |         headers: {
 58 |           Authorization: 'Bearer Xyz',
 59 |           'X-Custom-Data': 'def876',
 60 |         },
 61 |         allowCrossSiteCredentials: undefined,
 62 |       });
 63 |     });
 64 |   });
 65 |   describe('withCredentials', () => {
 66 |     test('Applied through xhrSetup in HLS.js', () => {
 67 |       const additionalRequestData: AdditionalRequestData = {
 68 |         withCredentials: true,
 69 |         headers: [],
 70 |       };
 71 | 
 72 |       // @ts-ignore
 73 |       const { xhrSetup, licenseXhrSetup } = applyRequestInterceptors(
 74 |         source,
 75 |         options,
 76 |         additionalRequestData
 77 |         // @ts-ignore
 78 |       ).videoStreamer.hlsjs.customConfiguration;
 79 |       const xhr = {
 80 |         setRequestHeader: jest.fn(),
 81 |         withCredentials: undefined,
 82 |       };
 83 | 
 84 |       xhrSetup(xhr);
 85 |       expect(xhr.setRequestHeader).not.toHaveBeenCalled();
 86 |       expect(xhr.withCredentials).toBe(true);
 87 |       expect(licenseXhrSetup).toBeUndefined();
 88 |     });
 89 |     test('Applied through request filter in Shaka Player', () => {
 90 |       const additionalRequestData: AdditionalRequestData = {
 91 |         withCredentials: true,
 92 |         headers: [],
 93 |       };
 94 | 
 95 |       // @ts-ignore
 96 |       const { shakaRequestFilter } = applyRequestInterceptors(
 97 |         source,
 98 |         options,
 99 |         additionalRequestData
100 |         // @ts-ignore
101 |       ).videoStreamer.shakaPlayer;
102 |       const shakaRequest = {
103 |         allowCrossSiteCredentials: undefined,
104 |         headers: {},
105 |       };
106 | 
107 |       shakaRequestFilter(1, shakaRequest);
108 |       expect(shakaRequest).toEqual({
109 |         headers: {},
110 |         allowCrossSiteCredentials: true,
111 |       });
112 |     });
113 |   });
114 |   describe('License request headers', () => {
115 |     test('Applied through licenseXhrSetup in HLS.js', () => {
116 |       const drmSource = {
117 |         streamUrl: 'https://example.com/stream',
118 |         licenseUrl: 'https://example.com/license',
119 |         licenseAcquisitionDetails: {
120 |           licenseRequestHeaders: {
121 |             Authorization: 'Bearer Xyz',
122 |             'X-Custom-Data': 'def876',
123 |           },
124 |         },
125 |       };
126 | 
127 |       // @ts-ignore
128 |       const videoStreamerOptions = applyRequestInterceptors(drmSource, options, undefined).videoStreamer;
129 |       // @ts-ignore
130 |       const { xhrSetup, licenseXhrSetup } = videoStreamerOptions.hlsjs.customConfiguration;
131 |       // @ts-ignore
132 |       const { shakaPlayer } = videoStreamerOptions;
133 | 
134 |       const xhr = {
135 |         setRequestHeader: jest.fn(),
136 |         withCredentials: undefined,
137 |       };
138 | 
139 |       licenseXhrSetup(xhr);
140 |       expect(xhr.setRequestHeader).toHaveBeenCalledWith('Authorization', 'Bearer Xyz');
141 |       expect(xhr.setRequestHeader).toHaveBeenCalledWith('X-Custom-Data', 'def876');
142 |       expect(xhr.withCredentials).toBe(true); // This is set implicitly.
143 | 
144 |       expect(xhrSetup).toBeUndefined();
145 |       expect(shakaPlayer).toBeUndefined();
146 |     });
147 |   });
148 |   test('Everything.', () => {
149 |     const additionalRequestData: AdditionalRequestData = {
150 |       withCredentials: true,
151 |       headers: [
152 |         { id: 123, name: 'Authorization', value: 'Bearer Xyz' },
153 |         { id: 456, name: 'X-Custom-Data', value: 'def876' },
154 |       ],
155 |     };
156 | 
157 |     const drmSource = {
158 |       streamUrl: 'https://example.com/stream',
159 |       licenseUrl: 'https://example.com/license',
160 |       licenseAcquisitionDetails: {
161 |         licenseRequestHeaders: {
162 |           Authorization: 'Bearer Xyz',
163 |           'X-Custom-Data': 'def876',
164 |         },
165 |       },
166 |     };
167 | 
168 |     // @ts-ignore
169 |     const videoStreamerOptions = applyRequestInterceptors(drmSource, options, additionalRequestData).videoStreamer;
170 |     // @ts-ignore
171 |     const { xhrSetup, licenseXhrSetup } = videoStreamerOptions.hlsjs.customConfiguration;
172 |     // @ts-ignore
173 |     const { shakaRequestFilter } = videoStreamerOptions.shakaPlayer;
174 | 
175 |     const licenseXhr = {
176 |       setRequestHeader: jest.fn(),
177 |       withCredentials: undefined,
178 |     };
179 |     const xhr = {
180 |       setRequestHeader: jest.fn(),
181 |       withCredentials: undefined,
182 |     };
183 |     const shakaRequest = {
184 |       allowCrossSiteCredentials: undefined,
185 |       headers: {},
186 |     };
187 | 
188 |     xhrSetup(xhr);
189 |     licenseXhrSetup(licenseXhr);
190 | 
191 |     expect(xhr.setRequestHeader).toHaveBeenCalledWith('Authorization', 'Bearer Xyz');
192 |     expect(xhr.setRequestHeader).toHaveBeenCalledWith('X-Custom-Data', 'def876');
193 |     expect(xhr.withCredentials).toBe(true);
194 |     expect(licenseXhr.setRequestHeader).toHaveBeenCalledWith('Authorization', 'Bearer Xyz');
195 |     expect(licenseXhr.setRequestHeader).toHaveBeenCalledWith('X-Custom-Data', 'def876');
196 |     expect(licenseXhr.withCredentials).toBe(true); // This is set implicitly.
197 | 
198 |     shakaRequestFilter(2, shakaRequest);
199 |     shakaRequestFilter(3, shakaRequest);
200 |     shakaRequestFilter(4, shakaRequest);
201 | 
202 |     expect(shakaRequest).toEqual({
203 |       allowCrossSiteCredentials: undefined,
204 |       headers: {},
205 |     });
206 | 
207 |     shakaRequestFilter(0, shakaRequest);
208 |     expect(shakaRequest).toEqual({
209 |       headers: {
210 |         Authorization: 'Bearer Xyz',
211 |         'X-Custom-Data': 'def876',
212 |       },
213 |       allowCrossSiteCredentials: true,
214 |     });
215 |   });
216 |   test('Nothing to add.', () => {
217 |     const videoStreamerOptions: any = applyRequestInterceptors(source, { videoStreamer: {} }).videoStreamer;
218 |     expect(videoStreamerOptions.hlsjs).toBeUndefined();
219 |     expect(videoStreamerOptions.shakaPlayer).toBeUndefined();
220 |   });
221 | });
222 | 


--------------------------------------------------------------------------------
/src/__tests__/store/model/sharing.test.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   buildUrlFromState,
  3 |   parseSetupFromQueryString,
  4 |   removeSetupFromUrl,
  5 |   twoLevelCopy,
  6 | } from '../../../store/model/sharing';
  7 | import { SimplePersistableFormData } from '../../../store/model/history';
  8 | import { BaseTech, PlayerLogLevel } from '../../../store/model/streamDetails';
  9 | 
 10 | const genericLocation = { origin: '', pathname: '', search: '' };
 11 | 
 12 | describe('Sharing URLs', () => {
 13 |   describe('twoLevelCopy', () => {
 14 |     it('produces an object with top level properties not being identical to the original object', () => {
 15 |       const l = new Date();
 16 |       const a = {
 17 |         b: {
 18 |           c: '!',
 19 |           d: {
 20 |             e: 1,
 21 |             f: 2,
 22 |           },
 23 |         },
 24 |         g: {
 25 |           h: false,
 26 |           i: {
 27 |             j: '#',
 28 |             k: true,
 29 |             l,
 30 |           },
 31 |         },
 32 |       };
 33 |       const m = twoLevelCopy(a);
 34 |       expect(m).not.toBe(a);
 35 |       expect(m.b).not.toBe(a.b);
 36 |       expect(m.g).not.toBe(a.g);
 37 |       expect(m.b.c).toBe(a.b.c);
 38 |       expect(m.b.d).toBe(a.b.d);
 39 |       expect(m.g.h).toBe(a.g.h);
 40 |       expect(m.g.i).toBe(a.g.i);
 41 |     });
 42 |   });
 43 |   describe('buildUrlFromState', () => {
 44 |     it('includes current URL, and adds the specified state data to be included.', () => {
 45 |       const location = {
 46 |         origin: 'https://vimond.github.io',
 47 |         pathname: '/streamlab',
 48 |         search: '',
 49 |       };
 50 |       const simpleState: SimplePersistableFormData = {
 51 |         streamDetails: {
 52 |           streamResource: {
 53 |             url: 'https://example.com/stream.m3u8',
 54 |             technology: BaseTech.AUTO,
 55 |           },
 56 |         },
 57 |       };
 58 | 
 59 |       const resourceData = {
 60 |         url: 'abc',
 61 |         useProxy: false,
 62 |         headers: [{ id: '20202', name: 'Authorization', value: 'abc123' }],
 63 |         technology: BaseTech.AUTO,
 64 |       };
 65 |       const advancedState = {
 66 |         streamDetails: {
 67 |           streamResource: resourceData,
 68 |           drmLicenseResource: resourceData,
 69 |           drmCertificateResource: resourceData,
 70 |           subtitlesResource: resourceData,
 71 |         },
 72 |         playerOptions: {
 73 |           logLevel: PlayerLogLevel.WARNING,
 74 |           customConfiguration: '',
 75 |           showPlaybackMonitor: true,
 76 |         },
 77 |       };
 78 | 
 79 |       const simpleResult = buildUrlFromState(simpleState, location);
 80 |       expect(simpleResult).toBe(
 81 |         'https://vimond.github.io/streamlab?s={%22streamDetails%22:' +
 82 |           '{%22streamResource%22:{%22url%22:%22https:%2F%2Fexample.com%2Fstream.m3u8%22' +
 83 |           ',%22technology%22:0}}}'
 84 |       );
 85 | 
 86 |       const advancedResult = buildUrlFromState(advancedState, location);
 87 |       expect(advancedResult).toBe(
 88 |         'https://vimond.github.io/streamlab?s={%22streamDetails%22:{%22streamResource%22:' +
 89 |           '{%22url%22:%22abc%22,%22useProxy%22:false,%22headers%22:[{%22id%22:%2220202%22,%2' +
 90 |           '2name%22:%22Authorization%22,%22value%22:%22abc123%22}],%22technology%22:0},%22dr' +
 91 |           'mLicenseResource%22:{%22url%22:%22abc%22,%22useProxy%22:false,%22headers%22:[{%22' +
 92 |           'id%22:%2220202%22,%22name%22:%22Authorization%22,%22value%22:%22abc123%22}],%22te' +
 93 |           'chnology%22:0},%22drmCertificateResource%22:{%22url%22:%22abc%22,%22useProxy%22:f' +
 94 |           'alse,%22headers%22:[{%22id%22:%2220202%22,%22name%22:%22Authorization%22,%22value' +
 95 |           '%22:%22abc123%22}],%22technology%22:0},%22subtitlesResource%22:{%22url%22:%22abc%' +
 96 |           '22,%22useProxy%22:false,%22headers%22:[{%22id%22:%2220202%22,%22name%22:%22Author' +
 97 |           'ization%22,%22value%22:%22abc123%22}],%22technology%22:0}},%22playerOptions%22:{%' +
 98 |           '22logLevel%22:2,%22customConfiguration%22:%22%22,%22showPlaybackMonitor%22:true}}'
 99 |       );
100 |     });
101 |     it('replaces earlier setup parameter from current URL, and keeps other parameters.', () => {
102 |       const location = {
103 |         origin: 'https://vimond.github.io',
104 |         pathname: '/streamlab',
105 |         search: '?f=abc%22def&s={%22hello%22:%22world%22}',
106 |       };
107 |       const state: SimplePersistableFormData = {
108 |         streamDetails: {
109 |           streamResource: {
110 |             url: 'https://example.com/stream.m3u8',
111 |             technology: BaseTech.AUTO,
112 |           },
113 |         },
114 |       };
115 |       const result = buildUrlFromState(state, location);
116 |       expect(result).toBe(
117 |         'https://vimond.github.io/streamlab?s={%22streamDetails%22:' +
118 |           '{%22streamResource%22:{%22url%22:%22https:%2F%2Fexample.com%2Fstream.m3u8%22' +
119 |           ',%22technology%22:0}}}&f=abc%22def'
120 |       );
121 |     });
122 |   });
123 |   test('parseSetupFromQueryString returns the setup object from the query string ready to be merged to the state', () => {
124 |     const queryString =
125 |       '?s={%22streamDetails%22:' +
126 |       '{%22streamResource%22:{%22url%22:%22https:%2F%2Fexample.com%2Fstream.m3u8%22' +
127 |       ',%22technology%22:0}}}&f=abc%22def';
128 |     expect(parseSetupFromQueryString(queryString)).toEqual({
129 |       streamDetails: {
130 |         streamResource: {
131 |           url: 'https://example.com/stream.m3u8',
132 |           technology: BaseTech.AUTO,
133 |         },
134 |       },
135 |     });
136 |   });
137 |   test(
138 |     'removeSetupFromUrl removes the setup parameter from the current location and returns a new relative URL that ' +
139 |       'can be pushed to the history.',
140 |     () => {
141 |       const location1 = {
142 |         ...genericLocation,
143 |         pathname: '/streamlab',
144 |         search: '?abc=123&s={%22general%22:{%22testing%22:true,%22attempt%22:1}}',
145 |       };
146 |       const location2 = {
147 |         ...genericLocation,
148 |         pathname: '/streamlab',
149 |         search: '?s={%22general%22:{%22testing%22:true,%22attempt%22:1}}',
150 |       };
151 |       const location3 = {
152 |         ...genericLocation,
153 |         pathname: '/streamlab',
154 |         search: '?s={%22general%22:{%22testing%22:true,%22attempt%22:1}}&def={{%22hello%22:%22world%22}}',
155 |       };
156 |       const location4 = {
157 |         ...genericLocation,
158 |         pathname: '/streamlab',
159 |         search: '?s={%22general%22:{%22testing%22:true,%22attempt%22:1}}&ghi=456',
160 |       };
161 |       expect(removeSetupFromUrl(location1)).toBe('/streamlab?abc=123');
162 |       expect(removeSetupFromUrl(location2)).toBe('/streamlab');
163 |       expect(removeSetupFromUrl(location3)).toBe('/streamlab?def={{%22hello%22:%22world%22}}');
164 |       expect(removeSetupFromUrl(location4)).toBe('/streamlab?ghi=456');
165 |     }
166 |   );
167 | });
168 | 


--------------------------------------------------------------------------------
/src/__tests__/store/model/streamDetails.test.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   createPlayerOptions,
  3 |   detectSupportedDrmTechnologies,
  4 |   DrmTechnology,
  5 |   PlayerLogLevel,
  6 | } from '../../../store/model/streamDetails';
  7 | 
  8 | describe('Stream details model', () => {
  9 |   test('DRM technology detection from user agent', () => {
 10 |     expect(
 11 |       detectSupportedDrmTechnologies(
 12 |         'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/' +
 13 |           '605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15'
 14 |       )
 15 |     ).toEqual([DrmTechnology.FAIRPLAY]);
 16 |     expect(
 17 |       detectSupportedDrmTechnologies(
 18 |         'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/' +
 19 |           '537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36'
 20 |       )
 21 |     ).toEqual([DrmTechnology.WIDEVINE]);
 22 |     expect(
 23 |       detectSupportedDrmTechnologies(
 24 |         'Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, lik' +
 25 |           'e Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10136'
 26 |       )
 27 |     ).toEqual([DrmTechnology.PLAYREADY]);
 28 |     expect(
 29 |       detectSupportedDrmTechnologies(
 30 |         'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0'
 31 |       )
 32 |     ).toEqual([DrmTechnology.WIDEVINE]);
 33 |     expect(
 34 |       detectSupportedDrmTechnologies(
 35 |         'Mozilla/5.0 (Windows NT 10.0; Win64; x64) ' +
 36 |           'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36 Edg/84.0.522.44'
 37 |       )
 38 |     ).toEqual([DrmTechnology.PLAYREADY, DrmTechnology.WIDEVINE]);
 39 |   });
 40 |   test('Building player override structure from empty JSON string and distinct settings', () => {
 41 |     const result = createPlayerOptions({
 42 |       logLevel: PlayerLogLevel.INFO,
 43 |       showPlaybackMonitor: false,
 44 |       customConfiguration: '',
 45 |     });
 46 |     expect(result).toEqual({
 47 |       videoStreamer: {
 48 |         logLevel: 'INFO',
 49 |       },
 50 |       playbackMonitor: {
 51 |         visibleAtStart: false,
 52 |       },
 53 |     });
 54 |   });
 55 |   test('Building player override structure from JSON string and distinct settings', () => {
 56 |     const json = '{"aspectRatio": {"horizontal": 21, "vertical": 9 }}';
 57 |     const result = createPlayerOptions({
 58 |       logLevel: PlayerLogLevel.ERROR,
 59 |       showPlaybackMonitor: true,
 60 |       customConfiguration: json,
 61 |     });
 62 |     expect(result).toEqual({
 63 |       videoStreamer: {
 64 |         logLevel: 'ERROR',
 65 |       },
 66 |       playbackMonitor: {
 67 |         visibleAtStart: true,
 68 |       },
 69 |       aspectRatio: {
 70 |         horizontal: 21,
 71 |         vertical: 9,
 72 |       },
 73 |     });
 74 |   });
 75 |   test('Invalid JSON string is ignored when building player override structure', () => {
 76 |     const json = '{aspectRatio: {horizontal: 21, vertical: 9 }}';
 77 |     const result = createPlayerOptions({
 78 |       logLevel: PlayerLogLevel.ERROR,
 79 |       showPlaybackMonitor: true,
 80 |       customConfiguration: json,
 81 |     });
 82 |     expect(result).toEqual({
 83 |       videoStreamer: {
 84 |         logLevel: 'ERROR',
 85 |       },
 86 |       playbackMonitor: {
 87 |         visibleAtStart: true,
 88 |       },
 89 |     });
 90 |   });
 91 |   test('Building player override structure from JSON string overlapped by distinct settings', () => {
 92 |     const json =
 93 |       '{"videoStreamer":{"logLevel":"INFO"},"playbackMonitor":{"visibleAtStart":true},"classNamePrefix":"my-player-"}';
 94 |     const result = createPlayerOptions({
 95 |       logLevel: PlayerLogLevel.DEBUG,
 96 |       showPlaybackMonitor: false,
 97 |       customConfiguration: json,
 98 |     });
 99 |     expect(result).toEqual({
100 |       videoStreamer: {
101 |         logLevel: 'DEBUG',
102 |       },
103 |       playbackMonitor: {
104 |         visibleAtStart: false,
105 |       },
106 |       classNamePrefix: 'my-player-',
107 |     });
108 |   });
109 | });
110 | 


--------------------------------------------------------------------------------
/src/__tests__/store/reducers/information.test.ts:
--------------------------------------------------------------------------------
 1 | import createRootReducerWithInformation from '../../../store/reducers/information';
 2 | import { MessageLevel } from '../../../store/model/messageResolver';
 3 | import { REHYDRATE } from 'redux-persist/lib/constants';
 4 | 
 5 | const rules = [
 6 |   {
 7 |     id: 'all',
 8 |     displayCondition: () => true,
 9 |     message: {
10 |       level: MessageLevel.SUCCESS,
11 |       text: 'This is fine.',
12 |     },
13 |   },
14 | ];
15 | const prevState = { slice: { value: 1 } };
16 | const nextState = { slice: { value: 2 } };
17 | 
18 | describe('Information reducer', () => {
19 |   test('Addition of messages to the state, based on current action, previous state, and next state', () => {
20 |     const messageResolver = jest.fn().mockReturnValue([rules[0].message]);
21 |     const getRootState = createRootReducerWithInformation(rules, messageResolver);
22 |     const action = { type: 'SOME_ACTION' };
23 | 
24 |     // @ts-ignore No need to fulfilling the type requirements implying supplying full state objects.
25 |     const result = getRootState(prevState, action, nextState);
26 |     expect(messageResolver).toHaveBeenCalledWith(rules, prevState, action, nextState);
27 |     expect(result).toEqual({
28 |       slice: { value: 2 },
29 |       information: {
30 |         messages: [
31 |           {
32 |             level: MessageLevel.SUCCESS,
33 |             text: 'This is fine.',
34 |           },
35 |         ],
36 |       },
37 |     });
38 |   });
39 |   test(
40 |     'Handling the redux-persist REHYDRATE action type, ' +
41 |       'so that the rehydrated payload is included as the next state.',
42 |     () => {
43 |       const messageResolver = jest.fn().mockReturnValue([rules[0].message]);
44 |       const getRootState = createRootReducerWithInformation(rules, messageResolver);
45 |       const action = { type: REHYDRATE, payload: { slice: { setting: true } } };
46 | 
47 |       // @ts-ignore No need to fulfilling the type requirements implying supplying full state objects.
48 |       const result = getRootState(prevState, action, nextState);
49 |       expect(messageResolver).toHaveBeenCalledWith(rules, prevState, action, {
50 |         ...nextState,
51 |         ...{ slice: { setting: true } },
52 |       });
53 |       expect(result).toEqual({
54 |         slice: { setting: true },
55 |         information: {
56 |           messages: [
57 |             {
58 |               level: MessageLevel.SUCCESS,
59 |               text: 'This is fine.',
60 |             },
61 |           ],
62 |         },
63 |       });
64 |     }
65 |   );
66 | });
67 | 


--------------------------------------------------------------------------------
/src/__tests__/store/reducers/player.test.ts:
--------------------------------------------------------------------------------
  1 | import playerReducer from '../../../store/reducers/player';
  2 | import { PLAY, PLAYER_ERROR, STOP } from '../../../store/actions/player';
  3 | import { PANE_RESIZE } from '../../../store/actions/ui';
  4 | import { BaseTech } from '../../../store/model/streamDetails';
  5 | 
  6 | const source = {
  7 |   streamUrl: 'https://example.com/stream.mpd',
  8 |   contentType: 'application/dash+xml',
  9 | };
 10 | 
 11 | const options = {
 12 |   videoStreamer: {
 13 |     playsInline: true,
 14 |   },
 15 | };
 16 | 
 17 | const additionalRequestData = {
 18 |   headers: [{ id: 33, name: 'X-My-Header', value: 'My value' }],
 19 | };
 20 | 
 21 | describe('Player reducer', () => {
 22 |   test('The PLAY action applies the source and any player options to the state.', () => {
 23 |     const newState = playerReducer(
 24 |       {
 25 |         source: { streamUrl: 'something' },
 26 |         visibleLogo: false,
 27 |         additionalRequestData: { headers: [], withCredentials: true },
 28 |       },
 29 |       {
 30 |         type: PLAY,
 31 |         value: {
 32 |           source,
 33 |           options,
 34 |           additionalRequestData,
 35 |           playerLibraryOverride: 'RX_PLAYER',
 36 |           historyEntry: {
 37 |             timestamp: '2020-01-12T19:11:02.837Z',
 38 |             name: '',
 39 |             formData: {
 40 |               streamDetails: {
 41 |                 streamResource: {
 42 |                   url: 'something',
 43 |                   technology: BaseTech.AUTO,
 44 |                 },
 45 |               },
 46 |             },
 47 |           },
 48 |         },
 49 |       }
 50 |     );
 51 |     expect(newState).toEqual({
 52 |       source: {
 53 |         streamUrl: 'https://example.com/stream.mpd',
 54 |         contentType: 'application/dash+xml',
 55 |       },
 56 |       options: {
 57 |         videoStreamer: {
 58 |           playsInline: true,
 59 |         },
 60 |       },
 61 |       visibleLogo: false,
 62 |       additionalRequestData,
 63 |       playerLibraryOverride: 'RX_PLAYER',
 64 |     });
 65 |   });
 66 |   test(
 67 |     'The STOP or PLAYER_ERROR action types removes any current player source, and also makes the player ' +
 68 |       'controls constantly visible.',
 69 |     () => {
 70 |       const newState1 = playerReducer({ source, options, visibleLogo: false }, { type: STOP });
 71 |       expect(newState1).toEqual({
 72 |         source: undefined,
 73 |         options: {
 74 |           interactionDetector: {
 75 |             inactivityDelay: -1,
 76 |           },
 77 |         },
 78 |         visibleLogo: true,
 79 |         additionalRequestData: undefined,
 80 |       });
 81 |       const veryVeryBadError = new Error('Playback very very bad.');
 82 |       const newState2 = playerReducer(
 83 |         { source, options, visibleLogo: false },
 84 |         { type: PLAYER_ERROR, error: veryVeryBadError }
 85 |       );
 86 |       expect(newState2).toEqual({
 87 |         source: undefined,
 88 |         options: {
 89 |           interactionDetector: {
 90 |             inactivityDelay: -1,
 91 |           },
 92 |         },
 93 |         error: veryVeryBadError,
 94 |         visibleLogo: false,
 95 |         additionalRequestData: undefined,
 96 |       });
 97 |     }
 98 |   );
 99 |   test('The player state is unaffected by other action types.', () => {
100 |     // @ts-ignore Actually a specific reducer should accept any action.
101 |     const result = playerReducer({ source, options }, { type: PANE_RESIZE, value: 313 });
102 |     expect(result).toEqual({ source, options });
103 |   });
104 | });
105 | 


--------------------------------------------------------------------------------
/src/__tests__/store/reducers/playerOptions.test.ts:
--------------------------------------------------------------------------------
  1 | import playerOptionsReducer from '../../../store/reducers/playerOptions';
  2 | import {
  3 |   SET_LOG_LEVEL,
  4 |   SET_PLAYER_CONFIGURATION,
  5 |   SET_PLAYER_LIBRARY,
  6 |   TOGGLE_PLAYBACK_MONITOR,
  7 | } from '../../../store/actions/playerOptions';
  8 | import { BaseTech, PlayerLibrary, PlayerLogLevel, StreamTechnology } from '../../../store/model/streamDetails';
  9 | import { HistoryEntryAction, RESTORE_HISTORY_ENTRY } from '../../../store/actions/history';
 10 | import { AdvancedHistoryEntry } from '../../../store/model/history';
 11 | import { CLEAR_FORMS } from '../../../store/actions/ui';
 12 | import { APPLY_BROWSER_ENVIRONMENT } from '../../../store/actions/streamDetails';
 13 | 
 14 | const initialState = {
 15 |   customConfiguration: '',
 16 |   showPlaybackMonitor: false,
 17 |   logLevel: PlayerLogLevel.WARNING,
 18 |   playerLibrary: 'AUTO' as PlayerLibrary,
 19 |   isModified: false,
 20 | };
 21 | 
 22 | const simpleUrlSetup = {
 23 |   streamDetails: {
 24 |     streamResource: {
 25 |       url: 'https://example.com/stream.m3u8',
 26 |       technology: BaseTech.AUTO,
 27 |     },
 28 |   },
 29 | };
 30 | const resourceData = {
 31 |   url: 'abc',
 32 |   useProxy: false,
 33 |   headers: [{ id: '20202', name: 'Authorization', value: 'abc123' }],
 34 |   technology: BaseTech.AUTO,
 35 | };
 36 | const advancedUrlSetup = {
 37 |   streamDetails: {
 38 |     streamResource: resourceData,
 39 |     drmLicenseResource: resourceData,
 40 |     drmCertificateResource: resourceData,
 41 |     subtitlesResource: resourceData,
 42 |   },
 43 |   playerOptions: {
 44 |     logLevel: PlayerLogLevel.DEBUG,
 45 |     customConfiguration: '{"hello":"world"}',
 46 |     showPlaybackMonitor: true,
 47 |     playerLibrary: 'HTML',
 48 |   },
 49 | };
 50 | 
 51 | describe('Player options reducer', () => {
 52 |   test('Including options found in share URL', () => {
 53 |     const newState1 = playerOptionsReducer(initialState, {
 54 |       type: APPLY_BROWSER_ENVIRONMENT,
 55 |       value: {
 56 |         supportedDrmTechnologies: [],
 57 |         urlSetup: advancedUrlSetup,
 58 |       },
 59 |     });
 60 |     expect(newState1).toEqual({
 61 |       customConfiguration: '{"hello":"world"}',
 62 |       showPlaybackMonitor: true,
 63 |       logLevel: PlayerLogLevel.DEBUG,
 64 |       playerLibrary: 'HTML',
 65 |       isModified: true,
 66 |     });
 67 |     const newState2 = playerOptionsReducer(initialState, {
 68 |       type: APPLY_BROWSER_ENVIRONMENT,
 69 |       value: {
 70 |         supportedDrmTechnologies: [],
 71 |         urlSetup: simpleUrlSetup,
 72 |       },
 73 |     });
 74 |     expect(newState2).toEqual(initialState);
 75 |     const newState3 = playerOptionsReducer(initialState, {
 76 |       type: APPLY_BROWSER_ENVIRONMENT,
 77 |       value: {
 78 |         supportedDrmTechnologies: [],
 79 |         urlSetup: undefined,
 80 |       },
 81 |     });
 82 |     expect(newState3).toEqual(initialState);
 83 |   });
 84 |   test('Updating the log level state when set', () => {
 85 |     const newState = playerOptionsReducer(initialState, { type: SET_LOG_LEVEL, value: PlayerLogLevel.INFO });
 86 |     expect(newState).toEqual({
 87 |       customConfiguration: '',
 88 |       showPlaybackMonitor: false,
 89 |       logLevel: PlayerLogLevel.INFO,
 90 |       playerLibrary: 'AUTO',
 91 |       isModified: true,
 92 |     });
 93 |   });
 94 |   test('Updating the player library when selected', () => {
 95 |     const newState = playerOptionsReducer(initialState, { type: SET_PLAYER_LIBRARY, value: 'SHAKA_PLAYER' });
 96 |     expect(newState).toEqual({
 97 |       customConfiguration: '',
 98 |       showPlaybackMonitor: false,
 99 |       logLevel: PlayerLogLevel.WARNING,
100 |       playerLibrary: 'SHAKA_PLAYER',
101 |       isModified: true,
102 |     });
103 |   });
104 |   test('Toggling the playback monitor state', () => {
105 |     const newState1 = playerOptionsReducer(initialState, { type: TOGGLE_PLAYBACK_MONITOR, value: true });
106 |     expect(newState1).toEqual({
107 |       customConfiguration: '',
108 |       showPlaybackMonitor: true,
109 |       logLevel: PlayerLogLevel.WARNING,
110 |       playerLibrary: 'AUTO',
111 |       isModified: true,
112 |     });
113 |     const newState2 = playerOptionsReducer(newState1, { type: TOGGLE_PLAYBACK_MONITOR, value: false });
114 |     expect(newState2).toEqual({
115 |       customConfiguration: '',
116 |       showPlaybackMonitor: false,
117 |       logLevel: PlayerLogLevel.WARNING,
118 |       playerLibrary: 'AUTO',
119 |       isModified: false,
120 |     });
121 |   });
122 |   test('Updating the JSON string representation state', () => {
123 |     const newState1 = playerOptionsReducer(initialState, { type: SET_PLAYER_CONFIGURATION, value: '{"key":"value"}' });
124 |     expect(newState1).toEqual({
125 |       customConfiguration: '{"key":"value"}',
126 |       showPlaybackMonitor: false,
127 |       logLevel: PlayerLogLevel.WARNING,
128 |       playerLibrary: 'AUTO',
129 |       isModified: true,
130 |     });
131 |     const newState2 = playerOptionsReducer(newState1, { type: SET_PLAYER_CONFIGURATION, value: '' });
132 |     expect(newState2).toEqual({
133 |       customConfiguration: '',
134 |       showPlaybackMonitor: false,
135 |       logLevel: PlayerLogLevel.WARNING,
136 |       playerLibrary: 'AUTO',
137 |       isModified: false,
138 |     });
139 |   });
140 |   test('Restoring a history entry should overwrite all player options.', () => {
141 |     const emptyResource = {
142 |       url: '',
143 |       technology: BaseTech.AUTO,
144 |       headers: [],
145 |       useProxy: false,
146 |     };
147 |     const historyEntry: AdvancedHistoryEntry = {
148 |       timestamp: '2020-01-12T19:11:02.837Z',
149 |       name: 'My good old stream',
150 |       formData: {
151 |         streamDetails: {
152 |           streamResource: {
153 |             url: 'http://example.com/my-good-old-stream.mpd',
154 |             technology: StreamTechnology.MSS,
155 |             headers: [],
156 |             useProxy: true,
157 |           },
158 |           drmLicenseResource: emptyResource,
159 |           drmCertificateResource: emptyResource,
160 |           subtitlesResource: emptyResource,
161 |           startOffset: '',
162 |           isDrmCertificateApplicable: false,
163 |         },
164 |         playerOptions: {
165 |           customConfiguration: '{"key":"value"}',
166 |           logLevel: PlayerLogLevel.WARNING,
167 |           showPlaybackMonitor: false,
168 |           playerLibrary: 'SHAKA_PLAYER',
169 |         },
170 |       },
171 |     };
172 |     const action: HistoryEntryAction = {
173 |       type: RESTORE_HISTORY_ENTRY,
174 |       value: historyEntry,
175 |     };
176 |     const oldState = {
177 |       customConfiguration: '',
178 |       showPlaybackMonitor: true,
179 |       logLevel: PlayerLogLevel.ERROR,
180 |       playerLibrary: 'AUTO' as PlayerLibrary,
181 |       isModified: true,
182 |     };
183 |     const newState = playerOptionsReducer(oldState, action);
184 |     expect(newState).toEqual({ ...historyEntry.formData.playerOptions, isModified: true });
185 |   });
186 |   test('Clearing forms reverts player options to the initial state', () => {
187 |     const oldState = {
188 |       customConfiguration: '{"key":"value"}',
189 |       showPlaybackMonitor: true,
190 |       logLevel: PlayerLogLevel.INFO,
191 |       playerLibrary: 'AUTO' as PlayerLibrary,
192 |       isModified: true,
193 |     };
194 |     const newState = playerOptionsReducer(oldState, { type: CLEAR_FORMS });
195 |     expect(newState).toEqual({
196 |       logLevel: PlayerLogLevel.WARNING,
197 |       showPlaybackMonitor: false,
198 |       customConfiguration: '',
199 |       playerLibrary: 'AUTO',
200 |       isModified: false,
201 |     });
202 |   });
203 | });
204 | 


--------------------------------------------------------------------------------
/src/__tests__/store/reducers/ui.test.ts:
--------------------------------------------------------------------------------
  1 | import uiReducer from '../../../store/reducers/ui';
  2 | import {
  3 |   ADVANCED_ACCORDION_CHANGE,
  4 |   PANE_RESIZE,
  5 |   RIGHT_PANE_TAB_CHANGE,
  6 |   TOGGLE_ADVANCED_MODE,
  7 |   TOGGLE_RIGHT_PANE,
  8 | } from '../../../store/actions/ui';
  9 | import { RESTORE_HISTORY_ENTRY } from '../../../store/actions/history';
 10 | import { BaseTech, PlayerLogLevel } from '../../../store/model/streamDetails';
 11 | import { HistoryEntry } from '../../../store/model/history';
 12 | import { APPLY_BROWSER_ENVIRONMENT } from '../../../store/actions/streamDetails';
 13 | 
 14 | const resourceData = {
 15 |   url: 'abc',
 16 |   useProxy: false,
 17 |   headers: [],
 18 |   technology: BaseTech.AUTO,
 19 | };
 20 | 
 21 | const historyEntry: HistoryEntry = {
 22 |   timestamp: '2020-01-11T20:37:37.885Z',
 23 |   name: 'My stream test',
 24 |   formData: {
 25 |     streamDetails: {
 26 |       streamResource: resourceData,
 27 |       drmLicenseResource: resourceData,
 28 |       drmCertificateResource: resourceData,
 29 |       subtitlesResource: resourceData,
 30 |     },
 31 |     playerOptions: {
 32 |       logLevel: PlayerLogLevel.WARNING,
 33 |       customConfiguration: '',
 34 |       showPlaybackMonitor: true,
 35 |       playerLibrary: 'HLS_JS',
 36 |     },
 37 |   },
 38 | };
 39 | 
 40 | const simpleUrlSetup = {
 41 |   streamDetails: {
 42 |     streamResource: {
 43 |       url: 'https://example.com/stream.m3u8',
 44 |       technology: BaseTech.AUTO,
 45 |     },
 46 |   },
 47 | };
 48 | 
 49 | const advancedUrlSetup = {
 50 |   streamDetails: {
 51 |     streamResource: resourceData,
 52 |     drmLicenseResource: resourceData,
 53 |     drmCertificateResource: resourceData,
 54 |     subtitlesResource: resourceData,
 55 |   },
 56 |   playerOptions: {
 57 |     logLevel: PlayerLogLevel.WARNING,
 58 |     customConfiguration: '{"hello":"world"}',
 59 |     showPlaybackMonitor: true,
 60 |     playerLibrary: 'HTML',
 61 |   },
 62 | };
 63 | 
 64 | describe('UI reducer', () => {
 65 |   test('Shared setup from URL should reveal the info tab, correct form mod, and expand all detail views', () => {
 66 |     const newState1 = uiReducer(
 67 |       {
 68 |         advancedMode: false,
 69 |         rightPaneWidth: 424,
 70 |         expandedAdvancedAccordionIndices: [1],
 71 |         rightPaneActiveTabIndex: 1,
 72 |         isRightPaneExpanded: false,
 73 |       },
 74 |       { type: APPLY_BROWSER_ENVIRONMENT, value: { supportedDrmTechnologies: [], urlSetup: advancedUrlSetup } }
 75 |     );
 76 |     expect(newState1).toEqual({
 77 |       advancedMode: true,
 78 |       rightPaneWidth: 424,
 79 |       expandedAdvancedAccordionIndices: [0, 1],
 80 |       rightPaneActiveTabIndex: 0,
 81 |       isRightPaneExpanded: true,
 82 |     });
 83 |     const newState2 = uiReducer(
 84 |       {
 85 |         advancedMode: false,
 86 |         rightPaneWidth: 424,
 87 |         expandedAdvancedAccordionIndices: [1],
 88 |         rightPaneActiveTabIndex: 1,
 89 |         isRightPaneExpanded: false,
 90 |       },
 91 |       { type: APPLY_BROWSER_ENVIRONMENT, value: { supportedDrmTechnologies: [], urlSetup: simpleUrlSetup } }
 92 |     );
 93 |     expect(newState2).toEqual({
 94 |       advancedMode: false,
 95 |       rightPaneWidth: 424,
 96 |       expandedAdvancedAccordionIndices: [1],
 97 |       rightPaneActiveTabIndex: 0,
 98 |       isRightPaneExpanded: true,
 99 |     });
100 |     const newState3 = uiReducer(
101 |       {
102 |         advancedMode: false,
103 |         rightPaneWidth: 424,
104 |         expandedAdvancedAccordionIndices: [1],
105 |         rightPaneActiveTabIndex: 1,
106 |         isRightPaneExpanded: false,
107 |       },
108 |       { type: APPLY_BROWSER_ENVIRONMENT, value: { supportedDrmTechnologies: [], urlSetup: undefined } }
109 |     );
110 |     expect(newState3).toEqual({
111 |       advancedMode: false,
112 |       rightPaneWidth: 424,
113 |       expandedAdvancedAccordionIndices: [1],
114 |       rightPaneActiveTabIndex: 1,
115 |       isRightPaneExpanded: false,
116 |     });
117 |   });
118 |   test('Pane resizing should be applied to the UI state, so it can be persisted.', () => {
119 |     const newState = uiReducer(
120 |       {
121 |         advancedMode: true,
122 |         rightPaneWidth: 424,
123 |         expandedAdvancedAccordionIndices: [1],
124 |         rightPaneActiveTabIndex: 1,
125 |         isRightPaneExpanded: true,
126 |       },
127 |       { type: PANE_RESIZE, value: 313 }
128 |     );
129 |     expect(newState).toEqual({
130 |       advancedMode: true,
131 |       rightPaneWidth: 313,
132 |       expandedAdvancedAccordionIndices: [1],
133 |       rightPaneActiveTabIndex: 1,
134 |       isRightPaneExpanded: true,
135 |     });
136 |   });
137 |   test('Advanced mode switch should be applied to the UI state.', () => {
138 |     const newState = uiReducer(
139 |       {
140 |         advancedMode: true,
141 |         rightPaneWidth: 424,
142 |         expandedAdvancedAccordionIndices: [1],
143 |         rightPaneActiveTabIndex: 1,
144 |         isRightPaneExpanded: true,
145 |       },
146 |       { type: TOGGLE_ADVANCED_MODE, value: false }
147 |     );
148 |     expect(newState).toEqual({
149 |       advancedMode: false,
150 |       rightPaneWidth: 424,
151 |       expandedAdvancedAccordionIndices: [1],
152 |       rightPaneActiveTabIndex: 1,
153 |       isRightPaneExpanded: true,
154 |     });
155 |   });
156 |   test('Change to advanced mode if restoring a history entry with data from the advanced forms.', () => {
157 |     const newState = uiReducer(
158 |       {
159 |         advancedMode: false,
160 |         rightPaneWidth: 424,
161 |         expandedAdvancedAccordionIndices: [1],
162 |         rightPaneActiveTabIndex: 1,
163 |         isRightPaneExpanded: true,
164 |       },
165 |       {
166 |         type: RESTORE_HISTORY_ENTRY,
167 |         value: historyEntry,
168 |       }
169 |     );
170 |     expect(newState).toEqual({
171 |       advancedMode: true,
172 |       rightPaneWidth: 424,
173 |       expandedAdvancedAccordionIndices: [1],
174 |       rightPaneActiveTabIndex: 1,
175 |       isRightPaneExpanded: true,
176 |     });
177 |   });
178 |   test('Changes to advanced accordion expansions is applied to UI state.', () => {
179 |     const newState = uiReducer(
180 |       {
181 |         advancedMode: true,
182 |         rightPaneWidth: 424,
183 |         expandedAdvancedAccordionIndices: [1],
184 |         rightPaneActiveTabIndex: 1,
185 |         isRightPaneExpanded: true,
186 |       },
187 |       { type: ADVANCED_ACCORDION_CHANGE, value: [0, 1] }
188 |     );
189 |     expect(newState).toEqual({
190 |       advancedMode: true,
191 |       rightPaneWidth: 424,
192 |       expandedAdvancedAccordionIndices: [0, 1],
193 |       rightPaneActiveTabIndex: 1,
194 |       isRightPaneExpanded: true,
195 |     });
196 |   });
197 |   test('Selection of active tab in the right pane is applied to UI state.', () => {
198 |     const newState = uiReducer(
199 |       {
200 |         advancedMode: true,
201 |         rightPaneWidth: 424,
202 |         expandedAdvancedAccordionIndices: [1],
203 |         rightPaneActiveTabIndex: 1,
204 |         isRightPaneExpanded: true,
205 |       },
206 |       { type: RIGHT_PANE_TAB_CHANGE, value: 2 }
207 |     );
208 |     expect(newState).toEqual({
209 |       advancedMode: true,
210 |       rightPaneWidth: 424,
211 |       expandedAdvancedAccordionIndices: [1],
212 |       rightPaneActiveTabIndex: 2,
213 |       isRightPaneExpanded: true,
214 |     });
215 |   });
216 |   test('Right pane expand/collapse toggle actions should be applied to the UI state.', () => {
217 |     const newState = uiReducer(
218 |       {
219 |         advancedMode: true,
220 |         rightPaneWidth: 424,
221 |         expandedAdvancedAccordionIndices: [1],
222 |         rightPaneActiveTabIndex: 1,
223 |         isRightPaneExpanded: true,
224 |       },
225 |       { type: TOGGLE_RIGHT_PANE, value: false }
226 |     );
227 |     expect(newState).toEqual({
228 |       advancedMode: true,
229 |       rightPaneWidth: 424,
230 |       expandedAdvancedAccordionIndices: [1],
231 |       rightPaneActiveTabIndex: 1,
232 |       isRightPaneExpanded: false,
233 |     });
234 |   });
235 | });
236 | 


--------------------------------------------------------------------------------
/src/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Heading, HeadingProps } from '@chakra-ui/react';
 3 | 
 4 | export enum Level {
 5 |   H1 = 'h1',
 6 |   H2 = 'h2',
 7 |   H3 = 'h3',
 8 |   H4 = 'h4',
 9 |   H5 = 'h5',
10 |   H6 = 'h6',
11 | }
12 | 
13 | const getStyles = (level: Level): HeadingProps => {
14 |   switch (level) {
15 |     case Level.H1:
16 |       return {
17 |         size: 'md',
18 |         my: 1,
19 |         mx: 4,
20 |         px: 1,
21 |       };
22 |     case Level.H2:
23 |       return {
24 |         size: 'sm',
25 |         m: 0,
26 |         p: 1,
27 |         textAlign: 'left',
28 |       };
29 |     case Level.H3:
30 |       return {
31 |         size: 'md',
32 |         my: 4,
33 |       };
34 |     case Level.H4:
35 |       return {
36 |         size: 'sm',
37 |         my: 4,
38 |       };
39 |     case Level.H6:
40 |       return {
41 |         size: 'sm',
42 |         fontWeight: 'normal',
43 |         justifySelf: 'center',
44 |       };
45 |     default:
46 |       return {
47 |         size: 'sm',
48 |       };
49 |   }
50 | };
51 | 
52 | type Props = HeadingProps & {
53 |   level: Level;
54 |   children: React.ReactNode;
55 | };
56 | 
57 | const Header: React.FC<Props> = ({ level, children, ...headingProps }: Props) => (
58 |   <Heading as={level} {...getStyles(level)} {...headingProps}>
59 |     {children}
60 |   </Heading>
61 | );
62 | 
63 | export default Header;
64 | 


--------------------------------------------------------------------------------
/src/components/HeaderRows.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | import { Box, Collapse, Flex, IconButton, Input, BoxProps } from '@chakra-ui/react';
 3 | import { DeleteIcon } from '@chakra-ui/icons';
 4 | import { Header } from '../store/model/streamDetails';
 5 | 
 6 | type Props = BoxProps & {
 7 |   headers: Header[];
 8 |   onHeadersChange: (headers: Header[]) => void;
 9 | };
10 | 
11 | type AnimatingRowProps = {
12 |   header: Header;
13 |   onChange: (header: Header) => void;
14 |   onDelete: (header: Header) => void;
15 | };
16 | 
17 | const AnimatingRow = ({ header, onChange, onDelete }: AnimatingRowProps) => {
18 |   const { id, name, value } = header;
19 |   const [isOpen, setIsOpen] = useState(false);
20 | 
21 |   const handleAnimationEnd = () => {
22 |     if (!isOpen) {
23 |       onDelete(header);
24 |     }
25 |   };
26 | 
27 |   const handleDelete = () => {
28 |     setIsOpen(false);
29 |   };
30 | 
31 |   useEffect(() => {
32 |     setIsOpen(true);
33 |   }, []);
34 | 
35 |   return (
36 |     <>
37 |       <Collapse key={id} in={isOpen} onAnimationComplete={handleAnimationEnd}>
38 |         <Flex direction="row" py={2}>
39 |           <Input
40 |             flex="1 2 auto"
41 |             placeholder="Header name"
42 |             mr={2}
43 |             value={name}
44 |             onChange={(evt: React.ChangeEvent<HTMLInputElement>) => onChange({ name: evt.target.value, value, id })}
45 |           />
46 |           <Input
47 |             flex="2 1 auto"
48 |             placeholder="Header value"
49 |             mr={2}
50 |             value={value}
51 |             onChange={(evt: React.ChangeEvent<HTMLInputElement>) => onChange({ name, value: evt.target.value, id })}
52 |           />
53 |           <IconButton flex="0" aria-label="Remove header" icon={<DeleteIcon />} onClick={handleDelete} mr={2} />
54 |         </Flex>
55 |       </Collapse>
56 |     </>
57 |   );
58 | };
59 | 
60 | const HeaderRows: React.FC<Props> = (props) => {
61 |   const { headers = [], onHeadersChange, ...boxProps } = props;
62 | 
63 |   const handleChange = (header: Header) => {
64 |     const headersCopy = headers.slice(0);
65 |     const index = headers.findIndex((h) => h.id === header.id);
66 |     if (index >= 0) {
67 |       headersCopy[index] = header;
68 |       onHeadersChange(headersCopy);
69 |     }
70 |   };
71 | 
72 |   const handleDelete = ({ id }: Header) => {
73 |     const headersCopy = headers.slice(0);
74 |     const index = headers.findIndex((h) => h.id === id);
75 |     if (index >= 0) {
76 |       headersCopy.splice(index, 1);
77 |       onHeadersChange(headersCopy);
78 |     }
79 |   };
80 | 
81 |   return (
82 |     <Box mb={headers.length ? 4 : 0} {...boxProps}>
83 |       {headers.map &&
84 |         headers.map((h) => <AnimatingRow key={h.id} header={h} onChange={handleChange} onDelete={handleDelete} />)}
85 |     </Box>
86 |   );
87 | };
88 | 
89 | export default HeaderRows;
90 | 


--------------------------------------------------------------------------------
/src/components/JsonEditor.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import { Controlled as CodeMirror } from 'react-codemirror2';
 4 | 
 5 | import 'codemirror/lib/codemirror.css';
 6 | import 'codemirror/addon/lint/lint.css';
 7 | import 'codemirror/addon/lint/lint';
 8 | import 'codemirror/addon/lint/json-lint';
 9 | import 'codemirror/mode/javascript/javascript';
10 | 
11 | // @ts-ignore
12 | import jsonlint from 'jsonlint-mod';
13 | // @ts-ignore
14 | window.jsonlint = jsonlint;
15 | 
16 | type Props = {
17 |   value: string;
18 |   onChange: (value: string) => void;
19 | };
20 | 
21 | export const JsonEditor: React.FC<Props> = ({ value, onChange }) => (
22 |   <CodeMirror
23 |     value={value}
24 |     options={{
25 |       mode: 'application/json',
26 |       theme: 'default',
27 |       lineNumbers: true,
28 |       tabSize: 2,
29 |       gutters: ['CodeMirror-lint-markers'],
30 |       lint: value && value.trim(),
31 |     }}
32 |     onBeforeChange={(editor, data, newValue) => onChange(newValue)}
33 |   />
34 | );
35 | 


--------------------------------------------------------------------------------
/src/components/SidebarSwitch.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { FormControl, FormLabel, Switch } from '@chakra-ui/react';
 3 | 
 4 | type FullSwitchProps = {
 5 |   label: string;
 6 |   isChecked?: boolean;
 7 |   id?: string;
 8 | };
 9 | 
10 | const generateId = () => `switch-${(Math.random() * 100000).toFixed(0)}`;
11 | 
12 | const SidebarSwitch: React.FC<FullSwitchProps> = ({ label, isChecked, id = generateId() }) => (
13 |   <FormControl flex="0" display="flex" flexDirection="row" justifyContent="flex-start" alignItems="center">
14 |     <Switch id={id} isChecked={isChecked} onChange={() => {}}>
15 |       &nbsp;
16 |     </Switch>
17 |     <FormLabel ml={2} htmlFor={id}>
18 |       {label}
19 |     </FormLabel>
20 |   </FormControl>
21 | );
22 | 
23 | export default SidebarSwitch;
24 | 


--------------------------------------------------------------------------------
/src/components/react-split.d.ts:
--------------------------------------------------------------------------------
 1 | declare module 'react-split' {
 2 |   import React, { ReactNode, ReactElement } from 'react';
 3 |   export interface SplitProps extends React.HTMLProps<HTMLDivElement> {
 4 |     // Initial sizes of each element in percents or CSS values.
 5 |     sizes?: number[];
 6 | 
 7 |     // Minimum size of each element.
 8 |     minSize?: number | number[];
 9 | 
10 |     expandToMin?: boolean;
11 | 
12 |     // Gutter size in pixels.
13 |     gutterSize?: number;
14 | 
15 |     gutterAlign?: string;
16 | 
17 |     // Snap to minimum size offset in pixels.
18 |     snapOffset?: number;
19 | 
20 |     dragInterval?: number;
21 | 
22 |     // Direction to split: horizontal or vertical.
23 |     direction?: 'horizontal' | 'vertical';
24 | 
25 |     // Cursor to display while dragging.
26 |     cursor?: string;
27 | 
28 |     // Callback on drag.
29 |     onDrag?(): void;
30 | 
31 |     // Callback on drag start.
32 |     onDragStart?(): void;
33 | 
34 |     // Callback on drag end.
35 |     onDragEnd?(sizes: number[]): void;
36 | 
37 |     // Called to create each gutter element
38 |     gutter?(index: number, direction: 'horizontal' | 'vertical'): HTMLElement;
39 | 
40 |     style?: CSSStyleDeclarationPartial;
41 | 
42 |     collapsed?: number | undefined;
43 | 
44 |     // Called to set the style of each element.
45 |     elementStyle?(
46 |       dimension: 'width' | 'height',
47 |       elementSize: number,
48 |       gutterSize: number,
49 |       index: number
50 |     ): CSSStyleDeclarationPartial;
51 | 
52 |     // Called to set the style of the gutter.
53 |     gutterStyle?(dimension: 'width' | 'height', gutterSize: number, index: number): CSSStyleDeclarationPartial;
54 | 
55 |     children: ReactNode;
56 |   }
57 | 
58 |   const Split: (props: SplitProps) => ReactElement;
59 | 
60 |   export default Split;
61 | }
62 | 


--------------------------------------------------------------------------------
/src/graphics/replay-logo.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <svg
  3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
  4 |    xmlns:cc="http://creativecommons.org/ns#"
  5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  6 |    xmlns:svg="http://www.w3.org/2000/svg"
  7 |    xmlns="http://www.w3.org/2000/svg"
  8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 10 |    sodipodi:docname="replay-logo.svg"
 11 |    inkscape:version="1.0 (4035a4f, 2020-05-01)"
 12 |    id="svg469"
 13 |    version="1.1"
 14 |    viewBox="0 0 200.28047 34.159565"
 15 |    height="34.159565mm"
 16 |    width="200.28047mm">
 17 |   <title
 18 |      id="title545">Replay logo</title>
 19 |   <defs
 20 |      id="defs463" />
 21 |   <sodipodi:namedview
 22 |      fit-margin-bottom="0"
 23 |      fit-margin-right="0"
 24 |      fit-margin-left="0"
 25 |      fit-margin-top="0"
 26 |      inkscape:guide-bbox="true"
 27 |      showguides="false"
 28 |      inkscape:pagecheckerboard="true"
 29 |      inkscape:window-maximized="0"
 30 |      inkscape:window-y="321"
 31 |      inkscape:window-x="1819"
 32 |      inkscape:window-height="998"
 33 |      inkscape:window-width="1585"
 34 |      showgrid="false"
 35 |      inkscape:document-rotation="0"
 36 |      inkscape:current-layer="layer1"
 37 |      inkscape:document-units="mm"
 38 |      inkscape:cy="84.938082"
 39 |      inkscape:cx="443.03034"
 40 |      inkscape:zoom="1.279708"
 41 |      inkscape:pageshadow="2"
 42 |      inkscape:pageopacity="1"
 43 |      borderopacity="1.0"
 44 |      bordercolor="#666666"
 45 |      pagecolor="#ffffff"
 46 |      id="base">
 47 |     <sodipodi:guide
 48 |        id="guide571"
 49 |        orientation="1,0"
 50 |        position="-35.01451,121.68623" />
 51 |     <sodipodi:guide
 52 |        id="guide573"
 53 |        orientation="0,-1"
 54 |        position="-45.163998,114.49962" />
 55 |     <sodipodi:guide
 56 |        id="guide660"
 57 |        orientation="0,-1"
 58 |        position="-42.180498,126.01519" />
 59 |     <sodipodi:guide
 60 |        id="guide662"
 61 |        orientation="0,-1"
 62 |        position="-42.180498,102.98638" />
 63 |   </sodipodi:namedview>
 64 |   <metadata
 65 |      id="metadata466">
 66 |     <rdf:RDF>
 67 |       <cc:Work
 68 |          rdf:about="">
 69 |         <dc:format>image/svg+xml</dc:format>
 70 |         <dc:type
 71 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 72 |         <dc:title>Replay logo</dc:title>
 73 |         <dc:creator>
 74 |           <cc:Agent>
 75 |             <dc:title>Tor Erik Alræk</dc:title>
 76 |           </cc:Agent>
 77 |         </dc:creator>
 78 |         <cc:license
 79 |            rdf:resource="https://github.com/vimond/replay/blob/master/LICENSE" />
 80 |         <dc:publisher>
 81 |           <cc:Agent>
 82 |             <dc:title />
 83 |           </cc:Agent>
 84 |         </dc:publisher>
 85 |       </cc:Work>
 86 |     </rdf:RDF>
 87 |   </metadata>
 88 |   <g
 89 |      transform="translate(-11.641668)"
 90 |      id="layer1"
 91 |      inkscape:groupmode="layer"
 92 |      style="fill:#ffffff"
 93 |      inkscape:label="Layer 1">
 94 |     <g
 95 |        aria-label="REPLAY"
 96 |        id="text12-4-9"
 97 |        transform="matrix(1.2706466,0,0,1.3620198,-25.282348,-154.77546)">
 98 |       <path
 99 |          id="path43-5-1"
100 |          sodipodi:type="inkscape:offset"
101 |          inkscape:radius="0"
102 |          inkscape:original="M 46.583984 113.63672 L 46.583984 138.7168 L 50.941406 138.7168 L 50.941406 129.05469 L 55.798828 129.05469 L 60.828125 138.7168 L 65.498047 138.7168 L 65.498047 138.49414 L 59.865234 128.03711 C 61.312175 127.42848 62.436378 126.56095 63.240234 125.43555 C 64.055574 124.29866 64.462891 122.89341 64.462891 121.2168 C 64.462891 118.7593 63.676777 116.88164 62.103516 115.58398 C 60.530254 114.28633 58.296226 113.63672 55.402344 113.63672 L 46.583984 113.63672 z M 69.162109 113.63672 L 69.162109 138.7168 L 85.560547 138.7168 L 85.560547 135.23828 L 73.519531 135.23828 L 73.519531 127.52148 L 83.820312 127.52148 L 83.820312 124.07617 L 73.519531 124.07617 L 73.519531 117.15039 L 85.439453 117.15039 L 85.439453 113.63672 L 69.162109 113.63672 z M 89.671875 113.63672 L 89.671875 138.7168 L 94.029297 138.7168 L 94.029297 129.39844 L 99.214844 129.39844 C 102.12021 129.39844 104.37666 128.71421 105.98438 127.34766 C 107.60357 125.9811 108.41406 124.07078 108.41406 121.61328 C 108.41406 119.21319 107.58724 117.28265 105.93359 115.82422 C 104.29143 114.3658 102.06959 113.63672 99.267578 113.63672 L 89.671875 113.63672 z M 112.73242 113.63672 L 112.73242 138.7168 L 128.47656 138.7168 L 128.47656 135.23828 L 117.08984 135.23828 L 117.08984 113.63672 L 112.73242 113.63672 z M 139.92578 113.63672 L 130.45312 138.7168 L 134.98242 138.7168 L 137.01562 132.87695 L 146.73047 132.87695 L 148.78125 138.7168 L 153.32812 138.7168 L 143.83594 113.63672 L 139.92578 113.63672 z M 151.73828 113.63672 L 160.16211 129.48438 L 160.16211 138.7168 L 164.53711 138.7168 L 164.53711 129.48438 L 172.94336 113.63672 L 168.11914 113.63672 L 162.34961 125.52344 L 156.57812 113.63672 L 151.73828 113.63672 z M 50.941406 117.15039 L 55.541016 117.15039 C 57.056858 117.17336 58.19325 117.55216 58.951172 118.28711 C 59.720577 119.02206 60.105469 120.06266 60.105469 121.40625 C 60.105469 122.69242 59.692058 123.70864 58.865234 124.45508 C 58.038411 125.19004 56.88983 125.55664 55.419922 125.55664 L 50.941406 125.55664 L 50.941406 117.15039 z M 94.029297 117.15039 L 99.386719 117.15039 C 100.83366 117.17336 101.97201 117.59286 102.79883 118.4082 C 103.62565 119.21206 104.03906 120.29141 104.03906 121.64648 C 104.03906 123.02452 103.62979 124.08145 102.81445 124.81641 C 101.99911 125.53988 100.81787 125.90234 99.267578 125.90234 L 94.029297 125.90234 L 94.029297 117.15039 z M 141.87305 118.95898 L 145.50781 129.36328 L 138.23828 129.36328 L 141.87305 118.95898 z "
103 |          d="m 46.583984,113.63672 v 25.08008 h 4.357422 v -9.66211 h 4.857422 l 5.029297,9.66211 h 4.669922 v -0.22266 l -5.632813,-10.45703 c 1.446941,-0.60863 2.571144,-1.47616 3.375,-2.60156 0.81534,-1.13689 1.222657,-2.54214 1.222657,-4.21875 0,-2.4575 -0.786114,-4.33516 -2.359375,-5.63282 -1.573262,-1.29765 -3.80729,-1.94726 -6.701172,-1.94726 z m 22.578125,0 v 25.08008 h 16.398438 v -3.47852 H 73.519531 v -7.7168 h 10.300781 v -3.44531 H 73.519531 v -6.92578 h 11.919922 v -3.51367 z m 20.509766,0 v 25.08008 h 4.357422 v -9.31836 h 5.185547 c 2.905366,0 5.161816,-0.68423 6.769536,-2.05078 1.61919,-1.36656 2.42968,-3.27688 2.42968,-5.73438 0,-2.40009 -0.82682,-4.33063 -2.48047,-5.78906 -1.64216,-1.45842 -3.864,-2.1875 -6.666012,-2.1875 z m 23.060545,0 v 25.08008 h 15.74414 v -3.47852 h -11.38672 v -21.60156 z m 27.19336,0 -9.47266,25.08008 h 4.5293 l 2.0332,-5.83985 h 9.71485 l 2.05078,5.83985 h 4.54687 l -9.49218,-25.08008 z m 11.8125,0 8.42383,15.84766 v 9.23242 h 4.375 v -9.23242 l 8.40625,-15.84766 h -4.82422 l -5.76953,11.88672 -5.77149,-11.88672 z m -100.796874,3.51367 h 4.59961 c 1.515842,0.023 2.652234,0.40177 3.410156,1.13672 0.769405,0.73495 1.154297,1.77555 1.154297,3.11914 0,1.28617 -0.413411,2.30239 -1.240235,3.04883 -0.826823,0.73496 -1.975404,1.10156 -3.445312,1.10156 h -4.478516 z m 43.087891,0 h 5.357422 c 1.446941,0.023 2.585291,0.44247 3.412111,1.25781 0.82682,0.80386 1.24023,1.88321 1.24023,3.23828 0,1.37804 -0.40927,2.43497 -1.22461,3.16993 -0.81534,0.72347 -1.99658,1.08593 -3.546872,1.08593 h -5.238281 z m 47.843753,1.80859 3.63476,10.4043 h -7.26953 z" />
104 |     </g>
105 |     <path
106 |        id="path215-9-0"
107 |        d="m 22.326439,5.564227 -10.684771,11.23693 v 0.54915 l 10.684771,11.24275 h 6.097628 L 17.563981,17.092647 28.424067,5.564227 Z"
108 |        sodipodi:nodetypes="cccccccc"
109 |        style="opacity:0.5" />
110 |     <path
111 |        id="path252-4-0"
112 |        sodipodi:type="inkscape:offset"
113 |        inkscape:radius="0"
114 |        inkscape:original="M 35.410156 252.71484 L 32.099609 257.24219 L 35.410156 261.76953 L 35.410156 252.71484 z "
115 |        transform="matrix(1.6587418,0,0,1.2586803,-30.302208,-306.70592)"
116 |        style="opacity:0.8"
117 |        d="m 35.410156,252.71484 -3.310547,4.52735 3.310547,4.52734 z" />
118 |     <path
119 |        sodipodi:nodetypes="cccccccc"
120 |        d="m 201.23737,5.551397 10.68477,11.23691 v 0.54915 l -10.68477,11.24275 h -6.09763 l 10.86009,-11.50041 -10.86009,-11.5284 z"
121 |        style="opacity:0.5"
122 |        id="path215-9-0-7" />
123 |     <path
124 |        transform="matrix(-1.6587418,0,0,1.2586803,253.86602,-306.71878)"
125 |        inkscape:original="M 35.410156 252.71484 L 32.099609 257.24219 L 35.410156 261.76953 L 35.410156 252.71484 z "
126 |        inkscape:radius="0"
127 |        sodipodi:type="inkscape:offset"
128 |        style="opacity:0.8"
129 |        id="path252-4-0-0"
130 |        d="m 35.410156,252.71484 -3.310547,4.52735 3.310547,4.52734 z" />
131 |   </g>
132 | </svg>
133 | 


--------------------------------------------------------------------------------
/src/graphics/streamlab-logo.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <svg
  3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
  4 |    xmlns:cc="http://creativecommons.org/ns#"
  5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  6 |    xmlns:svg="http://www.w3.org/2000/svg"
  7 |    xmlns="http://www.w3.org/2000/svg"
  8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 10 |    sodipodi:docname="streamlab-logo.svg"
 11 |    inkscape:version="1.0 (4035a4f, 2020-05-01)"
 12 |    id="svg469"
 13 |    version="1.1"
 14 |    viewBox="0 0 286.48975 33.343121"
 15 |    height="33.343121mm"
 16 |    width="286.48975mm">
 17 |   <title
 18 |      id="title545">Replay logo</title>
 19 |   <defs
 20 |      id="defs463" />
 21 |   <sodipodi:namedview
 22 |      fit-margin-bottom="0"
 23 |      fit-margin-right="0"
 24 |      fit-margin-left="0"
 25 |      fit-margin-top="0"
 26 |      inkscape:guide-bbox="true"
 27 |      showguides="true"
 28 |      inkscape:pagecheckerboard="true"
 29 |      inkscape:window-maximized="0"
 30 |      inkscape:window-y="85"
 31 |      inkscape:window-x="2050"
 32 |      inkscape:window-height="998"
 33 |      inkscape:window-width="1585"
 34 |      showgrid="false"
 35 |      inkscape:document-rotation="0"
 36 |      inkscape:current-layer="layer1"
 37 |      inkscape:document-units="mm"
 38 |      inkscape:cy="593.76629"
 39 |      inkscape:cx="1052.514"
 40 |      inkscape:zoom="0.22685534"
 41 |      inkscape:pageshadow="2"
 42 |      inkscape:pageopacity="1"
 43 |      borderopacity="1.0"
 44 |      bordercolor="#666666"
 45 |      pagecolor="#ffffff"
 46 |      id="base" />
 47 |   <metadata
 48 |      id="metadata466">
 49 |     <rdf:RDF>
 50 |       <cc:Work
 51 |          rdf:about="">
 52 |         <dc:format>image/svg+xml</dc:format>
 53 |         <dc:type
 54 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 55 |         <dc:title>Vimond Streamlab logo</dc:title>
 56 |         <dc:creator>
 57 |           <cc:Agent>
 58 |             <dc:title>Tor Erik Alræk</dc:title>
 59 |           </cc:Agent>
 60 |         </dc:creator>
 61 |         <cc:license
 62 |            rdf:resource="https://github.com/vimond/streamlab/blob/master/LICENSE" />
 63 |         <dc:publisher>
 64 |           <cc:Agent>
 65 |             <dc:title />
 66 |           </cc:Agent>
 67 |         </dc:publisher>
 68 |       </cc:Work>
 69 |     </rdf:RDF>
 70 |   </metadata>
 71 |   <g
 72 |      transform="translate(-16.544269)"
 73 |      id="layer1"
 74 |      inkscape:groupmode="layer"
 75 |      style="fill:#000000"
 76 |      inkscape:label="Layer 1">
 77 |     <path
 78 |        style="opacity:0.5"
 79 |        sodipodi:nodetypes="cccccccc"
 80 |        d="m 280.86707,5.7251958 10.68477,11.2369102 v 0.54915 l -10.68477,11.24275 h -6.09763 L 285.62953,17.253596 274.76944,5.7251958 Z"
 81 |        id="path215-9-0-7" />
 82 |     <path
 83 |        style="opacity:0.7"
 84 |        transform="matrix(-1.6587418,0,0,1.2586803,333.49572,-306.54497)"
 85 |        inkscape:original="M 35.410156 252.71484 L 32.099609 257.24219 L 35.410156 261.76953 L 35.410156 252.71484 z "
 86 |        inkscape:radius="0"
 87 |        sodipodi:type="inkscape:offset"
 88 |        id="path252-4-0-0"
 89 |        d="m 35.410156,252.71484 -3.310547,4.52735 3.310547,4.52734 z" />
 90 |     <g
 91 |        id="text1158"
 92 |        aria-label="STREAMLAB"
 93 |        transform="matrix(0.9304743,0,0,1,16.306175,-0.05982991)">
 94 |       <path
 95 |          id="path1215"
 96 |          d="m 18.866517,24.599119 q 0,-2.139665 -1.515596,-3.298651 Q 15.857613,20.141483 11.934893,18.960209 8.0121724,17.778935 5.6942014,16.330203 1.258853,13.54418 1.258853,9.0642557 q 0,-3.9227201 3.1872102,-6.463573 3.2094983,-2.54085279 8.3134918,-2.54085279 3.387804,0 6.040098,1.24813819 2.652294,1.2481383 4.16789,3.5661093 1.515596,2.2956828 1.515596,5.1039938 h -5.616622 q 0,-2.5408528 -1.604749,-3.9672965 -1.582461,-1.4487319 -4.546789,-1.4487319 -2.7637347,0 -4.3016193,1.1812737 -1.5155964,1.1812737 -1.5155964,3.2986511 0,1.7830544 1.6493255,2.9866164 1.6493252,1.181274 5.4383162,2.317971 3.788991,1.114409 6.084674,2.563141 2.295683,1.426444 3.365516,3.298651 1.069833,1.849919 1.069833,4.346196 0,4.056449 -3.120346,6.463573 -3.098057,2.384835 -8.424933,2.384835 -3.5215329,0 -6.4858612,-1.292714 Q 3.5322477,30.795234 1.8829221,28.499551 0.2558848,26.203868 0.2558848,23.150387 H 5.894795 q 0,2.763735 1.827631,4.279331 1.827631,1.515597 5.237723,1.515597 2.94204,0 4.41306,-1.181274 1.493308,-1.203562 1.493308,-3.164922 z" />
 97 |       <path
 98 |          id="path1217"
 99 |          d="M 53.907472,5.0523828 H 43.788637 V 32.957188 H 38.194304 V 5.0523828 H 28.164621 V 0.50559357 h 25.742851 z" />
100 |       <path
101 |          id="path1219"
102 |          d="M 71.117882,20.453517 H 64.832615 V 32.957188 H 59.193704 V 0.50559357 h 11.41155 q 5.616622,0 8.670103,2.51856463 3.053481,2.5185647 3.053481,7.2882358 0,3.254075 -1.582461,5.460605 -1.560173,2.184242 -4.368484,3.365515 l 7.288236,13.528927 v 0.289747 h -6.040097 z m -6.285267,-4.524501 h 5.794927 q 2.852888,0 4.457637,-1.426444 1.604749,-1.448732 1.604749,-3.945008 0,-2.6077174 -1.493308,-4.0341611 Q 73.7256,5.0969592 70.783559,5.0523828 h -5.950944 z" />
103 |       <path
104 |          id="path1221"
105 |          d="M 107.69672,18.469869 H 94.368385 v 9.985106 h 15.579435 v 4.502213 H 88.729475 V 0.50559357 H 109.79181 V 5.0523828 H 94.368385 v 8.9598492 h 13.328335 z" />
106 |       <path
107 |          id="path1223"
108 |          d="M 133.75553,25.401494 H 121.185 l -2.63001,7.555694 H 112.6932 L 124.9517,0.50559357 h 5.05942 L 142.29191,32.957188 h -5.88408 z m -10.98807,-4.54679 h 9.40561 l -4.7028,-13.462062 z" />
109 |       <path
110 |          id="path1225"
111 |          d="m 154.30918,0.50559357 9.36104,24.87361243 9.33874,-24.87361243 h 7.28824 V 32.957188 h -5.61662 V 22.25886 l 0.5572,-14.3090134 -9.58392,25.0073414 H 161.6197 L 152.05807,7.9721348 152.61528,22.25886 v 10.698328 h -5.61662 V 0.50559357 Z" />
112 |       <path
113 |          id="path1227"
114 |          d="m 193.58488,28.454975 h 14.73249 v 4.502213 h -20.3714 V 0.50559357 h 5.63891 z" />
115 |       <path
116 |          id="path1229"
117 |          d="m 232.25882,25.401494 h -12.57054 l -2.63001,7.555694 h -5.86179 l 12.2585,-32.45159443 h 5.05942 L 240.79519,32.957188 h -5.88408 z m -10.98808,-4.54679 h 9.40561 l -4.7028,-13.462062 z" />
118 |       <path
119 |          id="path1231"
120 |          d="M 245.50192,32.957188 V 0.50559357 h 11.1218 q 5.50518,0 8.38036,2.20653013 2.87518,2.2065301 2.87518,6.5750139 0,2.2288184 -1.20357,4.0118724 -1.20356,1.783055 -3.52153,2.763735 2.63001,0.713222 4.05645,2.69687 1.44873,1.96136 1.44873,4.725095 0,4.569077 -2.94204,7.020778 -2.91975,2.4517 -8.38035,2.4517 z m 5.63891,-14.643336 v 10.141123 h 6.26298 q 2.65229,0 4.1456,-1.315003 1.49331,-1.315003 1.49331,-3.655262 0,-5.059418 -5.17086,-5.170858 z m 0,-4.145602 h 5.52747 q 2.63001,0 4.10103,-1.181274 1.4933,-1.203562 1.4933,-3.3878039 0,-2.4071237 -1.38186,-3.4769565 -1.35958,-1.0698328 -4.25705,-1.0698328 h -5.48289 z" />
121 |     </g>
122 |     <path
123 |        style="opacity:0.3"
124 |        id="path215-9-0-7-1"
125 |        d="m 292.34926,5.7251959 10.68477,11.2369101 v 0.54915 l -10.68477,11.24275 h -6.09763 L 297.11172,17.253596 286.25163,5.7251959 Z"
126 |        sodipodi:nodetypes="cccccccc" />
127 |   </g>
128 | </svg>
129 | 


--------------------------------------------------------------------------------
/src/graphics/vimond-logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg
 3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 4 |    xmlns:cc="http://creativecommons.org/ns#"
 5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 6 |    xmlns:svg="http://www.w3.org/2000/svg"
 7 |    xmlns="http://www.w3.org/2000/svg"
 8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10 |    inkscape:version="1.0 (4035a4f, 2020-05-01)"
11 |    sodipodi:docname="vimond.svg"
12 |    xml:space="preserve"
13 |    enable-background="new 0 0 1920 1079.999"
14 |    viewBox="0 0 720.26599 119.11501"
15 |    height="119.11501"
16 |    width="720.26599"
17 |    y="0px"
18 |    x="0px"
19 |    id="Layer_1"
20 |    version="1.1"><metadata
21 |    id="metadata1066"><rdf:RDF><cc:Work
22 |        rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
23 |          rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
24 |    id="defs1064" /><sodipodi:namedview
25 |    inkscape:current-layer="Layer_1"
26 |    inkscape:window-maximized="0"
27 |    inkscape:window-y="377"
28 |    inkscape:window-x="2195"
29 |    inkscape:cy="59.557526"
30 |    inkscape:cx="360.133"
31 |    inkscape:zoom="0.56927083"
32 |    fit-margin-bottom="0"
33 |    fit-margin-right="0"
34 |    fit-margin-left="0"
35 |    fit-margin-top="0"
36 |    inkscape:pagecheckerboard="true"
37 |    showgrid="false"
38 |    id="namedview1062"
39 |    inkscape:window-height="480"
40 |    inkscape:window-width="706"
41 |    inkscape:pageshadow="2"
42 |    inkscape:pageopacity="0"
43 |    guidetolerance="10"
44 |    gridtolerance="10"
45 |    objecttolerance="10"
46 |    borderopacity="1"
47 |    bordercolor="#666666"
48 |    pagecolor="#ffffff" />
49 | <g
50 |    transform="translate(-599.867,-480.44199)"
51 |    id="g1059">
52 | 	<path
53 |    id="path1047"
54 |    d="m 684.186,489.088 -14.826,52.01 -5.445,20.174 h -1.859 l -5.449,-20.174 -14.834,-52.01 c -1.877,-6.436 -5.527,-8.646 -10.229,-8.646 h -31.677 l 34.06,107.929 c 2.707,8.309 5.419,11.186 13.55,11.186 h 31.006 c 8.135,0 10.843,-2.877 13.554,-11.186 L 726.092,480.442 H 694.42 c -4.703,0 -8.354,2.21 -10.234,8.646 z" />
55 | 	<rect
56 |    id="rect1049"
57 |    height="118.606"
58 |    width="36.424999"
59 |    y="480.44199"
60 |    x="740.099" />
61 | 	<path
62 |    id="path1051"
63 |    d="m 883.103,487.396 -15.413,35.656 h -1.523 l -16.438,-35.656 c -2.15,-4.333 -4.286,-6.954 -9.536,-6.954 h -44.509 v 118.606 h 33.376 v -71.846 h 1.699 l 21.344,39.559 c 2.63,4.641 4.117,6.217 8.52,6.217 h 10.402 c 4.398,0 6.119,-1.807 8.529,-6.217 l 21.352,-39.559 h 1.691 v 71.846 h 34.388 V 480.442 h -44.341 c -5.246,0 -7.301,2.158 -9.541,6.954 z" />
64 | 	<path
65 |    id="path1053"
66 |    d="m 1027.811,480.442 h -39.478 c -12.374,0 -18.809,2.21 -23.381,6.784 -6.941,6.779 -12.884,19.818 -12.884,52.521 0,32.703 5.942,45.746 12.884,52.523 4.572,4.576 11.007,6.777 23.381,6.777 h 39.478 c 12.365,0 18.81,-2.201 23.39,-6.777 6.938,-6.777 12.867,-19.82 12.867,-52.523 0,-32.703 -5.93,-45.742 -12.867,-52.521 -4.581,-4.574 -11.025,-6.784 -23.39,-6.784 z m -4.412,89.634 c -1.007,1.021 -2.698,1.354 -7.789,1.354 h -15.076 c -5.078,0 -6.77,-0.332 -7.794,-1.354 -1.186,-1.186 -3.218,-4.234 -3.218,-30.328 0,-25.924 2.032,-29.145 3.218,-30.328 1.024,-1.016 2.716,-1.355 7.794,-1.355 h 15.076 c 5.091,0 6.782,0.34 7.789,1.355 1.189,1.184 3.222,4.404 3.222,30.328 0,25.922 -2.032,29.143 -3.222,30.328 z" />
67 | 	<path
68 |    id="path1055"
69 |    d="m 1157.132,541.098 h -0.844 l -30.837,-52.01 c -3.897,-6.436 -7.789,-8.646 -15.583,-8.646 h -31.015 v 118.606 h 34.401 v -67.771 h 0.848 l 36.594,59.131 c 4.065,6.439 7.793,8.641 15.595,8.641 h 25.236 V 480.442 h -34.396 v 60.656 z" />
70 | 	<path
71 |    id="path1057"
72 |    d="m 1308.106,490.445 c -7.11,-7.118 -17.451,-10.003 -36.252,-10.003 h -61.172 v 118.606 h 61.172 c 18.801,0 29.142,-2.711 36.252,-9.83 8.14,-8.127 12.027,-19.816 12.027,-49.471 10e-4,-29.651 -3.887,-41.171 -12.027,-49.302 z m -28.631,78.957 c -2.036,2.027 -5.081,2.873 -13.217,2.873 h -19.143 v -65.057 h 19.143 c 8.305,0 11.181,0.674 13.217,2.705 2.198,2.375 3.223,7.461 3.223,29.824 0,22.362 -1.19,27.618 -3.223,29.655 z" />
73 | </g>
74 | </svg>
75 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import * as serviceWorker from './serviceWorker';
 6 | import { Provider } from 'react-redux';
 7 | import { PersistGate } from 'redux-persist/integration/react';
 8 | import createPersistentStore from './store/persistentStore';
 9 | 
10 | const { store, persistor } = createPersistentStore();
11 | 
12 | ReactDOM.render(
13 |   <Provider store={store}>
14 |     <PersistGate persistor={persistor}>
15 |       <App />
16 |     </PersistGate>
17 |   </Provider>,
18 |   document.getElementById('root')
19 | );
20 | 
21 | // If you want your app to work offline and load faster, you can change
22 | // unregister() to register() below. Note this comes with some pitfalls.
23 | // Learn more about service workers: https://bit.ly/CRA-PWA
24 | serviceWorker.unregister();
25 | 


--------------------------------------------------------------------------------
/src/panels/Advanced.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import {
  3 |   Accordion,
  4 |   AccordionButton,
  5 |   AccordionIcon,
  6 |   AccordionItem,
  7 |   AccordionPanel,
  8 |   AlertDialog,
  9 |   AlertDialogBody,
 10 |   AlertDialogFooter,
 11 |   AlertDialogHeader,
 12 |   AlertDialogContent,
 13 |   AlertDialogOverlay,
 14 |   Button,
 15 |   Flex,
 16 |   Stack,
 17 |   Text,
 18 | } from '@chakra-ui/react';
 19 | import StreamDetails from './StreamDetails';
 20 | import PlayerOptions from './PlayerOptions';
 21 | import Header, { Level } from '../components/Header';
 22 | import { playAdvanced, stop } from '../store/actions/player';
 23 | import { useDispatch, useSelector } from 'react-redux';
 24 | import { clearForms, updateAdvancedAccordionExpansions } from '../store/actions/ui';
 25 | import { AppState } from '../store/reducers';
 26 | import { updateAddressBar } from '../store/model/sharing';
 27 | 
 28 | const SectionHeader: React.FC<{ header: string; isRequired?: boolean }> = ({ header, isRequired }) => (
 29 |   <AccordionButton backgroundColor="gray.100">
 30 |     <Header level={Level.H2} flex="1" lineHeight={1}>
 31 |       {header}
 32 |       {!isRequired && (
 33 |         <Text as="em" fontStyle="normal" color="gray.500" fontWeight="normal" ml="4">
 34 |           {' '}
 35 |           optional
 36 |         </Text>
 37 |       )}
 38 |     </Header>
 39 |     <AccordionIcon />
 40 |   </AccordionButton>
 41 | );
 42 | 
 43 | const Advanced: React.FC = () => {
 44 |   const expandedIndices = useSelector((state: AppState) => state.ui.expandedAdvancedAccordionIndices);
 45 |   const isPlaying = useSelector((state: AppState) => !!state.player.source);
 46 |   const isPlayable = useSelector((state: AppState) => !!state.streamDetails.streamResource.url);
 47 |   const isPlayerOptionsModified = useSelector((state: AppState) => state.playerOptions.isModified);
 48 | 
 49 |   const [isOpen, setIsOpen] = React.useState<boolean>(false);
 50 | 
 51 |   const dispatch = useDispatch();
 52 |   const handleCloseClick = () => setIsOpen(false);
 53 |   const handleClearClick = () => {
 54 |     setIsOpen(false);
 55 |     updateAddressBar();
 56 |     dispatch(clearForms());
 57 |   };
 58 |   const handlePlay = (evt: React.MouseEvent<HTMLButtonElement>) => {
 59 |     evt.currentTarget.blur(); // Otherwise Replay's Ctrl+Alt+M short cut will be captured as a click on this button.
 60 |     dispatch(playAdvanced);
 61 |   };
 62 |   const handleStop = () => dispatch(stop);
 63 |   const handleAccordionChange = (indices: number[]) => dispatch(updateAdvancedAccordionExpansions(indices));
 64 | 
 65 |   const cancelRef = React.useRef<HTMLButtonElement>(null);
 66 |   return (
 67 |     <Stack aria-label="Advanced forms">
 68 |       {/*
 69 |               // @ts-ignore Inconsistently defined change handler type. */}
 70 |       <Accordion defaultIndex={expandedIndices} allowMultiple onChange={handleAccordionChange}>
 71 |         <AccordionItem>
 72 |           <SectionHeader header="Stream details" isRequired />
 73 |           <AccordionPanel ml={2} mt={1} backgroundColor="White">
 74 |             <StreamDetails />
 75 |           </AccordionPanel>
 76 |         </AccordionItem>
 77 |         <AccordionItem>
 78 |           <SectionHeader header={`Player options${isPlayerOptionsModified ? ' *' : ''}`} />
 79 |           <AccordionPanel ml={2} mt={1} backgroundColor="White">
 80 |             <PlayerOptions />
 81 |           </AccordionPanel>
 82 |         </AccordionItem>
 83 |       </Accordion>
 84 |       <Flex justify="center" py={4}>
 85 |         <Button colorScheme="green" onClick={handlePlay} mx={4} isDisabled={!isPlayable}>
 86 |           Play
 87 |         </Button>
 88 |         <Button colorScheme="red" onClick={handleStop} isDisabled={!isPlaying}>
 89 |           Stop
 90 |         </Button>
 91 |         <Button colorScheme="red" variant="outline" onClick={() => setIsOpen(true)} mx={4}>
 92 |           Clear all forms
 93 |         </Button>
 94 |         <AlertDialog leastDestructiveRef={cancelRef} isOpen={isOpen} onClose={handleCloseClick}>
 95 |           <AlertDialogOverlay />
 96 |           <AlertDialogContent>
 97 |             <AlertDialogHeader fontSize="lg" fontWeight="bold">
 98 |               Clear forms
 99 |             </AlertDialogHeader>
100 |             <AlertDialogBody>
101 |               Are you sure you want to empty all form fields? You cannot undo this action afterwards.
102 |             </AlertDialogBody>
103 |             <AlertDialogFooter>
104 |               <Button ref={cancelRef} onClick={handleCloseClick}>
105 |                 Cancel
106 |               </Button>
107 |               <Button colorScheme="red" onClick={handleClearClick} ml={3}>
108 |                 Clear forms
109 |               </Button>
110 |             </AlertDialogFooter>
111 |           </AlertDialogContent>
112 |         </AlertDialog>
113 |       </Flex>
114 |     </Stack>
115 |   );
116 | };
117 | 
118 | export default Advanced;
119 | 


--------------------------------------------------------------------------------
/src/panels/Basic.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Box, Button, Flex, FormControl, Input, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
  3 | import Header, { Level } from '../components/Header';
  4 | import { AppState } from '../store/reducers';
  5 | import { updateStreamDetailsField } from '../store/actions/streamDetails';
  6 | import { useDispatch, useSelector } from 'react-redux';
  7 | import { AutoTechnology, BaseTech, StreamTechnology } from '../store/model/streamDetails';
  8 | import { playBasic } from '../store/actions/player';
  9 | import { updateAddressBar } from '../store/model/sharing';
 10 | import { ChevronDownIcon } from '@chakra-ui/icons';
 11 | 
 12 | type StreamTech = AutoTechnology<StreamTechnology>;
 13 | 
 14 | const techOptions = [
 15 |   {
 16 |     key: BaseTech.AUTO,
 17 |     label: 'Autodetect stream technology',
 18 |   },
 19 |   {
 20 |     key: StreamTechnology.DASH,
 21 |     label: 'MPEG-DASH',
 22 |   },
 23 |   {
 24 |     key: StreamTechnology.HLS,
 25 |     label: 'HLS',
 26 |   },
 27 |   {
 28 |     key: StreamTechnology.PROGRESSIVE,
 29 |     label: 'Progressive video',
 30 |   },
 31 | ];
 32 | 
 33 | const getLabel = (tech: StreamTech) => (techOptions.find(({ key }) => key === tech) || techOptions[0]).label;
 34 | 
 35 | const Basic: React.FC = () => {
 36 |   const streamResource = useSelector((state: AppState) => state.streamDetails.streamResource);
 37 |   const dispatch = useDispatch();
 38 | 
 39 |   const handleStreamUrlChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
 40 |     updateAddressBar();
 41 |     dispatch(
 42 |       updateStreamDetailsField({
 43 |         streamResource: { url: evt.target.value },
 44 |       })
 45 |     );
 46 |   };
 47 |   const handleStreamTechnologyChange = (technology: StreamTech) => {
 48 |     updateAddressBar();
 49 |     dispatch(
 50 |       updateStreamDetailsField({
 51 |         streamResource: { technology },
 52 |       })
 53 |     );
 54 |   };
 55 |   const handlePlay = (evt: React.MouseEvent<HTMLButtonElement>) => {
 56 |     evt.currentTarget.blur(); // Otherwise Replay's Ctrl+Alt+M short cut will be captured as a click on this button.
 57 |     return dispatch(playBasic);
 58 |   };
 59 |   const handleFormSubmit = (evt: React.FormEvent) => {
 60 |     evt.preventDefault();
 61 |     dispatch(playBasic);
 62 |   };
 63 | 
 64 |   return (
 65 |     <Box as="form" my={8} onSubmit={handleFormSubmit} aria-label="Basic form">
 66 |       <Header level={Level.H3} fontSize="md" textAlign="center">
 67 |         Test progressive, HLS, MPEG-DASH, or smooth streams:
 68 |       </Header>
 69 |       <FormControl isRequired m={4} width="auto">
 70 |         <Input
 71 |           placeholder="Stream URL"
 72 |           type="url"
 73 |           textAlign="center"
 74 |           value={streamResource.url}
 75 |           onChange={handleStreamUrlChange}
 76 |         />
 77 |       </FormControl>
 78 |       <Flex justify="center" mx={4}>
 79 |         <Menu aria-label="Stream technology menu">
 80 |           {/*
 81 |               // @ts-ignore */}
 82 |           <MenuButton as={Button} rightIcon={<ChevronDownIcon />} flex="0 0 none" ml={2}>
 83 |             {getLabel(streamResource.technology)}
 84 |           </MenuButton>
 85 |           <MenuList>
 86 |             {techOptions.map(({ key, label }) => (
 87 |               <MenuItem key={key} onClick={() => handleStreamTechnologyChange(key)}>
 88 |                 {label}
 89 |               </MenuItem>
 90 |             ))}
 91 |           </MenuList>
 92 |         </Menu>
 93 |         <Button colorScheme="green" mx={4} onClick={handlePlay} isDisabled={!streamResource.url}>
 94 |           Play
 95 |         </Button>
 96 |       </Flex>
 97 |     </Box>
 98 |   );
 99 | };
100 | 
101 | export default Basic;
102 | 


--------------------------------------------------------------------------------
/src/panels/HeaderBar.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Header, { Level } from '../components/Header';
 3 | import { Flex, FormControl, FormLabel, Switch, Image, Button, Link } from '@chakra-ui/react';
 4 | import { AppState } from '../store/reducers';
 5 | import { toggleAdvancedMode, toggleRightPane } from '../store/actions/ui';
 6 | import { useDispatch, useSelector } from 'react-redux';
 7 | import StreamlabLogo from '../graphics/streamlab-logo.svg';
 8 | import { updateAddressBar } from '../store/model/sharing';
 9 | 
10 | const HeaderBar: React.FC = () => {
11 |   const advancedMode = useSelector((state: AppState) => state.ui.advancedMode);
12 |   const isRightPaneExpanded = useSelector((state: AppState) => state.ui.isRightPaneExpanded);
13 | 
14 |   const dispatch = useDispatch();
15 |   const handleAdvancedModeChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
16 |     updateAddressBar();
17 |     dispatch(toggleAdvancedMode(evt.target.checked));
18 |   };
19 |   const handleRightPaneClick = (evt: React.MouseEvent<HTMLButtonElement>) =>
20 |     dispatch(toggleRightPane(evt.currentTarget.textContent === '‹' ? true : false));
21 | 
22 |   return (
23 |     <Flex direction="row" align="center" backgroundColor="gray.200" flex="0 0 auto">
24 |       <Header level={Level.H1} flex="1 1 auto" display="flex" flexDirection="row" alignItems="center">
25 |         <Link href="https://github.com/vimond/streamlab" isExternal>
26 |           <Image src={StreamlabLogo} alt="Streamlab" width="10rem" opacity={0.8} />
27 |         </Link>
28 |       </Header>
29 |       <FormControl flex="0" p={1} mt={1} display="flex" flexDirection="row" justifyContent="center" alignItems="center">
30 |         <Switch id="advanced-switch" isChecked={advancedMode} onChange={handleAdvancedModeChange} />
31 |         <FormLabel ml={2} mt={1} fontSize="sm" htmlFor="advanced-switch">
32 |           Advanced
33 |         </FormLabel>
34 |       </FormControl>
35 |       <Button
36 |         width="auto"
37 |         minWidth="auto"
38 |         height="auto"
39 |         flex="0"
40 |         ml={4}
41 |         p={1}
42 |         title={`${isRightPaneExpanded ? 'Collapse' : 'Expand'} sidebar`}
43 |         onClick={handleRightPaneClick}
44 |       >
45 |         {isRightPaneExpanded ? '›' : '‹'}
46 |       </Button>
47 |     </Flex>
48 |   );
49 | };
50 | 
51 | export default HeaderBar;
52 | 


--------------------------------------------------------------------------------
/src/panels/Information.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Alert, AlertIcon, List, ListItem, Box, Link, Text } from '@chakra-ui/react';
 3 | import { AppState } from '../store/reducers';
 4 | import { useSelector } from 'react-redux';
 5 | import { Message } from '../store/model/messageResolver';
 6 | import { ExternalLinkIcon } from '@chakra-ui/icons';
 7 | 
 8 | const renderMessage = ({ text, level, link }: Message, i: number) => (
 9 |   <ListItem key={i}>
10 |     <Alert status={level} alignItems="flex-start" style={{ overflowX: 'auto' }}>
11 |       <AlertIcon flex="0 0 1rem" />
12 |       {link ? (
13 |         <>
14 |           <Link href={link} isExternal>
15 |             {text}
16 |           </Link>
17 |           <Link alignSelf="center" mx={2} href={link} isExternal>
18 |             <ExternalLinkIcon />
19 |           </Link>
20 |         </>
21 |       ) : (
22 |         text
23 |       )}
24 |     </Alert>
25 |   </ListItem>
26 | );
27 | 
28 | const Information: React.FC = () => {
29 |   const messages = useSelector((state: AppState) => state.information.messages);
30 |   return (
31 |     <Box display="flex" flex="1" position="relative">
32 |       <List styleType="none">{messages.map(renderMessage)}</List>
33 |       <Text position="absolute" bottom={3} left={1} right={1} align="center">
34 |         An{' '}
35 |         <Link href="https://github.com/vimond/streamlab/" isExternal textDecoration="underline">
36 |           open source project
37 |         </Link>{' '}
38 |         from{' '}
39 |         <Link href="https://www.vimond.com/vimond-tools" isExternal textDecoration="underline">
40 |           Vimond developers
41 |         </Link>
42 |         .
43 |       </Text>
44 |     </Box>
45 |   );
46 | };
47 | 
48 | export default Information;
49 | 


--------------------------------------------------------------------------------
/src/panels/Player.tsx:
--------------------------------------------------------------------------------
  1 | import { Replay } from 'vimond-replay';
  2 | import React from 'react';
  3 | import { Box, Text, Flex, Link, Image } from '@chakra-ui/react';
  4 | import { PlaybackActions, VideoStreamState } from 'vimond-replay/default-player/Replay';
  5 | import ReplayLogo from '../graphics/replay-logo.svg';
  6 | 
  7 | import { AppState } from '../store/reducers';
  8 | import { useDispatch, useSelector } from 'react-redux';
  9 | import { handlePlayerError, stop } from '../store/actions/player';
 10 | import VideoStreamerResolver from './VideoStreamerResolver';
 11 | import { applyRequestInterceptors } from '../store/model/request-interceptors';
 12 | 
 13 | const stickyPlayerControls = {
 14 |   interactionDetector: {
 15 |     inactivityDelay: -1,
 16 |   },
 17 | };
 18 | 
 19 | const onStreamStateChange = (streamState: VideoStreamState) => {
 20 |   // @ts-ignore
 21 |   if (!window.player) {
 22 |     // @ts-ignore
 23 |     window.player = {};
 24 |   }
 25 |   // @ts-ignore
 26 |   if (!window.player.state) {
 27 |     // @ts-ignore
 28 |     window.player.state = {};
 29 |   }
 30 |   for (const [key, value] of Object.entries(streamState)) {
 31 |     // @ts-ignore
 32 |     window.player.state[key] = value;
 33 |   }
 34 | };
 35 | 
 36 | const highlightConsoleStyle = 'font-weight: bold; color: orange;';
 37 | const normalConsoleStyle = 'font-weight: normal; color: inherit';
 38 | 
 39 | const onPlaybackActionsReady = (actions: PlaybackActions) => {
 40 |   // @ts-ignore
 41 |   window.player = actions;
 42 |   // @ts-ignore
 43 |   window.player.state = {};
 44 |   console.log(`Streamlab v${process.env.REACT_APP_VERSION}`);
 45 |   console.info(
 46 |     'Playback methods and playback state is exposed to a global %cplayer %cobject. Expand for details:',
 47 |     highlightConsoleStyle,
 48 |     normalConsoleStyle
 49 |   );
 50 |   // @ts-ignore
 51 |   console.dir(window.player);
 52 |   console.info(
 53 |     'Start playing a stream. then type e.g. %cplayer.setPosition(123), %cto seek to 02:03, or %cplayer.state.position %cto get the current playback position.',
 54 |     highlightConsoleStyle,
 55 |     normalConsoleStyle,
 56 |     highlightConsoleStyle,
 57 |     normalConsoleStyle
 58 |   );
 59 | };
 60 | 
 61 | const Player: React.FC = () => {
 62 |   const { source, options, playerLibraryOverride, additionalRequestData, visibleLogo } = useSelector(
 63 |     (state: AppState) => ({
 64 |       ...state.player,
 65 |     })
 66 |   );
 67 |   const dispatch = useDispatch();
 68 |   const onExit = () => dispatch(stop);
 69 |   const onError = (err: any) => dispatch(handlePlayerError(err));
 70 | 
 71 |   const mergedOptions = applyRequestInterceptors(source, options, additionalRequestData);
 72 | 
 73 |   return (
 74 |     <Box my={1} p={4} position="relative">
 75 |       <Replay
 76 |         source={source}
 77 |         options={source ? mergedOptions : { ...mergedOptions, ...stickyPlayerControls }}
 78 |         onError={onError}
 79 |         onExit={source ? onExit : undefined}
 80 |         onStreamStateChange={onStreamStateChange}
 81 |         onPlaybackActionsReady={onPlaybackActionsReady}
 82 |       >
 83 |         <VideoStreamerResolver playerLibraryOverride={playerLibraryOverride} />
 84 |       </Replay>
 85 |       {visibleLogo && (
 86 |         <Flex
 87 |           position="absolute"
 88 |           left={0}
 89 |           right={0}
 90 |           top={0}
 91 |           bottom={16}
 92 |           direction="column"
 93 |           alignItems="center"
 94 |           justifyContent="center"
 95 |           opacity={0.7}
 96 |         >
 97 |           <Text width="20%">
 98 |             <Link href="https://vimond.github.io/replay/" isExternal>
 99 |               <Image src={ReplayLogo} alt="Replay" width="8rem" margin="0 auto" />
100 |             </Link>
101 |           </Text>
102 |           <Text color="white" mt={2} size="sm" width="12rem" align="center" lineHeight={1.3}>
103 |             The{' '}
104 |             <Link href="https://vimond.github.io/replay/" isExternal style={{ textDecoration: 'underline' }}>
105 |               open source
106 |             </Link>
107 |             <br />
108 |             React video player <br />
109 |             from{' '}
110 |             <Link href="https://vimond.com" isExternal style={{ textDecoration: 'underline' }}>
111 |               Vimond
112 |             </Link>
113 |           </Text>
114 |         </Flex>
115 |       )}
116 |     </Box>
117 |   );
118 | };
119 | 
120 | export default Player;
121 | 


--------------------------------------------------------------------------------
/src/panels/PlayerOptions.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Button, Grid, Link, Switch, FormLabel, Menu, MenuButton, MenuList, MenuItem, Text } from '@chakra-ui/react';
  3 | import { AppState } from '../store/reducers';
  4 | import { useDispatch, useSelector } from 'react-redux';
  5 | import {
  6 |   setLogLevel,
  7 |   togglePlaybackMonitor,
  8 |   setPlayerConfiguration,
  9 |   setPlayerLibrary,
 10 | } from '../store/actions/playerOptions';
 11 | import { getLogLevelLabel, playerLibraries, PlayerLibrary, PlayerLogLevel } from '../store/model/streamDetails';
 12 | import { JsonEditor } from '../components/JsonEditor';
 13 | import { updateAddressBar } from '../store/model/sharing';
 14 | import { ChevronDownIcon } from '@chakra-ui/icons';
 15 | 
 16 | // TODO: Let clicks on log level label open the log level menu, parallel to the switch label.
 17 | 
 18 | const PlayerOptions: React.FC = () => {
 19 |   const { logLevel, showPlaybackMonitor, customConfiguration, playerLibrary } = useSelector((state: AppState) => ({
 20 |     ...state.playerOptions,
 21 |   }));
 22 |   const dispatch = useDispatch();
 23 | 
 24 |   const handlePlayerLibraryClick = (value: PlayerLibrary) => {
 25 |     updateAddressBar();
 26 |     dispatch(setPlayerLibrary(value));
 27 |   };
 28 |   const handleLogLevelClick = (value: PlayerLogLevel) => {
 29 |     updateAddressBar();
 30 |     dispatch(setLogLevel(value));
 31 |   };
 32 |   const handlePlayerConfigurationChange = (value: string) => {
 33 |     updateAddressBar();
 34 |     return dispatch(setPlayerConfiguration(value));
 35 |   };
 36 |   const handlePlaybackMonitorToggle = (evt: React.ChangeEvent<HTMLInputElement>) => {
 37 |     updateAddressBar();
 38 |     return dispatch(togglePlaybackMonitor(evt.target.checked));
 39 |   };
 40 | 
 41 |   return (
 42 |     <form aria-label="Player options form">
 43 |       <Grid templateColumns="auto 1fr" gap={4} my={2} alignItems="center">
 44 |         <Menu aria-label="Player library menu">
 45 |           <MenuButton as={Button} rightIcon={<ChevronDownIcon />} style={{ justifySelf: 'end' }}>
 46 |             {playerLibraries[playerLibrary]}
 47 |           </MenuButton>
 48 |           <MenuList>
 49 |             {Object.entries(playerLibraries)
 50 |               // @ts-ignore
 51 |               .map(([key, value]) => (
 52 |                 // @ts-ignore
 53 |                 <MenuItem key={key} onClick={() => handlePlayerLibraryClick(key)}>
 54 |                   {value}
 55 |                 </MenuItem>
 56 |               ))}
 57 |           </MenuList>
 58 |         </Menu>
 59 |         <FormLabel>Player library to use for playback</FormLabel>
 60 |         <Switch
 61 |           id="playback-monitor-switch"
 62 |           style={{ justifySelf: 'end' }}
 63 |           isChecked={showPlaybackMonitor}
 64 |           onChange={handlePlaybackMonitorToggle}
 65 |         />
 66 |         <FormLabel htmlFor="playback-monitor-switch">Display playback monitor overlay at startup</FormLabel>
 67 |         <Menu aria-label="Log level menu">
 68 |           <MenuButton as={Button} rightIcon={<ChevronDownIcon />} style={{ justifySelf: 'end' }}>
 69 |             {getLogLevelLabel(logLevel)}
 70 |           </MenuButton>
 71 |           <MenuList>
 72 |             {Object.entries(PlayerLogLevel)
 73 |               // @ts-ignore
 74 |               .filter(([key]) => !isNaN(Number(PlayerLogLevel[key])))
 75 |               .map(([key, value]) => (
 76 |                 <MenuItem key={value} onClick={() => handleLogLevelClick(Number(value))}>
 77 |                   {key}
 78 |                 </MenuItem>
 79 |               ))}
 80 |           </MenuList>
 81 |         </Menu>
 82 |         <FormLabel>Player log level (for messages to the JS console)</FormLabel>
 83 |       </Grid>
 84 |       <Text mt={4} mb={1}>
 85 |         Player configuration overrides according to{' '}
 86 |         <Link
 87 |           href="https://vimond.github.io/replay/#/custom-replay/configuration"
 88 |           isExternal
 89 |           style={{ textDecoration: 'underline' }}
 90 |         >
 91 |           Replay documentation
 92 |         </Link>
 93 |         :
 94 |       </Text>
 95 |       <JsonEditor value={customConfiguration} onChange={handlePlayerConfigurationChange} />
 96 |     </form>
 97 |   );
 98 | };
 99 | 
100 | export default PlayerOptions;
101 | 


--------------------------------------------------------------------------------
/src/panels/Sharing.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Box, Text, Button, useClipboard } from '@chakra-ui/react';
  3 | import Header, { Level } from '../components/Header';
  4 | import { AppState } from '../store/reducers';
  5 | import { PersistibleFormData } from '../store/model/history';
  6 | import { buildUrlFromState } from '../store/model/sharing';
  7 | import { useSelector } from 'react-redux';
  8 | import { CheckIcon, CopyIcon } from '@chakra-ui/icons';
  9 | 
 10 | // TODO: Make this a flag being part of the Redux state, comparing with initialState.
 11 | // Also separate the form data from this other props in state slices, in order to avoid excluding props to be serialised.
 12 | const hasContent = ({ streamDetails, playerOptions, ui }: AppState) => {
 13 |   if (ui.advancedMode) {
 14 |     return (
 15 |       playerOptions.isModified ||
 16 |       [
 17 |         streamDetails.streamResource,
 18 |         streamDetails.drmLicenseResource,
 19 |         streamDetails.drmCertificateResource,
 20 |         streamDetails.subtitlesResource,
 21 |       ].some((resource) => resource.url || resource.headers.some((h) => h.name || h.value) || resource.useProxy)
 22 |     );
 23 |   } else {
 24 |     return !!streamDetails.streamResource.url;
 25 |   }
 26 | };
 27 | 
 28 | const extractPersistibleFormData = (state: AppState): PersistibleFormData | undefined => {
 29 |   if (hasContent(state)) {
 30 |     if (state.ui.advancedMode) {
 31 |       const { supportedDrmTechnologies, ...streamDetails } = state.streamDetails;
 32 |       const { isModified, ...playerOptions } = state.playerOptions;
 33 |       return {
 34 |         streamDetails,
 35 |         playerOptions,
 36 |       };
 37 |     } else {
 38 |       const { headers, useProxy, ...streamResource } = state.streamDetails.streamResource;
 39 |       return {
 40 |         streamDetails: {
 41 |           streamResource,
 42 |         },
 43 |       };
 44 |     }
 45 |   }
 46 | };
 47 | 
 48 | const Sharing: React.FC = () => {
 49 |   const shareState = useSelector((state: AppState) => extractPersistibleFormData(state));
 50 |   const link = shareState ? buildUrlFromState(shareState, document.location) : '';
 51 |   const { onCopy, hasCopied } = useClipboard(link);
 52 |   if (shareState) {
 53 |     return (
 54 |       <Box mx={4}>
 55 |         <Header level={Level.H4}>Share your stream setup</Header>
 56 |         <Text userSelect="none" mb={2}>
 57 |           This Streamlab page, with the{' '}
 58 |           {'playerOptions' in shareState ? 'stream details and player options' : 'stream specified'} to the left
 59 |           pre-filled and ready to be played, can be shared through the following link:
 60 |         </Text>
 61 |         <Text
 62 |           backgroundColor="white"
 63 |           borderRadius="md"
 64 |           cursor="text"
 65 |           p={2}
 66 |           wordBreak="break-all"
 67 |           aria-label="Copyable share URL"
 68 |           aria-readonly
 69 |           role="textbox"
 70 |         >
 71 |           {link}
 72 |         </Text>
 73 |         <Button
 74 |           colorScheme="blue"
 75 |           my={4}
 76 |           mx="auto"
 77 |           display="block"
 78 |           leftIcon={hasCopied ? <CheckIcon /> : <CopyIcon />}
 79 |           onClick={onCopy}
 80 |         >
 81 |           Copy to clipboard
 82 |         </Button>
 83 |         <Text userSelect="none" mt={2}>
 84 |           NOTE: URLs are often tracked/collected by sharing tools and search bots. Be cautious of using this share URL
 85 |           if it contains form details (keys, resource URLs) not meant to be disclosed to other parties.
 86 |         </Text>
 87 |       </Box>
 88 |     );
 89 |   } else {
 90 |     return (
 91 |       <Box mx={4}>
 92 |         <Header level={Level.H4}>Share your stream setup</Header>
 93 |         <Text userSelect="none" mb={2}>
 94 |           When you have filled in stream details and/or set some player options, you can share this page with the full
 95 |           setup in a link appearing here.
 96 |         </Text>
 97 |       </Box>
 98 |     );
 99 |   }
100 | };
101 | 
102 | export default Sharing;
103 | 


--------------------------------------------------------------------------------
/src/panels/Sidebar.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Badge, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
 3 | import Information from './Information';
 4 | import FormHistory from './FormHistory';
 5 | import Sharing from './Sharing';
 6 | import { AppState } from '../store/reducers';
 7 | import { updateActiveRightPaneTab } from '../store/actions/ui';
 8 | import { useDispatch, useSelector } from 'react-redux';
 9 | import { MessageLevel } from '../store/model/messageResolver';
10 | 
11 | const Sidebar: React.FC = () => {
12 |   const dispatch = useDispatch();
13 |   const activeTabIndex = useSelector((state: AppState) => state.ui.rightPaneActiveTabIndex);
14 |   const errorMessageCount = useSelector(
15 |     (state: AppState) => state.information.messages.filter((m) => m.level === MessageLevel.ERROR).length
16 |   );
17 |   const handleActiveTabChange = (index: number) => dispatch(updateActiveRightPaneTab(index));
18 | 
19 |   return (
20 |     <Tabs
21 |       flex="1 1 auto"
22 |       display="flex"
23 |       flexDirection="column"
24 |       alignContent="stretch"
25 |       isFitted
26 |       backgroundColor="gray.100"
27 |       height="100vh"
28 |       index={activeTabIndex}
29 |       onChange={handleActiveTabChange}
30 |     >
31 |       <TabList flex="0 0 auto" backgroundColor="white">
32 |         <Tab>
33 |           Info{' '}
34 |           {activeTabIndex > 0 && errorMessageCount > 0 && (
35 |             <Badge ml={2} colorScheme="red" variant="solid">
36 |               {errorMessageCount}
37 |             </Badge>
38 |           )}
39 |         </Tab>
40 |         <Tab>History</Tab>
41 |         <Tab>Sharing</Tab>
42 |       </TabList>
43 |       <TabPanels flex="1 1 auto" display="flex" overflowY="auto" outline="none">
44 |         <TabPanel p={0} aria-label="Information panel" display="flex" flex="1">
45 |           <Information />
46 |         </TabPanel>
47 |         <TabPanel p={0} aria-label="Form history panel" width="100%">
48 |           <FormHistory />
49 |         </TabPanel>
50 |         <TabPanel p={0} aria-label="Sharing panel">
51 |           <Sharing />
52 |         </TabPanel>
53 |       </TabPanels>
54 |     </Tabs>
55 |   );
56 | };
57 | 
58 | export default Sidebar;
59 | 


--------------------------------------------------------------------------------
/src/panels/StreamDetails.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import {
  3 |   Box,
  4 |   Button,
  5 |   FormLabel,
  6 |   FormControl,
  7 |   Input,
  8 |   Menu,
  9 |   MenuButton,
 10 |   MenuItem,
 11 |   MenuList,
 12 |   Switch,
 13 |   FormHelperText,
 14 | } from '@chakra-ui/react';
 15 | import { ChevronDownIcon } from '@chakra-ui/icons';
 16 | import Header, { Level } from '../components/Header';
 17 | import {
 18 |   AutoTechnology,
 19 |   DrmTechnology,
 20 |   LabeledTechOption,
 21 |   Resource,
 22 |   StreamTechnology,
 23 |   SubtitlesFormat,
 24 |   subtitlesFormatLabels,
 25 |   drmTechLabels,
 26 |   streamTechLabels,
 27 |   getLabel,
 28 | } from '../store/model/streamDetails';
 29 | import { AppState } from '../store/reducers';
 30 | import { ResourceUpdate, updateStreamDetailsField } from '../store/actions/streamDetails';
 31 | import { useDispatch, useSelector } from 'react-redux';
 32 | import HeaderRows from '../components/HeaderRows';
 33 | import { updateAddressBar } from '../store/model/sharing';
 34 | 
 35 | type RowProps<T = any> = {
 36 |   id: string;
 37 |   label: string;
 38 |   url: string;
 39 |   headers: { name: string; value: string; id: number }[];
 40 |   technology: AutoTechnology<T>;
 41 |   useProxy: boolean;
 42 |   onChange: (resource: Partial<Resource<T>>) => void;
 43 |   techOptions: LabeledTechOption[];
 44 |   isHeadersEnabled?: boolean;
 45 | };
 46 | 
 47 | const isProxyVisible = false;
 48 | 
 49 | const filterDrmTechLabels = (drmTechnologies: AutoTechnology<DrmTechnology>[]) =>
 50 |   drmTechLabels.filter(({ key }) => drmTechnologies.indexOf(key) >= 0);
 51 | 
 52 | const StreamDetailRow: React.FC<RowProps> = ({
 53 |   id,
 54 |   url,
 55 |   label,
 56 |   useProxy,
 57 |   headers,
 58 |   technology,
 59 |   techOptions,
 60 |   onChange,
 61 |   isHeadersEnabled,
 62 | }) => (
 63 |   <>
 64 |     <FormControl gridColumn={isHeadersEnabled ? 1 : '1/span 2'}>
 65 |       <Input
 66 |         onChange={(evt: React.ChangeEvent<HTMLInputElement>) => onChange({ url: evt.target.value })}
 67 |         placeholder={label + ' URL'}
 68 |         type="url"
 69 |         value={url}
 70 |       />
 71 |     </FormControl>
 72 |     {isHeadersEnabled && (
 73 |       <Button
 74 |         title={`Add headers to be included in ${label.toLowerCase()} requests`}
 75 |         onClick={() => onChange({ headers: headers.concat({ name: '', value: '', id: Date.now() }) })}
 76 |       >
 77 |         Add header
 78 |       </Button>
 79 |     )}
 80 |     {techOptions.length > 1 ? (
 81 |       <Menu aria-label={label + ' technology menu'}>
 82 |         <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
 83 |           {getLabel(technology, techOptions)}
 84 |         </MenuButton>
 85 |         <MenuList>
 86 |           {techOptions.map(({ key, label }: LabeledTechOption, i: number) => (
 87 |             <MenuItem key={i} onClick={() => onChange({ technology: key })}>
 88 |               {label}
 89 |             </MenuItem>
 90 |           ))}
 91 |         </MenuList>
 92 |       </Menu>
 93 |     ) : (
 94 |       <Button isDisabled={true}>{getLabel(technology, techOptions)}</Button>
 95 |     )}
 96 |     {isProxyVisible && (
 97 |       <FormControl justifySelf="center">
 98 |         <Switch
 99 |           onChange={(evt: React.ChangeEvent<HTMLInputElement>) => onChange({ useProxy: evt.target.checked })}
100 |           id={`${id}-proxy-activate`}
101 |           isChecked={useProxy}
102 |         >
103 |           Activate proxy for {label}
104 |         </Switch>
105 |       </FormControl>
106 |     )}
107 |     <Box gridColumn="1/span 4">
108 |       <HeaderRows
109 |         onHeadersChange={(headers: { name: string; value: string; id: number }[]) => onChange({ headers })}
110 |         headers={headers}
111 |       />
112 |     </Box>
113 |   </>
114 | );
115 | 
116 | const StreamDetails: React.FC = () => {
117 |   const {
118 |     streamResource,
119 |     drmLicenseResource,
120 |     drmCertificateResource,
121 |     subtitlesResource,
122 |     startOffset,
123 |     supportedDrmTechnologies = [DrmTechnology.WIDEVINE],
124 |     isDrmCertificateApplicable,
125 |   } = useSelector((state: AppState) => ({ ...state.streamDetails }));
126 | 
127 |   const dispatch = useDispatch();
128 |   const handleResourceFieldChange = (resource: ResourceUpdate) => {
129 |     updateAddressBar();
130 |     return dispatch(updateStreamDetailsField(resource));
131 |   };
132 | 
133 |   return (
134 |     <form aria-label="Stream details form">
135 |       <Box
136 |         display="grid"
137 |         gridTemplateColumns={isProxyVisible ? `1fr auto auto auto` : `1fr auto auto`}
138 |         gridAutoRows="auto"
139 |         gridGap={2}
140 |         alignItems="center"
141 |       >
142 |         <Header level={Level.H6} justifySelf="left" gridColumn="1/span 2">
143 |           URLs
144 |         </Header>
145 |         <Header level={Level.H6}>Technology</Header>
146 |         {isProxyVisible && <Header level={Level.H6}>Proxy</Header>}
147 |         <StreamDetailRow
148 |           id="stream"
149 |           label="Stream"
150 |           techOptions={streamTechLabels}
151 |           isHeadersEnabled={true}
152 |           onChange={(streamResource: Partial<Resource<StreamTechnology>>) =>
153 |             handleResourceFieldChange({ streamResource })
154 |           }
155 |           {...streamResource}
156 |         />
157 |         <StreamDetailRow
158 |           label="DRM license"
159 |           id="license"
160 |           techOptions={filterDrmTechLabels(supportedDrmTechnologies)}
161 |           isHeadersEnabled
162 |           onChange={(drmLicenseResource: Partial<Resource<DrmTechnology>>) =>
163 |             handleResourceFieldChange({ drmLicenseResource })
164 |           }
165 |           {...drmLicenseResource}
166 |         />
167 |         {isDrmCertificateApplicable && (
168 |           <StreamDetailRow
169 |             id="certificate"
170 |             label="DRM certificate"
171 |             techOptions={filterDrmTechLabels([drmLicenseResource.technology])}
172 |             isHeadersEnabled={false}
173 |             onChange={(drmCertificateResource: Partial<Resource<DrmTechnology>>) =>
174 |               handleResourceFieldChange({ drmCertificateResource })
175 |             }
176 |             {...drmCertificateResource}
177 |           />
178 |         )}
179 |         <StreamDetailRow
180 |           id="subtitles"
181 |           label="Subtitles"
182 |           techOptions={subtitlesFormatLabels}
183 |           isHeadersEnabled={false}
184 |           onChange={(subtitlesResource: Partial<Resource<SubtitlesFormat>>) =>
185 |             handleResourceFieldChange({ subtitlesResource })
186 |           }
187 |           {...subtitlesResource}
188 |         />
189 |       </Box>
190 |       <FormControl display="flex" alignItems="center" mt={2}>
191 |         <FormLabel htmlFor="startOffsetField">Start offset:</FormLabel>
192 |         <Input
193 |           id="startOffsetField"
194 |           type="number"
195 |           step={0.001}
196 |           value={startOffset}
197 |           width={24}
198 |           textAlign="right"
199 |           min={0}
200 |           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
201 |             handleResourceFieldChange({ startOffset: e.target.value === '' ? '' : Number(e.target.value) })
202 |           }
203 |         />
204 |         <FormHelperText mx={2} mb={3}>
205 |           seconds
206 |         </FormHelperText>
207 |       </FormControl>
208 |     </form>
209 |   );
210 | };
211 | 
212 | export default StreamDetails;
213 | 


--------------------------------------------------------------------------------
/src/panels/VideoStreamerResolver.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { PlaybackSource } from 'vimond-replay/default-player/Replay';
 3 | import BasicVideoStreamer from 'vimond-replay/video-streamer/basic';
 4 | import { contentTypes, PlayerLibrary, StreamTechnology } from '../store/model/streamDetails';
 5 | import ShakaDebugVideoStreamer from 'vimond-replay/video-streamer/shaka-player-debug';
 6 | import HtmlVideoStreamer from 'vimond-replay/video-streamer/html';
 7 | import HlsjsVideoStreamer from 'vimond-replay/video-streamer/hlsjs';
 8 | import RxVideoStreamer from 'vimond-replay/video-streamer/rx-player';
 9 | // @ts-ignore
10 | import muxjs from 'mux.js';
11 | 
12 | export const isSafari = (userAgent: string) =>
13 |   userAgent.indexOf('Safari') > 0 && userAgent.indexOf('Chrome') < 0 && userAgent.indexOf('Firefox') < 0;
14 | 
15 | export const extractShakaRequestFilter = (props: any) => {
16 |   const shakaRequestFilter =
17 |     props.configuration && props.configuration.shakaPlayer && props.configuration.shakaPlayer.shakaRequestFilter;
18 |   if (shakaRequestFilter) {
19 |     return {
20 |       ...props,
21 |       shakaRequestFilter,
22 |     };
23 |   }
24 |   return props;
25 | };
26 | 
27 | const getMatchingVideoStreamer = (
28 |   source: PlaybackSource | undefined,
29 |   userAgent: string,
30 |   playerLibrary: PlayerLibrary | undefined,
31 |   props: any
32 | ) => {
33 |   switch (playerLibrary) {
34 |     case 'HTML':
35 |       return <HtmlVideoStreamer {...props} />;
36 |     case 'SHAKA_PLAYER':
37 |       // @ts-ignore
38 |       window.muxjs = muxjs;
39 |       return <ShakaDebugVideoStreamer {...extractShakaRequestFilter(props)} />;
40 |     case 'HLS_JS':
41 |       return <HlsjsVideoStreamer {...props} />;
42 |     case 'RX_PLAYER':
43 |       return <RxVideoStreamer {...props} />;
44 |     default:
45 |       const contentType = source && typeof source !== 'string' && 'contentType' in source ? source.contentType : '';
46 |       switch (contentType) {
47 |         case contentTypes[StreamTechnology.DASH]:
48 |           return <ShakaDebugVideoStreamer {...props} {...extractShakaRequestFilter(props)} />;
49 |         case contentTypes[StreamTechnology.MSS]:
50 |           return <RxVideoStreamer {...props} />;
51 |         case contentTypes[StreamTechnology.HLS]:
52 |           if (isSafari(userAgent)) {
53 |             return <HtmlVideoStreamer {...props} />;
54 |           } else {
55 |             return <HlsjsVideoStreamer {...props} />;
56 |           }
57 |         default:
58 |           return <BasicVideoStreamer {...props} />;
59 |       }
60 |   }
61 | };
62 | 
63 | type Props = {
64 |   playerLibraryOverride?: PlayerLibrary;
65 |   source?: PlaybackSource;
66 | };
67 | 
68 | const VideoStreamerResolver: React.FC<Props> = (props) =>
69 |   getMatchingVideoStreamer(props.source, navigator.userAgent, props.playerLibraryOverride, props);
70 | 
71 | export default VideoStreamerResolver;
72 | 


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/src/serviceWorker.ts:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
 19 | );
 20 | 
 21 | type Config = {
 22 |   onSuccess?: (registration: ServiceWorkerRegistration) => void;
 23 |   onUpdate?: (registration: ServiceWorkerRegistration) => void;
 24 | };
 25 | 
 26 | export function register(config?: Config) {
 27 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 28 |     // The URL constructor is available in all browsers that support SW.
 29 |     const publicUrl = new URL((process as { env: { [key: string]: string } }).env.PUBLIC_URL, window.location.href);
 30 |     if (publicUrl.origin !== window.location.origin) {
 31 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 32 |       // from what our page is served on. This might happen if a CDN is used to
 33 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 34 |       return;
 35 |     }
 36 | 
 37 |     window.addEventListener('load', () => {
 38 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 39 | 
 40 |       if (isLocalhost) {
 41 |         // This is running on localhost. Let's check if a service worker still exists or not.
 42 |         checkValidServiceWorker(swUrl, config);
 43 | 
 44 |         // Add some additional logging to localhost, pointing developers to the
 45 |         // service worker/PWA documentation.
 46 |         navigator.serviceWorker.ready.then(() => {
 47 |           console.log(
 48 |             'This web app is being served cache-first by a service ' +
 49 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 50 |           );
 51 |         });
 52 |       } else {
 53 |         // Is not localhost. Just register service worker
 54 |         registerValidSW(swUrl, config);
 55 |       }
 56 |     });
 57 |   }
 58 | }
 59 | 
 60 | function registerValidSW(swUrl: string, config?: Config) {
 61 |   navigator.serviceWorker
 62 |     .register(swUrl)
 63 |     .then((registration) => {
 64 |       registration.onupdatefound = () => {
 65 |         const installingWorker = registration.installing;
 66 |         if (installingWorker == null) {
 67 |           return;
 68 |         }
 69 |         installingWorker.onstatechange = () => {
 70 |           if (installingWorker.state === 'installed') {
 71 |             if (navigator.serviceWorker.controller) {
 72 |               // At this point, the updated precached content has been fetched,
 73 |               // but the previous service worker will still serve the older
 74 |               // content until all client tabs are closed.
 75 |               console.log(
 76 |                 'New content is available and will be used when all ' +
 77 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 78 |               );
 79 | 
 80 |               // Execute callback
 81 |               if (config && config.onUpdate) {
 82 |                 config.onUpdate(registration);
 83 |               }
 84 |             } else {
 85 |               // At this point, everything has been precached.
 86 |               // It's the perfect time to display a
 87 |               // "Content is cached for offline use." message.
 88 |               console.log('Content is cached for offline use.');
 89 | 
 90 |               // Execute callback
 91 |               if (config && config.onSuccess) {
 92 |                 config.onSuccess(registration);
 93 |               }
 94 |             }
 95 |           }
 96 |         };
 97 |       };
 98 |     })
 99 |     .catch((error) => {
100 |       console.error('Error during service worker registration:', error);
101 |     });
102 | }
103 | 
104 | function checkValidServiceWorker(swUrl: string, config?: Config) {
105 |   // Check if the service worker can be found. If it can't reload the page.
106 |   fetch(swUrl)
107 |     .then((response) => {
108 |       // Ensure service worker exists, and that we really are getting a JS file.
109 |       const contentType = response.headers.get('content-type');
110 |       if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then((registration) => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log('No internet connection found. App is running in offline mode.');
124 |     });
125 | }
126 | 
127 | export function unregister() {
128 |   if ('serviceWorker' in navigator) {
129 |     navigator.serviceWorker.ready.then((registration) => {
130 |       registration.unregister();
131 |     });
132 |   }
133 | }
134 | 


--------------------------------------------------------------------------------
/src/store/actions/history.ts:
--------------------------------------------------------------------------------
 1 | import { HistoryEntry } from '../model/history';
 2 | 
 3 | export const SELECT_HISTORY_ENTRY = 'SELECT_HISTORY_ENTRY';
 4 | export const RESTORE_HISTORY_ENTRY = 'RESTORE_HISTORY_ENTRY';
 5 | export const UPDATE_HISTORY_ENTRY_NAME = 'UPDATE_HISTORY_ENTRY_NAME';
 6 | export const DELETE_HISTORY_ENTRY = 'DELETE_HISTORY_ENTRY';
 7 | export const DELETE_HISTORY = 'DELETE_HISTORY';
 8 | export const DELETE_UNNAMED_HISTORY_ENTRIES = 'DELETE_UNNAMED_HISTORY_ENTRIES';
 9 | export const SET_HISTORY_LIST_FILTER = 'SET_HISTORY_LIST_FILTER';
10 | 
11 | export enum HistoryEntryFilter {
12 |   BOTH,
13 |   NAMED,
14 |   UNNAMED,
15 | }
16 | 
17 | export interface HistoryEntryAction {
18 |   type: typeof SELECT_HISTORY_ENTRY | typeof RESTORE_HISTORY_ENTRY | typeof DELETE_HISTORY_ENTRY;
19 |   value: HistoryEntry;
20 | }
21 | 
22 | export interface UpdateSelectedHistoryEntryNameAction {
23 |   type: typeof UPDATE_HISTORY_ENTRY_NAME;
24 |   value: string;
25 | }
26 | 
27 | export interface DeleteHistoryAction {
28 |   type: typeof DELETE_HISTORY;
29 | }
30 | 
31 | export interface DeleteUnnamedHistoryEntriesAction {
32 |   type: typeof DELETE_UNNAMED_HISTORY_ENTRIES;
33 | }
34 | 
35 | export interface SetHistoryFilterAction {
36 |   type: typeof SET_HISTORY_LIST_FILTER;
37 |   value: HistoryEntryFilter;
38 | }
39 | 
40 | export const selectHistoryEntry = (value: HistoryEntry): HistoryEntryAction => ({
41 |   type: SELECT_HISTORY_ENTRY,
42 |   value,
43 | });
44 | 
45 | export const updateSelectedHistoryEntryName = (value: string): UpdateSelectedHistoryEntryNameAction => ({
46 |   type: UPDATE_HISTORY_ENTRY_NAME,
47 |   value,
48 | });
49 | 
50 | export const restoreHistoryEntry = (value: HistoryEntry): HistoryEntryAction => ({
51 |   type: RESTORE_HISTORY_ENTRY,
52 |   value,
53 | });
54 | 
55 | export const deleteHistoryEntry = (value: HistoryEntry): HistoryEntryAction => ({
56 |   type: DELETE_HISTORY_ENTRY,
57 |   value,
58 | });
59 | 
60 | export const deleteHistory = (): DeleteHistoryAction => ({
61 |   type: DELETE_HISTORY,
62 | });
63 | 
64 | export const setHistoryFilter = (value: HistoryEntryFilter): SetHistoryFilterAction => ({
65 |   type: SET_HISTORY_LIST_FILTER,
66 |   value,
67 | });
68 | 
69 | export const deleteUnnamedHistoryEntries = (): DeleteUnnamedHistoryEntriesAction => ({
70 |   type: DELETE_UNNAMED_HISTORY_ENTRIES,
71 | });
72 | 


--------------------------------------------------------------------------------
/src/store/actions/index.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   AdvancedAccordionExpansionAction,
 3 |   ClearFormsAction,
 4 |   PaneResizeAction,
 5 |   ToggleAdvancedModeAction,
 6 |   ToggleRightPaneAction,
 7 | } from './ui';
 8 | import { ApplyBrowserEnvironmentAction, StreamDetailsFieldChangeAction } from './streamDetails';
 9 | import { PlayerAction, PlayerErrorAction } from './player';
10 | import { SetLogLevelAction, SetPlayerConfigurationAction, TogglePlaybackMonitorAction } from './playerOptions';
11 | import {
12 |   DeleteHistoryAction,
13 |   HistoryEntryAction,
14 |   SetHistoryFilterAction,
15 |   UpdateSelectedHistoryEntryNameAction,
16 | } from './history';
17 | 
18 | export type Action =
19 |   | ApplyBrowserEnvironmentAction
20 |   | ToggleAdvancedModeAction
21 |   | PaneResizeAction
22 |   | ToggleRightPaneAction
23 |   | AdvancedAccordionExpansionAction
24 |   | ClearFormsAction
25 |   | StreamDetailsFieldChangeAction
26 |   | PlayerAction
27 |   | PlayerErrorAction
28 |   | SetLogLevelAction
29 |   | TogglePlaybackMonitorAction
30 |   | SetPlayerConfigurationAction
31 |   | HistoryEntryAction
32 |   | UpdateSelectedHistoryEntryNameAction
33 |   | DeleteHistoryAction
34 |   | SetHistoryFilterAction;
35 | 


--------------------------------------------------------------------------------
/src/store/actions/player.ts:
--------------------------------------------------------------------------------
  1 | import { PlaybackSource } from 'vimond-replay/default-player/Replay';
  2 | import { PlayerConfiguration } from 'vimond-replay';
  3 | import { AppState } from '../reducers';
  4 | import { Dispatch } from 'redux';
  5 | import {
  6 |   AdditionalRequestData,
  7 |   createPlayerOptions,
  8 |   createPlayerSource,
  9 |   extractAdditionalRequestData,
 10 |   PlayerLibrary,
 11 | } from '../model/streamDetails';
 12 | import { Action } from './index';
 13 | import { AdvancedHistoryEntry, BasicHistoryEntry, HistoryEntry } from '../model/history';
 14 | import { StreamDetailsState } from '../reducers/streamDetails';
 15 | import { PlayerOptionsState } from '../reducers/playerOptions';
 16 | 
 17 | export const PLAY = 'PLAY';
 18 | export const STOP = 'STOP';
 19 | export const PLAYER_ERROR = 'PLAYER_ERROR';
 20 | 
 21 | export type PlayerAction =
 22 |   | {
 23 |       type: typeof PLAY;
 24 |       value: {
 25 |         source: PlaybackSource;
 26 |         options?: PlayerConfiguration;
 27 |         playerLibraryOverride?: PlayerLibrary;
 28 |         additionalRequestData?: AdditionalRequestData;
 29 |         historyEntry: HistoryEntry;
 30 |       };
 31 |     }
 32 |   | {
 33 |       type: typeof STOP;
 34 |     };
 35 | 
 36 | export type PlayerErrorAction = {
 37 |   type: typeof PLAYER_ERROR;
 38 |   error: Error;
 39 | };
 40 | 
 41 | const createBasicHistoryEntry = (streamDetails: StreamDetailsState): BasicHistoryEntry => ({
 42 |   timestamp: new Date().toISOString(),
 43 |   name: '',
 44 |   formData: {
 45 |     streamDetails: {
 46 |       streamResource: {
 47 |         url: streamDetails.streamResource.url,
 48 |         technology: streamDetails.streamResource.technology,
 49 |       },
 50 |     },
 51 |   },
 52 | });
 53 | 
 54 | const omitSupportedDrmTechnologies = (
 55 |   streamDetails: StreamDetailsState
 56 | ): Omit<StreamDetailsState, 'supportedDrmTechnologies'> => {
 57 |   const { supportedDrmTechnologies, ...rest } = streamDetails;
 58 |   return rest;
 59 | };
 60 | 
 61 | const createAdvancedHistoryEntry = (
 62 |   streamDetails: StreamDetailsState,
 63 |   playerOptions: PlayerOptionsState
 64 | ): AdvancedHistoryEntry => ({
 65 |   timestamp: new Date().toISOString(),
 66 |   name: '',
 67 |   formData: {
 68 |     streamDetails: omitSupportedDrmTechnologies(streamDetails),
 69 |     playerOptions,
 70 |   },
 71 | });
 72 | 
 73 | export const playBasic = (dispatch: Dispatch<Action>, getState: () => AppState) => {
 74 |   const { streamDetails } = getState();
 75 |   const { streamResource } = streamDetails; // Only including what's visible in the form.
 76 |   const source = createPlayerSource({ streamResource });
 77 |   if (source) {
 78 |     dispatch({
 79 |       type: PLAY,
 80 |       value: {
 81 |         source,
 82 |         historyEntry: createBasicHistoryEntry(streamDetails),
 83 |       },
 84 |     });
 85 |   }
 86 | };
 87 | 
 88 | export const playAdvanced = (dispatch: Dispatch<Action>, getState: () => AppState) => {
 89 |   const { streamDetails, playerOptions } = getState();
 90 |   const source = createPlayerSource(streamDetails);
 91 |   const options = createPlayerOptions(playerOptions);
 92 |   const additionalRequestData = extractAdditionalRequestData(streamDetails);
 93 |   const playerLibraryOverride = playerOptions.playerLibrary;
 94 |   if (source) {
 95 |     dispatch({
 96 |       type: PLAY,
 97 |       value: {
 98 |         source,
 99 |         options,
100 |         playerLibraryOverride,
101 |         additionalRequestData,
102 |         historyEntry: createAdvancedHistoryEntry({ ...streamDetails, startOffset: '' }, playerOptions),
103 |       },
104 |     });
105 |   }
106 | };
107 | 
108 | export const stop = (dispatch: Dispatch<Action>): PlayerAction => dispatch({ type: STOP });
109 | 
110 | export const handlePlayerError = (error: any) => (dispatch: Dispatch<Action>) => {
111 |   // TODO: Improve typing for Replay errors.
112 |   if (error instanceof Error) {
113 |     // Redux dev tools has issues with JSON.stringify and HLS.js source errors.
114 |     // @ts-ignore
115 |     if (error.sourceError && (error.sourceError.loader || (error.sourceError.frag && error.sourceError.frag.loader))) {
116 |       // @ts-ignore
117 |       const { loader, context, frag, ...rest } = error.sourceError;
118 |       // @ts-ignore
119 |       error.sourceError = rest;
120 |       dispatch({
121 |         type: PLAYER_ERROR,
122 |         error,
123 |       });
124 |     } else {
125 |       dispatch({
126 |         type: PLAYER_ERROR,
127 |         error,
128 |       });
129 |     }
130 |     console.error('Playback error: %s', error.message);
131 |   } else {
132 |     dispatch({
133 |       type: PLAYER_ERROR,
134 |       error: new Error(error),
135 |     });
136 |     console.error('Playback error:', error);
137 |   }
138 |   console.dir(error);
139 | };
140 | 


--------------------------------------------------------------------------------
/src/store/actions/playerOptions.ts:
--------------------------------------------------------------------------------
 1 | import { PlayerLibrary, PlayerLogLevel } from '../model/streamDetails';
 2 | 
 3 | export const SET_LOG_LEVEL = 'SET_LOG_LEVEL';
 4 | export const TOGGLE_PLAYBACK_MONITOR = 'TOGGLE_PLAYBACK_MONITOR';
 5 | export const SET_PLAYER_CONFIGURATION = 'SET_PLAYER_CONFIGURATION';
 6 | export const SET_PLAYER_LIBRARY = 'SET_PLAYER_LIBRARY';
 7 | 
 8 | export type SetLogLevelAction = {
 9 |   type: typeof SET_LOG_LEVEL;
10 |   value: PlayerLogLevel;
11 | };
12 | 
13 | export type TogglePlaybackMonitorAction = {
14 |   type: typeof TOGGLE_PLAYBACK_MONITOR;
15 |   value: boolean;
16 | };
17 | 
18 | export type SetPlayerConfigurationAction = {
19 |   type: typeof SET_PLAYER_CONFIGURATION;
20 |   value: string;
21 | };
22 | 
23 | export type SetPlayerLibraryAction = {
24 |   type: typeof SET_PLAYER_LIBRARY;
25 |   value: PlayerLibrary;
26 | };
27 | 
28 | export type PlayerOptionsAction =
29 |   | SetLogLevelAction
30 |   | TogglePlaybackMonitorAction
31 |   | SetPlayerConfigurationAction
32 |   | SetPlayerLibraryAction;
33 | 
34 | export const setLogLevel = (value: PlayerLogLevel): SetLogLevelAction => ({
35 |   type: SET_LOG_LEVEL,
36 |   value,
37 | });
38 | 
39 | export const togglePlaybackMonitor = (value: boolean): TogglePlaybackMonitorAction => ({
40 |   type: TOGGLE_PLAYBACK_MONITOR,
41 |   value,
42 | });
43 | 
44 | export const setPlayerConfiguration = (value: string): SetPlayerConfigurationAction => ({
45 |   type: SET_PLAYER_CONFIGURATION,
46 |   value,
47 | });
48 | 
49 | export const setPlayerLibrary = (value: PlayerLibrary): SetPlayerLibraryAction => ({
50 |   type: SET_PLAYER_LIBRARY,
51 |   value,
52 | });
53 | 


--------------------------------------------------------------------------------
/src/store/actions/streamDetails.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   detectSupportedDrmTechnologies,
  3 |   DrmTechnology,
  4 |   Resource,
  5 |   StreamTechnology,
  6 |   SubtitlesFormat,
  7 | } from '../model/streamDetails';
  8 | import { PersistibleFormData } from '../model/history';
  9 | import { parseSetupFromQueryString } from '../model/sharing';
 10 | 
 11 | export const STREAM_RESOURCE_FIELD_CHANGE = 'STREAM_RESOURCE_FIELD_CHANGE';
 12 | export const DRM_LICENSE_RESOURCE_FIELD_CHANGE = 'DRM_LICENSE_RESOURCE_FIELD_CHANGE';
 13 | export const DRM_CERTIFICATE_RESOURCE_FIELD_CHANGE = 'DRM_CERTIFICATE_RESOURCE_FIELD_CHANGE';
 14 | export const SUBTITLES_RESOURCE_FIELD_CHANGE = 'SUBTITLES_RESOURCE_FIELD_CHANGE';
 15 | export const START_OFFSET_FIELD_CHANGE = 'START_OFFSET_FIELD_CHANGE';
 16 | export const APPLY_BROWSER_ENVIRONMENT = 'APPLY_BROWSER_ENVIRONMENT';
 17 | 
 18 | export type ApplyBrowserEnvironmentAction = {
 19 |   type: typeof APPLY_BROWSER_ENVIRONMENT;
 20 |   value: {
 21 |     supportedDrmTechnologies: DrmTechnology[];
 22 |     urlSetup: PersistibleFormData | undefined;
 23 |   };
 24 | };
 25 | 
 26 | export type ResourceUpdate =
 27 |   | {
 28 |       streamResource: Partial<Resource<StreamTechnology>>;
 29 |     }
 30 |   | {
 31 |       drmLicenseResource: Partial<Resource<DrmTechnology>>;
 32 |     }
 33 |   | {
 34 |       drmCertificateResource: Partial<Resource<DrmTechnology>>;
 35 |     }
 36 |   | {
 37 |       subtitlesResource: Partial<Resource<SubtitlesFormat>>;
 38 |     }
 39 |   | {
 40 |       startOffset: number | '';
 41 |     };
 42 | 
 43 | export type StreamDetailsFieldChangeAction =
 44 |   | {
 45 |       type: typeof STREAM_RESOURCE_FIELD_CHANGE;
 46 |       value: Partial<Resource<StreamTechnology>>;
 47 |     }
 48 |   | {
 49 |       type: typeof DRM_LICENSE_RESOURCE_FIELD_CHANGE;
 50 |       value: Partial<Resource<DrmTechnology>>;
 51 |     }
 52 |   | {
 53 |       type: typeof DRM_CERTIFICATE_RESOURCE_FIELD_CHANGE;
 54 |       value: Partial<Resource<DrmTechnology>>;
 55 |     }
 56 |   | {
 57 |       type: typeof SUBTITLES_RESOURCE_FIELD_CHANGE;
 58 |       value: Partial<Resource<SubtitlesFormat>>;
 59 |     }
 60 |   | {
 61 |       type: typeof START_OFFSET_FIELD_CHANGE;
 62 |       value: number | '';
 63 |     };
 64 | 
 65 | export const updateStreamDetailsField = (resourceUpdate: ResourceUpdate): StreamDetailsFieldChangeAction =>
 66 |   'streamResource' in resourceUpdate
 67 |     ? {
 68 |         type: STREAM_RESOURCE_FIELD_CHANGE,
 69 |         value: resourceUpdate.streamResource,
 70 |       }
 71 |     : 'drmLicenseResource' in resourceUpdate
 72 |     ? {
 73 |         type: DRM_LICENSE_RESOURCE_FIELD_CHANGE,
 74 |         value: resourceUpdate.drmLicenseResource,
 75 |       }
 76 |     : 'drmCertificateResource' in resourceUpdate
 77 |     ? {
 78 |         type: DRM_CERTIFICATE_RESOURCE_FIELD_CHANGE,
 79 |         value: resourceUpdate.drmCertificateResource,
 80 |       }
 81 |     : 'subtitlesResource' in resourceUpdate
 82 |     ? {
 83 |         type: SUBTITLES_RESOURCE_FIELD_CHANGE,
 84 |         value: resourceUpdate.subtitlesResource,
 85 |       }
 86 |     : {
 87 |         type: START_OFFSET_FIELD_CHANGE,
 88 |         value: resourceUpdate.startOffset,
 89 |       };
 90 | 
 91 | export const applyBrowserEnvironment = (userAgent: string, queryString: string): ApplyBrowserEnvironmentAction => {
 92 |   const supportedDrmTechnologies = detectSupportedDrmTechnologies(userAgent);
 93 |   return {
 94 |     type: APPLY_BROWSER_ENVIRONMENT,
 95 |     value: {
 96 |       supportedDrmTechnologies,
 97 |       urlSetup: parseSetupFromQueryString(queryString),
 98 |     },
 99 |   };
100 | };
101 | 


--------------------------------------------------------------------------------
/src/store/actions/ui.ts:
--------------------------------------------------------------------------------
 1 | export const TOGGLE_ADVANCED_MODE = 'TOGGLE_ADVANCED_MODE';
 2 | export const PANE_RESIZE = 'PANE_RESIZE';
 3 | export const TOGGLE_RIGHT_PANE = 'TOGGLE_RIGHT_PANE';
 4 | export const ADVANCED_ACCORDION_CHANGE = 'ADVANCED_ACCORDION_CHANGE';
 5 | export const RIGHT_PANE_TAB_CHANGE = 'RIGHT_PANE_TAB_CHANGE';
 6 | export const CLEAR_FORMS = 'CLEAR_FORMS';
 7 | 
 8 | export interface ToggleAdvancedModeAction {
 9 |   type: typeof TOGGLE_ADVANCED_MODE;
10 |   value: boolean;
11 | }
12 | 
13 | export interface PaneResizeAction {
14 |   type: typeof PANE_RESIZE;
15 |   value: number;
16 | }
17 | 
18 | export interface ToggleRightPaneAction {
19 |   type: typeof TOGGLE_RIGHT_PANE;
20 |   value: boolean;
21 | }
22 | 
23 | export interface AdvancedAccordionExpansionAction {
24 |   type: typeof ADVANCED_ACCORDION_CHANGE;
25 |   value: number[];
26 | }
27 | 
28 | export interface RightPaneTabChangeAction {
29 |   type: typeof RIGHT_PANE_TAB_CHANGE;
30 |   value: number;
31 | }
32 | 
33 | export interface ClearFormsAction {
34 |   type: typeof CLEAR_FORMS;
35 | }
36 | 
37 | export const toggleAdvancedMode = (value: boolean): ToggleAdvancedModeAction => ({
38 |   type: TOGGLE_ADVANCED_MODE,
39 |   value,
40 | });
41 | 
42 | export const updatePaneSize = (value: number): PaneResizeAction => ({
43 |   type: PANE_RESIZE,
44 |   value,
45 | });
46 | 
47 | export const toggleRightPane = (value: boolean): ToggleRightPaneAction => ({
48 |   type: TOGGLE_RIGHT_PANE,
49 |   value,
50 | });
51 | 
52 | export const updateAdvancedAccordionExpansions = (value: number[]): AdvancedAccordionExpansionAction => ({
53 |   type: ADVANCED_ACCORDION_CHANGE,
54 |   value,
55 | });
56 | 
57 | export const updateActiveRightPaneTab = (value: number): RightPaneTabChangeAction => ({
58 |   type: RIGHT_PANE_TAB_CHANGE,
59 |   value,
60 | });
61 | 
62 | export const clearForms = (): ClearFormsAction => ({
63 |   type: CLEAR_FORMS,
64 | });
65 | 


--------------------------------------------------------------------------------
/src/store/migrations.ts:
--------------------------------------------------------------------------------
 1 | import { createMigrate } from 'redux-persist';
 2 | import { PlayerOptionsState } from './reducers/playerOptions';
 3 | import { HistoryState } from './reducers/history';
 4 | import { HistoryEntry } from './model/history';
 5 | 
 6 | // TODO: Make two explicit types in the reducer, instead of Omit<>ing isModified several places.
 7 | type MigratablePlayerOptions = PlayerOptionsState | Omit<PlayerOptionsState, 'isModified'>;
 8 | 
 9 | const migratePlayerOptionsV1 = (playerOptions?: MigratablePlayerOptions) => ({
10 |   ...playerOptions,
11 |   playerLibrary: (playerOptions && playerOptions.playerLibrary) || 'AUTO',
12 | });
13 | 
14 | const migrateHistoryPlayerOptionsV1 = (history: HistoryState): HistoryState => {
15 |   if (history && history.history) {
16 |     return {
17 |       ...history,
18 |       history: history.history.map((historyEntry: HistoryEntry) => {
19 |         if ('playerOptions' in historyEntry.formData) {
20 |           return {
21 |             ...historyEntry,
22 |             formData: {
23 |               ...historyEntry.formData,
24 |               playerOptions: migratePlayerOptionsV1(historyEntry.formData.playerOptions),
25 |             },
26 |           };
27 |         } else {
28 |           return historyEntry;
29 |         }
30 |       }),
31 |     };
32 |   } else {
33 |     return history;
34 |   }
35 | };
36 | 
37 | const migrations = {
38 |   // Looks like type defs are not correct for migrations. Using any :-(
39 |   1: (state: any) => {
40 |     if (state) {
41 |       return {
42 |         ...state,
43 |         history: migrateHistoryPlayerOptionsV1(state.history),
44 |         playerOptions: migratePlayerOptionsV1(state.playerOptions),
45 |       };
46 |     } else {
47 |       return state;
48 |     }
49 |   },
50 | };
51 | 
52 | export const migrateConfiguration = {
53 |   version: 1,
54 |   migrate: createMigrate(migrations, { debug: true }),
55 | };
56 | 


--------------------------------------------------------------------------------
/src/store/model/history.ts:
--------------------------------------------------------------------------------
 1 | import { PlayerOptionsState } from '../reducers/playerOptions';
 2 | import { AutoTechnology, StreamTechnology } from './streamDetails';
 3 | import { StreamDetailsState } from '../reducers/streamDetails';
 4 | 
 5 | type HistoryEntryBase = {
 6 |   timestamp: string;
 7 |   error?: any;
 8 |   name: string;
 9 | };
10 | 
11 | export type SimpleStreamResource = {
12 |   url: string;
13 |   technology: AutoTechnology<StreamTechnology>;
14 | };
15 | 
16 | export type SimplePersistableFormData = {
17 |   streamDetails: {
18 |     streamResource: SimpleStreamResource;
19 |   };
20 | };
21 | 
22 | export type AdvancedPersistableFormData = {
23 |   streamDetails: Omit<StreamDetailsState, 'supportedDrmTechnologies'>;
24 |   playerOptions?: Omit<PlayerOptionsState, 'isModified'>;
25 | };
26 | 
27 | export type PersistibleFormData = SimplePersistableFormData | AdvancedPersistableFormData;
28 | 
29 | export type BasicHistoryEntry = HistoryEntryBase & {
30 |   formData: SimplePersistableFormData;
31 | };
32 | 
33 | export type AdvancedHistoryEntry = HistoryEntryBase & {
34 |   formData: AdvancedPersistableFormData;
35 | };
36 | 
37 | export type HistoryEntry = BasicHistoryEntry | AdvancedHistoryEntry;
38 | 
39 | // NaN, null, '', undefined, [] values should be ignored.
40 | const hasValue = ([key, value]: [string, unknown]) =>
41 |   !(
42 |     value == null ||
43 |     value === '' ||
44 |     (Array.isArray(value) && value.length === 0) ||
45 |     (typeof value === 'number' && Number.isNaN(value))
46 |   );
47 | 
48 | const sortByKey = ([a]: [string, unknown], [b]: [string, unknown]) => a.localeCompare(b, 'en-US');
49 | 
50 | // @ts-ignore Object (indexed property) type guards for the unknown type appears to not be supported.
51 | const isObject = (obj: unknown) => obj != null && obj.constructor === {}.constructor;
52 | 
53 | export const isDeepEqual = (a: unknown, b: unknown): boolean => {
54 |   if (a === b) {
55 |     return true;
56 |   } else if (Array.isArray(a) && Array.isArray(b)) {
57 |     if (a.length === b.length) {
58 |       for (let i = a.length; i--; ) {
59 |         if (!isDeepEqual(a[i], b[i])) return false;
60 |       }
61 |       return true;
62 |     } else {
63 |       return false;
64 |     }
65 |   } else if (isObject(a) && isObject(b)) {
66 |     // @ts-ignore Object (indexed property) type guards for the unknown type appears to not be supported.
67 |     const entriesA = Object.entries(a).filter(hasValue).sort(sortByKey);
68 |     // @ts-ignore
69 |     const entriesB = Object.entries(b).filter(hasValue).sort(sortByKey);
70 |     if (entriesA.length !== entriesB.length) {
71 |       return false;
72 |     }
73 |     for (let i = entriesA.length; i--; ) {
74 |       if (entriesA[i][0] !== entriesB[i][0] || !isDeepEqual(entriesA[i][1], entriesB[i][1])) return false;
75 |     }
76 |     return true;
77 |   } else {
78 |     return false;
79 |   }
80 | };
81 | 
82 | export const addOrUpdateEntry = (entries: HistoryEntry[], newEntry: HistoryEntry) => {
83 |   const foundIndex = entries.findIndex((e) => isDeepEqual(e.formData, newEntry.formData));
84 |   if (foundIndex !== -1) {
85 |     const name = entries[foundIndex].name;
86 |     const clonedEntries = entries.slice(0);
87 |     clonedEntries.splice(foundIndex, 1);
88 |     return clonedEntries.concat({
89 |       ...newEntry,
90 |       name,
91 |     });
92 |   } else {
93 |     return entries.concat(newEntry);
94 |   }
95 | };
96 | 


--------------------------------------------------------------------------------
/src/store/model/messageResolver.ts:
--------------------------------------------------------------------------------
 1 | import { AppState, BaseAppState } from '../reducers';
 2 | import { Action } from '../actions';
 3 | 
 4 | export enum MessageLevel {
 5 |   INFO = 'info',
 6 |   SUCCESS = 'success',
 7 |   WARNING = 'warning',
 8 |   ERROR = 'error',
 9 | }
10 | 
11 | export type Message = {
12 |   level: MessageLevel;
13 |   text: string;
14 |   link?: string;
15 | };
16 | 
17 | export type MessageRule = {
18 |   id: string;
19 |   displayCondition: ({
20 |     action,
21 |     prevState,
22 |     nextState,
23 |   }: {
24 |     action: Action;
25 |     prevState: AppState | undefined;
26 |     nextState: BaseAppState;
27 |   }) => boolean;
28 |   message: Message | ((state: BaseAppState, action: Action) => Message);
29 | };
30 | 
31 | export type MessageResolver = (
32 |   messageRules: MessageRule[],
33 |   prevState: AppState | undefined,
34 |   action: Action,
35 |   nextState: BaseAppState
36 | ) => Message[];
37 | 
38 | export const resolveMessages: MessageResolver = (messageRules, prevState, action, nextState) =>
39 |   messageRules
40 |     .filter((rule) => rule.displayCondition({ action, prevState, nextState }))
41 |     .map((rule) => (typeof rule.message === 'function' ? rule.message(nextState, action) : rule.message));
42 | 


--------------------------------------------------------------------------------
/src/store/model/request-interceptors/hlsjsRequestInterceptor.ts:
--------------------------------------------------------------------------------
 1 | import { AdditionalRequestData } from '../streamDetails';
 2 | 
 3 | export const getHlsJsRequestInterceptorConfig = (
 4 |   withCredentials: boolean,
 5 |   headers?: { [key: string]: string },
 6 |   additionalRequestData?: AdditionalRequestData
 7 | ): any => {
 8 |   const customConfiguration: any = {};
 9 | 
10 |   if (headers) {
11 |     customConfiguration.licenseXhrSetup = (xhr: XMLHttpRequest) => {
12 |       if (Object.keys(headers).filter((k) => k.toLowerCase() === 'authorization')) {
13 |         xhr.withCredentials = true;
14 |       }
15 |       Object.entries(headers).forEach(([key, value]) => xhr.setRequestHeader(key, value));
16 |     };
17 |   }
18 | 
19 |   if (additionalRequestData || withCredentials) {
20 |     customConfiguration.xhrSetup = (xhr: XMLHttpRequest) => {
21 |       if (withCredentials || (additionalRequestData && additionalRequestData.withCredentials)) {
22 |         xhr.withCredentials = true;
23 |       }
24 |       if (additionalRequestData) {
25 |         additionalRequestData.headers.forEach(({ name, value }) => xhr.setRequestHeader(name, value));
26 |       }
27 |     };
28 |   }
29 | 
30 |   return {
31 |     hlsjs: {
32 |       customConfiguration,
33 |     },
34 |   };
35 | };
36 | 


--------------------------------------------------------------------------------
/src/store/model/request-interceptors/index.ts:
--------------------------------------------------------------------------------
 1 | import { PlayerConfiguration } from 'vimond-replay/default-player/PlayerConfiguration';
 2 | import { AdditionalRequestData } from '../streamDetails';
 3 | import { getHlsJsRequestInterceptorConfig } from './hlsjsRequestInterceptor';
 4 | import { getShakaRequestInterceptorConfig } from './shakaRequestInterceptor';
 5 | import { PlaybackSource } from 'vimond-replay/default-player/Replay';
 6 | 
 7 | const getLicenseRequestHeaders = (source: PlaybackSource | undefined) => {
 8 |   if (typeof source === 'object' && 'licenseAcquisitionDetails' in source) {
 9 |     const headers =
10 |       source.licenseAcquisitionDetails &&
11 |       'licenseRequestHeaders' in source.licenseAcquisitionDetails &&
12 |       source.licenseAcquisitionDetails.licenseRequestHeaders;
13 |     if (headers && Object.keys(headers).length) {
14 |       return headers;
15 |     }
16 |   }
17 | };
18 | 
19 | export const applyRequestInterceptors = (
20 |   source: PlaybackSource | undefined,
21 |   options: PlayerConfiguration,
22 |   additionalRequestData?: AdditionalRequestData
23 | ): PlayerConfiguration => {
24 |   if (source) {
25 |     const videoStreamerConfig = (options && options.videoStreamer) || {};
26 |     const licenseRequestHeaders = getLicenseRequestHeaders(source);
27 |     const withCredentialsConfig = !!(
28 |       videoStreamerConfig.manifestRequests && videoStreamerConfig.manifestRequests.withCredentials
29 |     );
30 | 
31 |     if (additionalRequestData || withCredentialsConfig) {
32 |       const videoStreamer = {
33 |         ...videoStreamerConfig,
34 |         ...getHlsJsRequestInterceptorConfig(withCredentialsConfig, licenseRequestHeaders, additionalRequestData),
35 |         ...getShakaRequestInterceptorConfig(withCredentialsConfig, additionalRequestData),
36 |       };
37 | 
38 |       return {
39 |         ...options,
40 |         videoStreamer,
41 |       };
42 |     } else if (licenseRequestHeaders) {
43 |       const videoStreamer = {
44 |         ...videoStreamerConfig,
45 |         ...getHlsJsRequestInterceptorConfig(false, licenseRequestHeaders, undefined),
46 |       };
47 | 
48 |       return {
49 |         ...options,
50 |         videoStreamer,
51 |       };
52 |     }
53 |   }
54 | 
55 |   return options;
56 | };
57 | 


--------------------------------------------------------------------------------
/src/store/model/request-interceptors/shakaRequestInterceptor.ts:
--------------------------------------------------------------------------------
 1 | import { AdditionalRequestData } from '../streamDetails';
 2 | 
 3 | export const getShakaRequestInterceptorConfig = (
 4 |   withCredentials: boolean,
 5 |   additionalRequestData?: AdditionalRequestData
 6 | ): any => {
 7 |   const shakaRequestFilter = (type: shaka.net.NetworkingEngine.RequestType, request: shaka.extern.Request) => {
 8 |     if (type === 1 || type === 0) {
 9 |       // shaka.net.NetworkingEngine.RequestType.MANIFEST || .SEGMENT
10 |       if (withCredentials || (additionalRequestData && additionalRequestData.withCredentials)) {
11 |         request.allowCrossSiteCredentials = true;
12 |       }
13 |       if (additionalRequestData) {
14 |         additionalRequestData.headers.forEach(({ name, value }) => (request.headers[name] = value));
15 |       }
16 |     }
17 |   };
18 | 
19 |   return {
20 |     shakaPlayer: {
21 |       shakaRequestFilter,
22 |     },
23 |   };
24 | };
25 | 


--------------------------------------------------------------------------------
/src/store/model/sharing-old.js:
--------------------------------------------------------------------------------
  1 | import { get } from './platform-injections';
  2 | 
  3 | const inclusions = {
  4 |     streamResources: {
  5 |         general: ['isStartEnabled'],
  6 |         playerFormFields: ['streamUrl', 'licenseUrl', 'certificateUrl', 'subtitlesUrl', 'startPosition', 'proxyEnabledList', 'licenseRequestHeaders'],
  7 |         streamTechnologies: ['playbackTechnology', 'subtitlesType', 'enableAutoSuggest', 'licenseUrlExpiryTime', 'isCertificateUrlRelevant', 'drmType', 'licenseUrlExpiryTime']
  8 |     },
  9 |     apiLookup: {
 10 |         apiFormFields: ['apiBaseUrl','platform','assetId','protocol','videoFormat','customParameters','deviceId']
 11 |     },
 12 |     streamProcessor: {
 13 |         streamProcessor: ['isEnabled', 'isUrlRewriteEnabled', 'setup']
 14 |     },
 15 |     playerConfiguration: {
 16 |         playerFormFields: ['playerLogLevel', 'libraryLogLevel', 'showPlaybackInfo'],
 17 |         configuration: ['configurationString']
 18 |     }
 19 | };
 20 | const setupParamName = 'setup=';
 21 | const featuresParamName='features=';
 22 | 
 23 | function twoLevelCopy(obj) {
 24 |     const copy = {};
 25 |     Object.keys(obj).forEach(outerKey => {
 26 |         copy[outerKey] = {};
 27 |         Object.keys(obj[outerKey]).forEach(innerKey => {
 28 |             copy[outerKey][innerKey] = obj[outerKey][innerKey];
 29 |         });
 30 |     });
 31 |     return copy;
 32 | }
 33 | 
 34 | 
 35 | function simplerEncodeUri(str) {
 36 |     return encodeURIComponent(str)
 37 |         .replace(/%7B/g, '{')
 38 |         .replace(/%7D/g, '}')
 39 | //        .replace(/%22/g, '"')
 40 |         .replace(/%2C/g, ',')
 41 |         .replace(/%3A/g, ':')
 42 |         .replace(/%5B/g, '[')
 43 |         .replace(/%5D/g, ']');
 44 | }
 45 | 
 46 | function getParameter(queryString, paramName) {
 47 |     return queryString.length > 0 && queryString.substr(1).split('&').filter(p => p.indexOf(paramName) === 0)[0];
 48 | }
 49 | 
 50 | function getOtherParameters(queryString, paramName) {
 51 |     if (queryString.length > 0) {
 52 |         return '?' + queryString.substr(1).split('&').filter(p => p.indexOf(paramName) !== 0).join('&');
 53 |     } else {
 54 |         return '';
 55 |     }
 56 | }
 57 | 
 58 | function assembleIncludedState(fullState, includeOptions, activeTopic) {
 59 |     const includedFields = {}, sharedThroughLink = [];
 60 |     Object.keys(includeOptions).forEach(includeOption => {
 61 |         if (includeOptions[includeOption] && inclusions[includeOption]) {
 62 |             sharedThroughLink.push(includeOption);
 63 |             Object.keys(inclusions[includeOption]).forEach(outerKey => {
 64 |                 includedFields[outerKey] = includedFields[outerKey] || {};
 65 |                 inclusions[includeOption][outerKey].forEach(innerKey => {
 66 |                     includedFields[outerKey][innerKey] = fullState[outerKey][innerKey];
 67 |                 });
 68 |             });
 69 |         }
 70 |     });
 71 |     if (Object.keys(includedFields).length) {
 72 |         includedFields.general = includedFields.general || {};
 73 |         includedFields.general.activeTopic = activeTopic;
 74 |         includedFields.general.sharedThroughLink = sharedThroughLink;
 75 |     }
 76 |     return includedFields;
 77 | }
 78 | 
 79 | export function buildLink(fullState, includeOptions, activeTopic) {
 80 |     const loc = document.location;
 81 |     const currentPageUrl = loc.protocol + '//' + loc.host + loc.pathname + getOtherParameters(loc.search, setupParamName);    
 82 |     const params = assembleIncludedState(fullState, includeOptions, activeTopic);
 83 |     const separator = currentPageUrl.indexOf('?') > 0 ? '&' : '?';
 84 |     if (Object.keys(params).length) {
 85 |         return currentPageUrl + separator + setupParamName + simplerEncodeUri(JSON.stringify(params));
 86 |     } else {
 87 |         return currentPageUrl;
 88 |     }
 89 | }
 90 | 
 91 | function extractSetupFromPageUrl() {
 92 |     let params = {};
 93 |     try {
 94 |         const setupParam = getParameter(document.location.search, setupParamName);
 95 |         if (setupParam) {
 96 |             const encodedParams = setupParam.substr(setupParamName.length);
 97 |             if (encodedParams.length) {
 98 |                 try {
 99 |                     params = JSON.parse(decodeURIComponent(encodedParams));
100 |                 } catch (e) {
101 |                     console.error('Bad format/encoding of setup parameter.');
102 |                 }
103 |             }
104 |         }
105 |         const featuresParam = getParameter(document.location.search, featuresParamName);
106 |         if (featuresParam) {
107 |             try {
108 |                 const featuresList = featuresParam.substr(featuresParamName.length);
109 |                 const features = {};
110 |                 featuresList.split(',').forEach(f => features[f] = true);
111 |                 params.features = features;
112 |             } catch(e) {
113 |                 console.error('Bad format in features parameter.');
114 |             }
115 |         }
116 |     } catch(e) {
117 |         console.error('Query string parsing failed.', e);
118 |     }
119 |     return params;
120 | }
121 | 
122 | export function extractAndApplySetupFromPageUrl(baseState) {
123 |     const params = extractSetupFromPageUrl();
124 |     const outerKeys = Object.keys(params);
125 |     if (outerKeys.length) {
126 |         const stateCopy = baseState ? twoLevelCopy(baseState) :{};
127 |         outerKeys.forEach(outerKey => {
128 |             const innerKeys = Object.keys(params[outerKey]);
129 |             if (innerKeys.length) {
130 |                 stateCopy[outerKey] = stateCopy[outerKey] || {};
131 |                 innerKeys.forEach(innerKey => {
132 |                     stateCopy[outerKey][innerKey] = params[outerKey][innerKey];
133 |                 });
134 |             }
135 |         });
136 |         return stateCopy;
137 |     } else {
138 |         return baseState;
139 |     }
140 | }
141 | 
142 | export function clearSetupFromPageUrl() {
143 |     get('document', document => get('window', window => window.history.pushState({}, document.title, document.location.pathname + getOtherParameters(document.location.search, setupParamName))));
144 | 
145 | }


--------------------------------------------------------------------------------
/src/store/model/sharing.ts:
--------------------------------------------------------------------------------
 1 | import { PersistibleFormData } from './history';
 2 | 
 3 | const setupParamName = 's=';
 4 | 
 5 | type LocationProps = {
 6 |   origin: string;
 7 |   pathname: string;
 8 |   search: string;
 9 | };
10 | 
11 | // TODO in reducer: Derive: advancedMode (according to details), isRightPaneExpanded true, rightPaneIndex 0, expandedAdvancedAccordionIndices - all.
12 | 
13 | const getQueryParameter = (queryString: string, key: string) =>
14 |   queryString.length &&
15 |   queryString
16 |     .substr(1)
17 |     .split('&')
18 |     .find((p) => p.startsWith(key));
19 | 
20 | const getRemainingQueryString = (queryString: string, paramName: string, delimiter = '&') => {
21 |   if (queryString.length > 1) {
22 |     const remaining = queryString
23 |       .substr(1)
24 |       .split('&')
25 |       .filter((p) => p.indexOf(paramName) !== 0)
26 |       .join('&');
27 |     if (remaining.length > 1) {
28 |       return delimiter + remaining;
29 |     }
30 |   }
31 |   return '';
32 | };
33 | 
34 | const simplerEncodeUri = (str: string) =>
35 |   encodeURIComponent(str)
36 |     .replace(/%7B/g, '{')
37 |     .replace(/%7D/g, '}')
38 |     .replace(/%2C/g, ',')
39 |     .replace(/%3A/g, ':')
40 |     .replace(/%5B/g, '[')
41 |     .replace(/%5D/g, ']');
42 | 
43 | export const twoLevelCopy = <T>(obj: T): T => {
44 |   const copy = { ...(obj as { [key: string]: any }) } as { [key: string]: any };
45 |   Object.keys(obj).forEach((outerKey) => {
46 |     copy[outerKey] = { ...(copy[outerKey] as { [key: string]: any }) } as { [key: string]: any };
47 |   });
48 |   return copy as T;
49 | };
50 | 
51 | export const parseSetupFromQueryString = (queryString: string): PersistibleFormData | undefined => {
52 |   try {
53 |     const setupParameter = getQueryParameter(queryString, setupParamName);
54 |     if (setupParameter) {
55 |       const encodedValue = setupParameter.substr(setupParamName.length);
56 |       if (encodedValue.length) {
57 |         return JSON.parse(decodeURIComponent(encodedValue)) as PersistibleFormData;
58 |       }
59 |     }
60 |   } catch (e) {
61 |     console.error(`Bad format/encoding of setup parameter ("${setupParamName}").`);
62 |   }
63 | };
64 | 
65 | export const buildUrlFromState = (state: PersistibleFormData, { origin, pathname, search }: LocationProps): string =>
66 |   `${origin}${pathname}?${setupParamName}${simplerEncodeUri(JSON.stringify(state))}${getRemainingQueryString(
67 |     search,
68 |     setupParamName
69 |   )}`;
70 | 
71 | export const removeSetupFromUrl = ({ pathname, search }: LocationProps): string => {
72 |   return pathname + getRemainingQueryString(search, setupParamName, '?');
73 | };
74 | 
75 | export const updateAddressBar = () =>
76 |   window.history.pushState({}, document.title, removeSetupFromUrl(document.location));
77 | 
78 | // Must be called:
79 | // O Advanced mode toggle
80 | // O Basic/advanced stream form field change
81 | // O Player options change
82 | // O Clear form
83 | // * Restore into forms
84 | 


--------------------------------------------------------------------------------
/src/store/persistentStore.ts:
--------------------------------------------------------------------------------
 1 | import { applyMiddleware, createStore } from 'redux';
 2 | import { composeWithDevTools } from 'redux-devtools-extension';
 3 | import thunk from 'redux-thunk';
 4 | import { persistStore, persistReducer } from 'redux-persist';
 5 | import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
 6 | 
 7 | import rootReducer from './reducers';
 8 | import { migrateConfiguration } from './migrations';
 9 | 
10 | const persistConfig = {
11 |   ...migrateConfiguration,
12 |   key: 'root',
13 |   storage,
14 |   blacklist: ['player', 'information'],
15 | };
16 | 
17 | const persistedReducer = persistReducer(persistConfig, rootReducer);
18 | 
19 | export default () => {
20 |   const store = createStore(persistedReducer, composeWithDevTools(applyMiddleware(thunk)));
21 |   const persistor = persistStore(store);
22 |   return { store, persistor };
23 | };
24 | 


--------------------------------------------------------------------------------
/src/store/reducers/history.ts:
--------------------------------------------------------------------------------
  1 | import { addOrUpdateEntry, HistoryEntry, isDeepEqual } from '../model/history';
  2 | import {
  3 |   DELETE_HISTORY,
  4 |   DELETE_HISTORY_ENTRY,
  5 |   DELETE_UNNAMED_HISTORY_ENTRIES,
  6 |   DeleteHistoryAction,
  7 |   DeleteUnnamedHistoryEntriesAction,
  8 |   HistoryEntryAction,
  9 |   HistoryEntryFilter,
 10 |   SELECT_HISTORY_ENTRY,
 11 |   SET_HISTORY_LIST_FILTER,
 12 |   SetHistoryFilterAction,
 13 |   UPDATE_HISTORY_ENTRY_NAME,
 14 |   UpdateSelectedHistoryEntryNameAction,
 15 | } from '../actions/history';
 16 | import { PLAY, PLAYER_ERROR, PlayerAction, PlayerErrorAction } from '../actions/player';
 17 | 
 18 | export interface HistoryState {
 19 |   selectedEntry?: HistoryEntry;
 20 |   history: HistoryEntry[];
 21 |   historyListFilter: HistoryEntryFilter;
 22 | }
 23 | 
 24 | const history = (
 25 |   state: HistoryState = {
 26 |     history: [],
 27 |     historyListFilter: HistoryEntryFilter.BOTH,
 28 |   },
 29 |   action:
 30 |     | HistoryEntryAction
 31 |     | UpdateSelectedHistoryEntryNameAction
 32 |     | DeleteHistoryAction
 33 |     | DeleteUnnamedHistoryEntriesAction
 34 |     | SetHistoryFilterAction
 35 |     | PlayerAction
 36 |     | PlayerErrorAction
 37 | ): HistoryState => {
 38 |   switch (action.type) {
 39 |     case SELECT_HISTORY_ENTRY:
 40 |       if (state.selectedEntry && state.selectedEntry.timestamp === action.value.timestamp) {
 41 |         return {
 42 |           ...state,
 43 |           selectedEntry: undefined,
 44 |         };
 45 |       } else {
 46 |         return {
 47 |           ...state,
 48 |           selectedEntry: action.value,
 49 |         };
 50 |       }
 51 |     case UPDATE_HISTORY_ENTRY_NAME:
 52 |       if (state.selectedEntry) {
 53 |         const history = state.history.slice(0);
 54 |         const replaceIndex = history.findIndex(
 55 |           (entry) => entry.timestamp === (state.selectedEntry && state.selectedEntry.timestamp)
 56 |         );
 57 |         if (replaceIndex !== -1) {
 58 |           history[replaceIndex] = {
 59 |             ...history[replaceIndex],
 60 |             name: action.value,
 61 |           };
 62 |         }
 63 |         return {
 64 |           ...state,
 65 |           history,
 66 |           selectedEntry: {
 67 |             ...state.selectedEntry,
 68 |             name: action.value,
 69 |           },
 70 |         };
 71 |       } else {
 72 |         return state;
 73 |       }
 74 |     case DELETE_HISTORY_ENTRY: {
 75 |       const index = state.history.findIndex((entry) => entry.timestamp === action.value.timestamp);
 76 |       const history = state.history.slice(0);
 77 |       history.splice(index, 1);
 78 |       return {
 79 |         ...state,
 80 |         selectedEntry: undefined,
 81 |         history,
 82 |       };
 83 |     }
 84 |     case DELETE_HISTORY:
 85 |       return {
 86 |         history: [],
 87 |         historyListFilter: state.historyListFilter,
 88 |       };
 89 |     case DELETE_UNNAMED_HISTORY_ENTRIES:
 90 |       return {
 91 |         ...state,
 92 |         selectedEntry: state.selectedEntry && state.selectedEntry.name ? state.selectedEntry : undefined,
 93 |         history: state.history.filter((entry) => entry.name),
 94 |       };
 95 |     case SET_HISTORY_LIST_FILTER:
 96 |       return {
 97 |         ...state,
 98 |         historyListFilter: action.value,
 99 |       };
100 |     case PLAY: {
101 |       const history = addOrUpdateEntry(state.history, action.value.historyEntry);
102 |       const selectedEntry =
103 |         state.selectedEntry && isDeepEqual(state.selectedEntry.formData, action.value.historyEntry.formData)
104 |           ? {
105 |               ...action.value.historyEntry,
106 |               name: state.selectedEntry.name,
107 |             }
108 |           : state.selectedEntry;
109 |       return {
110 |         ...state,
111 |         history,
112 |         selectedEntry,
113 |       };
114 |     }
115 |     case PLAYER_ERROR: {
116 |       const prevHistory = state.history;
117 |       const history = prevHistory.slice(0, prevHistory.length - 1);
118 |       const latestItem = prevHistory[prevHistory.length - 1];
119 |       history.push({
120 |         ...latestItem,
121 |         error: action.error,
122 |       });
123 |       return {
124 |         ...state,
125 |         history,
126 |       };
127 |     }
128 |     default:
129 |       return state;
130 |   }
131 | };
132 | 
133 | export default history;
134 | 


--------------------------------------------------------------------------------
/src/store/reducers/index.ts:
--------------------------------------------------------------------------------
 1 | import { AnyAction, combineReducers } from 'redux';
 2 | import ui from './ui';
 3 | import streamDetails from './streamDetails';
 4 | import player from './player';
 5 | import playerOptions from './playerOptions';
 6 | import history from './history';
 7 | import createRootReducerWithInformation, { InformationState } from './information';
 8 | import { messages } from '../model/messages';
 9 | import { resolveMessages } from '../model/messageResolver';
10 | 
11 | const rootReducer = combineReducers({
12 |   ui,
13 |   streamDetails,
14 |   player,
15 |   playerOptions,
16 |   history,
17 |   information: () => ({}),
18 | });
19 | 
20 | const getRootState = createRootReducerWithInformation(messages, resolveMessages);
21 | 
22 | export interface IsModifiedBaseState {
23 |   isModified: boolean;
24 | }
25 | 
26 | export type BaseAppState = ReturnType<typeof rootReducer>;
27 | export type AppState = BaseAppState & { information: InformationState };
28 | 
29 | export default (state: AppState | undefined, action: AnyAction) =>
30 |   getRootState(state, action, rootReducer(state, action));
31 | 


--------------------------------------------------------------------------------
/src/store/reducers/information.ts:
--------------------------------------------------------------------------------
 1 | import { AppState, BaseAppState } from './index';
 2 | import { AnyAction } from 'redux';
 3 | import { Message, MessageResolver, MessageRule } from '../model/messageResolver';
 4 | import { REHYDRATE } from 'redux-persist/lib/constants';
 5 | 
 6 | export interface InformationState {
 7 |   messages: Message[];
 8 | }
 9 | 
10 | const createRootReducerWithInformation = (rules: MessageRule[], messageResolver: MessageResolver) => (
11 |   prevState: AppState | undefined,
12 |   action: AnyAction,
13 |   nextState: BaseAppState
14 | ): AppState => {
15 |   if (action.type === REHYDRATE) {
16 |     return {
17 |       ...nextState,
18 |       ...action.payload,
19 |       information: {
20 |         messages: messageResolver(rules, prevState, action, { ...nextState, ...action.payload }),
21 |       },
22 |     };
23 |   } else {
24 |     return {
25 |       ...nextState,
26 |       information: {
27 |         messages: messageResolver(rules, prevState, action, nextState),
28 |       },
29 |     };
30 |   }
31 | };
32 | 
33 | export default createRootReducerWithInformation;
34 | 


--------------------------------------------------------------------------------
/src/store/reducers/player.ts:
--------------------------------------------------------------------------------
 1 | import { PlaybackSource } from 'vimond-replay/default-player/Replay';
 2 | import { PlayerConfiguration } from 'vimond-replay';
 3 | import { PLAY, PLAYER_ERROR, PlayerAction, PlayerErrorAction, STOP } from '../actions/player';
 4 | import { CLEAR_FORMS, ClearFormsAction } from '../actions/ui';
 5 | import { AdditionalRequestData, PlayerLibrary } from '../model/streamDetails';
 6 | 
 7 | // TODO: It seems wrong that the reducer is dependent on player (i.e. UI component) types.
 8 | // Consider having an intermediate type, even if that seems redundant.
 9 | 
10 | export interface PlayerState {
11 |   source?: PlaybackSource;
12 |   options?: PlayerConfiguration;
13 |   playerLibraryOverride?: PlayerLibrary;
14 |   additionalRequestData?: AdditionalRequestData;
15 |   error?: Error;
16 |   visibleLogo: boolean;
17 | }
18 | 
19 | const initialState = {
20 |   source: undefined,
21 |   options: {
22 |     interactionDetector: {
23 |       inactivityDelay: -1,
24 |     },
25 |   },
26 |   additionalRequestData: undefined,
27 |   playerLibraryOverride: undefined,
28 |   visibleLogo: true,
29 | };
30 | 
31 | const player = (state: PlayerState = initialState, action: PlayerAction | PlayerErrorAction | ClearFormsAction) => {
32 |   switch (action.type) {
33 |     case PLAY:
34 |       const { source, options, playerLibraryOverride, additionalRequestData } = action.value;
35 |       return {
36 |         source,
37 |         options,
38 |         playerLibraryOverride,
39 |         additionalRequestData,
40 |         visibleLogo: false,
41 |       };
42 |     case STOP:
43 |     case CLEAR_FORMS:
44 |       if (state.options && state.options.playbackMonitor && state.options.playbackMonitor.visibleAtStart) {
45 |         return {
46 |           ...initialState,
47 |           visibleLogo: false,
48 |         };
49 |       }
50 |       return initialState;
51 |     case PLAYER_ERROR:
52 |       return {
53 |         ...initialState,
54 |         visibleLogo: false,
55 |         error: action.error,
56 |       };
57 |   }
58 |   return state;
59 | };
60 | 
61 | export default player;
62 | 


--------------------------------------------------------------------------------
/src/store/reducers/playerOptions.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   PlayerOptionsAction,
  3 |   SET_LOG_LEVEL,
  4 |   SET_PLAYER_CONFIGURATION,
  5 |   SET_PLAYER_LIBRARY,
  6 |   TOGGLE_PLAYBACK_MONITOR,
  7 | } from '../actions/playerOptions';
  8 | import { DEFAULT_PLAYER_LOG_LEVEL, PlayerLibrary, PlayerLogLevel } from '../model/streamDetails';
  9 | import { HistoryEntryAction, RESTORE_HISTORY_ENTRY } from '../actions/history';
 10 | import { CLEAR_FORMS, ClearFormsAction } from '../actions/ui';
 11 | import { IsModifiedBaseState } from './index';
 12 | import { APPLY_BROWSER_ENVIRONMENT, ApplyBrowserEnvironmentAction } from '../actions/streamDetails';
 13 | 
 14 | export interface PlayerOptionsState extends IsModifiedBaseState {
 15 |   logLevel: PlayerLogLevel;
 16 |   showPlaybackMonitor: boolean;
 17 |   customConfiguration: string;
 18 |   playerLibrary: PlayerLibrary;
 19 | }
 20 | 
 21 | const initialState = {
 22 |   logLevel: DEFAULT_PLAYER_LOG_LEVEL,
 23 |   showPlaybackMonitor: false,
 24 |   customConfiguration: '',
 25 |   playerLibrary: 'AUTO' as PlayerLibrary,
 26 |   isModified: false,
 27 | };
 28 | 
 29 | const isInitialState = ({ logLevel, showPlaybackMonitor, customConfiguration, playerLibrary }: PlayerOptionsState) =>
 30 |   logLevel === initialState.logLevel &&
 31 |   showPlaybackMonitor === initialState.showPlaybackMonitor &&
 32 |   customConfiguration === initialState.customConfiguration &&
 33 |   playerLibrary === initialState.playerLibrary;
 34 | 
 35 | const playerOptions = (
 36 |   state: PlayerOptionsState = initialState,
 37 |   action: PlayerOptionsAction | HistoryEntryAction | ClearFormsAction | ApplyBrowserEnvironmentAction
 38 | ): PlayerOptionsState => {
 39 |   switch (action.type) {
 40 |     case APPLY_BROWSER_ENVIRONMENT:
 41 |       if (
 42 |         action.value.urlSetup &&
 43 |         'playerOptions' in action.value.urlSetup &&
 44 |         action.value.urlSetup.playerOptions &&
 45 |         Object.keys(action.value.urlSetup.playerOptions).length >= 0
 46 |       ) {
 47 |         return {
 48 |           ...state,
 49 |           ...action.value.urlSetup.playerOptions,
 50 |           isModified: !isInitialState({
 51 |             ...state,
 52 |             ...action.value.urlSetup.playerOptions,
 53 |           }),
 54 |         };
 55 |       } else {
 56 |         return state;
 57 |       }
 58 |     case SET_LOG_LEVEL:
 59 |       return {
 60 |         ...state,
 61 |         logLevel: action.value,
 62 |         isModified: !isInitialState({ ...state, logLevel: action.value }),
 63 |       };
 64 |     case SET_PLAYER_LIBRARY:
 65 |       return {
 66 |         ...state,
 67 |         playerLibrary: action.value,
 68 |         isModified: !isInitialState({ ...state, playerLibrary: action.value }),
 69 |       };
 70 |     case TOGGLE_PLAYBACK_MONITOR:
 71 |       return {
 72 |         ...state,
 73 |         showPlaybackMonitor: action.value,
 74 |         isModified: !isInitialState({ ...state, showPlaybackMonitor: action.value }),
 75 |       };
 76 |     case SET_PLAYER_CONFIGURATION:
 77 |       return {
 78 |         ...state,
 79 |         customConfiguration: action.value,
 80 |         isModified: !isInitialState({ ...state, customConfiguration: action.value }),
 81 |       };
 82 |     case CLEAR_FORMS:
 83 |       return initialState;
 84 |     case RESTORE_HISTORY_ENTRY:
 85 |       if ('playerOptions' in action.value.formData) {
 86 |         const { playerOptions } = action.value.formData;
 87 |         if (playerOptions) {
 88 |           return {
 89 |             ...playerOptions,
 90 |             isModified: !isInitialState({ ...playerOptions, isModified: false }),
 91 |           };
 92 |         }
 93 |       }
 94 |     // eslint-disable no-fallthrough
 95 |     default:
 96 |       return state;
 97 |   }
 98 | };
 99 | 
100 | export default playerOptions;
101 | 


--------------------------------------------------------------------------------
/src/store/reducers/streamDetails.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   DRM_CERTIFICATE_RESOURCE_FIELD_CHANGE,
  3 |   DRM_LICENSE_RESOURCE_FIELD_CHANGE,
  4 |   APPLY_BROWSER_ENVIRONMENT,
  5 |   applyBrowserEnvironment,
  6 |   START_OFFSET_FIELD_CHANGE,
  7 |   STREAM_RESOURCE_FIELD_CHANGE,
  8 |   StreamDetailsFieldChangeAction,
  9 |   SUBTITLES_RESOURCE_FIELD_CHANGE,
 10 | } from '../actions/streamDetails';
 11 | import { BaseTech, DrmTechnology, Resource, StreamTechnology, SubtitlesFormat } from '../model/streamDetails';
 12 | import { HistoryEntryAction, RESTORE_HISTORY_ENTRY } from '../actions/history';
 13 | import { CLEAR_FORMS, ClearFormsAction } from '../actions/ui';
 14 | 
 15 | export interface StreamDetailsState {
 16 |   streamResource: Resource<StreamTechnology>;
 17 |   drmLicenseResource: Resource<DrmTechnology>;
 18 |   drmCertificateResource: Resource<DrmTechnology>;
 19 |   subtitlesResource: Resource<SubtitlesFormat>;
 20 |   startOffset: number | '';
 21 |   isDrmCertificateApplicable: boolean;
 22 |   supportedDrmTechnologies: DrmTechnology[];
 23 | }
 24 | 
 25 | const initResource = () => ({ url: '', headers: [], useProxy: false, technology: BaseTech.AUTO });
 26 | 
 27 | const initState = (): StreamDetailsState => ({
 28 |   streamResource: initResource(),
 29 |   drmLicenseResource: initResource(),
 30 |   drmCertificateResource: initResource(),
 31 |   subtitlesResource: initResource(),
 32 |   supportedDrmTechnologies: [],
 33 |   isDrmCertificateApplicable: true,
 34 |   startOffset: '',
 35 | });
 36 | 
 37 | const drmSupportsCertificate = (drmType: DrmTechnology | BaseTech | undefined) => drmType !== DrmTechnology.PLAYREADY;
 38 | 
 39 | const streamDetails = (
 40 |   state: StreamDetailsState = initState(),
 41 |   action:
 42 |     | StreamDetailsFieldChangeAction
 43 |     | ReturnType<typeof applyBrowserEnvironment>
 44 |     | HistoryEntryAction
 45 |     | ClearFormsAction
 46 | ): StreamDetailsState => {
 47 |   switch (action.type) {
 48 |     case APPLY_BROWSER_ENVIRONMENT:
 49 |       const { supportedDrmTechnologies, urlSetup } = action.value;
 50 |       const technology = supportedDrmTechnologies[0];
 51 |       const isDrmCertificateApplicable = drmSupportsCertificate(technology);
 52 |       if (urlSetup) {
 53 |         const initialState = initState();
 54 |         return {
 55 |           ...initialState,
 56 |           isDrmCertificateApplicable,
 57 |           ...urlSetup.streamDetails,
 58 |           streamResource: {
 59 |             ...initialState.streamResource,
 60 |             ...urlSetup.streamDetails.streamResource,
 61 |           },
 62 |           supportedDrmTechnologies,
 63 |         };
 64 |       } else {
 65 |         return {
 66 |           ...state,
 67 |           supportedDrmTechnologies,
 68 |           isDrmCertificateApplicable,
 69 |           drmLicenseResource: {
 70 |             ...state.drmLicenseResource,
 71 |             technology,
 72 |           },
 73 |           drmCertificateResource: {
 74 |             ...state.drmCertificateResource,
 75 |             technology,
 76 |           },
 77 |         };
 78 |       }
 79 |     case STREAM_RESOURCE_FIELD_CHANGE:
 80 |       return {
 81 |         ...state,
 82 |         streamResource: {
 83 |           ...state.streamResource,
 84 |           ...action.value,
 85 |         },
 86 |       };
 87 |     case DRM_LICENSE_RESOURCE_FIELD_CHANGE:
 88 |       // TODO: Refactor into something nicer.
 89 |       const newStateFromLicenseField = {
 90 |         ...state,
 91 |         isDrmCertificateApplicable: drmSupportsCertificate(action.value.technology),
 92 |         drmLicenseResource: {
 93 |           ...state.drmLicenseResource,
 94 |           ...action.value,
 95 |         },
 96 |       };
 97 |       if ('technology' in action.value && action.value.technology) {
 98 |         return {
 99 |           ...newStateFromLicenseField,
100 |           drmCertificateResource: {
101 |             ...state.drmCertificateResource,
102 |             technology: action.value.technology,
103 |           },
104 |         };
105 |       } else {
106 |         return newStateFromLicenseField;
107 |       }
108 |     case DRM_CERTIFICATE_RESOURCE_FIELD_CHANGE:
109 |       const newStateFromCertificateField = {
110 |         ...state,
111 |         isDrmCertificateApplicable: drmSupportsCertificate(action.value.technology),
112 |         drmCertificateResource: {
113 |           ...state.drmCertificateResource,
114 |           ...action.value,
115 |         },
116 |       };
117 |       if ('technology' in action.value && action.value.technology != null) {
118 |         return {
119 |           ...newStateFromCertificateField,
120 |           drmLicenseResource: {
121 |             ...state.drmLicenseResource,
122 |             technology: action.value.technology,
123 |           },
124 |         };
125 |       } else {
126 |         return newStateFromCertificateField;
127 |       }
128 |     case SUBTITLES_RESOURCE_FIELD_CHANGE:
129 |       return {
130 |         ...state,
131 |         subtitlesResource: {
132 |           ...state.subtitlesResource,
133 |           ...action.value,
134 |         },
135 |       };
136 |     case START_OFFSET_FIELD_CHANGE:
137 |       return {
138 |         ...state,
139 |         startOffset: action.value,
140 |       };
141 |     case RESTORE_HISTORY_ENTRY: {
142 |       const initialState = initState();
143 |       const { supportedDrmTechnologies } = state;
144 |       return {
145 |         ...initialState,
146 |         ...action.value.formData.streamDetails,
147 |         streamResource: {
148 |           ...initialState.streamResource,
149 |           ...action.value.formData.streamDetails.streamResource,
150 |         },
151 |         supportedDrmTechnologies,
152 |       };
153 |     }
154 |     case CLEAR_FORMS:
155 |       return {
156 |         isDrmCertificateApplicable: state.isDrmCertificateApplicable,
157 |         supportedDrmTechnologies: state.supportedDrmTechnologies,
158 |         streamResource: initResource(),
159 |         drmLicenseResource: {
160 |           ...initResource(),
161 |           technology: state.drmLicenseResource.technology,
162 |         },
163 |         drmCertificateResource: {
164 |           ...initResource(),
165 |           technology: state.drmCertificateResource.technology,
166 |         },
167 |         subtitlesResource: initResource(),
168 |         startOffset: '',
169 |       };
170 |     default:
171 |       return state;
172 |   }
173 | };
174 | 
175 | export default streamDetails;
176 | 


--------------------------------------------------------------------------------
/src/store/reducers/ui.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ADVANCED_ACCORDION_CHANGE,
 3 |   AdvancedAccordionExpansionAction,
 4 |   PANE_RESIZE,
 5 |   PaneResizeAction,
 6 |   RIGHT_PANE_TAB_CHANGE,
 7 |   RightPaneTabChangeAction,
 8 |   TOGGLE_ADVANCED_MODE,
 9 |   TOGGLE_RIGHT_PANE,
10 |   ToggleAdvancedModeAction,
11 |   ToggleRightPaneAction,
12 | } from '../actions/ui';
13 | import { HistoryEntryAction, RESTORE_HISTORY_ENTRY } from '../actions/history';
14 | import { APPLY_BROWSER_ENVIRONMENT, ApplyBrowserEnvironmentAction } from '../actions/streamDetails';
15 | 
16 | export interface UiState {
17 |   advancedMode: boolean;
18 |   expandedAdvancedAccordionIndices: number[];
19 |   rightPaneWidth?: number;
20 |   isRightPaneExpanded: boolean;
21 |   rightPaneActiveTabIndex: number;
22 | }
23 | 
24 | const ui = (
25 |   state: UiState = {
26 |     advancedMode: false,
27 |     expandedAdvancedAccordionIndices: [0],
28 |     rightPaneActiveTabIndex: 0,
29 |     isRightPaneExpanded: true,
30 |   },
31 |   action:
32 |     | ToggleAdvancedModeAction
33 |     | PaneResizeAction
34 |     | ToggleRightPaneAction
35 |     | AdvancedAccordionExpansionAction
36 |     | RightPaneTabChangeAction
37 |     | HistoryEntryAction
38 |     | ApplyBrowserEnvironmentAction
39 | ) => {
40 |   switch (action.type) {
41 |     case APPLY_BROWSER_ENVIRONMENT:
42 |       if (action.value.urlSetup) {
43 |         const advancedMode = 'playerOptions' in action.value.urlSetup;
44 |         const expandedAdvancedAccordionIndices = advancedMode ? [0, 1] : state.expandedAdvancedAccordionIndices; // TODO: Can this be made dynamic?
45 |         const rightPaneActiveTabIndex = 0;
46 |         const isRightPaneExpanded = true;
47 |         return {
48 |           ...state,
49 |           advancedMode,
50 |           expandedAdvancedAccordionIndices,
51 |           rightPaneActiveTabIndex,
52 |           isRightPaneExpanded,
53 |         };
54 |       } else {
55 |         return state;
56 |       }
57 |     case TOGGLE_ADVANCED_MODE:
58 |       return {
59 |         ...state,
60 |         advancedMode: action.value,
61 |       };
62 |     case RESTORE_HISTORY_ENTRY:
63 |       if ('drmLicenseResource' in action.value.formData.streamDetails) {
64 |         return {
65 |           ...state,
66 |           advancedMode: true,
67 |         };
68 |       } else {
69 |         return state;
70 |       }
71 |     case PANE_RESIZE:
72 |       return {
73 |         ...state,
74 |         rightPaneWidth: action.value,
75 |       };
76 |     case TOGGLE_RIGHT_PANE:
77 |       return {
78 |         ...state,
79 |         isRightPaneExpanded: action.value,
80 |       };
81 |     case ADVANCED_ACCORDION_CHANGE:
82 |       return {
83 |         ...state,
84 |         expandedAdvancedAccordionIndices: action.value,
85 |       };
86 |     case RIGHT_PANE_TAB_CHANGE:
87 |       return {
88 |         ...state,
89 |         rightPaneActiveTabIndex: action.value,
90 |       };
91 |     default:
92 |       return state;
93 |   }
94 | };
95 | 
96 | export default ui;
97 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "noEmit": true,
20 |     "jsx": "react"
21 |   },
22 |   "include": [
23 |     "src"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------