├── .babelrc
├── .github
    └── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   ├── development-managing-tamplete.md
    │   └── feature_request.md
├── .gitignore
├── .npmignore
├── .nvmrc
├── .travis.yml
├── LICENSE
├── README.md
├── docs
    └── ko
    │   └── test.md
├── jest.config.js
├── lib
    ├── index.tsx
    ├── types
    │   └── video.js
    │   │   ├── LICENSE
    │   │   ├── README.md
    │   │   ├── dist
    │   │       └── alt
    │   │       │   ├── video.core.d.ts
    │   │       │   └── video.core.novtt.d.ts
    │   │   ├── index.d.ts
    │   │   └── package.json
    └── utils
    │   ├── filterPlugins.ts
    │   ├── generatePlayerOptions.ts
    │   ├── index.ts
    │   ├── initializeEventListeners.ts
    │   ├── initializePlayer.ts
    │   └── initializePlayerComponentsDisplay.ts
├── package-lock.json
├── package.json
├── rollup.config.js
├── rollup.config.prod.js
├── tests
    ├── player.test.tsx
    ├── setupTests.ts
    └── utils.test.ts
└── tsconfig.json


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "@babel/preset-react"
 4 |   ],
 5 |   "plugins": [
 6 |     "@babel/plugin-transform-runtime",
 7 |     "@babel/plugin-proposal-class-properties"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: bug
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | ## Describe the bug
11 | A clear and concise description of what the bug is.
12 | 
13 | ## To Reproduce
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | ## Expected behavior
21 | A clear and concise description of what you expected to happen.
22 | 
23 | ## Screenshots
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | ### Desktop (please complete the following information):
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | ### Smartphone (please complete the following information):
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | ## Additional context
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/development-managing-tamplete.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Development managing tamplete
 3 | about: The author of this library used this template to map issues with each branches
 4 |   - you can refer to it and use it if you want
 5 | title: ''
 6 | labels: ''
 7 | assignees: ''
 8 | 
 9 | ---
10 | 
11 | ## Branch Name
12 | 작업과 연결된 브랜치의 이름입니다. 이슈 제목과 이슈 내용에 맞추어 적절한 영문 이름을 지어주세요.
13 | 
14 | ex) `issue/1-issue-template`
15 | 
16 | 작업을 통하여 프로젝트 코드의 변경이 없다면, 브랜치 이름을 지정하지 않아도 됩니다.
17 | 
18 | ## Type of Change
19 | 작업 종류를 분류해주세요. 모든 작업 종류는 아래 대분류 중 하나에 속하며, 각각의 대분류에 속한 종류들은 동일 계통의 색상을 가지는 Issue Label로 표시됩니다. 새로운 성격의 종류는 계속 추가할 수 있으며, 이에 대응하여 이슈 템플릿 또한 업데이트합니다.
20 | 
21 | - Direct Group: 기능 개발과 직접 관련된 이슈
22 |   - ui, api, ffmpeg, authorization, optimization, ...
23 | - Indirect Group: 저장소 관련, 환경 설정, 문서화 등 기능 개발과 직접 관련 없는 이슈
24 |   - chores, environment, github, documentation, planning, design, ...
25 | 
26 | ## Priority
27 | 작업의 우선 순위를 분류합니다. 모든 작업 우선순위는 아래 중 하나에 속하며, 우선 순위들은 동일 계통의 색상을 가지는 Issue Label로 표시됩니다.
28 | 
29 | - `high`: 필수 기능으로, 가장 높은 우선순위를 가진다.
30 | - `mid`: 구현 수준에 따라 만족도가 증가하는 기능.
31 | - `low`: 필수는 아니나 구현하면 만족도가 커지는 기능.
32 | 
33 | `high` > `mid` > `low` 순으로 우선순위가 높습니다.
34 | 
35 | ## Summary
36 | 작업 이슈의 내용 짧게 요약해주세요.
37 | 
38 | ## Description of Change
39 | Summary만으로 설명이 부족하다면, 작업 이슈에 대하여 구체적으로 설명해주세요.
40 | 하위 작업이 존재할 경우 해당 작업들을 목록으로 나열하고, 각각의 이슈를 링크해주세요. 또한, 이 경우 *포함하고 있는 하위 작업들을 모두 완료하였을 때* 작업이 완료된 것으로 간주하며, 이 이슈에 대한 커밋은 *하위 작업들을 Merge하는 커밋*입니다. 즉, 하위 작업들에 대하여 `dev` 브랜치에 Merge가 완료되어야 이 이슈를 Close할 수 있습니다.
41 | 
42 | 작업 과정에서의 특이사항은 스레드로 추가해주세요. 작업이 완료되었다면, 대응하는 브랜치를 생성하고 커밋해주세요.
43 | 
44 | > 해당 브랜치 상에서 추가적인 변경이 발생할 수 있으므로, 커밋시 이슈를 Close하지 않습니다.
45 | 
46 | ## Reason for Change
47 | 작업이 필요한 이유, 배경, 상황 등을 설명해주세요.
48 | 
49 | ## Expected Next or Associated Work (If exists)
50 | 이 작업이 종료된 이후 이루어져야 하는 후속 작업 연관 작업들이 있다면 작성해주세요.
51 | 
52 | 스레드를 통한 논의 끝에 결정 및 추가된 새로운 사항이 있다면 관련 내용을 반영해주세요.
53 | 
54 | ## Estimated Story Point
55 | 작업 완수에 필요한 예상 소요 Story Point를 산정해주세요. Story Point를 조정하는 경우, 조정한 뒤 조정 사유를 스레드로 추가해주세요.
56 | 
57 | ## Reference (If exists)
58 | 작업 수행시 참고한 자료, 외부 링크 등을 기록해주세요.
59 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: enhancement
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | Thanks in advance for your awesome suggestion of new feature for this library.
11 | 
12 | ## Is your feature request related to a problem? Please describe.
13 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
14 | 
15 | ## Describe the solution you'd like
16 | A clear and concise description of what you want to happen.
17 | 
18 | ## Describe alternatives you've considered
19 | A clear and concise description of any alternative solutions or features you've considered.
20 | 
21 | **Additional context**
22 | Add any other context or screenshots about the feature request here.
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules/
 3 | 
 4 | # build related files
 5 | dist/
 6 | !lib/types/video.js/dist
 7 | build/
 8 | 
 9 | # test results
10 | coverage/
11 | 
12 | # etc
13 | .DS_Store
14 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | # npm
 2 | node_modules/
 3 | 
 4 | # dev
 5 | lib
 6 | rollup.config.js
 7 | tsconfig.json
 8 | .eslintrc.js
 9 | 
