@byomakase/omakase-player 0.3.3 → 0.8.0

package/README.md

@@ -4,14 +4,24 @@
 
 ### Player initialization
 
-Omakase player requires hls.js library. Include hls.js library with Omakase player
+Omakase player requires hls.js library. Include hls.js library with Omakase Player
 
 ```
 <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
-<script src="js/omakase-player.umd.js"></script>
 ```
 
-Create div with id=omakase-player as placeholder for the player
+Include Omakase Player js library
+```
+<script src="dist/omakase-player.umd.js"></script>
+```
+
+Alternatively, you can include Omakase Player by getting it from npm:
+
+```
+npm i @byomakase/omakase-player
+```
+
+Create a div with id=omakase-player as placeholder for the player
 
 ```
 <div id="omakase-player"></div>
@@ -21,7 +31,7 @@ Initialize the player with following code. Use appropriate font family to match
 
 ```
 let omakasePlayer = new omakase.OmakasePlayer({
-        videoHTMLElementId: 'omakase-player'
+        videoHTMLElementId: 'omakase-player',
         fontFamily: 'Arial'
     })
 ```
@@ -34,7 +44,7 @@ Once player is initialized we can load hls video stream with following code
 omakasePlayer.loadVideo('https://my-server.com/myvideo.m3u8', 25).subscribe()
 ```
 
-Within observable we can initialize dependant logic, as a subscription to various events, load caption tracks etc.
+Within observable, we can initialize dependant logic, as a subscription to various events, load caption tracks etc.
 
 ```
 omakasePlayer.loadVideo('https://my-server.com/myvideo.m3u8', 25).subscribe(
@@ -95,15 +105,23 @@ hlsInstance.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
     })
 ```
 
+Player CSS styling should be placed in following class
+
+```
+.omakase-player-wrapper .omakase-video {
+    width: 500px;
+}
+```
+
 ### Timeline initialization
 
-Timeline will be inserted in follwing div
+Timeline will be inserted in following div
 
 ```
 <div id="omakase-timeline"></div>
 ```
 
-Omakase will initialize timeline with createTimeline method. Next sample is loading video thumbnails sequence and adding custom styling to timeline
+Omakase Player will initialize timeline with createTimeline method. Next sample is loading video thumbnails sequence and adding custom styling to timeline
 
 ```
 omakasePlayer.createTimeline({
@@ -130,7 +148,7 @@ omakasePlayer.createTimeline({
             rightPanelRightGutterWidth: 30,
             timecodedContainerClipPadding: 20
         }
-})
+}).subscribe()
 ```
 
 Timeline is supporting various timeline rows as:
@@ -221,8 +239,6 @@ npm install ci
 ./dev.sh
 ```
 
-NOTE: All static (VTT) files should be inside `/public` folder before starting (some files may not be commited to repo)
-
 ## Production build
 
 ```
