byteark-player-react - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

dist/byteark-player-react.js

 var Cr = Object.defineProperty;
 var Lr = (n, a, s) => a in n ? Cr(n, a, { enumerable: !0, configurable: !0, writable: !0, value: s }) : n[a] = s;
 var he = (n, a, s) => (Lr(n, typeof a != "symbol" ? a + "" : a, s), s);
-import { jsx as T, jsxs as nt } from "react/jsx-runtime";
+import { jsx as A, jsxs as nt } from "react/jsx-runtime";
 import { useRef as me, useEffect as Ie, useState as Or } from "react";
@@ -46,6 +46,6 @@ var _e = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
   };
-  return /* @__PURE__ */ T("div", { style: Nr, children: /* @__PURE__ */ nt("div", { children: [
-    /* @__PURE__ */ T("p", { style: Fr, children: a.message }),
-    /* @__PURE__ */ T("p", { style: jr, children: a.messageSecondary }),
-    /* @__PURE__ */ T("p", { style: Br, children: a.code })
+  return /* @__PURE__ */ A("div", { style: Nr, children: /* @__PURE__ */ nt("div", { children: [
+    /* @__PURE__ */ A("p", { style: Fr, children: a.message }),
+    /* @__PURE__ */ A("p", { style: jr, children: a.messageSecondary }),
+    /* @__PURE__ */ A("p", { style: Br, children: a.code })
   ] }) });
@@ -74,3 +74,3 @@ }
   )}%`), !a.fluid && a.fill && (s.height = "100%", s.minHeight = "100%"), a.lazyload && !n.loaded && (s.position = "relative"), a.lazyload && n.loaded && (s.position = "absolute"), n.error)
-    return /* @__PURE__ */ T("div", { className: n.className, style: s, children: /* @__PURE__ */ T($r, { error: n.error }) });
+    return /* @__PURE__ */ A("div", { className: n.className, style: s, children: /* @__PURE__ */ A($r, { error: n.error }) });
   a.poster && (s.backgroundImage = `url(${a.poster})`), s.cursor = "pointer";
@@ -90,3 +90,3 @@ const o = {
   }, c = a.controls === void 0 || a.controls === null || a.controls === !0;
-  return /* @__PURE__ */ T(
+  return /* @__PURE__ */ A(
     "div",
@@ -97,3 +97,3 @@ {
       style: s,
-      children: c ? /* @__PURE__ */ T(
+      children: c ? /* @__PURE__ */ A(
         "svg",
@@ -105,3 +105,3 @@ {
           style: o,
-          children: /* @__PURE__ */ T(
+          children: /* @__PURE__ */ A(
             "path",
@@ -193,4 +193,4 @@ {
 (function(n, a) {
-  var s = 200, o = "__lodash_hash_undefined__", f = 1, c = 2, h = 9007199254740991, P = "[object Arguments]", E = "[object Array]", H = "[object AsyncFunction]", y = "[object Boolean]", q = "[object Date]", S = "[object Error]", W = "[object Function]", Q = "[object GeneratorFunction]", x = "[object Map]", L = "[object Number]", be = "[object Null]", B = "[object Object]", ie = "[object Promise]", ve = "[object Proxy]", se = "[object RegExp]", J = "[object Set]", oe = "[object String]", Pe = "[object Symbol]", Ee = "[object Undefined]", X = "[object WeakMap]", u = "[object ArrayBuffer]", m = "[object DataView]", V = "[object Float32Array]", st = "[object Float64Array]", ot = "[object Int8Array]", lt = "[object Int16Array]", ct = "[object Int32Array]", ut = "[object Uint8Array]", ft = "[object Uint8ClampedArray]", dt = "[object Uint16Array]", pt = "[object Uint32Array]", yt = /[\\^$.*+?()[\]{}|]/g, gt = /^\[object .+?Constructor\]$/, ht = /^(?:0|[1-9]\d*)$/, d = {};
-  d[V] = d[st] = d[ot] = d[lt] = d[ct] = d[ut] = d[ft] = d[dt] = d[pt] = !0, d[P] = d[E] = d[u] = d[y] = d[m] = d[q] = d[S] = d[W] = d[x] = d[L] = d[B] = d[se] = d[J] = d[oe] = d[X] = !1;
+  var s = 200, o = "__lodash_hash_undefined__", f = 1, c = 2, h = 9007199254740991, P = "[object Arguments]", E = "[object Array]", H = "[object AsyncFunction]", y = "[object Boolean]", q = "[object Date]", S = "[object Error]", W = "[object Function]", Q = "[object GeneratorFunction]", x = "[object Map]", L = "[object Number]", be = "[object Null]", B = "[object Object]", ie = "[object Promise]", ve = "[object Proxy]", se = "[object RegExp]", J = "[object Set]", oe = "[object String]", Pe = "[object Symbol]", Ee = "[object Undefined]", X = "[object WeakMap]", u = "[object ArrayBuffer]", w = "[object DataView]", V = "[object Float32Array]", st = "[object Float64Array]", ot = "[object Int8Array]", lt = "[object Int16Array]", ct = "[object Int32Array]", ut = "[object Uint8Array]", ft = "[object Uint8ClampedArray]", dt = "[object Uint16Array]", pt = "[object Uint32Array]", yt = /[\\^$.*+?()[\]{}|]/g, gt = /^\[object .+?Constructor\]$/, ht = /^(?:0|[1-9]\d*)$/, d = {};
+  d[V] = d[st] = d[ot] = d[lt] = d[ct] = d[ut] = d[ft] = d[dt] = d[pt] = !0, d[P] = d[E] = d[u] = d[y] = d[w] = d[q] = d[S] = d[W] = d[x] = d[L] = d[B] = d[se] = d[J] = d[oe] = d[X] = !1;
   var Ne = typeof _e == "object" && _e && _e.Object === Object && _e, _t = typeof self == "object" && self && self.Object === Object && self, N = Ne || _t || Function("return this")(), Fe = a && !a.nodeType && a, je = Fe && !0 && n && !n.nodeType && n, Be = je && je.exports === Fe, Se = Be && Ne.process, $e = function() {
@@ -236,3 +236,3 @@ try {
   }
-  function At(e) {
+  function Tt(e) {
     var t = -1, r = Array(e.size);
@@ -243,3 +243,3 @@ return e.forEach(function(i, p) {
   }
-  function Tt(e, t) {
+  function At(e, t) {
     return function(r) {
@@ -255,8 +255,8 @@ return e(t(r));
   }
-  var Ct = Array.prototype, Lt = Function.prototype, le = Object.prototype, Ae = N["__core-js_shared__"], ze = Lt.toString, I = le.hasOwnProperty, Me = function() {
-    var e = /[^.]+$/.exec(Ae && Ae.keys && Ae.keys.IE_PROTO || "");
+  var Ct = Array.prototype, Lt = Function.prototype, le = Object.prototype, Te = N["__core-js_shared__"], ze = Lt.toString, I = le.hasOwnProperty, Me = function() {
+    var e = /[^.]+$/.exec(Te && Te.keys && Te.keys.IE_PROTO || "");
     return e ? "Symbol(src)_1." + e : "";
   }(), Ye = le.toString, Ot = RegExp(
     "^" + ze.call(I).replace(yt, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
-  ), Ue = Be ? N.Buffer : void 0, ce = N.Symbol, Ge = N.Uint8Array, Ke = le.propertyIsEnumerable, xt = Ct.splice, M = ce ? ce.toStringTag : void 0, He = Object.getOwnPropertySymbols, It = Ue ? Ue.isBuffer : void 0, Nt = Tt(Object.keys, Object), Te = Z(N, "DataView"), k = Z(N, "Map"), Re = Z(N, "Promise"), Ce = Z(N, "Set"), Le = Z(N, "WeakMap"), ee = Z(Object, "create"), Ft = G(Te), jt = G(k), Bt = G(Re), $t = G(Ce), Dt = G(Le), qe = ce ? ce.prototype : void 0, Oe = qe ? qe.valueOf : void 0;
+  ), Ue = Be ? N.Buffer : void 0, ce = N.Symbol, Ge = N.Uint8Array, Ke = le.propertyIsEnumerable, xt = Ct.splice, M = ce ? ce.toStringTag : void 0, He = Object.getOwnPropertySymbols, It = Ue ? Ue.isBuffer : void 0, Nt = At(Object.keys, Object), Ae = Z(N, "DataView"), k = Z(N, "Map"), Re = Z(N, "Promise"), Ce = Z(N, "Set"), Le = Z(N, "WeakMap"), ee = Z(Object, "create"), Ft = G(Ae), jt = G(k), Bt = G(Re), $t = G(Ce), Dt = G(Le), qe = ce ? ce.prototype : void 0, Oe = qe ? qe.valueOf : void 0;
   function Y(e) {
@@ -392,3 +392,3 @@ var t = -1, r = e == null ? 0 : e.length;
   function or(e, t) {
-    var r = pe(e), i = !r && Pr(e), p = !r && !i && xe(e), l = !r && !i && !p && tt(e), _ = r || i || p || l, w = _ ? vt(e.length, String) : [], b = w.length;
+    var r = pe(e), i = !r && Pr(e), p = !r && !i && xe(e), l = !r && !i && !p && tt(e), _ = r || i || p || l, m = _ ? vt(e.length, String) : [], b = m.length;
     for (var g in e)
@@ -399,4 +399,4 @@ (t || I.call(e, g)) && !(_ && // Safari 9 has enumerable `arguments.length` in strict mode.
       l && (g == "buffer" || g == "byteLength" || g == "byteOffset") || // Skip index properties.
-      _r(g, b))) && w.push(g);
-    return w;
+      _r(g, b))) && m.push(g);
+    return m;
   }
@@ -423,14 +423,14 @@ function fe(e, t) {
   function cr(e, t, r, i, p, l) {
-    var _ = pe(e), w = pe(t), b = _ ? E : D(e), g = w ? E : D(t);
+    var _ = pe(e), m = pe(t), b = _ ? E : D(e), g = m ? E : D(t);
     b = b == P ? B : b, g = g == P ? B : g;
-    var A = b == B, O = g == B, v = b == g;
+    var T = b == B, O = g == B, v = b == g;
     if (v && xe(e)) {
       if (!xe(t))
         return !1;
-      _ = !0, A = !1;
+      _ = !0, T = !1;
     }
-    if (v && !A)
+    if (v && !T)
       return l || (l = new $()), _ || tt(e) ? Xe(e, t, r, i, p, l) : pr(e, t, b, r, i, p, l);
     if (!(r & f)) {
-      var R = A && I.call(e, "__wrapped__"), C = O && I.call(t, "__wrapped__");
+      var R = T && I.call(e, "__wrapped__"), C = O && I.call(t, "__wrapped__");
       if (R || C) {
@@ -461,4 +461,4 @@ var z = R ? e.value() : e, j = C ? t.value() : t;
   function Xe(e, t, r, i, p, l) {
-    var _ = r & f, w = e.length, b = t.length;
-    if (w != b && !(_ && b > w))
+    var _ = r & f, m = e.length, b = t.length;
+    if (m != b && !(_ && b > m))
       return !1;
@@ -468,7 +468,7 @@ var g = l.get(e);
       return g == t;
-    var A = -1, O = !0, v = r & c ? new ue() : void 0;
-    for (l.set(e, t), l.set(t, e); ++A < w; ) {
-      var R = e[A], C = t[A];
+    var T = -1, O = !0, v = r & c ? new ue() : void 0;
+    for (l.set(e, t), l.set(t, e); ++T < m; ) {
+      var R = e[T], C = t[T];
       if (i)
-        var z = _ ? i(C, R, A, t, e, l) : i(R, C, A, e, t, l);
+        var z = _ ? i(C, R, T, t, e, l) : i(R, C, T, e, t, l);
       if (z !== void 0) {
@@ -497,3 +497,3 @@ if (z)
     switch (r) {
-      case m:
+      case w:
         if (e.byteLength != t.byteLength || e.byteOffset != t.byteOffset)
@@ -514,6 +514,6 @@ return !1;
       case x:
-        var w = At;
+        var m = Tt;
       case J:
         var b = i & f;
-        if (w || (w = Rt), e.size != t.size && !b)
+        if (m || (m = Rt), e.size != t.size && !b)
           return !1;
@@ -524,4 +524,4 @@ var g = _.get(e);
         i |= c, _.set(e, t);
-        var A = Xe(w(e), w(t), i, p, l, _);
-        return _.delete(e), A;
+        var T = Xe(m(e), m(t), i, p, l, _);
+        return _.delete(e), T;
       case Pe:
@@ -534,7 +534,7 @@ if (Oe)
   function yr(e, t, r, i, p, l) {
-    var _ = r & f, w = Ze(e), b = w.length, g = Ze(t), A = g.length;
-    if (b != A && !_)
+    var _ = r & f, m = Ze(e), b = m.length, g = Ze(t), T = g.length;
+    if (b != T && !_)
       return !1;
     for (var O = b; O--; ) {
-      var v = w[O];
+      var v = m[O];
       if (!(_ ? v in t : I.call(t, v)))
@@ -549,3 +549,3 @@ return !1;
     for (var z = _; ++O < b; ) {
-      v = w[O];
+      v = m[O];
       var j = e[v], K = t[v];
@@ -567,3 +567,3 @@ if (i)
   function Ze(e) {
-    return lr(e, Ar, hr);
+    return lr(e, Tr, hr);
   }
@@ -592,4 +592,4 @@ function de(e, t) {
     }));
-  } : Tr, D = te;
-  (Te && D(new Te(new ArrayBuffer(1))) != m || k && D(new k()) != x || Re && D(Re.resolve()) != ie || Ce && D(new Ce()) != J || Le && D(new Le()) != X) && (D = function(e) {
+  } : Ar, D = te;
+  (Ae && D(new Ae(new ArrayBuffer(1))) != w || k && D(new k()) != x || Re && D(Re.resolve()) != ie || Ce && D(new Ce()) != J || Le && D(new Le()) != X) && (D = function(e) {
     var t = te(e), r = t == B ? e.constructor : void 0, i = r ? G(r) : "";
@@ -599,3 +599,3 @@ if (i)
         case Ft:
-          return m;
+          return w;
         case jt:
@@ -674,6 +674,6 @@ return x;
   var tt = De ? Pt(De) : fr;
-  function Ar(e) {
+  function Tr(e) {
     return Er(e) ? or(e) : dr(e);
   }
-  function Tr() {
+  function Ar() {
     return [];
@@ -868,3 +868,3 @@ }
 window.bytearkPlayer = window.bytearkPlayer || {};
-const un = (n, a, s) => /* @__PURE__ */ T(
+const un = (n, a, s) => /* @__PURE__ */ A(
   zr,
@@ -899,8 +899,8 @@ {
     y.onPlayerLoaded && y.onPlayerLoaded();
-  }, B = (u, m) => {
-    L((V) => ({ ...V, error: u })), y.onPlayerLoadError && y.onPlayerLoadError(u, m);
+  }, B = (u, w) => {
+    L((V) => ({ ...V, error: u })), y.onPlayerLoadError && y.onPlayerLoadError(u, w);
   }, ie = () => {
     L((u) => ({ ...u, loaded: !0 })), y.onPlayerSetup && y.onPlayerSetup();
-  }, ve = (u, m) => {
-    L((V) => ({ ...V, error: u })), y.onPlayerSetupError && y.onPlayerSetupError(u, m);
+  }, ve = (u, w) => {
+    L((V) => ({ ...V, error: u })), y.onPlayerSetupError && y.onPlayerSetupError(u, w);
   }, se = () => {
@@ -914,5 +914,7 @@ L((u) => ({
   }, oe = async () => {
-    var u;
-    o && (await X(), await ((u = S.current) == null ? void 0 : u.play())), L((m) => ({
-      ...m,
+    o && (await X(), setTimeout(async () => {
+      var u;
+      await ((u = S.current) == null ? void 0 : u.play());
+    }, 100)), L((u) => ({
+      ...u,
       showPlaceholder: !1
@@ -928,4 +930,4 @@ }));
   ), Ee = () => {
-    const u = {}, m = [];
-    return y.className && m.push(y.className), y.fluid && (y.aspectRatio === "4:3" ? m.push("vjs-4-3") : y.aspectRatio === "16:9" && m.push("vjs-16-9")), y.audioOnlyMode ? /* @__PURE__ */ T(
+    const u = {}, w = [];
+    return y.className && w.push(y.className), y.fluid && (y.aspectRatio === "4:3" ? w.push("vjs-4-3") : y.aspectRatio === "16:9" && w.push("vjs-16-9")), y.audioOnlyMode ? /* @__PURE__ */ A(
       "audio",
@@ -937,3 +939,3 @@ {
       }
-    ) : /* @__PURE__ */ T(
+    ) : /* @__PURE__ */ A(
       "video",
@@ -943,3 +945,3 @@ {
         ref: Q,
-        className: `video-js ${m.join(" ")}`,
+        className: `video-js ${w.join(" ")}`,
         style: u
@@ -968,4 +970,4 @@ }
       } catch (u) {
-        u instanceof at ? ve(u, u.originalError) : u instanceof it ? B(u, u.originalError) : u instanceof ae && L((m) => ({
-          ...m,
+        u instanceof at ? ve(u, u.originalError) : u instanceof it ? B(u, u.originalError) : u instanceof ae && L((w) => ({
+          ...w,
           error: u
@@ -981,3 +983,3 @@ })), console.error(u);
   })(), () => {
-    S.current && (S.current.dispose(), S.current = null, L((m) => ({ ...m, ready: !1 })));
+    S.current && (S.current.dispose(), S.current = null, L((w) => ({ ...w, ready: !1 })));
   }), []), Ie(() => {
@@ -987,3 +989,3 @@ S.current && n && q && kr(S.current, n, q);
     x.showPlaceholder && Pe(),
-    /* @__PURE__ */ T(
+    /* @__PURE__ */ A(
       "div",
@@ -990,0 +992,0 @@ {

package.json

 {
   "name": "byteark-player-react",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "ByteArk Player Container for React",
   "author": "byteark",
   "license": "MIT",
+  "homepage": "https://byteark.github.io/byteark-player-react",
   "repository": {
@@ -32,2 +33,7 @@ "type": "git",
   ],
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
   "peerDependencies": {
@@ -39,2 +45,4 @@ "@types/video.js": "^7.3.57",
   "devDependencies": {
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
     "@types/lodash.isequal": "^4.5.8",
@@ -48,2 +56,3 @@ "@types/node": "^20.11.26",
     "@vitejs/plugin-react": "^4.2.1",
+    "conventional-changelog-cli": "^5.0.0",
     "eslint": "^8.57.0",
@@ -55,2 +64,3 @@ "eslint-config-prettier": "^9.1.0",
     "gh-pages": "^6.1.1",
+    "husky": "^9.1.6",
     "npm-run-all": "^4.1.5",
@@ -77,5 +87,8 @@ "prettier": "^3.2.5",
     "prepublish": "run-s build",
-    "predeploy": "tsc --p ./tsconfig.build.example.json && vite build --config ./vite.config.example.ts --outDir dist/example",
-    "deploy": "gh-pages -d dist/example"
+    "predeploy": "tsc --p ./tsconfig.build.example.json && vite build --config ./vite.config.example.ts",
+    "deploy": "gh-pages -d dist/example",
+    "commitlint": "commitlint --edit",
+    "update-changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "version": "npm run update-changelog && git add CHANGELOG.md"
   }
 }

README.md

@@ -18,2 +18,3 @@ # ByteArk Player Container for React
     - [Request Media/Encryption with credentials](#request-mediaencryption-with-credentials)
+    - [Use with Next.js](#use-with-nextjs)
   - [License](#license)
@@ -61,10 +62,10 @@
     aspectRatio: '16:9',
-    poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
+    poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/H/7H6hEZrLH.png',
     sources: [
       {
-        src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/ToIkm61TMn4Q/playlist.m3u8',
+        src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
         type: 'application/x-mpegURL',
         title: 'Big Buck Bunny',
-        videoId: 'ToIkm61TMn4Q',
-        poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png'
+        videoId: 'TZyZheqEJUwC',
+        poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/H/7H6hEZrLH.png'
       }
@@ -92,10 +93,10 @@ ]
     fill: true,
-    poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
+    poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/H/7H6hEZrLH.png',
     sources: [
       {
-        src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/ToIkm61TMn4Q/playlist.m3u8',
+        src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
         type: 'application/x-mpegURL',
         title: 'Big Buck Bunny',
-        videoId: 'ToIkm61TMn4Q',
-        poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png'
+        videoId: 'TZyZheqEJUwC',
+        poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/H/7H6hEZrLH.png'
       }
@@ -215,6 +216,6 @@ ]
       {
-        src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/ToIkm61TMn4Q/playlist.m3u8',
+        src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
         type: 'application/x-mpegURL',
         title: 'Big Buck Bunny',
-        videoId: 'ToIkm61TMn4Q'
+        videoId: 'TZyZheqEJUwC'
       }
@@ -253,6 +254,6 @@ ]
       {
-        src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/ToIkm61TMn4Q/playlist.m3u8',
+        src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
         type: 'application/x-mpegURL',
         title: 'Big Buck Bunny',
-        videoId: 'ToIkm61TMn4Q'
+        videoId: 'TZyZheqEJUwC'
       }
@@ -264,2 +265,3 @@ ]
     // The player is ready! Initialize plugins here.
+    newPlayerInstance.somePlugin()
   }
@@ -287,6 +289,6 @@
       {
-        src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/ToIkm61TMn4Q/playlist.m3u8',
+        src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
         type: 'application/x-mpegURL',
         title: 'Big Buck Bunny',
-        videoId: 'ToIkm61TMn4Q'
+        videoId: 'TZyZheqEJUwC'
       }
@@ -311,5 +313,108 @@ ],
 
+### Use with Next.js
 
+ByteArkPlayer required HTML DOM element and browser-specific APIs to use with Next.js additional steps
+
+1. Create `byteark-player.tsx` file and make it to be client component by adding `"use client"` directive at the top of a file.
+
+```jsx
+"use client";
+
+import { ByteArkPlayerContainer } from "byteark-player-react";
+
+export default ByteArkPlayerContainer;
+```
+
+2. In component that you want to use ByteArkPlayer, dynamic load `ByteArkPlayerContainer` component
+
+```jsx
+"use client"
+
+import dynamic from "next/dynamic"
+
+// Use nextjs dynamic to make sure that HTML Dom element is rendered before load player
+const ByteArkPlayerContainer = dynamic(
+  () => import("./byteark-player"),
+  {
+    // disable ssr (disable server-rendering)
+    ssr: false,
+    loading: () => (
+      <div className="flex aspect-video size-full items-center justify-center bg-black p-0 px-2">
+        <span className="text-center text-lg text-white"></span>
+      </div>
+    ),
+  }
+);
+```
+
+3. Using ByteArkPlayerContainer client component in your component
+
+```jsx
+export default function VideoPreviewPage() {
+  const playerOptions: ByteArkPlayerContainerProps = {
+    autoplay: 'any',
+    fluid: true,
+    sources: [
+      {
+        src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
+        type: 'application/x-mpegURL',
+        title: 'Big Buck Bunny',
+        videoId: 'TZyZheqEJUwC'
+      }
+    ],
+  }
+
+  return <ByteArkPlayerContainer {...playerOptions} />
+}
+```
+
+Full example with Next.js
+
+```jsx
+// byteark-player.tsx
+"use client";
+
+import { ByteArkPlayerContainer } from "byteark-player-react";
+
+export default ByteArkPlayerContainer;
+
+// video-preview-page.tsx
+"use client";
+import React from 'react'
+import { render } from 'react-dom'
+import type { ByteArkPlayerContainerProps } from 'byteark-player-react'
+import dynamic from "next/dynamic"
+
+const ByteArkPlayerContainer = dynamic(
+  () => import("./byteark-player"),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="flex aspect-video size-full items-center justify-center bg-black p-0 px-2">
+        <span className="text-center text-lg text-white"></span>
+      </div>
+    ),
+  }
+);
+
+export default function VideoPreviewPage() {
+  const playerOptions: ByteArkPlayerContainerProps = {
+    autoplay: 'any',
+    fluid: true,
+    sources: [
+      {
+        src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
+        type: 'application/x-mpegURL',
+        title: 'Big Buck Bunny',
+        videoId: 'TZyZheqEJUwC'
+      }
+    ],
+  }
+
+  return <ByteArkPlayerContainer {...playerOptions} />
+}
+```
+
 ## License
 
 MIT © [ByteArk Co. Ltd.](https://github.com/byteark)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76311

increased by4.5%

Lines of code

1344

increased by0.15%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

413

increased by34.09%

Number of medium supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Dev dependency count

27

increased by17.39%

No dependency changes