10 | # test
11 | tests
12 | jest.config.js
13 | coverage/
14 | 
15 | # GIT
16 | .git
17 | .gitignore
18 | 
19 | # GITHUB
20 | .github
21 | 
22 | # DOCUMENTATION
23 | README.md
24 | 
25 | # etc
26 | .DS_Store
27 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v12.14.1
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | install:
3 |   - npm install -g codecov
4 |   - npm ci
5 |   - npm run prepare:peers # install peer dependencies for test scripts  
6 | script:
7 |   - npm run test
8 |   - codecov
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2020 cadenzah.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # videojs-react-enhanced
  2 | 
  3 | [![NPM](https://nodei.co/npm/videojs-react-enhanced.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/videojs-react-enhanced/)
  4 | 
  5 | [![Build Status](https://travis-ci.com/cadenzah/videojs-react-enhanced.svg?branch=master)](https://travis-ci.com/cadenzah/videojs-react-enhanced)
  6 | [![codecov](https://codecov.io/gh/cadenzah/videojs-react-enhanced/branch/master/graph/badge.svg)](https://codecov.io/gh/cadenzah/videojs-react-enhanced)
  7 | 
  8 | React.js wrapper component for Video.js player with handy and powerful features.
  9 | 
 10 | > NOTE: The basic feature is working, but still it's currently working in progress, so provided features are unstable and in-depth features are not supported yet, and some usage could change in the future release. Please understand and be careful on using!
 11 | 
 12 | ## Table of Contents
 13 | - Features
 14 | - Install
 15 |   - Prerequisite
 16 | - Usage
 17 |   - TypeScript Usage
 18 |   - Props to initialize player
 19 |   - Props to add custom event handlers
 20 |   - Plugins
 21 | - Contribution
 22 | - License
 23 | 
 24 | ## Features
 25 | - Easy to use
 26 | - Easy to configure video.js options
 27 |   - native HTML5 `<video>` options, `video.js`-native options
 28 | - Add custom event handlers for video events
 29 | - Configure Video.js plugins
 30 | - TypeScript support - `props`, options
 31 | - ...and more features later!
 32 |   - CSS Style modification for UI components
 33 |   - Adding / Editing UI components
 34 | 
 35 | ## Install
 36 | 
 37 | ```bash
 38 | # using npm
 39 | npm install --save videojs-react-enhanced
 40 | # using yarn
 41 | yarn add videojs-react-enhanced
 42 | ```
 43 | 
 44 | ### Prerequisite
 45 | `videojs-react-enhanced` uses React and Video.js as peer dependencies. To use this module, you should manually install those dependencies in your project.
 46 | 
 47 | ```bash
 48 | # using npm
 49 | npm install --save react video.js
 50 | # using yarn
 51 | yarn add react video.js
 52 | ```
 53 | 
 54 | ## Usage
 55 | 
 56 | ```js
 57 | import React from 'react';
 58 | import videojs from 'video.js';
 59 | import VREPlayer from 'videojs-react-enhanced';
 60 | import 'video.js/dist/video-js.css';
 61 | 
 62 | function App() {
 63 |   const playerOptions = {
 64 |     src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
 65 |     controls: true, 
 66 |     autoplay: "play",
 67 |   };
 68 |   const videojsOptions = {
 69 |     fluid: true,
 70 |   };
 71 | 
 72 |   return (
 73 |     <VREPlayer
 74 |       playerOptions={options}
 75 |       videojsOptions={videojsOptions}
 76 |       onReady={(player) => console.log(player)}
 77 |       onPlay={(e, _, second) => console.log('Play!')}
 78 |       onPause={(e, _, second) => console.log('Pause!')}
 79 |       onEnded={(e, _) => console.log('Ended!')}
 80 |     />
 81 |   );
 82 | }
 83 | 
 84 | export default App;
 85 | ```
 86 | 
 87 | > NOTE: You should **import `video.js` first than `videojs-react-enhanced`** so that `videojs` object instantiated here is shared with `videojs-react-enhanced`.
 88 | 
 89 | > NOTE: You should import `video.js/dist/video-js.css` after you import `videojs-react-enhanced`, otherwise the default style of player UI will be all broken. If you are using [Next.js](https://github.com/vercel/next.js) for your service, you can remove the statement importing CSS style as that is a global CSS style. See [this issue](https://github.com/cadenzah/videojs-react-enhanced/issues/32) for better understanding.
 90 | 
 91 | ### Typescript Usage
 92 | 
 93 | ```tsx
 94 | import React from 'react';
 95 | import videojs from 'video.js';
 96 | import VREPlayer from 'videojs-react-enhanced';
 97 | import 'video.js/dist/video-js.css';
 98 | 
 99 | function App(): JSX.Element {
100 |   const playerOptions: VREPlayer.IPlayerOptions = {
101 |     src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
102 |     controls: true, 
103 |     autoplay: "play",
104 |   };
105 |   const videojsOptions: VREPlayer.IVideoJsOptions = {
106 |     fluid: true,
107 |   };
108 | 
109 |   return (
110 |     <VREPlayer
111 |       playerOptions={options}
112 |       videojsOptions={videojsOptions}
113 |       onReady={(player) => console.log(player)}
114 |       onPlay={(e, _, second) => console.log('Play!')}
115 |       onPause={(e, _, second) => console.log('Pause!')}
116 |       onEnded={(e, _) => console.log('Ended!')}
117 |     />
118 |   );
119 | }
120 | 
121 | export default App;
122 | ```
123 | 
124 | You can use TypeScript types from `videojs-react-enhanced` module.
125 | 
126 | ### Props to initialize player
127 | Options to initizliae player are categorized depending on characterisics of each options. There are 4 different options to pass into `props`: `playerOptions`, `resources`, `videojsOptions`, `hideList`
128 | 
129 | You can configure each options and pass it through `props` as you can see in the **Usage** section above. **Every option can be omitted** and default value will be placed in it.
130 | 
131 | > NOTE: If you are using TypeScript in your project, you can utilize `Player.PlayerProps` type to get information of types you can use
132 | 
133 | > NOTE: See all available options for `videojs` in [official documentation](https://docs.videojs.com/tutorial-options.html); Currently not every option is supported via this module. If you want other options to be supported which are not on the list below, please make an issue for it!
134 | 
135 | #### `playerOptions`
136 | Options which are standard HTML5 `<video>` element attributes.
137 | 
138 | > `IPlayerOptions` type in TypeScript
139 | 
140 | |Option name|Datatype|Default value|Description|
141 | |--------|------------|----|----|
142 | |autoplay|`boolean`, `'muted'`, `'play'`, `'any'`|`false`|On loaded whether the content will be started automatically or not|
143 | |control|`boolean`|`false`|Whether the player control bar will be shown or not|
144 | |height|`number`|The content's height|The player's height|
145 | |loop|`boolean`|`false`|Whether the content will be played again when the playback ends|
146 | |muted|`boolean`|`false`|Whether the content's audio will be muted or not|
147 | |preload|`'auto'`, `'metadata'`, `'none'`|`'auto'`|The way the content will be loaded.|
148 | |src|`string`|`""`|The content's URL to load|
149 | |width|`number`|The content's width|The player's width|
150 | 
151 | #### `resources`
152 | Options to provide multiple content's resources. An array of objects that mirror the native `<video>` element's capability to have a series of child `<source>` elements. This should be an array of objects with the src and type properties.
153 | 
154 | In `poster` props, you can provide the URL for the content's poster image. This image will be displayed before the content starts playing.
155 | 
156 | > `IResources` type in TypeScript
157 | 
158 | ```js
159 | // example
160 | const resources = {
161 |   sources: [
162 |     {
163 |       src: 'http://url/to/source',
164 |       type: 'video/type'
165 |     },
166 |     // ...
167 |   ],
168 |   poster: 'http://url/to/poster/image'
169 | }
170 | ```
171 | 
172 | #### `videojsOptions`
173 | Options which are `videojs` specific.
174 | 
175 | > `IVideoJsOptions` type in TypeScript
176 | 
177 | |Option name|Datatype|Default value|Description|
178 | |--------|------------|----|----|
179 | |aspectRatio|`string`|Content's original ratio|Player's screen ratio|
180 | |fluid|`bool`|`false`|The player's size will fit its container|
181 | |inactivityTimeout|`number`|`0`|How many milliseconds of inactivity is required before declaring the user inactive|
182 | |language|`string`|`en`|The player's language|
183 | |nativeControlsForTouch|`bool`|`false`|Whether to enable native controls for touch devices|
184 | |notSupportedMessage|`string`|Default string|Override the default message that is displayed when Video.js cannot play back a media source|
185 | |playbackRates|`Array<number>`|undefined|List of playback rates available to switch|
186 | |plugins|`Array<IVideoJsPlugin`|`[]`|List of Video.js plugins used for the player (See [Plugins]() section)|
187 | 
188 | #### `hideList`
189 | Videojs player displays several UI components as a default, and you can choose what to hide by providing the target UI component's names.
190 | 
191 | ```js
192 | // example
193 | const hideList = [
194 |   'remainingTimeDisplay',
195 |   'playbackRateMenuButton',
196 | ]
197 | 
198 | <Player
199 |   hideList={hideList}
200 | />
201 | ```
202 | 
203 | You can hide the components on the list below:
204 | 
205 | |Component name|Description|
206 | |--------|------------|
207 | |`remainingTimeDisplay`|The text showing the remaining running time|
208 | |`pictureInPictureToggle`|The button to toggle PIP feature|
209 | |`playbackRateMenuButton`|The menu button to choose playback rate|
210 | |`playToggle`|The button to play/pause the content|
211 | |`progressControl`|The UI to control the content play|
212 | |`volumePanel`|The menu button to control volume|
213 | 
214 | > NOTE: This feature will be renewed after **Adding / Editing UI components** feature is updated, so please be careful on using it.
215 | 
216 | ### Props to add custom event handlers
217 | You can set custom event handlers for standard HTML5 Video events through `props` as you can see in **Usage** section above.
218 | 
219 | > NOTE: If you want other events to be supported which are not on the list below, please make an issue for it!
220 | 
221 | #### `onReady`
222 | - Mapped event: `ready`
223 | - Callback arguments:
224 |     |No.|Arg. name|Arg. datatype|Description|
225 |     |---|---------|-------------|-----------|
226 |     |1|`event`|`EventTarget`|Information object describing the emitted event|
227 |     |2|`player`|`VideoJsPlayer`|Videojs `Player` object from which the event emitted|
228 | 
229 | #### `onPlay`
230 | - Mapped event: `play`
231 | - Callback arguments:
232 |     |No.|Arg. name|Arg. datatype|Description|
233 |     |---|---------|-------------|-----------|
234 |     |1|`event`|`EventTarget`|Information object describing the emitted event|
235 |     |2|`player`|`VideoJsPlayer`|Videojs `Player` object from which the event emitted|
236 |     |3|`currentTimeSecond`|`number`|The timestamp value when the event occured|
237 | 
238 | #### `onPause`
239 | - Mapped event: `pause`
240 | - Callback arguments:
241 |     |No.|Arg. name|Arg. datatype|Description|
242 |     |---|---------|-------------|-----------|
243 |     |1|`event`|`EventTarget`|Information object describing the emitted event|
244 |     |2|`player`|`VideoJsPlayer`|Videojs `Player` object from which the event emitted|
245 |     |3|`currentTimeSecond`|`number`|The timestamp value when the event occured|
246 | 
247 | #### `onWaiting`
248 | - Mapped event: `waiting`
249 | - Callback arguments:
250 |     |No.|Arg. name|Arg. datatype|Description|
251 |     |---|---------|-------------|-----------|
252 |     |1|`event`|`EventTarget`|Information object describing the emitted event|
253 |     |2|`player`|`VideoJsPlayer`|Videojs `Player` object from which the event emitted|
254 |     |3|`currentTimeSecond`|`number`|The timestamp value when the event occured|
255 | 
256 | #### `onTimeUpdate`
257 | - Mapped event: `timeupdate`
258 | - Callback arguments:
259 |     |No.|Arg. name|Arg. datatype|Description|
260 |     |---|---------|-------------|-----------|
261 |     |1|`event`|`EventTarget`|Information object describing the emitted event|
262 |     |2|`player`|`VideoJsPlayer`|Videojs `Player` object from which the event emitted|
263 |     |3|`currentTimeSecond`|`number`|The timestamp value when the event occured|
264 | 
265 | #### `onSeeking`
266 | - Mapped event: `seeking`
267 | - Callback arguments:
268 |     |No.|Arg. name|Arg. datatype|Description|
269 |     |---|---------|-------------|-----------|
270 |     |1|`event`|`EventTarget`|Information object describing the emitted event|
271 |     |2|`player`|`VideoJsPlayer`|Videojs `Player` object from which the event emitted|
272 |     |3|`currentTimeSecond`|`number`|The timestamp value when the seeking action started|
273 | 
274 | #### `onSeeked`
275 | - Mapped event: `seeked`
276 | - Callback arguments:
277 |     |No.|Arg. name|Arg. datatype|Description|
278 |     |---|---------|-------------|-----------|
279 |     |1|`event`|`EventTarget`|Information object describing the emitted event|
280 |     |2|`player`|`VideoJsPlayer`|Videojs `Player` object from which the event emitted|
281 |     |3|`startPositionSecond`|`number`|The timestamp value when the seeking action initially started|
282 |     |4|`completeTimeSecond`|`number`|The timestamp value when the seeking action finally finished|
283 | 
284 | #### `onEnded`
285 | - Mapped event: `ended`
286 | - Callback arguments:
287 |     |No.|Arg. name|Arg. datatype|Description|
288 |     |---|---------|-------------|-----------|
289 |     |1|`event`|`EventTarget`|Information object describing the emitted event|
290 |     |2|`player`|`VideoJsPlayer`|Videojs `Player` object from which the event emitted|
291 | 
292 | #### `onError`
293 | - Mapped event: `error`
294 | - Callback arguments:
295 |     |No.|Arg. name|Arg. datatype|Description|
296 |     |---|---------|-------------|-----------|
297 |     |1|`event`|`EventTarget`|Information object describing the emitted event|
298 |     |2|`player`|`VideoJsPlayer`|Videojs `Player` object from which the event emitted|
299 | 
300 | #### `onLoadedData`
301 | - Mapped event: `ended`
302 | - Callback arguments:
303 |     |No.|Arg. name|Arg. datatype|Description|
304 |     |---|---------|-------------|-----------|
305 |     |1|`event`|`EventTarget`|Information object describing the emitted event|
306 |     |2|`player`|`VideoJsPlayer`|Videojs `Player` object from which the event emitted|
307 | 
308 | #### `onLoadedMetadata`
309 | - Mapped event: `ended`
310 | - Callback arguments:
311 |     |No.|Arg. name|Arg. datatype|Description|
312 |     |---|---------|-------------|-----------|
313 |     |1|`event`|`EventTarget`|Information object describing the emitted event|
314 |     |2|`player`|`VideoJsPlayer`|Videojs `Player` object from which the event emitted|
315 | 
316 | ### Plugins
317 | You can apply any plugins and augment your player easily. You can simply list over plugins you want to use in `props`, and that's it!
318 | 
319 | ```js
320 | import React from 'react';
321 | import videojs from 'video.js';
322 | import '<PLUGIN_YOU_WANT_TO_USE>';
323 | import VREPlayer from 'videojs-react-enhanced';
324 | 
325 | function App() {
326 |   // ...
327 |   return (
328 |     <VREPlayer
329 |       // ...
330 |       videojsOptions={{
331 |         plugins: [
332 |           {
333 |             name: '<NAME_OF_PLUGIN>',
334 |             options: {
335 |               // ...
336 |             }
337 |           },
338 |           // ...
339 |         ]
340 |       }}
341 |       // ...
342 |     />
343 |   );
344 | }
345 | 
346 | export default App;
347 | ```
348 | 
349 | `plugins` is an array of plugin objects which have properties as below:
350 | 
351 | |No.|property name|Arg. datatype|Description|
352 | |---|---------|-------------|-----------|
353 | |1  |name     |`string`     |The name of plugin (identifier after registration)|
354 | |2  |plugin   |`function`   |The plugin function for manual registration|
355 | |3  |option   |`object`     |The option for plugin|
356 | 
357 | You should include `plugins` array in `videojsOptions` and pass it through `props`.
358 | 
359 | Depending on the way the plugin executes, there are 2 ways of using plugins, which will be covered right after. You can use both ways together, but just remember that the plugins passed will be **handled in the order of `plugins` array**.
360 | 
361 | #### Automatic registration and initialization
362 | 
363 | In some cases, a plugin registers itself on `video.js` module instance and makes itself available to use by the time it is loaded in the project. Which means, all you have to do is import the plugin and set up an option if exists:
364 | 
365 | ```js
366 | import React from 'react';
367 | import videojs from 'video.js';
368 | import '<PLUGIN_YOU_WANT_TO_USE>';
369 | import VREPlayer from 'videojs-react-enhanced';
370 | // codes to be continued...
371 | ```
372 | 
373 | When `import '<PLUGIN_YOU_WANT_TO_USE>';` line executes, the plugin will locate `videojs` object in the project and register itself on it. This is important, because **you have to import `video.js` on first, and import the plugin on the next line,** so that your plugin uses the `video.js` module previously loaded, not importing its own `video.js` inside the plugin.
374 | 
375 | Also, when you import `video.js`, it is recommended to import it with the name `videojs`, as most plugins activates under the assumption that `videojs` is the name of a variable where `video.js` module instance is.
376 | 
377 | All you have to do next is hand over an option object via `props` if needed:
378 | 
379 | ```js
380 | // continues from the code right above:
381 | function App() {
382 |   // ...
383 | 
384 |   const videojsOptions = {
385 |     plugins: [
386 |       {
387 |         name: '<NAME_OF_PLUGIN>',
388 |         options: {
389 |           // ...
390 |         },
391 |       },
392 |       // ...
393 |     ]
394 |   }
395 | 
396 |   return (
397 |     <VREPlayer
398 |       // ...
399 |       videojsOptions={videojsOptions}
400 |       // ...
401 |     />
402 |   );
403 | }
404 | 
405 | export default App;
406 | ```
407 | 
408 | > NOTE: [As official document says](https://docs.videojs.com/tutorial-plugins.html), `videojs-react-enhanced` assumes that a plugin accepts only single `option` argument to initialize itself.
409 | 
410 | Keep in mind that there is no `plugin` property passed in `plugin` object. That's because the plugin is already loaded and registered by importing `'<PLUGIN_YOU_WANT_TO_USE>'`, so you don't have to specify `plugin` property. All you have to do is pass the name and an option object for the plugin.
411 | 
412 | #### Manual registration and initialization
413 | 
414 | On the other hand, if you provide plugin in the basic form of `function`, you need to pass the plugin function through `plugin` object:
415 | 
416 | ```js
417 | // continues from the code right above:
418 | function myPlugin(player, option) {
419 |   // your plugin's jobs to do...
420 | };
421 | 
422 | function App() {
423 |   // ...
424 | 
425 |   const videojsOptions = {
426 |     plugins: [
427 |       {
428 |         name: 'myPlugin',
429 |         plugin: myPlugin,
430 |         options: {
431 |           // ...
432 |         },
433 |       },
434 |       // ...
435 |     ]
436 |   }
437 | 
438 |   return (
439 |     <VREPlayer
440 |       // ...
441 |       videojsOptions={videojsOptions}
442 |       // ...
443 |     />
444 |   );
445 | }
446 | 
447 | export default App;
448 | ```
449 | 
450 | When `videojs-react-enhanced` gets the passed plugin, it will register the plugin and initialize with the option provided.
451 | 
452 | > NOTE: [As official document says](https://docs.videojs.com/tutorial-plugins.html), `videojs-react-enhanced` assumes that a plugin accepts only single `option` argument to initialize itself.
453 | 
454 | ## Contribution
455 | Fork the repository, make changes, commit your work, and make Pull Request.
456 | 
457 | ## License
458 | [MIT Lisence](https://github.com/cadenzah/videojs-react-enhanced/blob/master/LICENSE)
459 | 


--------------------------------------------------------------------------------
/docs/ko/test.md:
--------------------------------------------------------------------------------
 1 | # 라이브러리 테스트용 개발 환경 세팅
 2 | 
 3 | ## TL;DR;
 4 | 1. 라이브러리의 동작을 확인할 예시 테스트 프로젝트(이하 테스트 프로젝트)에서 `videojs-react-enhanced`(이하 **모듈**)을 사용할 때에는 `yarn link`를 통하여 사용한다. 직접 `npm`으로 의존성 설치 NO
 5 | 
 6 |   - (1) 모듈 프로젝트 install
 7 |   - (2) peerDependencies 설치
 8 | 
 9 | 2. 모듈에서 Peer Dependency로 사용되는 의존성 패키지는 테스트 프로젝트에서 해당 패키지를 `npm`으로 설치하지 말고, `yarn link`를 통하여 **모듈 프로젝트에 설치된 의존성**을 참조하도록
10 |   - `react`
11 |   - `video.js`
12 | Video.js에서 전역 모듈 객체의 상태를 변경하는 동작이 내부적으로 이루어질 경우, 모듈의 참조가 여러 개 존재하면 혼선이 생긴다. 동일 참조의 모듈이 다루어지도록 조정해주어야 한다.
13 | 
14 | 3. `video.js`를 사용할 때, 의존성을 불러오는 순서를 주의한다. **반드시 `video.js` 모듈을 가장 먼저 `import`해야 한다.**
15 | 
16 | ## 테스트 환경 설정 단계 별 안내
17 | 
18 | ### 1. `videojs-react-enhanced`
19 | 
20 | 처음 저장소를 클론하면 의존성들을 우선 설치
21 | 
22 | ```bash
23 | # (1) 기본 라이브러리 설치
24 | $ npm install
25 | 
26 | # (2) Peer dependencies에 해당하는 라이브러리의 수동 설치
27 | $ npm run prepare:peers
28 | 
29 | ```
30 | 
31 | 다음으로, Peer Dependencies로 설정된 의존성 패키지들이 테스트 프로젝트와 플러그인 프로젝트에서 동일하게 공유될 수 있도록 `yarn link`를 통하여 설정한다.
32 | 
33 | ```bash
34 | # `videojs-react-enhanced/node_modules` 내의 아래 두 라이브러리의 디렉토리에서 각각 `yarn link` 실행
35 | $ cd react
36 | $ yarn link
37 | 
38 | $ cd video.js
39 | $ yarn link
40 | ```
41 | 
42 | 이 작업은 React Hooks의 실행 오류, Video.js Plugin 초기화시 오류 등을 해결하기 위하여 반드시 필요하다
43 | 
44 | ### 2. `videojs-thumbnail-sprite` (이하 플러그인 프로젝트)
45 | 
46 | 이 플러그인은 자기자신을 전역 객체 `video.js`에 등록한다. 여기서 자신을 등록하는 `video.js` 객체는 Video.js 플레이어 인스턴스가 동작 과정에서 참조하는 'video.js'와 동일 대상이어야 한다. 따라서, 모듈 프로젝트에서 기존에 `yarn link`로 등록한 `video.js`를 참조하여, 동일 객체를 참조하도록 설정한다.
47 | 
48 | ```bash
49 | # 플러그인 프로젝트의 루트에서 실행
50 | $ yarn link video.js
51 | ```
52 | 
53 | ### 3. 테스트 프로젝트
54 | 
55 | 라이브러리에 대한 설정이 완료되었으므로, 이제 테스트 프로젝트에서 이를 그대로 사용하면 된다. 본 단계의 설정 과정이 이루어지는 목적은 다음과 같다.
56 | 
57 | 1. 모듈 프로젝트의 `react` 의존성을 테스트 프로젝트에서 동일하게 공유해야 한다.
58 | 2. 모듈 프로젝트와 플러그인이 공유하는 `video.js` 의존성을 테스트 프로젝트에서 동일하게 공유해야 한다.
59 | 
60 | 따라서 테스트 프로젝트는 앞선 단계에서 `yarn link`로 참조 대상이 설정된 `react`와 `video.js`를 사용한다. 이미 `npm install`을 통하여 해당 의존성을 설치헀더라도, 해당 설치 내용을 *임시로* 무시한 채 덮어씌워지므로 상관없다.
61 | 
62 | ```bash
63 | # 테스트 프로젝트의 루트에서 실행
64 | $ yarn link react
65 | $ yarn link video.js
66 | ```
67 | 
68 | 다음으로, 현재 개발 테스트 중인 모듈 프로젝트와 플러그인 프로젝트의 로컬 개발 형상을 직접 참조하기 위하여 `yarn link`를 사용하여 해당 프로젝트를 참조한다.
69 | 
70 | ```bash
71 | # `videojs-react-enhanced`의 프로젝트 디렉토리에서 아래의 명령어 실행
72 | $ yarn link
73 | 
74 | # 테스트 프로젝트에서 `videojs-react-enhanced`를 직접 참조
75 | $ yarn link videojs-react-enhanced
76 | ```
77 | 
78 | ```bash
79 | # `videojs-thumbnail-sprite`의 프로젝트 디렉토리에서 아래의 명령어 실행
80 | $ yarn link
81 | 
82 | # 테스트 프로젝트에서 `videojs-thumbnail-sprite`를 직접 참조
83 | $ yarn link videojs-thumbnail-sprite
84 | ```
85 | 
86 | 여기까지 완료하면, `videojs-thumbnail-sprite`의 개발 형상을 로컬 테스트 프로젝트에서 직접 확인하기 위한 준비가 완료되는 것이다. `package.json` 설정에 따라, 모듈을 로드할 때 `dist/` 디렉토리의 결과물을 활용하므로, 테스트에 앞서 모듈을 빌드하여 `dist/`에 생성해주어야 한다.
87 | 
88 | ```bash
89 | # `videojs-react-enhanced` 프로젝트에서 실행
90 | npm run build:prod
91 | ```
92 | 
93 | ## Appendix
94 | 
95 | ### `yarn link`를 헤제하려면 - 아래 둘 중 하나 수행
96 | 1. yarn unlink '패키지명'
97 | 2. ~/.config/yarn/link 디렉토리 내에 있는 링크 파일 제거
98 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   preset: 'ts-jest',
 3 |   testEnvironment: 'jsdom',
 4 |   setupFilesAfterEnv: [
 5 |     './tests/setupTests.ts'
 6 |   ],
 7 |   roots: [
 8 |     './tests'
 9 |   ],
10 |   moduleNameMapper: {
11 |     '\\.(css|scss)$': 'identity-obj-proxy'
12 |   }
13 | };
14 | 


--------------------------------------------------------------------------------
/lib/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import videojs, { VideoJsPlayer } from 'video.js';
  4 | import {
  5 |   initializeEventListeners,
  6 |   initializePlayerComponentsDisplay,
  7 |   filterPlugins,
  8 |   generatePlayerOptions,
  9 |   initializePlayer,
 10 | } from './utils/index';
 11 | 
 12 | function Player(props: Player.PlayerProps):JSX.Element {
 13 |   let playerRef: React.RefObject<HTMLVideoElement> = useRef<HTMLVideoElement>(null);
 14 |   let player: Player.IVideoJsPlayer;
 15 |   let autoPlugins: Player.IIndexableObject | undefined;
 16 |   let manualPlugins: Array<Player.IVideoJsPlugin> = [];
 17 | 
 18 |   if (props.videojsOptions?.plugins !== undefined) {
 19 |     [autoPlugins, manualPlugins] = filterPlugins(props.videojsOptions?.plugins);
 20 |   }
 21 | 
 22 |   const playerOptions: videojs.PlayerOptions = generatePlayerOptions(props, autoPlugins);
 23 | 
 24 |   useEffect(() => {
 25 |     player = initializePlayer(playerRef.current, playerOptions, manualPlugins);
 26 |     initializePlayerComponentsDisplay(player, props.hideList);
 27 |     initializeEventListeners(player, props);
 28 |     props.onReady && props.onReady(player);
 29 | 
 30 |     return (): void => {
 31 |       if (player)
 32 |         player.dispose();
 33 |     }
 34 |   }, []);
 35 | 
 36 |   return (
 37 |     <div>
 38 |       <div data-vjs-player>
 39 |         <video
 40 |           ref={playerRef}
 41 |           className={`video-js`}
 42 |         />
 43 |       </div>
 44 |     </div>
 45 |   );
 46 | }
 47 | 
 48 | namespace Player {
 49 |   export interface IIndexableObject {
 50 |     [key: string]: any;
 51 |   }
 52 | 
 53 |   export interface IVideoJsPlayer extends VideoJsPlayer {
 54 |     [key: string]: any;
 55 |   }
 56 | 
 57 |   export interface IPlayerOptions {
 58 |     autoplay?: 'muted' | 'play' | 'any';
 59 |     controls?: boolean;
 60 |     height?: number;
 61 |     loop?: boolean;
 62 |     muted?: boolean;
 63 |     playsinline?: boolean;
 64 |     preload?: 'auto' | 'metadata' | 'none';
 65 |     src?: string;
 66 |     width?: number;
 67 |   }
 68 |   
 69 |   export interface IResources {
 70 |     sources?: Array<videojs.Tech.SourceObject>;
 71 |     poster?: string;
 72 |   }
 73 |   
 74 |   export interface IVideoJsOptions {
 75 |     aspectRatio?: string;
 76 |     fluid?: boolean;
 77 |     inactivityTimeout?: number;
 78 |     language?: string;
 79 |     // liveui?: boolean;
 80 |     nativeControlsForTouch?: boolean;
 81 |     notSupportedMessage?: string;
 82 |     playbackRates?: Array<number>;
 83 |     plugins?: Array<IVideoJsPlugin>;
 84 |   }
 85 | 
 86 |   export interface IVideoJsPlugin {
 87 |     name: string;
 88 |     plugin?: (option: object) => void;
 89 |     options: object;
 90 |   }
 91 |   
 92 |   export interface PlayerProps {
 93 |     playerOptions?: IPlayerOptions;
 94 |     resources?: IResources;
 95 |     videojsOptions?: IVideoJsOptions;
 96 |     hideList?: Array<string>;
 97 |   
 98 |     // Custom Event Handlers
 99 |     onReady?: (player: VideoJsPlayer) => void;
100 |     onPlay?: (event: EventTarget, player: VideoJsPlayer, currentTimeSecond: number) => void;
101 |     onPause?: (event: EventTarget, player: VideoJsPlayer, currentTimeSecond: number) => void;
102 |     onWaiting?: (event: EventTarget, player: VideoJsPlayer, currentTimeSecond: number) => void;
103 |     onPlaying?: (event: EventTarget, player: VideoJsPlayer, currentTimeSecond: number) => void;
104 |     onTimeUpdate?: (event: EventTarget, player: VideoJsPlayer, currentTimeSecond: number) => void;
105 |     onSeeking?: (event: EventTarget, player: VideoJsPlayer, startTimeSecond: number) => void;
106 |     onSeeked?: (event: EventTarget, player: VideoJsPlayer, startTimeSecond: number, finishTimeSecond: number) => void;
107 |     onEnded?: (event: EventTarget, player: VideoJsPlayer) => void;
108 |     onError?: (error: MediaError, player: VideoJsPlayer) => void;
109 |     onLoadedData?: (event: EventTarget, player: VideoJsPlayer) => void;
110 |     onLoadedMetadata?: (event: EventTarget, player: VideoJsPlayer) => void;
111 |   }
112 | }
113 | 
114 | Player.propTypes = {
115 |   playerOptions: PropTypes.shape({
116 |     autoplay: PropTypes.oneOfType([
117 |       PropTypes.bool,
118 |       PropTypes.oneOf(['muted', 'play', 'any']),
119 |     ]),
120 |     controls: PropTypes.bool,
121 |     height: PropTypes.number,
122 |     loop: PropTypes.bool,
123 |     muted: PropTypes.bool,
124 |     preload: PropTypes.oneOf(['auto', 'metadata', 'none']),
125 |     src: PropTypes.string,
126 |     width: PropTypes.string,
127 |   }),
128 |   resources: PropTypes.shape({
129 |     sources: PropTypes.arrayOf(PropTypes.shape({
130 |       url: PropTypes.string,
131 |       type: PropTypes.string,
132 |     })),
133 |     poster: PropTypes.string,
134 |   }),
135 |   videojsOptions: PropTypes.shape({
136 |     aspectRatio: PropTypes.string,
137 |     fluid: PropTypes.bool,
138 |     inactivityTimeout: PropTypes.number,
139 |     language: PropTypes.string,
140 |     nativeControlsForTouch: PropTypes.bool,
141 |     notSupportedMessage: PropTypes.string,
142 |     playbackRates: PropTypes.arrayOf(PropTypes.number),
143 |     plugins: PropTypes.arrayOf(PropTypes.shape({
144 |       name: PropTypes.string,
145 |       plugin: PropTypes.func,
146 |       options: PropTypes.object,
147 |     }))
148 |   }),
149 |   hideList: PropTypes.arrayOf(PropTypes.string),
150 | 
151 |   onReady: PropTypes.func.isRequired,
152 |   onPlay: PropTypes.func.isRequired,
153 |   onPause: PropTypes.func.isRequired,
154 |   onWaiting: PropTypes.func.isRequired,
155 |   onPlaying: PropTypes.func.isRequired,
156 |   onTimeUpdate: PropTypes.func.isRequired,
157 |   onSeeking: PropTypes.func.isRequired,
158 |   onSeeked: PropTypes.func.isRequired,
159 |   onEnded: PropTypes.func.isRequired,
160 |   onError: PropTypes.func.isRequired,
161 |   onLoadedData: PropTypes.func.isRequired,
162 |   onLoadedMetadata: PropTypes.func.isRequired,
163 | }
164 | 
165 | Player.defaultProps = {
166 |   playerOptions: {
167 |     src: "",
168 |     hideList: [],
169 |   },
170 |   resources: {
171 |     sources: [],
172 |     poster: "",
173 |   },
174 |   videojsOptions: {
175 |     plugins: [],
176 |   },
177 |   hideList: [],
178 | 
179 |   onReady: () => { },
180 |   onPlay: () => { },
181 |   onPause: () => { },
182 |   onWaiting: () => { },
183 |   onPlaying: () => { },
184 |   onTimeUpdate: () => { },
185 |   onSeeking: () => { },
186 |   onSeeked: () => { },
187 |   onEnded: () => { },
188 |   onError: () => { },
189 |   onLoadedData: () => { },
190 |   onLoadedMetadata: () => { },
191 | }
192 | 
193 | export default Player;
194 | 


--------------------------------------------------------------------------------
/lib/types/video.js/LICENSE:
--------------------------------------------------------------------------------
 1 |     MIT License
 2 | 
 3 |     Copyright (c) Microsoft Corporation.
 4 | 
 5 |     Permission is hereby granted, free of charge, to any person obtaining a copy
 6 |     of this software and associated documentation files (the "Software"), to deal
 7 |     in the Software without restriction, including without limitation the rights
 8 |     to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 |     copies of the Software, and to permit persons to whom the Software is
10 |     furnished to do so, subject to the following conditions:
11 | 
12 |     The above copyright notice and this permission notice shall be included in all
13 |     copies or substantial portions of the Software.
14 | 
15 |     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 |     IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 |     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 |     AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 |     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 |     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 |     SOFTWARE
22 | 


--------------------------------------------------------------------------------
/lib/types/video.js/README.md:
--------------------------------------------------------------------------------
 1 | # Installation
 2 | > `npm install --save @types/video.js`
 3 | 
 4 | # Summary
 5 | This package contains type definitions for Video.js (https://github.com/videojs/video.js).
 6 | 
 7 | # Details
 8 | Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/video.js.
 9 | 
10 | ### Additional Details
11 |  * Last updated: Sun, 21 Jun 2020 18:08:06 GMT
12 |  * Dependencies: none
13 |  * Global values: `videojs`
14 | 
15 | # Credits
16 | These definitions were written by [Vincent Bortone](https://github.com/vbortone), [Simon Clériot](https://github.com/scleriot), [Sean Bennett](https://github.com/SWBennett06), [Christoph Wagner](https://github.com/IgelCampus), [Gio Freitas](https://github.com/giofreitas), [Grzegorz Błaszczyk](https://github.com/gjanblaszczyk), [Stéphane Roucheray](https://github.com/sroucheray), [Adam Eisenreich](https://github.com/AkxeOne), [Mei Qingguang](https://github.com/meikidd), [Joe Flateau](https://github.com/joeflateau), and [KuanYu Chu](https://github.com/ckybonist).
17 | 


--------------------------------------------------------------------------------
/lib/types/video.js/dist/alt/video.core.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * This provides `video.core.js` alternative distribution typings :
3 |  * `import videojs from 'video.js/dist/alt/video.core';`
4 |  */
5 | import videojs from '../../index';
6 | export default videojs;
7 | 


--------------------------------------------------------------------------------
/lib/types/video.js/dist/alt/video.core.novtt.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * This provides `video.core.novtt.js` alternative distribution typings :
3 |  * `import videojs from 'video.js/dist/alt/video.core.novtt';`
4 |  */
5 | import videojs from '../../index';
6 | export default videojs;
7 | 


--------------------------------------------------------------------------------
/lib/types/video.js/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "_from": "@types/video.js",
 3 |   "_id": "@types/video.js@7.3.10",
 4 |   "_inBundle": false,
 5 |   "_integrity": "sha512-RJKdtmUMb8WFDe+btAeBW9NVUJ/nksb+/1S+Tca7HNwnRv9iEwt802hgRSAcFj6+sL/eNi264zcBjbBHP5yQVw==",
 6 |   "_location": "/@types/video.js",
 7 |   "_phantomChildren": {},
 8 |   "_requested": {
 9 |     "type": "tag",
10 |     "registry": true,
11 |     "raw": "@types/video.js",
12 |     "name": "@types/video.js",
13 |     "escapedName": "@types%2fvideo.js",
14 |     "scope": "@types",
15 |     "rawSpec": "",
16 |     "saveSpec": null,
17 |     "fetchSpec": "latest"
18 |   },
19 |   "_requiredBy": [
20 |     "#DEV:/",
21 |     "#USER"
22 |   ],
23 |   "_resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.10.tgz",
24 |   "_shasum": "95e563f5f21821d4f4bccf7343c359093e81895d",
25 |   "_spec": "@types/video.js",
26 |   "_where": "/Users/cadenzah/Programming/JavaScript/TypeScript/intern-project/video-player/videojs-react-enhanced",
27 |   "bugs": {
28 |     "url": "https://github.com/DefinitelyTyped/DefinitelyTyped/issues"
29 |   },
30 |   "bundleDependencies": false,
31 |   "contributors": [
32 |     {
33 |       "name": "Vincent Bortone",
34 |       "url": "https://github.com/vbortone"
35 |     },
36 |     {
37 |       "name": "Simon Clériot",
38 |       "url": "https://github.com/scleriot"
39 |     },
40 |     {
41 |       "name": "Sean Bennett",
42 |       "url": "https://github.com/SWBennett06"
43 |     },
44 |     {
45 |       "name": "Christoph Wagner",
46 |       "url": "https://github.com/IgelCampus"
47 |     },
48 |     {
49 |       "name": "Gio Freitas",
50 |       "url": "https://github.com/giofreitas"
51 |     },
52 |     {
53 |       "name": "Grzegorz Błaszczyk",
54 |       "url": "https://github.com/gjanblaszczyk"
55 |     },
56 |     {
57 |       "name": "Stéphane Roucheray",
58 |       "url": "https://github.com/sroucheray"
59 |     },
60 |     {
61 |       "name": "Adam Eisenreich",
62 |       "url": "https://github.com/AkxeOne"
63 |     },
64 |     {
65 |       "name": "Mei Qingguang",
66 |       "url": "https://github.com/meikidd"
67 |     },
68 |     {
69 |       "name": "Joe Flateau",
70 |       "url": "https://github.com/joeflateau"
71 |     },
72 |     {
73 |       "name": "KuanYu Chu",
74 |       "url": "https://github.com/ckybonist"
75 |     }
76 |   ],
77 |   "dependencies": {},
78 |   "deprecated": false,
79 |   "description": "TypeScript definitions for Video.js",
80 |   "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped#readme",
81 |   "license": "MIT",
82 |   "main": "",
83 |   "name": "@types/video.js",
84 |   "repository": {
85 |     "type": "git",
86 |     "url": "git+https://github.com/DefinitelyTyped/DefinitelyTyped.git",
87 |     "directory": "types/video.js"
88 |   },
89 |   "scripts": {},
90 |   "typeScriptVersion": "3.0",
91 |   "types": "index.d.ts",
92 |   "typesPublisherContentHash": "7189e7d8b9000d8233e9ad9af3c0bf2bda89e0c84ddc38b2a985fd0287f929a2",
93 |   "version": "7.3.10"
94 | }
95 | 


--------------------------------------------------------------------------------
/lib/utils/filterPlugins.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * # Process `plugins` array
 3 |  *
 4 |  * Plugins already registered on videojs object only need to pass options to `Videojs Player constructor`.
 5 |  * On the other hand, plugins not registered yet have to be registered manually with its options.
 6 |  *
 7 |  * As an input, function will get a `plugins` array which contains plugin objects passed through React `props`, following `Player.IVideoJsPlugin` interface.
 8 |  * - For the former case, `autoPlugins` object will be created, which contains each plugins' options that is used when player instance is created.
 9 |  *   - Each key's name maps to a plugin's name, and its value has an option for that plugin.
10 |  *   - If there is no plugins that were previously generated, then `autoPlugins` object will be `undefined`, so that it can be ignored when creating player instance.
11 |  * - For the latter case, `manualPlugins` array will be created, in which plugins need to be manually registered and initialize their option afterwards.
12 |  */
13 | import Player from '../index';
14 | 
15 | function filterPlugins(plugins: filterPlugins.Plugins): [
16 |   filterPlugins.AutoPlugins | undefined,
17 |   filterPlugins.Plugins] {
18 |   let resultAutoPlugins: filterPlugins.AutoPlugins | undefined;
19 |   const autoPlugins: filterPlugins.AutoPlugins = { };
20 |   const manualPlugins: filterPlugins.Plugins = [];
21 | 
22 |   plugins.map(element => {
23 |     if (element.plugin === undefined) {
24 |       autoPlugins[element.name] = element.options;
25 |     } else {
26 |       manualPlugins.push(element);
27 |     }
28 |   });
29 |   resultAutoPlugins = (Object.keys(autoPlugins).length === 0) ? undefined : autoPlugins;
30 | 
31 |   return [
32 |     resultAutoPlugins,
33 |     manualPlugins,
34 |   ];
35 | }
36 | 
37 | namespace filterPlugins {
38 |   export interface Plugins extends Array<Player.IVideoJsPlugin> { };
39 |   export interface AutoPlugins {
40 |     [key: string]: any;
41 |   }
42 | };
43 | 
44 | export default filterPlugins
45 | 


--------------------------------------------------------------------------------
/lib/utils/generatePlayerOptions.ts:
--------------------------------------------------------------------------------
 1 | // 플레이어 생성에 필요한 옵션을 하나로 합친다
 2 | // 이후 추가 작업 수행한 뒤 player를 반환
 3 | 
 4 | import videojs from 'video.js';
 5 | import Player from '../index';
 6 | 
 7 | function generatePlayerOptions(props: Player.PlayerProps, autoPlugins?: Player.IIndexableObject): videojs.PlayerOptions {
 8 |   const playerOptions: videojs.PlayerOptions = {
 9 |     ...props.playerOptions,
10 |     ...props.resources,
11 |     ...props.videojsOptions,
12 |     plugins: autoPlugins,
13 |   };
14 | 
15 |   return playerOptions;
16 | }
17 | 
18 | export default generatePlayerOptions;
19 | 


--------------------------------------------------------------------------------
/lib/utils/index.ts:
--------------------------------------------------------------------------------
 1 | import initializeEventListeners from './initializeEventListeners';
 2 | import initializePlayerComponentsDisplay from './initializePlayerComponentsDisplay';
 3 | import initializePlayer from './initializePlayer';
 4 | import filterPlugins from './filterPlugins';
 5 | import generatePlayerOptions from './generatePlayerOptions';
 6 | 
 7 | export {
 8 |   initializeEventListeners,
 9 |   initializePlayerComponentsDisplay,
10 |   filterPlugins,
11 |   generatePlayerOptions,
12 |   initializePlayer,
13 | };
14 | 


--------------------------------------------------------------------------------
/lib/utils/initializeEventListeners.ts:
--------------------------------------------------------------------------------
 1 | import { VideoJsPlayer } from 'video.js';
 2 | import Player from '../index';
 3 | // props로 전달된 각 이벤트 리스너들을 대응되는 이벤트가 발생시 실행되도록 초기화
 4 | function initializeEventListeners(player: VideoJsPlayer, props: Player.PlayerProps): void {
 5 |   let currentTimeSecond: number = 0;
 6 |   let previousTimeSecond: number = 0;
 7 |   let startPositionSecond: number = 0;
 8 | 
 9 |   player.on('play', (event) => {
10 |     props.onPlay && props.onPlay(event, player, player.currentTime());
11 |   });
12 | 
13 |   player.on('pause', (event) => {
14 |     props.onPause && props.onPause(event, player, player.currentTime());
15 |   });
16 | 
17 |   player.on('waiting', (event) => {
18 |     props.onWaiting && props.onWaiting(event, player, player.currentTime());
19 |   });
20 |   
21 |   player.on('playing', (event) => {
22 |     props.onPlaying && props.onPlaying(event, player, player.currentTime());
23 |   });
24 | 
25 |   player.on('timeupdate', (event) => {
26 |     // 현재 마우스 커서가 위치한 시점, 재생 중인 시점
27 |     let temp = player.currentTime();
28 |     props.onTimeUpdate && props.onTimeUpdate(event, player, temp);
29 |     previousTimeSecond = currentTimeSecond;
30 |     currentTimeSecond = temp;
31 |     if (previousTimeSecond < currentTimeSecond) {
32 |         startPositionSecond = previousTimeSecond;
33 |         previousTimeSecond = currentTimeSecond;
34 |     }
35 |   });
36 | 
37 |   player.on('seeking', (event) => {
38 |     // 탐색을 시작한 시점이 시작 지점
39 |     player.off('timeupdate', () => { });
40 |     player.one('seeked', () => { });
41 |     props.onSeeking && props.onSeeking(event, player, player.currentTime());
42 |   });
43 | 
44 |   player.on('seeked', (event) => {
45 |     // 최종적으로 마우스 커서가 멈춘 곳을 기준으로 두 정보 모두 전달
46 |     const completeTimeSecond = player.currentTime();
47 |     props.onSeeked && props.onSeeked(event, player, startPositionSecond, completeTimeSecond);
48 |   });
49 | 
50 |   player.on('ended', (event) => {
51 |     props.onEnded && props.onEnded(event, player);
52 |   });
53 | 
54 |   player.on('error', (event) => {
55 |     props.onError && props.onError(event, player);
56 |   });
57 | 
58 |   player.on('loadeddata', (event) => {
59 |     props.onLoadedData && props.onLoadedData(event, player);
60 |   });
61 | 
62 |   player.on('loadedmetadata', (event) => {
63 |     props.onLoadedMetadata && props.onLoadedMetadata(event, player);
64 |   });
65 | }
66 | 
67 | export default initializeEventListeners;
68 | 


--------------------------------------------------------------------------------
/lib/utils/initializePlayer.ts:
--------------------------------------------------------------------------------
 1 | import videojs, { VideoJsPlayer } from 'video.js';
 2 | import Player from '../index';
 3 | 
 4 | function initializePlayer(playerRef: HTMLVideoElement | null, playerOptions: videojs.PlayerOptions, manualPlugins: Array<Player.IVideoJsPlugin>): VideoJsPlayer {
 5 |   const player: Player.IVideoJsPlayer = videojs(
 6 |     playerRef,
 7 |     playerOptions
 8 |   );
 9 | 
10 |   // Initialization of src and poster if exists
11 |   const videoSrc = playerOptions.src;
12 |   const videoPoster = playerOptions.poster;
13 |   videoSrc && player.src(videoSrc);
14 |   videoPoster && player.poster(videoPoster);
15 | 
16 |   // Registration and Option initialization of manual plugins
17 |   manualPlugins.map(element => {
18 |     element.plugin && videojs.registerPlugin(
19 |       element.name,
20 |       element.plugin,
21 |     );
22 |     player[element.name](player, element.options);
23 |   });
24 | 
25 |   return player;
26 | }
27 | 
28 | export default initializePlayer;
29 | 


--------------------------------------------------------------------------------
/lib/utils/initializePlayerComponentsDisplay.ts:
--------------------------------------------------------------------------------
 1 | import videojs, { VideoJsPlayer } from 'video.js';
 2 | 
 3 | // props로 전달된 스트링 값들을 파싱하여, 플레이어 UI 중 일부를 가려버린다
 4 | interface IDefaultControlBar extends videojs.ControlBar {
 5 |   [key: string]: any;
 6 | }
 7 | 
 8 | function initializePlayerComponentsDisplay(player: VideoJsPlayer, hideList?: Array<string>): void {
 9 |   const controlBar: IDefaultControlBar = player.controlBar;
10 |   hideList && hideList.map(component => {
11 |     controlBar[component] && controlBar[component].hide();
12 |   });
13 | }
14 | 
15 | export default initializePlayerComponentsDisplay;
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "videojs-react-enhanced",
 3 |   "version": "0.3.1",
 4 |   "description": "React.js wrapper component for Video.js player",
 5 |   "main": "dist/index.js",
 6 |   "module": "dist/index.es.js",
 7 |   "jsnest:main": "dist/index.es.js",
 8 |   "files": [
 9 |     "dist/**/*"
10 |   ],
11 |   "directories": {
12 |     "lib": "lib",
13 |     "test": "tests"
14 |   },
15 |   "types": "dist/types/index.d.ts",
16 |   "scripts": {
17 |     "test": "npx jest --ci --coverage",
18 |     "test:watch": "npx jest  --watchAll --coverage --verbose",
19 |     "build:watch": "npx rollup -c --watch",
20 |     "build:prod": "npx rollup -c rollup.config.prod.js",
21 |     "prepare:peers": "npx install-peers -f"
22 |   },
23 |   "repository": {
24 |     "type": "git",
25 |     "url": "git+https://github.com/cadenzah/videojs-react-enhanced.git"
26 |   },
27 |   "keywords": [
28 |     "videojs",
29 |     "video.js",
30 |     "reactjs",
31 |     "react",
32 |     "typescript",
33 |     "videojs-react",
34 |     "videojs-react-enhanced",
35 |     "videojs-react-wrapper",
36 |     "react-video-js-player"
37 |   ],
38 |   "author": "cadenzah <cadenzah93@gmail.com> (https://github.com/cadenzah)",
39 |   "license": "MIT",
40 |   "bugs": {
41 |     "url": "https://github.com/cadenzah/videojs-react-enhanced/issues"
42 |   },
43 |   "homepage": "https://github.com/cadenzah/videojs-react-enhanced#readme",
44 |   "devDependencies": {
45 |     "@babel/cli": "^7.10.5",
46 |     "@babel/core": "^7.11.1",
47 |     "@babel/plugin-proposal-class-properties": "^7.10.4",
48 |     "@babel/plugin-transform-runtime": "^7.11.0",
49 |     "@babel/preset-env": "^7.11.0",
50 |     "@babel/preset-react": "^7.10.4",
51 |     "@rollup/plugin-babel": "^5.1.0",
52 |     "@rollup/plugin-commonjs": "^14.0.0",
53 |     "@rollup/plugin-node-resolve": "^8.4.0",
54 |     "@rollup/plugin-replace": "^2.3.3",
55 |     "@testing-library/jest-dom": "^5.11.2",
56 |     "@testing-library/react": "^9.5.0",
57 |     "@testing-library/user-event": "^12.1.1",
58 |     "@types/jest": "^26.0.9",
59 |     "@types/prop-types": "^15.7.3",
60 |     "@types/react": "^16.9.45",
61 |     "@types/sinon": "^9.0.4",
62 |     "identity-obj-proxy": "^3.0.0",
63 |     "install-peers-cli": "^2.2.0",
64 |     "jest": "^26.2.2",
65 |     "node-sass": "^4.14.1",
66 |     "react-dom": "^16.13.1",
67 |     "rollup": "^2.23.1",
68 |     "rollup-plugin-cleaner": "^1.0.0",
69 |     "rollup-plugin-peer-deps-external": "^2.2.3",
70 |     "rollup-plugin-postcss": "^3.1.5",
71 |     "rollup-plugin-terser": "^7.0.0",
72 |     "rollup-plugin-typescript2": "^0.27.2",
73 |     "sinon": "^9.0.2",
74 |     "ts-jest": "^26.1.4",
75 |     "typescript": "^3.9.7"
76 |   },
77 |   "dependencies": {
78 |     "@babel/runtime": "^7.11.2",
79 |     "prop-types": "^15.7.2"
80 |   },
81 |   "peerDependencies": {
82 |     "react": "^16.13.1",
83 |     "video.js": "^7.8.4"
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import typescript from "rollup-plugin-typescript2";
 2 | import external from "rollup-plugin-peer-deps-external";
 3 | import commonjs from "@rollup/plugin-commonjs";
 4 | import resolve from "@rollup/plugin-node-resolve";
 5 | import babel from '@rollup/plugin-babel';
 6 | import cleanup from 'rollup-plugin-cleaner';
 7 | import postcss from 'rollup-plugin-postcss';
 8 | 
 9 | import pkg from "./package.json";
10 | const extensions = ['.js', '.jsx', '.ts', '.tsx'];
11 | 
12 | export default {
13 |   input: "lib/index.tsx",
14 |   output: [
15 |     {
16 |       file: pkg.main,
17 |       format: "cjs",
18 |       exports: "named",
19 |     },
20 |     {
21 |       file: pkg.module,
22 |       format: "es",
23 |       exports: "named",
24 |     }
25 |   ],
26 |   plugins: [
27 |     cleanup({
28 |       targets: [
29 |         './dist/',
30 |       ]
31 |     }),
32 |     external(),
33 |     resolve(extensions),
34 |     typescript({
35 |       rollupCommonJSResolveHack: true,
36 |       exclude: "**/tests/**",
37 |       clean: true,
38 |       useTsconfigDeclarationDir: true,
39 |     }),
40 |     commonjs({
41 |       include: ["node_modules/**"],
42 |     }),
43 |     babel({
44 |       extensions,
45 |       include: ['lib/**/*'],
46 |       babelHelpers: 'runtime',
47 |     }),
48 |     postcss(),
49 |   ]
50 | };
51 | 


--------------------------------------------------------------------------------
/rollup.config.prod.js:
--------------------------------------------------------------------------------
 1 | import typescript from "rollup-plugin-typescript2";
 2 | import external from "rollup-plugin-peer-deps-external";
 3 | import commonjs from "@rollup/plugin-commonjs";
 4 | import resolve from "@rollup/plugin-node-resolve";
 5 | import babel from '@rollup/plugin-babel';
 6 | import cleanup from 'rollup-plugin-cleaner';
 7 | import postcss from 'rollup-plugin-postcss';
 8 | import replace from '@rollup/plugin-replace';
 9 | import { terser } from 'rollup-plugin-terser';
10 | 
11 | import pkg from "./package.json";
12 | const extensions = ['.js', '.jsx', '.ts', '.tsx'];
13 | 
14 | export default {
15 |   input: "lib/index.tsx",
16 |   output: [
17 |     {
18 |       file: pkg.main,
19 |       format: "cjs",
20 |       exports: "named",
21 |     },
22 |     {
23 |       file: pkg.module,
24 |       format: "es",
25 |       exports: "named",
26 |     }
27 |   ],
28 |   plugins: [
29 |     cleanup({
30 |       targets: [
31 |         './dist/',
32 |       ]
33 |     }),
34 |     replace({
35 |       'process.env.NODE_ENV': JSON.stringify('production'),
36 |     }),
37 |     external(),
38 |     resolve(extensions),
39 |     typescript({
40 |       rollupCommonJSResolveHack: true,
41 |       exclude: "**/tests/**",
42 |       clean: true,
43 |       useTsconfigDeclarationDir: true,
44 |     }),
45 |     commonjs({
46 |       include: ["node_modules/**"],
47 |     }),
48 |     babel({
49 |       extensions,
50 |       include: ['lib/**/*'],
51 |       babelHelpers: 'runtime',
52 |     }),
53 |     postcss(),
54 |     terser(),
55 |   ]
56 | };
57 | 


--------------------------------------------------------------------------------
/tests/player.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { cleanup, render, fireEvent, RenderResult } from '@testing-library/react';
 3 | import sinon from 'sinon';
 4 | import videojs, { VideoJsPlayer } from 'video.js';
 5 | import Player from '../lib';
 6 | 
 7 | let component: RenderResult;
 8 | 
 9 | describe(`Integrated Test - Wrapper Component`, () => {
10 |   describe(`<Player />`, () => {
11 |     let component: JSX.Element;
12 |     it(`Renders and unmounts well without any error`, () => {
13 |       // given
14 |       component = <Player />;
15 | 
16 |       // when
17 |       render(component);
18 | 
19 |       // done - no error occurs
20 |       cleanup();
21 |     });
22 | 
23 |     it(`Renders with options properly`, () => {
24 |       // given
25 |       const playerOptions: Player.IPlayerOptions = {
26 |         controls: true,
27 |         autoplay: 'play',
28 |         src: 'https://sample.com/video.mp4',
29 |       };
30 |       const videojsOptions: Player.IVideoJsOptions = {
31 |         fluid: true,
32 |         language: 'ko',
33 |         playbackRates: [0.5, 1.0, 1.5],
34 |       };
35 |       const hideList: Array<string> = [
36 |         'playToggle'
37 |       ];
38 |       component =
39 |         <Player
40 |           playerOptions={playerOptions}
41 |           videojsOptions={videojsOptions}
42 |           hideList={hideList}
43 |           onPlay={() => { }}
44 |           onReady={() => { }}
45 |         />
46 | 
47 |       // when
48 |       render(component);
49 | 
50 |       // done - no error occurs
51 |       cleanup();
52 |     });
53 | 
54 |     it(`Renders well with plugins`, () => {
55 |       // given
56 |       videojs.registerPlugin('PluginB', (options: any) => {})
57 | 
58 |       const plugins: Array<Player.IVideoJsPlugin> = [
59 |         {
60 |           name: 'PluginA',
61 |           plugin: (option) => { },
62 |           options: { settings: true },
63 |         },
64 |         {
65 |           name: 'PluginB',
66 |           options: { settings: false },
67 |         },
68 |       ];
69 |       const videojsOptions: Player.IVideoJsOptions = {
70 |         plugins,
71 |       }
72 | 
73 |       component =
74 |       <Player
75 |         videojsOptions={videojsOptions}
76 |       />
77 | 
78 |       // when
79 |       render(component);
80 | 
81 |       // done - no error occurs
82 |       cleanup();
83 |       videojs.deregisterPlugin('PluginA');
84 |       videojs.deregisterPlugin('PluginB');
85 |     });
86 |   });
87 | });
88 | 


--------------------------------------------------------------------------------
/tests/setupTests.ts:
--------------------------------------------------------------------------------
 1 | import '@testing-library/jest-dom';
 2 | 
 3 | const originalConsoleError = console.error;
 4 | 
 5 | window.HTMLMediaElement.prototype.load = () => { /* do nothing */ };
 6 | window.HTMLMediaElement.prototype.play = () => Promise.resolve();
 7 | window.HTMLMediaElement.prototype.pause = () => { /* do nothing */ };
 8 | 
 9 | // If a Prop-type error occurred during rendering a React component,
10 | // that error will throw an error so that it can be detected via Jest
11 | console.error = (message: string) => {
12 |   if (/(Failed prop type)/.test(message)) {
13 |     throw new Error(message);
14 |   }
15 | 
16 |   originalConsoleError(message);
17 | };
18 | 


--------------------------------------------------------------------------------
/tests/utils.test.ts:
--------------------------------------------------------------------------------
  1 | import sinon from 'sinon';
  2 | import videojs from 'video.js';
  3 | import Player from '../lib';
  4 | 
  5 | import {
  6 |   initializeEventListeners,
  7 |   initializePlayerComponentsDisplay,
  8 |   filterPlugins,
  9 |   generatePlayerOptions,
 10 | } from '../lib/utils';
 11 | 
 12 | // player 객체를 전달하여 이벤트 리스너를 등록하고나면,
 13 | // 특정 이벤트가 발생하였을 때 핸들러가 실행이 되는가?
 14 | // 이벤트 발생을 어떻게 시뮬레이팅하는가? 
 15 | 
 16 | // player.trigger 등을 활용하고,
 17 | // 이벤트 리스너는 sinon stub을 줘서
 18 | // 호출이 되었는지 여부를 확인하자
 19 | let events: {
 20 |   [key: string]: any;
 21 | } = { };
 22 | 
 23 | describe(`Unit tests - Utility module functions`, () => {
 24 |   describe(`# initializeEventListener.ts`, () => {
 25 |     let player: videojs.Player;
 26 | 
 27 |     beforeEach(() => {
 28 |       // mock videojs player object for test
 29 |       player = {
 30 |         trigger: trigger,
 31 |         on: on,
 32 |         off: () => { },
 33 |         one: () => { },
 34 |         currentTime: () => { },
 35 |       } as videojs.Player;
 36 |     });
 37 | 
 38 |     afterEach(() => {
 39 |       events = { };
 40 |     });
 41 | 
 42 |     it(`Custom event listeners are properly registered`, () => {
 43 |       //given
 44 |       const on = sinon.spy(player, 'on');
 45 |       const props: Player.PlayerProps = {
 46 | 
 47 |       };
 48 | 
 49 |       //when
 50 |       initializeEventListeners(player, props);
 51 |       on.restore();
 52 | 
 53 |       //then
 54 |       expect(on.callCount).toBe(11);
 55 |     });
 56 | 
 57 |     it(`Registered listeners are properly executed when an event emits`, () => {
 58 |       // given
 59 |       const counts: Array<number> = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
 60 |       const props: Player.PlayerProps = {
 61 |         onPlay: () => { counts[0]++ },
 62 |         onPause: () => { counts[1]++ },
 63 |         onWaiting: () => { counts[2]++ },
 64 |         onTimeUpdate: () => { counts[3]++ },
 65 |         onSeeking: () => { counts[4]++ },
 66 |         onSeeked: () => { counts[5]++ },
 67 |         onEnded: () => { counts[6]++ },
 68 |         onError: () => { counts[7]++ },
 69 |         onLoadedData: () => { counts[8]++ },
 70 |         onLoadedMetadata: () => { counts[9]++ },
 71 |         onPlaying: () => { counts[10]++ },
 72 |       };
 73 | 
 74 |       // when
 75 |       initializeEventListeners(player, props);
 76 |       player.trigger('play');
 77 |       player.trigger('pause');
 78 |       player.trigger('waiting');
 79 |       player.trigger('playing');
 80 |       player.trigger('timeupdate');
 81 |       player.trigger('seeking');
 82 |       player.trigger('seeked');
 83 |       player.trigger('ended');
 84 |       player.trigger('error');
 85 |       player.trigger('loadeddata');
 86 |       player.trigger('loadedmetadata');
 87 | 
 88 |       // then
 89 |       counts.forEach(count => {
 90 |         expect(count).toBe(1);
 91 |       });
 92 |     });
 93 |   });
 94 | 
 95 |   describe(`# initializePlayerComponentDisplay.ts`, () => {
 96 |     let player: videojs.Player;
 97 | 
 98 |     beforeEach(() => {
 99 |       player = {
100 |         controlBar: {
101 |           playToggle: {
102 |             hide: () => { }
103 |           },
104 |           volumeButton: {
105 |             hide: () => { }
106 |           }
107 |         } as unknown
108 |       } as videojs.Player;
109 |     });
110 | 
111 |     it(`Address properly when \`hideList\` is an empty array`, () => {
112 |       // hidelist가 빈 배열일 때 에러가 안 발샏하는지
113 |       // given
114 |       const hideList: Array<string> = [];
115 |       
116 |       // when
117 |       initializePlayerComponentsDisplay(player, hideList);
118 | 
119 |       // then - no error occurs
120 |       
121 |     });
122 | 
123 |     it(`Executes \`.hide()\` methods preperly for elements in \`hideList\``, () => {
124 |       // hidelist를 기반으로 controlBar의 컴포넌트에 대하여 hide를 잘 실행시키는지
125 |       // given
126 |       const hideList: Array<string> = ['playToggle'];
127 |       const controlBar: {
128 |         [key: string]: any;
129 |       } = player.controlBar;
130 |       const playToggle: videojs.Component = controlBar['playToggle'];
131 |       const hide = sinon.spy(playToggle, 'hide');
132 |       
133 |       // when
134 |       initializePlayerComponentsDisplay(player, hideList);
135 | 
136 |       // then
137 |       expect(hide.callCount).toBe(1);
138 |     });
139 |   });
140 | 
141 |   describe(`# filterPlugins.ts`, () => {
142 |     // 각각에서 plugin이 function인지 undefined인지에 따라 다르게 분류된다.
143 |     it(`Properly filters whether a plugin is auto or manual`, () => {
144 |       // given
145 |       const plugins: Array<Player.IVideoJsPlugin> = [
146 |         {
147 |           name: 'PluginA',
148 |           plugin: (option) => { },
149 |           options: { settings: true },
150 |         },
151 |         {
152 |           name: 'PluginB',
153 |           options: { settings: false },
154 |         },
155 |       ]
156 |       // when
157 |       const [autoPlugins, manualPlugins] = filterPlugins(plugins);
158 | 
159 |       // then
160 |       expect(typeof autoPlugins).toBe('object');
161 |       expect(Object.keys(autoPlugins as object)[0]).toBe('PluginB');
162 |       const optionsB = (autoPlugins !== undefined) ? autoPlugins['PluginB'] : {};
163 |       expect(Object.keys(optionsB as object)[0]).toBe('settings');
164 |       
165 |       expect(Array.isArray(manualPlugins)).toBe(true);
166 |       expect(manualPlugins[0].name).toBe('PluginA');
167 |     });
168 | 
169 |     // AutoPlugin이 없을 경우, 첫번째 반환값은 undefined이다
170 |     it(`Returns \`undefined\` as 1st element if there is no auto plugin`, () => {
171 |       // given
172 |       const plugins: Array<Player.IVideoJsPlugin> = [
173 |         {
174 |           name: 'PluginA',
175 |           plugin: (option) => { },
176 |           options: { settings: true },
177 |         },
178 |       ]
179 | 
180 |       // when
181 |       const [autoPlugins, manualPlugins] = filterPlugins(plugins);
182 | 
183 |       // then
184 |       expect(typeof autoPlugins).toBe('undefined');
185 |       expect(Array.isArray(manualPlugins)).toBe(true);
186 |     });
187 | 
188 |     // Manual Plugin이 없을 경우, 두번째 반환값은 []이다
189 |     it(`Returns \`[]\` as 2nd element if there is no manual plugin`, () => {
190 |       // given
191 |       const plugins: Array<Player.IVideoJsPlugin> = [
192 |         {
193 |           name: 'PluginA',
194 |           options: { settings: true },
195 |         },
196 |       ]
197 | 
198 |       // when
199 |       const [autoPlugins, manualPlugins] = filterPlugins(plugins);
200 | 
201 |       // then
202 |       expect(typeof autoPlugins).toBe('object');
203 |       expect(Array.isArray(manualPlugins)).toBe(true);
204 |       expect(manualPlugins.length).toBe(0);
205 |     });
206 |   });
207 | 
208 |   describe(`# generatePlayerOptions.ts`, () => {
209 |     // 전달된 옵션들이 하나의 객체로 잘 합쳐지는가
210 |     it(`Merges passed options into single option object`, () => {
211 |       // given
212 |       const playerOptions: Player.IPlayerOptions = {
213 |         controls: true,
214 |         autoplay: 'play',
215 |         src: 'https://sample.com/video.mp4',
216 |       };
217 |       const videojsOptions: Player.IVideoJsOptions = {
218 |         fluid: true,
219 |         language: 'ko',
220 |         playbackRates: [0.5, 1.0, 1.5],
221 |       };
222 |       const props: Player.PlayerProps = {
223 |         playerOptions,
224 |         videojsOptions,
225 |         onPlay: () => { },
226 |         onPause: () => { },
227 |       };
228 | 
229 |       // when
230 |       const _playerOptions: videojs.PlayerOptions = generatePlayerOptions(props);
231 | 
232 |       // then
233 |       const propsCount = Object.keys(_playerOptions).length;
234 |       expect(propsCount).toBe(7);
235 |     });
236 |   });
237 | });
238 | 
239 | function on(event: string, listener: (e: any) => void) {
240 |   if (typeof events[event] !== 'object') {
241 |     events[event] = [];
242 |   }
243 |   events[event].push(listener);
244 | }
245 | 
246 | function trigger(event: string) {
247 |   var i, listeners, length, args = [].slice.call(arguments, 1);
248 | 
249 |   if (typeof events[event] === 'object') {
250 |     listeners = events[event].slice();
251 |     length = listeners.length;
252 | 
253 |     for (i = 0; i < length; i++) {
254 |       listeners[i](args);
255 |     }
256 |   }
257 | }
258 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     /* Visit https://aka.ms/tsconfig.json to read more about this file */
 4 | 
 5 |     /* Basic Options */
 6 |     // "incremental": true,                   /* Enable incremental compilation */
 7 |     "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
 8 |     "module": "esnext",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
 9 |     "lib": ["es6", "dom", "es2016", "es2017"],                             /* Specify library files to be included in the compilation. */
10 |     "allowJs": false,                       /* Allow javascript files to be compiled. */
11 |     // "checkJs": true,                       /* Report errors in .js files. */
12 |     "jsx": "react",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
13 |     "declaration": true,                   /* Generates corresponding '.d.ts' file. */
14 |     "declarationDir": "./dist/types",
15 |     "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
16 |     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
17 |     // "outFile": "./",                       /* Concatenate and emit output to single file. */
18 |     "outDir": "./dist",                        /* Redirect output structure to the directory. */
19 |     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
20 |     // "composite": true,                     /* Enable project compilation */
21 |     // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
22 |     // "removeComments": true,                /* Do not emit comments to output. */
23 |     // "noEmit": true,                        /* Do not emit outputs. */
24 |     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
25 |     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
26 |     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
27 | 
28 |     /* Strict Type-Checking Options */
29 |     "strict": true,                           /* Enable all strict type-checking options. */
30 |     // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
31 |     // "strictNullChecks": true,              /* Enable strict null checks. */
32 |     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
33 |     // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
34 |     // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
35 |     // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
36 |     // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
37 | 
38 |     /* Additional Checks */
39 |     // "noUnusedLocals": true,                /* Report errors on unused locals. */
40 |     // "noUnusedParameters": true,            /* Report errors on unused parameters. */
41 |     // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
42 |     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
43 | 
44 |     /* Module Resolution Options */
45 |     // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
46 |     "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
47 |     "paths": {
48 |       "video.js": ["./lib/types/video.js/index.d.ts"]
49 |     },                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
50 |     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
51 |     "typeRoots": [
52 |       "./node_modules/@types",
53 |       "./lib/types"
54 |     ],                       /* List of folders to include type definitions from. */
55 |     // "types": [],                           /* Type declaration files to be included in compilation. */
56 |     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
57 |     "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
58 |     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
59 |     // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
60 | 
61 |     /* Source Map Options */
62 |     // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
63 |     // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
64 |     // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
65 |     // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
66 | 
67 |     /* Experimental Options */
68 |     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
69 |     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
70 | 
71 |     /* Advanced Options */
72 |     "skipLibCheck": true,                     /* Skip type checking of declaration files. */
73 |     "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
74 |   },
75 |   "include": [
76 |     "./lib"
77 |   ],
78 |   "exclude": [
79 |     "node_modules",
80 |     "**/tests/**"
81 |   ]
82 | }
83 | 


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