@vidispine/vdt-videojs-react 23.2.0 → 23.3.0-pre.2

package/dist/index.js

@@ -2,7 +2,7 @@ import { jsx as r } from "react/jsx-runtime";
 import { Component as i } from "react";
 import { Player as p, ExternalControls as l, SeekBar as a, TimeCodeDisplay as h } from "@vidispine/vdt-videojs";
 import "@vidispine/vdt-videojs/dist/index.css";
-class v extends i {
+class C extends i {
   componentDidMount() {
     const { setPlayer: e, ...t } = this.props;
     this.player = new p({
@@ -28,11 +28,13 @@ class v extends i {
     const { onUnmount: e } = this.props;
     this.player && (e && e(this.player), this.player.destroy());
   }
-  // wrap the player in a div with a `data-vjs-player` attribute
-  // so videojs won't create additional wrapper in the DOM
-  // see https://github.com/videojs/video.js/pull/3856
+  /* wrap the player in a div with a
+   * - `data-vjs-player` attribute so videojs won't create additional wrapper in the DOM
+   *   - see https://github.com/videojs/video.js/pull/3856
+   * - `vdt-videojs-root` attribute so videojs styles don't conflict with other videojs usage
+   */
   render() {
-    return /* @__PURE__ */ r("div", { className: "data-vjs-player", children: /* @__PURE__ */ r(
+    return /* @__PURE__ */ r("div", { className: "data-vjs-player vdt-videojs-root", children: /* @__PURE__ */ r(
       "div",
       {
         ref: (e) => {
@@ -123,7 +125,7 @@ class P extends i {
 }
 export {
   m as VideoControls,
-  v as VideoPlayer,
+  C as VideoPlayer,
   y as VideoSeekBar,
   P as VideoTimeCode
 };

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(t,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("react"),require("@vidispine/vdt-videojs"),require("@vidispine/vdt-videojs/dist/index.css")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@vidispine/vdt-videojs","@vidispine/vdt-videojs/dist/index.css"],s):(t=typeof globalThis<"u"?globalThis:t||self,s(t["@vidispine/vdt-videojs-react"]={},t.jsxRuntime,t.react,t.vdtVideojs))})(this,function(t,s,d,i){"use strict";class c extends d.Component{componentDidMount(){const{setPlayer:e,...o}=this.props;this.player=new i.Player({target:this.videoNode,...o}),e&&e(this.player)}UNSAFE_componentWillUpdate(e){const o=()=>{const{setPlayer:r,...n}=e;this.player=new i.Player({target:this.videoNode,...n}),r&&r(this.player)};e.sources&&e.sources[0]&&e.sources[0].src&&(this.props.sources[0].src!==e.sources[0].src?this.player?(this.player.videojs.pause(),setTimeout(()=>{this.player.videojs.dispose(),o()},0)):o():this.player.handleNewProps(e))}componentWillUnmount(){const{onUnmount:e}=this.props;this.player&&(e&&e(this.player),this.player.destroy())}render(){return s.jsx("div",{className:"data-vjs-player",children:s.jsx("div",{ref:e=>{this.videoNode=e}})})}}class a extends d.Component{componentDidMount(){const{player:e}=this.props;this.controls=new i.ExternalControls({target:this.controlsNode,...this.props,player:e.current.player}),this.controls.handleNewProps(this.props)}UNSAFE_componentWillUpdate(e){this.controls.handleNewProps(e)}render(){return s.jsx("div",{ref:e=>{this.controlsNode=e}})}}a.buttonNames=i.ExternalControls.buttonNames;class l extends d.Component{componentDidMount(){const{player:e,bgColor:o,fillColor:r,markersEnabled:n,regions:u,onRegionClick:y}=this.props;this.seekBar=new i.SeekBar({target:this.seekBarNode,player:e.current.player,bgColor:o,fillColor:r,markersEnabled:n,in:this.props.in,out:this.props.out,regions:u,onRegionClick:y})}UNSAFE_componentWillUpdate(e){this.seekBar.handleNewProps(e)}render(){return s.jsx("div",{ref:e=>{this.seekBarNode=e}})}}l.Region=i.SeekBar.Region;class h extends d.Component{componentDidMount(){const{player:e}=this.props;this.timeCode=new i.TimeCodeDisplay({target:this.timecodeNode,player:e.current.player,onInput:e.current.player}),this.timeCode.update(this.props),e.current.player.setupTimeCode(this.timeCode)}UNSAFE_componentWillUpdate(e){this.timeCode.update(e)}render(){const{className:e,styles:o}=this.props,r=n=>{this.timecodeNode=n};return s.jsx("div",{style:o,className:e,ref:r})}}t.VideoControls=a,t.VideoPlayer=c,t.VideoSeekBar=l,t.VideoTimeCode=h,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
+(function(t,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("react"),require("@vidispine/vdt-videojs"),require("@vidispine/vdt-videojs/dist/index.css")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@vidispine/vdt-videojs","@vidispine/vdt-videojs/dist/index.css"],s):(t=typeof globalThis<"u"?globalThis:t||self,s(t["@vidispine/vdt-videojs-react"]={},t.jsxRuntime,t.react,t.vdtVideojs))})(this,function(t,s,d,i){"use strict";class c extends d.Component{componentDidMount(){const{setPlayer:e,...o}=this.props;this.player=new i.Player({target:this.videoNode,...o}),e&&e(this.player)}UNSAFE_componentWillUpdate(e){const o=()=>{const{setPlayer:r,...n}=e;this.player=new i.Player({target:this.videoNode,...n}),r&&r(this.player)};e.sources&&e.sources[0]&&e.sources[0].src&&(this.props.sources[0].src!==e.sources[0].src?this.player?(this.player.videojs.pause(),setTimeout(()=>{this.player.videojs.dispose(),o()},0)):o():this.player.handleNewProps(e))}componentWillUnmount(){const{onUnmount:e}=this.props;this.player&&(e&&e(this.player),this.player.destroy())}render(){return s.jsx("div",{className:"data-vjs-player vdt-videojs-root",children:s.jsx("div",{ref:e=>{this.videoNode=e}})})}}class a extends d.Component{componentDidMount(){const{player:e}=this.props;this.controls=new i.ExternalControls({target:this.controlsNode,...this.props,player:e.current.player}),this.controls.handleNewProps(this.props)}UNSAFE_componentWillUpdate(e){this.controls.handleNewProps(e)}render(){return s.jsx("div",{ref:e=>{this.controlsNode=e}})}}a.buttonNames=i.ExternalControls.buttonNames;class l extends d.Component{componentDidMount(){const{player:e,bgColor:o,fillColor:r,markersEnabled:n,regions:u,onRegionClick:y}=this.props;this.seekBar=new i.SeekBar({target:this.seekBarNode,player:e.current.player,bgColor:o,fillColor:r,markersEnabled:n,in:this.props.in,out:this.props.out,regions:u,onRegionClick:y})}UNSAFE_componentWillUpdate(e){this.seekBar.handleNewProps(e)}render(){return s.jsx("div",{ref:e=>{this.seekBarNode=e}})}}l.Region=i.SeekBar.Region;class h extends d.Component{componentDidMount(){const{player:e}=this.props;this.timeCode=new i.TimeCodeDisplay({target:this.timecodeNode,player:e.current.player,onInput:e.current.player}),this.timeCode.update(this.props),e.current.player.setupTimeCode(this.timeCode)}UNSAFE_componentWillUpdate(e){this.timeCode.update(e)}render(){const{className:e,styles:o}=this.props,r=n=>{this.timecodeNode=n};return s.jsx("div",{style:o,className:e,ref:r})}}t.VideoControls=a,t.VideoPlayer=c,t.VideoSeekBar=l,t.VideoTimeCode=h,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vidispine/vdt-videojs-react",
-  "version": "23.2.0",
+  "version": "23.3.0-pre.2",
   "license": "SEE LICENSE IN LICENSE.md",
   "publishConfig": {
     "access": "public"
@@ -31,21 +31,21 @@
     "format": "prettier . --check"
   },
   "dependencies": {
-    "@vidispine/vdt-videojs": "23.2.0"
+    "@vidispine/vdt-videojs": "23.3.0-pre.2"
   },
   "peerDependencies": {
     "react": "^17.0.0"
   },
   "devDependencies": {
-    "@vidispine/eslint-config-mdx": "23.2.0",
-    "@vidispine/eslint-config-react": "23.2.0",
-    "@vidispine/eslint-config-storybook": "23.2.0",
-    "@vidispine/prettier-config": "23.2.0",
+    "@vidispine/eslint-config-mdx": "23.3.0-pre.2",
+    "@vidispine/eslint-config-react": "23.3.0-pre.2",
+    "@vidispine/eslint-config-storybook": "23.3.0-pre.2",
+    "@vidispine/prettier-config": "23.3.0-pre.2",
     "@vitejs/plugin-react": "3.1.0",
     "eslint": "8.34.0",
     "prettier": "2.8.4",
     "sass": "1.60.0",
-    "vite": "4.3.1"
+    "vite": "4.3.9"
   },
   "eslintConfig": {
     "extends": [