@@ -231,3 +247,6 @@ npm run prod
 ```
 
 Production artefacts that need to be published to NPM are created in `/dist` folder
+
+## Known limitations
+ - Firefox browser is not supported as it doesn't support ```requestVideoFrameCallback``` function

package/dist/audio/audio-controller.d.ts

@@ -13,10 +13,6 @@
  *       See the License for the specific language governing permissions and
  *       limitations under the License.
  *
- *       Includes rxjs <https://github.com/ReactiveX/rxjs>
- *       Available under Apache License Version 2.0
- *       <https://github.com/ReactiveX/rxjs/blob/master/LICENSE.txt>
- *
  */
 import { AudioApi } from "../api/audio-api";
 import { VideoController } from "../video/video-controller";

package/dist/common/component.d.ts

@@ -13,9 +13,6 @@
  *       See the License for the specific language governing permissions and
  *       limitations under the License.
  *
- *       Includes rxjs <https://github.com/ReactiveX/rxjs>
- *       Available under Apache License Version 2.0
- *       <https://github.com/ReactiveX/rxjs/blob/master/LICENSE.txt>
  */
 import Konva from "konva";
 import { Observable, Subject } from "rxjs";

package/dist/common/style-adapter.d.ts

@@ -13,9 +13,6 @@
  *       See the License for the specific language governing permissions and
  *       limitations under the License.
  *
- *       Includes rxjs <https://github.com/ReactiveX/rxjs>
- *       Available under Apache License Version 2.0
- *       <https://github.com/ReactiveX/rxjs/blob/master/LICENSE.txt>
  */
 import { Subject } from "rxjs";
 export declare class StyleAdapter<T> {

package/dist/common/styles-provider.d.ts

@@ -13,9 +13,6 @@
  *       See the License for the specific language governing permissions and
  *       limitations under the License.
  *
- *       Includes rxjs <https://github.com/ReactiveX/rxjs>
- *       Available under Apache License Version 2.0
- *       <https://github.com/ReactiveX/rxjs/blob/master/LICENSE.txt>
  */
 import { Subject } from "rxjs";
 import { OmakasePlayerStyle } from "../omakase-player";

package/dist/constants.d.ts

@@ -1,3 +1,18 @@
+/**
+ *       Copyright 2023 ByOmakase, LLC (https://byomakase.org)
+ *
+ *       Licensed under the Apache License, Version 2.0 (the "License");
+ *       you may not use this file except in compliance with the License.
+ *       You may obtain a copy of the License at
+ *
+ *           http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *       Unless required by applicable law or agreed to in writing, software
+ *       distributed under the License is distributed on an "AS IS" BASIS,
+ *       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *       See the License for the specific language governing permissions and
+ *       limitations under the License.
+ */
 import { Dimension, Position } from "./common/measurement";
 export declare class Constants {
     static POSITION_TOP_LEFT: Position;

package/dist/dom/dom-controller.d.ts

@@ -13,9 +13,6 @@
  *       See the License for the specific language governing permissions and
  *       limitations under the License.
  *
- *       Includes rxjs <https://github.com/ReactiveX/rxjs>
- *       Available under Apache License Version 2.0
- *       <https://github.com/ReactiveX/rxjs/blob/master/LICENSE.txt>
  */
 import { VideoController } from "../video/video-controller";
 import { Timeline } from "../timeline/timeline";

package/dist/events.d.ts

@@ -1,3 +1,18 @@
+/**
+ *       Copyright 2023 ByOmakase, LLC (https://byomakase.org)
+ *
+ *       Licensed under the Apache License, Version 2.0 (the "License");
+ *       you may not use this file except in compliance with the License.
+ *       You may obtain a copy of the License at
+ *
+ *           http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *       Unless required by applicable law or agreed to in writing, software
+ *       distributed under the License is distributed on an "AS IS" BASIS,
+ *       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *       See the License for the specific language governing permissions and
+ *       limitations under the License.
+ */
 export type OmakaseEventMap<T> = {
     [K in keyof T]: T[K];
 };

package/dist/http.d.ts

@@ -1,2 +1,17 @@
+/**
+ *       Copyright 2023 ByOmakase, LLC (https://byomakase.org)
+ *
+ *       Licensed under the Apache License, Version 2.0 (the "License");
+ *       you may not use this file except in compliance with the License.
+ *       You may obtain a copy of the License at
+ *
+ *           http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *       Unless required by applicable law or agreed to in writing, software
+ *       distributed under the License is distributed on an "AS IS" BASIS,
+ *       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *       See the License for the specific language governing permissions and
+ *       limitations under the License.
+ */
 import { AxiosRequestConfig, AxiosResponse } from "axios";
 export declare function httpGet<T, D>(url: string, config?: AxiosRequestConfig<D>): Promise<AxiosResponse<T, any>>;

package/dist/index.d.ts

@@ -1,3 +1,18 @@
+/**
+ *       Copyright 2023 ByOmakase, LLC (https://byomakase.org)
+ *
+ *       Licensed under the Apache License, Version 2.0 (the "License");
+ *       you may not use this file except in compliance with the License.
+ *       You may obtain a copy of the License at
+ *
+ *           http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *       Unless required by applicable law or agreed to in writing, software
+ *       distributed under the License is distributed on an "AS IS" BASIS,
+ *       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *       See the License for the specific language governing permissions and
+ *       limitations under the License.
+ */
 export * from "./timeline/marker";
 export * from "./timeline";
 export * from "./omakase-player";