From dda383591898844afbe9c6a6db9fd274c3f38eca Mon Sep 17 00:00:00 2001 From: etesam Date: Wed, 9 Aug 2023 21:37:39 -0400 Subject: [PATCH] Deploy website - based on 756f0354c5874593a9a20086e9e43ec31e427115 --- 404.html | 4 ++-- assets/js/{6cf79a87.b7a6e072.js => 6cf79a87.ca772683.js} | 4 ++-- ...e072.js.LICENSE.txt => 6cf79a87.ca772683.js.LICENSE.txt} | 0 assets/js/bdd177e8.30ddad5b.js | 1 + assets/js/bdd177e8.72846ebd.js | 1 - .../{runtime~main.e6418b5c.js => runtime~main.9c3bd7f5.js} | 2 +- category/components/index.html | 4 ++-- components/Time/index.html | 4 ++-- components/Volume/index.html | 6 +++--- components/fullscreen-buttons/index.html | 4 ++-- components/play-buttons/index.html | 4 ++-- components/progress-bars/index.html | 4 ++-- components/settings-button/index.html | 4 ++-- contributing/index.html | 4 ++-- index.html | 4 ++-- license/index.html | 4 ++-- markdown-page/index.html | 4 ++-- other-properties/index.html | 4 ++-- overview/index.html | 4 ++-- preview-tooltip/index.html | 6 +++--- quick-start/index.html | 4 ++-- search/index.html | 4 ++-- setting-up-subtitles/index.html | 4 ++-- setting-up-video-qualities/index.html | 4 ++-- 24 files changed, 44 insertions(+), 44 deletions(-) rename assets/js/{6cf79a87.b7a6e072.js => 6cf79a87.ca772683.js} (96%) rename assets/js/{6cf79a87.b7a6e072.js.LICENSE.txt => 6cf79a87.ca772683.js.LICENSE.txt} (100%) create mode 100644 assets/js/bdd177e8.30ddad5b.js delete mode 100644 assets/js/bdd177e8.72846ebd.js rename assets/js/{runtime~main.e6418b5c.js => runtime~main.9c3bd7f5.js} (97%) diff --git a/404.html b/404.html index 433e388..f213252 100644 --- a/404.html +++ b/404.html @@ -4,13 +4,13 @@ Page Not Found | Custoplayer - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/js/6cf79a87.b7a6e072.js b/assets/js/6cf79a87.ca772683.js similarity index 96% rename from assets/js/6cf79a87.b7a6e072.js rename to assets/js/6cf79a87.ca772683.js index f853a26..3d376f1 100644 --- a/assets/js/6cf79a87.b7a6e072.js +++ b/assets/js/6cf79a87.ca772683.js @@ -1,4 +1,4 @@ -/*! For license information please see 6cf79a87.b7a6e072.js.LICENSE.txt */ +/*! For license information please see 6cf79a87.ca772683.js.LICENSE.txt */ "use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[477],{6474:(t,e,n)=>{n.d(e,{DT:()=>vd,FF:()=>md,L2:()=>fd,NT:()=>pd,O8:()=>hd,Pv:()=>gd});var o=n(2784),r=n(9453);let i=0;const s=Symbol(),a=t=>!!t[s],l=t=>!t[s].c,u=t=>{var e;const{b:n,c:o}=t[s];o&&(o(),null==(e=h.get(n))||e())},c=(t,e)=>{const n=t[s].o,o=e[s].o;return n===o||t===o||a(n)&&c(n,e)},d=(t,e)=>{const n={b:t,o:e,c:null},o=new Promise((t=>{n.c=()=>{n.c=null,t()},e.finally(n.c)}));return o[s]=n,o},h=new WeakMap,p=t=>"init"in t,m="r",f="w",g="c",v="s",y=t=>{const e=new WeakMap,n=new WeakMap,o=new Map;let r,i;if("production"!==({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}&&"production")&&(r=new Set,i=new Set),t)for(const[s,a]of t){const t={v:a,r:0,y:!0,d:new Map};"production"!==({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}&&"production")&&(Object.freeze(t),p(s)||console.warn("Found initial value for derived atom which can cause unexpected behavior",s)),e.set(s,t)}const h=new WeakMap,y=new WeakMap,b=t=>{let e=y.get(t);return e||(e=new Map,y.set(t,e)),e},x=(t,n)=>{if(t){const e=b(t);let o=e.get(n);return o||(o=x(t.p,n),o&&"p"in o&&l(o.p)&&(o=void 0),o&&e.set(n,o)),o}return e.get(n)},w=(t,n,r)=>{if("production"!==({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}&&"production")&&Object.freeze(r),t)b(t).set(n,r);else{const t=e.get(n);e.set(n,r),o.has(n)||o.set(n,t)}},C=function(t,e,n){if(void 0===e&&(e=new Map),!n)return e;const o=new Map;let r=!1;return n.forEach((n=>{var i;const s=(null==(i=x(t,n))?void 0:i.r)||0;o.set(n,s),e.get(n)!==s&&(r=!0)})),e.size!==o.size||r?o:e},k=(t,e,n,o,r)=>{const i=x(t,e);if(i){if(r&&(!("p"in i)||!c(i.p,r)))return i;"p"in i&&u(i.p)}const s={v:n,r:(null==i?void 0:i.r)||0,y:!0,d:C(t,null==i?void 0:i.d,o)};let a=!(null!=i&&i.y);return i&&"v"in i&&Object.is(i.v,n)?s.d!==i.d&&(s.d.size!==i.d.size||!Array.from(s.d.keys()).every((t=>i.d.has(t))))&&(a=!0,Promise.resolve().then((()=>{I(t)}))):(a=!0,++s.r,s.d.has(e)&&(s.d=new Map(s.d).set(e,s.r))),i&&!a?i:(w(t,e,s),s)},E=(t,e,n,o,r)=>{const i=x(t,e);if(i){if(r&&(!("p"in i)||!c(i.p,r)))return i;"p"in i&&u(i.p)}const s={e:n,r:((null==i?void 0:i.r)||0)+1,y:!0,d:C(t,null==i?void 0:i.d,o)};return w(t,e,s),s},M=(t,e,n,o)=>{const r=x(t,e);if(r&&"p"in r){if(c(r.p,n)&&!l(r.p))return r.y?r:{...r,y:!0};u(r.p)}((t,e,n)=>{let o=h.get(e);o||(o=new Map,h.set(e,o)),n.then((()=>{o.get(t)===n&&(o.delete(t),o.size||h.delete(e))})),o.set(t,n)})(t,e,n);const i={p:n,r:((null==r?void 0:r.r)||0)+1,y:!0,d:C(t,null==r?void 0:r.d,o)};return w(t,e,i),i},P=(t,e,n,o)=>{if(n instanceof Promise){const r=d(n,n.then((n=>{k(t,e,n,o,r)})).catch((n=>{if(n instanceof Promise)return a(n)?n.then((()=>{T(t,e,!0)})):n;E(t,e,n,o,r)})));return M(t,e,r,o)}return k(t,e,n,o)},T=(t,e,o)=>{if(!o){const o=x(t,e);if(o){if(o.y&&"p"in o&&!l(o.p))return o;if(o.d.forEach(((o,r)=>{if(r!==e)if(n.has(r)){const e=x(t,r);e&&!e.y&&T(t,r)}else T(t,r)})),Array.from(o.d).every((e=>{let[n,o]=e;const r=x(t,n);return r&&!("p"in r)&&r.r===o})))return o.y?o:{...o,y:!0}}}const r=new Set;try{const n=e.read((n=>{r.add(n);const o=n===e?x(t,n):T(t,n);if(o){if("e"in o)throw o.e;if("p"in o)throw o.p;return o.v}if(p(n))return n.init;throw new Error("no atom init")}));return P(t,e,n,r)}catch(i){if(i instanceof Promise){const n=a(i)&&l(i)?(t=>d(t[s].b,t[s].o))(i):d(i,i);return M(t,e,n,r)}return E(t,e,i,r)}},S=(t,e)=>T(e,t),B=(t,e)=>!e.l.size&&(!e.t.size||1===e.t.size&&e.t.has(t)),A=(t,e)=>{const o=n.get(e);null==o||o.t.forEach((n=>{n!==e&&(((t,e)=>{const n=x(t,e);if(n){const o={...n,y:!1};w(t,e,o)}else"production"!==({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}&&"production")&&console.warn("[Bug] could not invalidate non existing atom",e)})(t,n),A(t,n))}))},$=(t,e,n)=>{let o=!0;const r=(e,n)=>{const o=T(t,e);if("e"in o)throw o.e;if("p"in o){if(null!=n&&n.unstable_promise)return o.p.then((()=>{const i=x(t,e);return i&&"p"in i&&i.p===o.p?new Promise((t=>setTimeout(t))).then((()=>r(e,n))):r(e,n)}));throw"production"!==({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}&&"production")&&console.info("Reading pending atom state in write operation. We throw a promise for now.",e),o.p}if("v"in o)return o.v;throw"production"!==({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}&&"production")&&console.warn("[Bug] no value found while reading atom in write operation. This is probably a bug.",e),new Error("no value found")},i=e.write(r,((n,r)=>{let i;if(n===e){if(!p(n))throw new Error("atom not writable");(t=>{const e=new Set,n=h.get(t);return n&&(h.delete(t),n.forEach(((t,n)=>{u(t),e.add(n)}))),e})(n).forEach((e=>{e!==t&&P(e,n,r)}));x(t,n)!==P(t,n,r)&&A(t,n)}else i=$(t,n,r);return o||I(t),i}),n);return o=!1,i},V=(t,e,n)=>{const o=$(n,t,e);return I(n),o},L=(t,e,o)=>{const r={t:new Set(o&&[o]),l:new Set};if(n.set(e,r),"production"!==({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}&&"production")&&i.add(e),T(void 0,e).d.forEach(((o,r)=>{const i=n.get(r);i?i.t.add(e):r!==e&&L(t,r,e)})),(t=>!!t.write)(e)&&e.onMount){const n=n=>V(e,n,t),o=e.onMount(n);t=void 0,o&&(r.u=o)}return r},R=(t,e)=>{var o;const r=null==(o=n.get(e))?void 0:o.u;r&&r(),n.delete(e),"production"!==({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}&&"production")&&i.delete(e);const s=x(t,e);s?("p"in s&&u(s.p),s.d.forEach(((o,r)=>{if(r!==e){const o=n.get(r);o&&(o.t.delete(e),B(r,o)&&R(t,r))}}))):"production"!==({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}&&"production")&&console.warn("[Bug] could not find atom state to unmount",e)},D=(t,e,o,r)=>{const i=new Set(o.d.keys());null==r||r.forEach(((o,r)=>{if(i.has(r))return void i.delete(r);const s=n.get(r);s&&(s.t.delete(e),B(r,s)&&R(t,r))})),i.forEach((o=>{const r=n.get(o);r?r.t.add(e):n.has(e)&&L(t,o,e)}))},I=t=>{if(t)b(t).forEach(((o,r)=>{if(o!==e.get(r)){const e=n.get(r);null==e||e.l.forEach((e=>e(t)))}}));else{for(;o.size;){const t=Array.from(o);o.clear(),t.forEach((t=>{let[e,o]=t;const r=x(void 0,e);if(r&&r.d!==(null==o?void 0:o.d)&&D(void 0,e,r,null==o?void 0:o.d),o&&!o.y&&null!=r&&r.y)return;const i=n.get(e);null==i||i.l.forEach((t=>t()))}))}"production"!==({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}&&"production")&&r.forEach((t=>t()))}},O=(t,n)=>{n&&(t=>{b(t).forEach(((n,o)=>{const r=e.get(o);(!r||n.r>r.r||n.y!==r.y||n.r===r.r&&n.d!==r.d)&&(e.set(o,n),n.d!==(null==r?void 0:r.d)&&D(t,o,n,null==r?void 0:r.d))}))})(n),I(void 0)},j=(t,e,o)=>{const r=((t,e)=>{let o=n.get(e);return o||(o=L(t,e)),o})(o,t).l;return r.add(e),()=>{r.delete(e),((t,e)=>{const o=n.get(e);o&&B(e,o)&&R(t,e)})(o,t)}},F=(t,e)=>{for(const[n,o]of t)p(n)&&(P(e,n,o),A(e,n));I(e)};return"production"!==({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}&&"production")?{[m]:S,[f]:V,[g]:O,[v]:j,h:F,n:t=>(r.add(t),()=>{r.delete(t)}),l:()=>i.values(),a:t=>e.get(t),m:t=>n.get(t)}:{[m]:S,[f]:V,[g]:O,[v]:j,h:F}},b=(t,e)=>({s:e?e(t).SECRET_INTERNAL_store:y(t)}),x=new Map,w=t=>(x.has(t)||x.set(t,(0,o.createContext)(b())),x.get(t)),C=t=>{let{children:e,initialValues:n,scope:r,unstable_createStore:i,unstable_enableVersionedWrite:s}=t;const[a,l]=(0,o.useState)({});(0,o.useEffect)((()=>{const t=u.current;t.w&&(t.s[g](null,a),delete a.p,t.v=a)}),[a]);const u=(0,o.useRef)();if(!u.current){const t=b(n,i);if(s){let e=0;t.w=t=>{l((n=>{const o=e?n:{p:n};return t(o),o}))},t.v=a,t.r=t=>{++e,t(),--e}}u.current=t}const c=w(r);return(0,o.createElement)(c.Provider,{value:u.current},e)};function k(t,e){return function(t,e){const n="atom"+ ++i,o={toString:()=>n};return"function"==typeof t?o.read=t:(o.init=t,o.read=t=>t(o),o.write=(t,e,n)=>e(o,"function"==typeof n?n(t(o)):n)),e&&(o.write=e),o}(t,e)}function E(t,e){const n=w(e),r=(0,o.useContext)(n),{s:i,v:s}=r,a=e=>{const n=i[m](t,e);if("production"!==({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}&&"production")&&!n.y)throw new Error("should not be invalidated");if("e"in n)throw n.e;if("p"in n)throw n.p;if("v"in n)return n.v;throw new Error("no atom value")},[[l,u,c],d]=(0,o.useReducer)(((e,n)=>{const o=a(n);return Object.is(e[1],o)&&e[2]===t?e:[n,o,t]}),s,(e=>[e,a(e),t]));let h=u;return c!==t&&(d(l),h=a(l)),(0,o.useEffect)((()=>{const{v:e}=r;e&&i[g](t,e);const n=i[v](t,d,e);return d(e),n}),[i,t,r]),(0,o.useEffect)((()=>{i[g](t,l)})),(0,o.useDebugValue)(h),h}function M(t,e){const n=w(e),{s:r,w:i}=(0,o.useContext)(n);return(0,o.useCallback)((e=>{if("production"!==({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}&&"production")&&!("write"in t))throw new Error("not writable atom");const n=n=>r[f](t,e,n);return i?i(n):n()}),[r,i,t])}function P(t,e){return"scope"in t&&(console.warn("atom.scope is deprecated. Please do useAtom(atom, scope) instead."),e=t.scope),[E(t,e),M(t,e)]}function T(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var S={exports:{}},B={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]},A={exports:{}},$=function(t){return!(!t||"string"==typeof t)&&(t instanceof Array||Array.isArray(t)||t.length>=0&&(t.splice instanceof Function||Object.getOwnPropertyDescriptor(t,t.length-1)&&"String"!==t.constructor.name))},V=Array.prototype.concat,L=Array.prototype.slice,R=A.exports=function(t){for(var e=[],n=0,o=t.length;n=4&&1!==t[3]&&(e=", "+t[3]),"hwb("+t[0]+", "+t[1]+"%, "+t[2]+"%"+e+")"},U.to.keyword=function(t){return F[t.slice(0,3)]};var Z=S.exports;const W=B,q={};for(const yd of Object.keys(W))q[W[yd]]=yd;const _={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};var X=_;for(const yd of Object.keys(_)){if(!("channels"in _[yd]))throw new Error("missing channels property: "+yd);if(!("labels"in _[yd]))throw new Error("missing channel labels property: "+yd);if(_[yd].labels.length!==_[yd].channels)throw new Error("channel and label counts mismatch: "+yd);const{channels:t,labels:e}=_[yd];delete _[yd].channels,delete _[yd].labels,Object.defineProperty(_[yd],"channels",{value:t}),Object.defineProperty(_[yd],"labels",{value:e})}function Y(t,e){return(t[0]-e[0])**2+(t[1]-e[1])**2+(t[2]-e[2])**2}_.rgb.hsl=function(t){const e=t[0]/255,n=t[1]/255,o=t[2]/255,r=Math.min(e,n,o),i=Math.max(e,n,o),s=i-r;let a,l;i===r?a=0:e===i?a=(n-o)/s:n===i?a=2+(o-e)/s:o===i&&(a=4+(e-n)/s),a=Math.min(60*a,360),a<0&&(a+=360);const u=(r+i)/2;return l=i===r?0:u<=.5?s/(i+r):s/(2-i-r),[a,100*l,100*u]},_.rgb.hsv=function(t){let e,n,o,r,i;const s=t[0]/255,a=t[1]/255,l=t[2]/255,u=Math.max(s,a,l),c=u-Math.min(s,a,l),d=function(t){return(u-t)/6/c+.5};return 0===c?(r=0,i=0):(i=c/u,e=d(s),n=d(a),o=d(l),s===u?r=o-n:a===u?r=1/3+e-o:l===u&&(r=2/3+n-e),r<0?r+=1:r>1&&(r-=1)),[360*r,100*i,100*u]},_.rgb.hwb=function(t){const e=t[0],n=t[1];let o=t[2];const r=_.rgb.hsl(t)[0],i=1/255*Math.min(e,Math.min(n,o));return o=1-1/255*Math.max(e,Math.max(n,o)),[r,100*i,100*o]},_.rgb.cmyk=function(t){const e=t[0]/255,n=t[1]/255,o=t[2]/255,r=Math.min(1-e,1-n,1-o);return[100*((1-e-r)/(1-r)||0),100*((1-n-r)/(1-r)||0),100*((1-o-r)/(1-r)||0),100*r]},_.rgb.keyword=function(t){const e=q[t];if(e)return e;let n,o=1/0;for(const r of Object.keys(W)){const e=Y(t,W[r]);e.04045?((e+.055)/1.055)**2.4:e/12.92,n=n>.04045?((n+.055)/1.055)**2.4:n/12.92,o=o>.04045?((o+.055)/1.055)**2.4:o/12.92;return[100*(.4124*e+.3576*n+.1805*o),100*(.2126*e+.7152*n+.0722*o),100*(.0193*e+.1192*n+.9505*o)]},_.rgb.lab=function(t){const e=_.rgb.xyz(t);let n=e[0],o=e[1],r=e[2];n/=95.047,o/=100,r/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,o=o>.008856?o**(1/3):7.787*o+16/116,r=r>.008856?r**(1/3):7.787*r+16/116;return[116*o-16,500*(n-o),200*(o-r)]},_.hsl.rgb=function(t){const e=t[0]/360,n=t[1]/100,o=t[2]/100;let r,i,s;if(0===n)return s=255*o,[s,s,s];r=o<.5?o*(1+n):o+n-o*n;const a=2*o-r,l=[0,0,0];for(let u=0;u<3;u++)i=e+1/3*-(u-1),i<0&&i++,i>1&&i--,s=6*i<1?a+6*(r-a)*i:2*i<1?r:3*i<2?a+(r-a)*(2/3-i)*6:a,l[u]=255*s;return l},_.hsl.hsv=function(t){const e=t[0];let n=t[1]/100,o=t[2]/100,r=n;const i=Math.max(o,.01);o*=2,n*=o<=1?o:2-o,r*=i<=1?i:2-i;return[e,100*(0===o?2*r/(i+r):2*n/(o+n)),100*((o+n)/2)]},_.hsv.rgb=function(t){const e=t[0]/60,n=t[1]/100;let o=t[2]/100;const r=Math.floor(e)%6,i=e-Math.floor(e),s=255*o*(1-n),a=255*o*(1-n*i),l=255*o*(1-n*(1-i));switch(o*=255,r){case 0:return[o,l,s];case 1:return[a,o,s];case 2:return[s,o,l];case 3:return[s,a,o];case 4:return[l,s,o];case 5:return[o,s,a]}},_.hsv.hsl=function(t){const e=t[0],n=t[1]/100,o=t[2]/100,r=Math.max(o,.01);let i,s;s=(2-n)*o;const a=(2-n)*r;return i=n*r,i/=a<=1?a:2-a,i=i||0,s/=2,[e,100*i,100*s]},_.hwb.rgb=function(t){const e=t[0]/360;let n=t[1]/100,o=t[2]/100;const r=n+o;let i;r>1&&(n/=r,o/=r);const s=Math.floor(6*e),a=1-o;i=6*e-s,1&s&&(i=1-i);const l=n+i*(a-n);let u,c,d;switch(s){default:case 6:case 0:u=a,c=l,d=n;break;case 1:u=l,c=a,d=n;break;case 2:u=n,c=a,d=l;break;case 3:u=n,c=l,d=a;break;case 4:u=l,c=n,d=a;break;case 5:u=a,c=n,d=l}return[255*u,255*c,255*d]},_.cmyk.rgb=function(t){const e=t[0]/100,n=t[1]/100,o=t[2]/100,r=t[3]/100;return[255*(1-Math.min(1,e*(1-r)+r)),255*(1-Math.min(1,n*(1-r)+r)),255*(1-Math.min(1,o*(1-r)+r))]},_.xyz.rgb=function(t){const e=t[0]/100,n=t[1]/100,o=t[2]/100;let r,i,s;return r=3.2406*e+-1.5372*n+-.4986*o,i=-.9689*e+1.8758*n+.0415*o,s=.0557*e+-.204*n+1.057*o,r=r>.0031308?1.055*r**(1/2.4)-.055:12.92*r,i=i>.0031308?1.055*i**(1/2.4)-.055:12.92*i,s=s>.0031308?1.055*s**(1/2.4)-.055:12.92*s,r=Math.min(Math.max(0,r),1),i=Math.min(Math.max(0,i),1),s=Math.min(Math.max(0,s),1),[255*r,255*i,255*s]},_.xyz.lab=function(t){let e=t[0],n=t[1],o=t[2];e/=95.047,n/=100,o/=108.883,e=e>.008856?e**(1/3):7.787*e+16/116,n=n>.008856?n**(1/3):7.787*n+16/116,o=o>.008856?o**(1/3):7.787*o+16/116;return[116*n-16,500*(e-n),200*(n-o)]},_.lab.xyz=function(t){let e,n,o;n=(t[0]+16)/116,e=t[1]/500+n,o=n-t[2]/200;const r=n**3,i=e**3,s=o**3;return n=r>.008856?r:(n-16/116)/7.787,e=i>.008856?i:(e-16/116)/7.787,o=s>.008856?s:(o-16/116)/7.787,e*=95.047,n*=100,o*=108.883,[e,n,o]},_.lab.lch=function(t){const e=t[0],n=t[1],o=t[2];let r;r=360*Math.atan2(o,n)/2/Math.PI,r<0&&(r+=360);return[e,Math.sqrt(n*n+o*o),r]},_.lch.lab=function(t){const e=t[0],n=t[1],o=t[2]/360*2*Math.PI;return[e,n*Math.cos(o),n*Math.sin(o)]},_.rgb.ansi16=function(t,e){void 0===e&&(e=null);const[n,o,r]=t;let i=null===e?_.rgb.hsv(t)[2]:e;if(i=Math.round(i/50),0===i)return 30;let s=30+(Math.round(r/255)<<2|Math.round(o/255)<<1|Math.round(n/255));return 2===i&&(s+=60),s},_.hsv.ansi16=function(t){return _.rgb.ansi16(_.hsv.rgb(t),t[2])},_.rgb.ansi256=function(t){const e=t[0],n=t[1],o=t[2];return e===n&&n===o?e<8?16:e>248?231:Math.round((e-8)/247*24)+232:16+36*Math.round(e/255*5)+6*Math.round(n/255*5)+Math.round(o/255*5)},_.ansi16.rgb=function(t){let e=t%10;if(0===e||7===e)return t>50&&(e+=3.5),e=e/10.5*255,[e,e,e];const n=.5*(1+~~(t>50));return[(1&e)*n*255,(e>>1&1)*n*255,(e>>2&1)*n*255]},_.ansi256.rgb=function(t){if(t>=232){const e=10*(t-232)+8;return[e,e,e]}let e;t-=16;return[Math.floor(t/36)/5*255,Math.floor((e=t%36)/6)/5*255,e%6/5*255]},_.rgb.hex=function(t){const e=(((255&Math.round(t[0]))<<16)+((255&Math.round(t[1]))<<8)+(255&Math.round(t[2]))).toString(16).toUpperCase();return"000000".substring(e.length)+e},_.hex.rgb=function(t){const e=t.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!e)return[0,0,0];let n=e[0];3===e[0].length&&(n=n.split("").map((t=>t+t)).join(""));const o=parseInt(n,16);return[o>>16&255,o>>8&255,255&o]},_.rgb.hcg=function(t){const e=t[0]/255,n=t[1]/255,o=t[2]/255,r=Math.max(Math.max(e,n),o),i=Math.min(Math.min(e,n),o),s=r-i;let a,l;return a=s<1?i/(1-s):0,l=s<=0?0:r===e?(n-o)/s%6:r===n?2+(o-e)/s:4+(e-n)/s,l/=6,l%=1,[360*l,100*s,100*a]},_.hsl.hcg=function(t){const e=t[1]/100,n=t[2]/100,o=n<.5?2*e*n:2*e*(1-n);let r=0;return o<1&&(r=(n-.5*o)/(1-o)),[t[0],100*o,100*r]},_.hsv.hcg=function(t){const e=t[1]/100,n=t[2]/100,o=e*n;let r=0;return o<1&&(r=(n-o)/(1-o)),[t[0],100*o,100*r]},_.hcg.rgb=function(t){const e=t[0]/360,n=t[1]/100,o=t[2]/100;if(0===n)return[255*o,255*o,255*o];const r=[0,0,0],i=e%1*6,s=i%1,a=1-s;let l=0;switch(Math.floor(i)){case 0:r[0]=1,r[1]=s,r[2]=0;break;case 1:r[0]=a,r[1]=1,r[2]=0;break;case 2:r[0]=0,r[1]=1,r[2]=s;break;case 3:r[0]=0,r[1]=a,r[2]=1;break;case 4:r[0]=s,r[1]=0,r[2]=1;break;default:r[0]=1,r[1]=0,r[2]=a}return l=(1-n)*o,[255*(n*r[0]+l),255*(n*r[1]+l),255*(n*r[2]+l)]},_.hcg.hsv=function(t){const e=t[1]/100,n=e+t[2]/100*(1-e);let o=0;return n>0&&(o=e/n),[t[0],100*o,100*n]},_.hcg.hsl=function(t){const e=t[1]/100,n=t[2]/100*(1-e)+.5*e;let o=0;return n>0&&n<.5?o=e/(2*n):n>=.5&&n<1&&(o=e/(2*(1-n))),[t[0],100*o,100*n]},_.hcg.hwb=function(t){const e=t[1]/100,n=e+t[2]/100*(1-e);return[t[0],100*(n-e),100*(1-n)]},_.hwb.hcg=function(t){const e=t[1]/100,n=1-t[2]/100,o=n-e;let r=0;return o<1&&(r=(n-o)/(1-o)),[t[0],100*o,100*r]},_.apple.rgb=function(t){return[t[0]/65535*255,t[1]/65535*255,t[2]/65535*255]},_.rgb.apple=function(t){return[t[0]/255*65535,t[1]/255*65535,t[2]/255*65535]},_.gray.rgb=function(t){return[t[0]/100*255,t[0]/100*255,t[0]/100*255]},_.gray.hsl=function(t){return[0,0,t[0]]},_.gray.hsv=_.gray.hsl,_.gray.hwb=function(t){return[0,100,t[0]]},_.gray.cmyk=function(t){return[0,0,0,t[0]]},_.gray.lab=function(t){return[t[0],0,0]},_.gray.hex=function(t){const e=255&Math.round(t[0]/100*255),n=((e<<16)+(e<<8)+e).toString(16).toUpperCase();return"000000".substring(n.length)+n},_.rgb.gray=function(t){return[(t[0]+t[1]+t[2])/3/255*100]};const G=X;function K(t){const e=function(){const t={},e=Object.keys(G);for(let n=e.length,o=0;o{nt[t]={},Object.defineProperty(nt[t],"channels",{value:tt[t].channels}),Object.defineProperty(nt[t],"labels",{value:tt[t].labels});const e=et(t);Object.keys(e).forEach((n=>{const o=e[n];nt[t][n]=function(t){const e=function(){for(var e=arguments.length,n=new Array(e),o=0;o1&&(n=r);const i=t(n);if("object"==typeof i)for(let t=i.length,s=0;s1&&(n=r),t(n))};return"conversion"in t&&(e.conversion=t.conversion),e}(o)}))}));const ot=Z,rt=nt,it=["keyword","gray","hex"],st={};for(const yd of Object.keys(rt))st[[...rt[yd].labels].sort().join("")]=yd;const at={};function lt(t,e){if(!(this instanceof lt))return new lt(t,e);if(e&&e in it&&(e=null),e&&!(e in rt))throw new Error("Unknown model: "+e);let n,o;if(null==t)this.model="rgb",this.color=[0,0,0],this.valpha=1;else if(t instanceof lt)this.model=t.model,this.color=[...t.color],this.valpha=t.valpha;else if("string"==typeof t){const e=ot.get(t);if(null===e)throw new Error("Unable to parse color from string: "+t);this.model=e.model,o=rt[this.model].channels,this.color=e.value.slice(0,o),this.valpha="number"==typeof e.value[o]?e.value[o]:1}else if(t.length>0){this.model=e||"rgb",o=rt[this.model].channels;const n=Array.prototype.slice.call(t,0,o);this.color=pt(n,o),this.valpha="number"==typeof t[o]?t[o]:1}else if("number"==typeof t)this.model="rgb",this.color=[t>>16&255,t>>8&255,255&t],this.valpha=1;else{this.valpha=1;const e=Object.keys(t);"alpha"in t&&(e.splice(e.indexOf("alpha"),1),this.valpha="number"==typeof t.alpha?t.alpha:0);const o=e.sort().join("");if(!(o in st))throw new Error("Unable to parse color from object: "+JSON.stringify(t));this.model=st[o];const{labels:r}=rt[this.model],i=[];for(n=0;n(t%360+360)%360)),saturationl:ct("hsl",1,dt(100)),lightness:ct("hsl",2,dt(100)),saturationv:ct("hsv",1,dt(100)),value:ct("hsv",2,dt(100)),chroma:ct("hcg",1,dt(100)),gray:ct("hcg",2,dt(100)),white:ct("hwb",1,dt(100)),wblack:ct("hwb",2,dt(100)),cyan:ct("cmyk",0,dt(100)),magenta:ct("cmyk",1,dt(100)),yellow:ct("cmyk",2,dt(100)),black:ct("cmyk",3,dt(100)),x:ct("xyz",0,dt(95.047)),y:ct("xyz",1,dt(100)),z:ct("xyz",2,dt(108.833)),l:ct("lab",0,dt(100)),a:ct("lab",1),b:ct("lab",2),keyword(t){return void 0!==t?new lt(t):rt[this.model].keyword(this.color)},hex(t){return void 0!==t?new lt(t):ot.to.hex(this.rgb().round().color)},hexa(t){if(void 0!==t)return new lt(t);const e=this.rgb().round().color;let n=Math.round(255*this.valpha).toString(16).toUpperCase();return 1===n.length&&(n="0"+n),ot.to.hex(e)+n},rgbNumber(){const t=this.rgb().color;return(255&t[0])<<16|(255&t[1])<<8|255&t[2]},luminosity(){const t=this.rgb().color,e=[];for(const[n,o]of t.entries()){const t=o/255;e[n]=t<=.04045?t/12.92:((t+.055)/1.055)**2.4}return.2126*e[0]+.7152*e[1]+.0722*e[2]},contrast(t){const e=this.luminosity(),n=t.luminosity();return e>n?(e+.05)/(n+.05):(n+.05)/(e+.05)},level(t){const e=this.contrast(t);return e>=7?"AAA":e>=4.5?"AA":""},isDark(){const t=this.rgb().color;return(2126*t[0]+7152*t[1]+722*t[2])/1e4<128},isLight(){return!this.isDark()},negate(){const t=this.rgb();for(let e=0;e<3;e++)t.color[e]=255-t.color[e];return t},lighten(t){const e=this.hsl();return e.color[2]+=e.color[2]*t,e},darken(t){const e=this.hsl();return e.color[2]-=e.color[2]*t,e},saturate(t){const e=this.hsl();return e.color[1]+=e.color[1]*t,e},desaturate(t){const e=this.hsl();return e.color[1]-=e.color[1]*t,e},whiten(t){const e=this.hwb();return e.color[1]+=e.color[1]*t,e},blacken(t){const e=this.hwb();return e.color[2]+=e.color[2]*t,e},grayscale(){const t=this.rgb().color,e=.3*t[0]+.59*t[1]+.11*t[2];return lt.rgb(e,e,e)},fade(t){return this.alpha(this.valpha-this.valpha*t)},opaquer(t){return this.alpha(this.valpha+this.valpha*t)},rotate(t){const e=this.hsl();let n=e.color[0];return n=(n+t)%360,n=n<0?360+n:n,e.color[0]=n,e},mix(t,e){if(!t||!t.rgb)throw new Error('Argument to "mix" was not a Color instance, but rather an instance of '+typeof t);const n=t.rgb(),o=this.rgb(),r=void 0===e?.5:e,i=2*r-1,s=n.alpha()-o.alpha(),a=((i*s==-1?i:(i+s)/(1+i*s))+1)/2,l=1-a;return lt.rgb(a*n.red()+l*o.red(),a*n.green()+l*o.green(),a*n.blue()+l*o.blue(),n.alpha()*r+o.alpha()*(1-r))}};for(const yd of Object.keys(rt)){if(it.includes(yd))continue;const{channels:t}=rt[yd];lt.prototype[yd]=function(){for(var t=arguments.length,e=new Array(t),n=0;n0?new lt(e,yd):new lt([...ht(rt[this.model][yd].raw(this.color)),this.valpha],yd)},lt[yd]=function(){for(var e=arguments.length,n=new Array(e),o=0;o0?(Rt.promise&&Rt.promise.then((()=>{})).catch((()=>{})),t.pause()):(t.paused||t.ended)&&(Rt.promise=t.play()))}function kt(t,e,n){return Math.min(Math.max(t,e),n)}function Et(t,e,n,o,r){function i(t){r&&t.preventDefault(),t.target&&function(t,e,n){const o=null==n?void 0:n.getBoundingClientRect();o&&e(t,o)}(t,e,n)}function s(){o(!1),r?(document.removeEventListener("touchmove",i),document.removeEventListener("touchend",s)):(document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",s))}i(t),t.stopPropagation(),r?(document.addEventListener("touchmove",i,{passive:!1}),document.addEventListener("touchend",s)):(document.addEventListener("mousemove",i),document.addEventListener("mouseup",s))}function Mt(t,e,n,o,r,i,s,a,l,u,c){if(l(!0),o&&o.current){let l=0;St(t)?l=t.touches[0].clientX:Bt(t)&&(l=t.clientX);const d=o.current.getBoundingClientRect(),[h,p,m]=function(t,e){const n=e.left-t.left,o=Math.abs(e.right-t.right);return[t.width-n-o,n,o]}(e,d),f=l-e.left;Pt(t,n,o,r,i,s,u,c);const g=kt(f-p,0,h)/o.current.clientWidth;if(i&&i.duration){const t=i.duration*g;i.currentTime=t,u(t)}a(g)}}function Pt(t,e,n,o,r,i,s,a){var l;if(e||!n||!n.current||!o)return;let u=0;St(t)?u=t.touches[0].clientX:Bt(t)&&(u=t.clientX);const c=n.current.getBoundingClientRect(),d=n.current.getBoundingClientRect().left-(null==o?void 0:o.getBoundingClientRect().left),h=(null==o?void 0:o.getBoundingClientRect().right)-n.current.getBoundingClientRect().right,p=u-c.left;let m=u-c.left-i/2;const f=(null==(l=n.current)?void 0:l.clientWidth)-i/2+h,g=n.current.clientWidth-i/2;p>f&&(m=f-i/2),m=kt(m,Math.max(-1*i/2,-1*d),g),a(m);const v=u-n.current.getBoundingClientRect().left;if(r&&r.duration){const t=kt(v/n.current.clientWidth,0,1);s(r.duration*t)}}function Tt(t){const e=Math.floor(t/3600),n=Math.floor((t-3600*e)/60),o=Math.floor(t-3600*e-60*n);let r="";return e>0&&(r+=`${e}:`),r+=n<10?`0${n}:`:`${n}:`,r+=o<10?`0${o}`:`${o}`,r}function St(t){return void 0!==t.touches}function Bt(t){return void 0!==t.clientX}function At(){return!(!("ontouchstart"in window)&&!navigator.maxTouchPoints)}function $t(t){return mt(t).lighten(.3)}function Vt(t){let e,n,o;const r=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(t);if(r)e=parseInt(r[1],10),n=parseInt(r[2],10),o=parseInt(r[3],10);else{const r=document.createElement("div");r.style.color=t,document.body.appendChild(r);const i=getComputedStyle(r).color;document.body.removeChild(r);const s=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(i);s?(e=parseInt(s[1],10),n=parseInt(s[2],10),o=parseInt(s[3],10)):(e=parseInt(t.slice(1,3),16),n=parseInt(t.slice(3,5),16),o=parseInt(t.slice(5,7),16))}return(.299*e+.587*n+.114*o)/255>.5?"#000000":"#FFFFFF"}const Lt=Symbol(),Rt={promise:null},Dt=Symbol("draggable"),It=k(null),Ot=k(null),jt=k(null);k(null,((t,e,n)=>{e(jt,n)}));const Ft=k({});var Nt=(t=>(t[t.paused=0]="paused",t[t.playing=1]="playing",t[t.ended=2]="ended",t))(Nt||{});const Ut=k(!1),zt=k(0),Ht=k(0),Zt=k((t=>Tt(t(Ht)))),Wt=k(0),qt=k((t=>Tt(t(Wt)))),_t=k(1),Xt=k("progressBar"),Yt=k(null),Gt=k(null),Kt=k(null),Jt=k(1080),Qt=new Set([144,240,360,480,720,1080,1440,2160]),te=k({2160:null,1440:null,1080:null,720:null,480:null,360:null,240:null,144:null}),ee=k(!1),ne=k(null),oe=k({height:0,width:0}),re=k({}),ie=k([]),se=k(0),ae=k((t=>{const e=t(se);return parseFloat((100*e).toFixed(1))+"%"})),le=k(!1),ue=k(0),ce=k(0),de=k((t=>Tt(t(ce)))),he=k(0),pe=k(null),me=k(1),fe=k((t=>{const e=t(me);return parseFloat((100*e).toFixed(1))+"%"})),ge=k(!1),ve=k(!1);k(null),k(null);const ye=k(!1),be=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],xe=(()=>{if(typeof document>"u")return!1;const t=be[0],e={};for(const n of be)if((null==n?void 0:n[1])in document){for(const[o,r]of n.entries())e[t[o]]=r;return e}return!1})(),we={change:xe.fullscreenchange,error:xe.fullscreenerror};let Ce={request:(t,e)=>(void 0===t&&(t=document.documentElement),new Promise(((n,o)=>{const r=()=>{Ce.off("change",r),n()};Ce.on("change",r);const i=t[xe.requestFullscreen](e);i instanceof Promise&&i.then(r).catch(o)}))),exit:()=>new Promise(((t,e)=>{if(!Ce.isFullscreen)return void t();const n=()=>{Ce.off("change",n),t()};Ce.on("change",n);const o=document[xe.exitFullscreen]();o instanceof Promise&&o.then(n).catch(e)})),toggle:(t,e)=>Ce.isFullscreen?Ce.exit():Ce.request(t,e),onchange(t){Ce.on("change",t)},onerror(t){Ce.on("error",t)},on(t,e){const n=we[t];n&&document.addEventListener(n,e,!1)},off(t,e){const n=we[t];n&&document.removeEventListener(n,e,!1)},raw:xe};Object.defineProperties(Ce,{isFullscreen:{get:()=>!!document[xe.fullscreenElement]},element:{enumerable:!0,get:()=>document[xe.fullscreenElement]??void 0},isEnabled:{enumerable:!0,get:()=>!!document[xe.fullscreenEnabled]}}),xe||(Ce={isEnabled:!1});const ke=Ce;function Ee(t,e,n,r,i){(0,o.useEffect)((()=>{n?(Rt.promise&&Rt.promise.then((()=>{})).catch((()=>{})),r(i),null==e||e.pause()):t===Nt.paused||t===Nt.ended?(Rt.promise&&Rt.promise.then((()=>{})).catch((()=>{})),null==e||e.pause()):t===Nt.playing&&(Rt.promise=(null==e?void 0:e.play())??null)}),[n,r,e])}function Me(t,e,n,r){let i;const s=()=>{n(),clearTimeout(i),i=setTimeout((()=>{r()}),2500)};(0,o.useEffect)((()=>{if(e&&t)return t.addEventListener("mousemove",s),()=>{t.removeEventListener("mousemove",s),clearTimeout(i)}}),[t,e])}var Pe,Te={exports:{}},Se={};Te.exports=function(){if(Pe)return Se;Pe=1;var t=o,e=Symbol.for("react.element"),n=Symbol.for("react.fragment"),r=Object.prototype.hasOwnProperty,i=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function a(t,n,o){var a,l={},u=null,c=null;for(a in void 0!==o&&(u=""+o),void 0!==n.key&&(u=""+n.key),void 0!==n.ref&&(c=n.ref),n)r.call(n,a)&&!s.hasOwnProperty(a)&&(l[a]=n[a]);if(t&&t.defaultProps)for(a in n=t.defaultProps)void 0===l[a]&&(l[a]=n[a]);return{$$typeof:e,type:t,key:u,ref:c,props:l,_owner:i.current}}return Se.Fragment=n,Se.jsx=a,Se.jsxs=a,Se}();var Be=Te.exports;const Ae=Be.jsx,$e=Be.jsxs,Ve=Be.Fragment;function Le(){const[t,e]=P(It,Lt),[n,r]=P(re,Lt),i=M(zt,Lt),s=M(_t,Lt),a=E(ee,Lt),l=M(se,Lt),u=M(me,Lt),c=M(Wt,Lt),d=M(Ut,Lt),h=M(Ht,Lt),p=M(ge,Lt),m=M(Jt,Lt),f=M(ue,Lt),g=M(ee,Lt),v=M(Gt,Lt),y=M(Yt,Lt),b=M(Kt,Lt),x=M(te,Lt),w=M(pe,Lt),C=E(le,Lt),k=E(ve,Lt),T=E(ye,Lt),S=E(Ft,Lt),B=E(jt,Lt),A=E(Ot,Lt),{playsInline:$,onClick:V,onPause:L,onPlay:R,onEnded:D,onTimeUpdate:I,onVolumeChange:O,onLoadedData:j,onLoadStart:F,onSeeking:N,onSeeked:U,preload:z,tabIndex:H,onDurationChange:Z,onProgress:W,onRateChange:q,children:_,...X}=S;(function(t,e){(0,o.useEffect)((()=>{if(t instanceof Object){const n={2160:null,1440:null,1080:null,720:null,480:null,360:null,240:null,144:null};if("props"in t&&"source"===t.type){const e=t.props.id;if(e){const o=parseInt(e.split("-")[1]);o in n&&(n[o]=t.props.src)}}else Array.isArray(t)&&t.filter((t=>"source"===t.type)).map((t=>t.props)).filter((t=>void 0!==t)).forEach((t=>{const e=t.id;if(e){const o=parseInt(e.split("-")[1]);o in n&&(n[o]=t.src)}}));e(n)}}),[t,e])})(_,x),function(t,e,n,r,i){(0,o.useEffect)((()=>{if(null!==e){const o=e.textTracks;if(t instanceof Object&&(!("props"in t)||"track"!==t.type)&&Array.isArray(t)){const e=t.filter((t=>"track"===t.type)).findIndex((t=>!0===t.props.default));-1!==e&&(o[e].mode="showing",i(o[e]))}o.onchange=t=>{const e=Array.from(t.target);i(e.find((t=>"showing"===t.mode))??null)};const s=[];for(let t=0;t{t.oncuechange=t=>{const e=t.target;if("showing"===e.mode){const t=e.activeCues?e.activeCues[0]:null;r(t)}}})),n(s)}}),[e,t,n,r,i])}(_,t,v,y,b),function(t,e){(0,o.useEffect)((()=>{if(null!==t){const n=t.textTracks;let o=null;for(let t=0;t{function n(t){const n=t.target;document.fullscreenElement===n&&e&&document.exitFullscreen().then((()=>{e.requestFullscreen()}))}return t&&t.addEventListener("fullscreenchange",n),()=>{t&&t.removeEventListener("fullscreenchange",n)}}),[t,e])}(t,B),Me(t,T,(()=>g(!0)),(()=>g(!1)));function Y(t){if(!a)return;const e=t.target;if(4===e.readyState){const t=e.buffered.length,n=t-1;if(t<=0)return;const o=e.buffered.end(n)/e.duration*100;f(o)}}return Ae(Re,{ref:A,...X,className:Dt.toString(),playsInline:$??!0,onClick:e=>{Ct(t),V&&V(e)},onPause:t=>{i(Nt.paused),L&&L(t)},onPlay:t=>{i(Nt.playing),R&&R(t)},onEnded:t=>{i(Nt.ended),D&&D(t)},onLoadedData:t=>{e(t.target),m(function(t,e){const n=t.target.currentSrc;if(e instanceof Object){if("props"in e&&"source"===e.type){const t=e.props.id;if(t){const o=parseInt(t.split("-")[1]);if(Qt.has(o)&&e.props.src===n)return o}}else if(Array.isArray(e)){const t=e.filter((t=>"source"===t.type)).map((t=>t.props)).filter((t=>void 0!==t)).map((t=>{if(t.id){const e=parseInt(t.id.split("-")[1]);if(Qt.has(e)&&t.src===n)return e}})).filter((t=>void 0!==t));if(1===t.length)return t[0]}return 1080}return 1080}(t,_)),j&&j(t)},onLoadStart:t=>{e(t.target),r({...n}),F&&F(t)},onVolumeChange:t=>{u(t.target.volume),p(t.target.muted),O&&O(t)},onSeeking:t=>{d(!0),N&&N(t)},onSeeked:t=>{d(!1),Y(t),U&&U(t)},onTimeUpdate:t=>{(function(t){const e=t.target;l(e.currentTime/e.duration),h(e.currentTime)})(t),I&&I(t)},onProgress:t=>{Y(t),W&&W(t)},onDurationChange:t=>{c(t.target.duration),Z&&Z(t)},onRateChange:t=>{s(t.target.playbackRate),q&&q(t)},preload:z??"metadata",tabIndex:H??-1,"data-cy":"HTMLVideoPlayer",$isDragging:C||k,children:_})}const Re=r.ZP.video` width: 100%; height: 100%; @@ -578,4 +578,4 @@ cursor: pointer; background-color: var(--ifm-color-emphasis-200); border: 0; -`;n(6474);const b={sidebar_position:5},x="Preview Tooltip",w={unversionedId:"preview-tooltip",id:"preview-tooltip",title:"Preview Tooltip",description:"The preview tooltip is the tooltip that shows up when hovering",source:"@site/docs/preview-tooltip.mdx",sourceDirName:".",slug:"/preview-tooltip",permalink:"/Custoplayer/preview-tooltip",draft:!1,tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Settings Button",permalink:"/Custoplayer/components/settings-button"},next:{title:"Other Properties",permalink:"/Custoplayer/other-properties"}},C={},k=[{value:"Usage",id:"usage",level:2},{value:"Properties",id:"properties",level:2},{value:"Different Id Values",id:"different-id-values",level:2},{value:"Text",id:"text",level:3},{value:"Demo of id: "text"",id:"demo-of-id-text",level:4},{value:"Thumbnail",id:"thumbnail",level:3},{value:"What is an atlasImage?",id:"what-is-an-atlasimage",level:4},{value:"What is a thumbnail VTT file?",id:"what-is-a-thumbnail-vtt-file",level:4},{value:"How to generate an image atlas and thumbnail VTT file?",id:"how-to-generate-an-image-atlas-and-thumbnail-vtt-file",level:4},{value:"Demo of id: "thumbnail"",id:"demo-of-id-thumbnail",level:4},{value:"Demo of id: "textAndThumbnail"",id:"demo-of-id-textandthumbnail",level:4},{value:"Generate Preview Thumbnail Files",id:"generate-preview-thumbnail-files",level:2},{value:"Configuring The Files",id:"configuring-the-files",level:2},{value:"Example",id:"example",level:2}],E={toc:k},M="wrapper";function P(t){let{components:e,...n}=t;return(0,i.kt)(M,(0,o.Z)({},E,n,{components:e,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"preview-tooltip"},"Preview Tooltip"),(0,i.kt)("p",null,"The preview tooltip is the tooltip that shows up when hovering\nover the progress bar."),(0,i.kt)("h2",{id:"usage"},"Usage"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},"previewTooltip: {\n id: 'text'\n},\n")),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Property Name"),(0,i.kt)("th",{parentName:"tr",align:null},"Required"),(0,i.kt)("th",{parentName:"tr",align:null},"Accepted Values"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"),(0,i.kt)("th",{parentName:"tr",align:null},"Default"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"id"),(0,i.kt)("td",{parentName:"tr",align:null},"Yes"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},'"text"'),", ",(0,i.kt)("inlineCode",{parentName:"td"},'"thumbnail"'),", or ",(0,i.kt)("inlineCode",{parentName:"td"},'"textAndThumbnail"')),(0,i.kt)("td",{parentName:"tr",align:null},"Used to render a previewTooltip."),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"undefined"))),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"atlasImage"),(0,i.kt)("td",{parentName:"tr",align:null},"No"),(0,i.kt)("td",{parentName:"tr",align:null},"A url to an image"),(0,i.kt)("td",{parentName:"tr",align:null},"The image that stores all of the preview thumbnails."),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,i.kt)("h2",{id:"different-id-values"},"Different Id Values"),(0,i.kt)("h3",{id:"text"},"Text"),(0,i.kt)("p",null,"Setting ",(0,i.kt)("inlineCode",{parentName:"p"},'id: "text"')," will render a tooltip with the text of the current time when the progress bar is hovered or dragged. The ",(0,i.kt)("inlineCode",{parentName:"p"},"atlasImage")," property is not needed to make this work."),(0,i.kt)("h4",{id:"demo-of-id-text"},"Demo of ",(0,i.kt)("inlineCode",{parentName:"h4"},'id: "text"')),(0,i.kt)("video",{width:"100%",autoPlay:!0,loop:!0,src:"https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/preview-tooltip/text_preview_tooltip.mp4"}),(0,i.kt)("h3",{id:"thumbnail"},"Thumbnail"),(0,i.kt)("p",null,"Setting ",(0,i.kt)("inlineCode",{parentName:"p"},'id: "thumbnail"')," will render a tooltip with the preview thumbnail of the current time when the progress bar is hovered or dragged. The ",(0,i.kt)("inlineCode",{parentName:"p"},"atlasImage")," property is needed to make this work."),(0,i.kt)("p",null,"Two files are required to configure the thumbnail preview tooltip:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"The ",(0,i.kt)("inlineCode",{parentName:"li"},"atlasImage")," jpg file"),(0,i.kt)("li",{parentName:"ol"},"The thumbnail VTT file")),(0,i.kt)("h4",{id:"what-is-an-atlasimage"},"What is an ",(0,i.kt)("inlineCode",{parentName:"h4"},"atlasImage"),"?"),(0,i.kt)("p",null,"The image atlas is a single image that contains all of the preview thumbnails in a grid. Below is an example of how an image atlas looks like."),(0,i.kt)("img",{alt:"A sample image atlas file",src:"https://custoplayer.nyc3.cdn.digitaloceanspaces.com/testing/thumbs.jpg"}),(0,i.kt)("p",null,"You can see that the image atlas jpg file contains thumbnails of the video at different times."),(0,i.kt)("h4",{id:"what-is-a-thumbnail-vtt-file"},"What is a thumbnail VTT file?"),(0,i.kt)("p",null,"The thumbnail vtt file contains the time and position of each thumbnail in the image atlas. Below is an example of how a thumbnail vtt file looks like where the image atlas is called ",(0,i.kt)("inlineCode",{parentName:"p"},"thumbs.jpg"),". In the below example the ",(0,i.kt)("inlineCode",{parentName:"p"},"thumbs.jpg")," atlas only has 10 images."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-vtt"},"WEBVTT\n\n1\n00:00:00.000 --\x3e 00:00:04.685\nthumbs.jpg#xywh=0,0,125,70\n\n2\n00:00:04.685 --\x3e 00:00:09.370\nthumbs.jpg#xywh=125,0,125,70\n\n3\n00:00:09.370 --\x3e 00:00:14.056\nthumbs.jpg#xywh=250,0,125,70\n\n4\n00:00:14.056 --\x3e 00:00:18.741\nthumbs.jpg#xywh=375,0,125,70\n\n5\n00:00:18.741 --\x3e 00:00:23.426\nthumbs.jpg#xywh=500,0,125,70\n\n6\n00:00:23.426 --\x3e 00:00:28.111\nthumbs.jpg#xywh=625,0,125,70\n\n7\n00:00:28.111 --\x3e 00:00:32.796\nthumbs.jpg#xywh=750,0,125,70\n\n8\n00:00:32.796 --\x3e 00:00:37.481\nthumbs.jpg#xywh=875,0,125,70\n\n9\n00:00:37.481 --\x3e 00:00:42.167\nthumbs.jpg#xywh=1000,0,125,70\n\n10\n00:00:42.167 --\x3e 00:00:46.852\nthumbs.jpg#xywh=1125,0,125,70\n")),(0,i.kt)("h4",{id:"how-to-generate-an-image-atlas-and-thumbnail-vtt-file"},"How to generate an image atlas and thumbnail VTT file?"),(0,i.kt)("p",null,"Luckily these files can be automatically generated. All you have to do is:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Upload your video in the Generate Preview Thumbnail Files section."),(0,i.kt)("li",{parentName:"ol"},'Click the "Generate Thumbnails" button'),(0,i.kt)("li",{parentName:"ol"},'Click the "Download Thumbnail VTT" button and the "Download Thumbnail Atlas" button.')),(0,i.kt)("p",null,"Clicking these buttons should download the jpg file and vtt file for your video."),(0,i.kt)("h4",{id:"demo-of-id-thumbnail"},"Demo of ",(0,i.kt)("inlineCode",{parentName:"h4"},'id: "thumbnail"')),(0,i.kt)("video",{width:"100%",autoPlay:!0,loop:!0,src:"https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/preview-tooltip/thumbnail_preview_tooltip.mp4"}),(0,i.kt)("h4",{id:"demo-of-id-textandthumbnail"},"Demo of ",(0,i.kt)("inlineCode",{parentName:"h4"},'id: "textAndThumbnail"')),(0,i.kt)("video",{width:"100%",autoPlay:!0,loop:!0,src:"https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/preview-tooltip/text_and_thumbnail_preview_tooltip.mp4"}),(0,i.kt)("h2",{id:"generate-preview-thumbnail-files"},"Generate Preview Thumbnail Files"),(0,i.kt)(f,{mdxType:"ThumbnailGenerator"}),(0,i.kt)("h2",{id:"configuring-the-files"},"Configuring The Files"),(0,i.kt)("p",null,"There are two steps required to configure the thumbnail preview tooltip:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Set the ",(0,i.kt)("inlineCode",{parentName:"li"},"atlasImage")," property to the thumbs.jpg file that you downloaded."),(0,i.kt)("li",{parentName:"ol"},"Add a track tag as a child to the Custoplayer tag.",(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"It should have attributes of:",(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},'kind="metadata"')),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},'id="custoplayer-thumbnails"'),"."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},'src="Url that hosts thumbnail vtt file"'),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"You won't be able to import a vtt file directly into the Custoplayer tag."),(0,i.kt)("li",{parentName:"ul"},"You will have to host the vtt file somewhere and then set the src attribute to the url of the vtt file."),(0,i.kt)("li",{parentName:"ul"},"You will also have to set the ",(0,i.kt)("inlineCode",{parentName:"li"},'crossOrigin="anonymous"')," to avoid CORS issues."),(0,i.kt)("li",{parentName:"ul"},"A quick free way to host the vtt file is to make a GitHub gist and then use the raw url of the gist as the src attribute.",(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://maestra.ai/blogs/how-to-generate-url-for-srt-vtt-files"},"Here is a tutorial"))))))))))),(0,i.kt)("h2",{id:"example"},"Example"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},"import React from 'react';\nimport { Custoplayer } from 'custoplayer';\n\nexport default function ThumbnailExample() {\n return (\n \n \n \n );\n}\n")))}P.isMDXComponent=!0}}]); \ No newline at end of file +`;n(6474);const b={sidebar_position:5},x="Preview Tooltip",w={unversionedId:"preview-tooltip",id:"preview-tooltip",title:"Preview Tooltip",description:"The preview tooltip is the tooltip that shows up when hovering",source:"@site/docs/preview-tooltip.mdx",sourceDirName:".",slug:"/preview-tooltip",permalink:"/Custoplayer/preview-tooltip",draft:!1,tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Settings Button",permalink:"/Custoplayer/components/settings-button"},next:{title:"Other Properties",permalink:"/Custoplayer/other-properties"}},C={},k=[{value:"Usage",id:"usage",level:2},{value:"Properties",id:"properties",level:2},{value:"Different Id Values",id:"different-id-values",level:2},{value:"Text",id:"text",level:3},{value:"Demo of id: "text"",id:"demo-of-id-text",level:4},{value:"Thumbnail",id:"thumbnail",level:3},{value:"What is an atlasImage?",id:"what-is-an-atlasimage",level:4},{value:"What is a thumbnail VTT file?",id:"what-is-a-thumbnail-vtt-file",level:4},{value:"How to generate an image atlas and thumbnail VTT file?",id:"how-to-generate-an-image-atlas-and-thumbnail-vtt-file",level:4},{value:"Demo of id: "thumbnail"",id:"demo-of-id-thumbnail",level:4},{value:"Demo of id: "textAndThumbnail"",id:"demo-of-id-textandthumbnail",level:4},{value:"Generate Preview Thumbnail Files",id:"generate-preview-thumbnail-files",level:2},{value:"Configuring The Files",id:"configuring-the-files",level:2},{value:"Example",id:"example",level:2}],E={toc:k},M="wrapper";function P(t){let{components:e,...n}=t;return(0,i.kt)(M,(0,o.Z)({},E,n,{components:e,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"preview-tooltip"},"Preview Tooltip"),(0,i.kt)("p",null,"The preview tooltip is the tooltip that shows up when hovering\nover the progress bar."),(0,i.kt)("h2",{id:"usage"},"Usage"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},"previewTooltip: {\n id: 'text'\n},\n")),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Property Name"),(0,i.kt)("th",{parentName:"tr",align:null},"Required"),(0,i.kt)("th",{parentName:"tr",align:null},"Accepted Values"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"),(0,i.kt)("th",{parentName:"tr",align:null},"Default"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"id"),(0,i.kt)("td",{parentName:"tr",align:null},"Yes"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},'"text"'),", ",(0,i.kt)("inlineCode",{parentName:"td"},'"thumbnail"'),", or ",(0,i.kt)("inlineCode",{parentName:"td"},'"textAndThumbnail"')),(0,i.kt)("td",{parentName:"tr",align:null},"Used to render a previewTooltip."),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"undefined"))),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"atlasImage"),(0,i.kt)("td",{parentName:"tr",align:null},"No"),(0,i.kt)("td",{parentName:"tr",align:null},"A url to an image"),(0,i.kt)("td",{parentName:"tr",align:null},"The image that stores all of the preview thumbnails."),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"undefined"))))),(0,i.kt)("h2",{id:"different-id-values"},"Different Id Values"),(0,i.kt)("h3",{id:"text"},"Text"),(0,i.kt)("p",null,"Setting ",(0,i.kt)("inlineCode",{parentName:"p"},'id: "text"')," will render a tooltip with the text of the current time when the progress bar is hovered or dragged. The ",(0,i.kt)("inlineCode",{parentName:"p"},"atlasImage")," property is not needed to make this work."),(0,i.kt)("h4",{id:"demo-of-id-text"},"Demo of ",(0,i.kt)("inlineCode",{parentName:"h4"},'id: "text"')),(0,i.kt)("video",{width:"100%",controls:!0,autoPlay:!0,loop:!0,src:"https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/preview-tooltip/text_preview_tooltip.mp4"}),(0,i.kt)("h3",{id:"thumbnail"},"Thumbnail"),(0,i.kt)("p",null,"Setting ",(0,i.kt)("inlineCode",{parentName:"p"},'id: "thumbnail"')," will render a tooltip with the preview thumbnail of the current time when the progress bar is hovered or dragged. The ",(0,i.kt)("inlineCode",{parentName:"p"},"atlasImage")," property is needed to make this work."),(0,i.kt)("p",null,"Two files are required to configure the thumbnail preview tooltip:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"The ",(0,i.kt)("inlineCode",{parentName:"li"},"atlasImage")," jpg file"),(0,i.kt)("li",{parentName:"ol"},"The thumbnail VTT file")),(0,i.kt)("h4",{id:"what-is-an-atlasimage"},"What is an ",(0,i.kt)("inlineCode",{parentName:"h4"},"atlasImage"),"?"),(0,i.kt)("p",null,"The image atlas is a single image that contains all of the preview thumbnails in a grid. Below is an example of how an image atlas looks like."),(0,i.kt)("img",{alt:"A sample image atlas file",src:"https://custoplayer.nyc3.cdn.digitaloceanspaces.com/testing/thumbs.jpg"}),(0,i.kt)("p",null,"You can see that the image atlas jpg file contains thumbnails of the video at different times."),(0,i.kt)("h4",{id:"what-is-a-thumbnail-vtt-file"},"What is a thumbnail VTT file?"),(0,i.kt)("p",null,"The thumbnail vtt file contains the time and position of each thumbnail in the image atlas. Below is an example of how a thumbnail vtt file looks like where the image atlas is called ",(0,i.kt)("inlineCode",{parentName:"p"},"thumbs.jpg"),". In the below example the ",(0,i.kt)("inlineCode",{parentName:"p"},"thumbs.jpg")," atlas only has 10 images."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-vtt"},"WEBVTT\n\n1\n00:00:00.000 --\x3e 00:00:04.685\nthumbs.jpg#xywh=0,0,125,70\n\n2\n00:00:04.685 --\x3e 00:00:09.370\nthumbs.jpg#xywh=125,0,125,70\n\n3\n00:00:09.370 --\x3e 00:00:14.056\nthumbs.jpg#xywh=250,0,125,70\n\n4\n00:00:14.056 --\x3e 00:00:18.741\nthumbs.jpg#xywh=375,0,125,70\n\n5\n00:00:18.741 --\x3e 00:00:23.426\nthumbs.jpg#xywh=500,0,125,70\n\n6\n00:00:23.426 --\x3e 00:00:28.111\nthumbs.jpg#xywh=625,0,125,70\n\n7\n00:00:28.111 --\x3e 00:00:32.796\nthumbs.jpg#xywh=750,0,125,70\n\n8\n00:00:32.796 --\x3e 00:00:37.481\nthumbs.jpg#xywh=875,0,125,70\n\n9\n00:00:37.481 --\x3e 00:00:42.167\nthumbs.jpg#xywh=1000,0,125,70\n\n10\n00:00:42.167 --\x3e 00:00:46.852\nthumbs.jpg#xywh=1125,0,125,70\n")),(0,i.kt)("h4",{id:"how-to-generate-an-image-atlas-and-thumbnail-vtt-file"},"How to generate an image atlas and thumbnail VTT file?"),(0,i.kt)("p",null,"Luckily these files can be automatically generated. All you have to do is:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Upload your video in the Generate Preview Thumbnail Files section."),(0,i.kt)("li",{parentName:"ol"},'Click the "Generate Thumbnails" button'),(0,i.kt)("li",{parentName:"ol"},'Click the "Download Thumbnail VTT" button and the "Download Thumbnail Atlas" button.')),(0,i.kt)("p",null,"Clicking these buttons should download the jpg file and vtt file for your video."),(0,i.kt)("h4",{id:"demo-of-id-thumbnail"},"Demo of ",(0,i.kt)("inlineCode",{parentName:"h4"},'id: "thumbnail"')),(0,i.kt)("video",{width:"100%",autoPlay:!0,loop:!0,controls:!0,src:"https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/preview-tooltip/thumbnail_preview_tooltip.mp4"}),(0,i.kt)("h4",{id:"demo-of-id-textandthumbnail"},"Demo of ",(0,i.kt)("inlineCode",{parentName:"h4"},'id: "textAndThumbnail"')),(0,i.kt)("video",{width:"100%",autoPlay:!0,loop:!0,controls:!0,src:"https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/preview-tooltip/text_and_thumbnail_preview_tooltip.mp4"}),(0,i.kt)("h2",{id:"generate-preview-thumbnail-files"},"Generate Preview Thumbnail Files"),(0,i.kt)(f,{mdxType:"ThumbnailGenerator"}),(0,i.kt)("h2",{id:"configuring-the-files"},"Configuring The Files"),(0,i.kt)("p",null,"There are two steps required to configure the thumbnail preview tooltip:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Set the ",(0,i.kt)("inlineCode",{parentName:"li"},"atlasImage")," property to the thumbs.jpg file that you downloaded."),(0,i.kt)("li",{parentName:"ol"},"Add a track tag as a child to the Custoplayer tag.",(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"It should have attributes of:",(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},'kind="metadata"')),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},'id="custoplayer-thumbnails"'),"."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},'src="Url that hosts thumbnail vtt file"'),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"You won't be able to import a vtt file directly into the Custoplayer tag."),(0,i.kt)("li",{parentName:"ul"},"You will have to host the vtt file somewhere and then set the src attribute to the url of the vtt file."),(0,i.kt)("li",{parentName:"ul"},"You will also have to set the ",(0,i.kt)("inlineCode",{parentName:"li"},'crossOrigin="anonymous"')," to avoid CORS issues."),(0,i.kt)("li",{parentName:"ul"},"A quick free way to host the vtt file is to make a GitHub gist and then use the raw url of the gist as the src attribute.",(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://maestra.ai/blogs/how-to-generate-url-for-srt-vtt-files"},"Here is a tutorial"))))))))))),(0,i.kt)("h2",{id:"example"},"Example"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx"},"import React from 'react';\nimport { Custoplayer } from 'custoplayer';\n\nexport default function ThumbnailExample() {\n return (\n \n \n \n );\n}\n")))}P.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/6cf79a87.b7a6e072.js.LICENSE.txt b/assets/js/6cf79a87.ca772683.js.LICENSE.txt similarity index 100% rename from assets/js/6cf79a87.b7a6e072.js.LICENSE.txt rename to assets/js/6cf79a87.ca772683.js.LICENSE.txt diff --git a/assets/js/bdd177e8.30ddad5b.js b/assets/js/bdd177e8.30ddad5b.js new file mode 100644 index 0000000..ac856b4 --- /dev/null +++ b/assets/js/bdd177e8.30ddad5b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[916],{6271:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>o,default:()=>s,frontMatter:()=>l,metadata:()=>i,toc:()=>m});var r=n(7896),a=(n(2784),n(876));const l={},o="Volume",i={unversionedId:"components/Volume",id:"components/Volume",title:"Volume",description:"To add volume controls to your video you need a volumeButton and a volumeBar.",source:"@site/docs/components/Volume.mdx",sourceDirName:"components",slug:"/components/Volume",permalink:"/Custoplayer/components/Volume",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Time",permalink:"/Custoplayer/components/Time"},next:{title:"Fullscreen Buttons",permalink:"/Custoplayer/components/fullscreen-buttons"}},u={},m=[{value:"Volume Button 1",id:"volume-button-1",level:2},{value:"Volume Bar 1",id:"volume-bar-1",level:2},{value:"Volume Bar 2",id:"volume-bar-2",level:2},{value:"Usage",id:"usage",level:2},{value:"Properties",id:"properties",level:2}],d={toc:m},p="wrapper";function s(e){let{components:t,...n}=e;return(0,a.kt)(p,(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"volume"},"Volume"),(0,a.kt)("p",null,"To add volume controls to your video you need a volumeButton and a volumeBar."),(0,a.kt)("p",null,"There is one volumeButton component"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("inlineCode",{parentName:"li"},'"volumeButton1"'))),(0,a.kt)("h2",{id:"volume-button-1"},"Volume Button 1"),(0,a.kt)("svg",{width:"48",height:"48",viewBox:"0 0 32 32",fill:"none",stroke:"currentColor",xmlns:"http://www.w3.org/2000/svg"},(0,a.kt)("path",{d:"M4 13C4 12.4477 4.44772 12 5 12H9V20H5C4.44772 20 4 19.5523 4 19V13Z",stroke:"currentColor","stroke-width":"2"}),(0,a.kt)("path",{d:"M9 13L15 7","stroke-width":"2"}),(0,a.kt)("path",{d:"M15 7V26","stroke-width":"2","stroke-linecap":"round"}),(0,a.kt)("path",{d:"M9 20L15 26","stroke-width":"2"}),(0,a.kt)("path",{d:"M24 9.5C27.0185 11.7059 31.2444 17.7941 24 24.5",stroke:"currentColor","stroke-width":"2"}),(0,a.kt)("path",{d:"M19.5 13.5C21 14.6667 23.1 17.7 19.5 20.5","stroke-width":"2"})),(0,a.kt)("p",null,"There are two volumeBar components"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("inlineCode",{parentName:"li"},'"volumeBar1"')),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("inlineCode",{parentName:"li"},'"volumeBar2"'))),(0,a.kt)("h2",{id:"volume-bar-1"},"Volume Bar 1"),(0,a.kt)("video",{width:"min(10rem, 100%)",autoPlay:!0,loop:!0,controls:!0,src:"https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs%2Fvolume%2FvolumeBar1-demo.mp4"}),(0,a.kt)("h2",{id:"volume-bar-2"},"Volume Bar 2"),(0,a.kt)("video",{width:"min(10rem, 100%)",autoPlay:!0,loop:!0,controls:!0,src:"https://custoplayer.nyc3.digitaloceanspaces.com/docs%2Fvolume%2FvolumeBar2-demo.mp4"}),(0,a.kt)("h2",{id:"usage"},"Usage"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},'item1: {\n id: \'volumeButton1\',\n barId: \'volumeBar2\',\n volumeColor: \'#a4c3f5\',\n barColor: "white",\n buttonColor: "#a4c3f5",\n scrubberColor: "#a4c3f5",\n scrubberBorderColor: "white"\n},\n')),(0,a.kt)("h2",{id:"properties"},"Properties"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Property Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Required"),(0,a.kt)("th",{parentName:"tr",align:null},"Accepted Values"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"),(0,a.kt)("th",{parentName:"tr",align:null},"Default"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"id"),(0,a.kt)("td",{parentName:"tr",align:null},"Yes"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},'"volumeButton1"')),(0,a.kt)("td",{parentName:"tr",align:null},"Used to render a volumeButton."),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"undefined"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"buttonColor"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},"Any hex or rgb color code"),(0,a.kt)("td",{parentName:"tr",align:null},"Changes the color of the volumeButton."),(0,a.kt)("td",{parentName:"tr",align:null},"Calculated from controlsBar barColor property")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"barId"),(0,a.kt)("td",{parentName:"tr",align:null},"No (No volumeBar will be shown if this is undefined)"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},'"volumeBar1"')," or ",(0,a.kt)("inlineCode",{parentName:"td"},'"volumeBar2"')),(0,a.kt)("td",{parentName:"tr",align:null},"volumeBar1 is horizontal and volumeBar2 is vertical."),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"undefined"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"barColor"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},"Any hex or rgb color code"),(0,a.kt)("td",{parentName:"tr",align:null},"Changes the background color of the volumeBar."),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},'"white"'))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"volumeColor"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},"Any hex or rgb color code"),(0,a.kt)("td",{parentName:"tr",align:null},"Changes the color of the volumeBar volume progress."),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},'"#4ab860"'))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"scrubberColor"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},"Any hex or rgb color code"),(0,a.kt)("td",{parentName:"tr",align:null},"Changes the color of the volumeBar scrubber (the circle at the end of the volume progress)."),(0,a.kt)("td",{parentName:"tr",align:null},"Same as the ",(0,a.kt)("inlineCode",{parentName:"td"},"volumeColor")," if defined or ",(0,a.kt)("inlineCode",{parentName:"td"},'"white"'))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"scrubberBorderColor"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},"Any hex or rgb color code"),(0,a.kt)("td",{parentName:"tr",align:null},"Changes the border color of the volumeBar scrubber."),(0,a.kt)("td",{parentName:"tr",align:null},"A lightened version of the ",(0,a.kt)("inlineCode",{parentName:"td"},"scrubberColor"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"hideOnMobile"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"true")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"false")),(0,a.kt)("td",{parentName:"tr",align:null},"Hides the volumeButton component when the video's width is less than 768px"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"false"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"marginLeft"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},"A string css value for the marginLeft property, ex: '10px', '10rem'"),(0,a.kt)("td",{parentName:"tr",align:null},"Changes the left margin of the volumeButton"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},'"0"'))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"marginRight"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},"A string css value for the marginRight property, ex: '10px', '10rem'"),(0,a.kt)("td",{parentName:"tr",align:null},"Changes the left margin of the volumeButton"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},'"0"'))))))}s.isMDXComponent=!0},876:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>k});var r=n(2784);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=r.createContext({}),m=function(e){var t=r.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},d=function(e){var t=m(e.components);return r.createElement(u.Provider,{value:t},e.children)},p="mdxType",s={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},c=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,u=e.parentName,d=i(e,["components","mdxType","originalType","parentName"]),p=m(n),c=a,k=p["".concat(u,".").concat(c)]||p[c]||s[c]||l;return n?r.createElement(k,o(o({ref:t},d),{},{components:n})):r.createElement(k,o({ref:t},d))}));function k(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,o=new Array(l);o[0]=c;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i[p]="string"==typeof e?e:a,o[1]=i;for(var m=2;m{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>o,default:()=>s,frontMatter:()=>l,metadata:()=>i,toc:()=>m});var r=n(7896),a=(n(2784),n(876));const l={},o="Volume",i={unversionedId:"components/Volume",id:"components/Volume",title:"Volume",description:"To add volume controls to your video you need a volumeButton and a volumeBar.",source:"@site/docs/components/Volume.mdx",sourceDirName:"components",slug:"/components/Volume",permalink:"/Custoplayer/components/Volume",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Time",permalink:"/Custoplayer/components/Time"},next:{title:"Fullscreen Buttons",permalink:"/Custoplayer/components/fullscreen-buttons"}},u={},m=[{value:"Volume Button 1",id:"volume-button-1",level:2},{value:"Volume Bar 1",id:"volume-bar-1",level:2},{value:"Volume Bar 2",id:"volume-bar-2",level:2},{value:"Usage",id:"usage",level:2},{value:"Properties",id:"properties",level:2}],d={toc:m},p="wrapper";function s(e){let{components:t,...n}=e;return(0,a.kt)(p,(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"volume"},"Volume"),(0,a.kt)("p",null,"To add volume controls to your video you need a volumeButton and a volumeBar."),(0,a.kt)("p",null,"There is one volumeButton component"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("inlineCode",{parentName:"li"},'"volumeButton1"'))),(0,a.kt)("h2",{id:"volume-button-1"},"Volume Button 1"),(0,a.kt)("svg",{width:"48",height:"48",viewBox:"0 0 32 32",fill:"none",stroke:"currentColor",xmlns:"http://www.w3.org/2000/svg"},(0,a.kt)("path",{d:"M4 13C4 12.4477 4.44772 12 5 12H9V20H5C4.44772 20 4 19.5523 4 19V13Z",stroke:"currentColor","stroke-width":"2"}),(0,a.kt)("path",{d:"M9 13L15 7","stroke-width":"2"}),(0,a.kt)("path",{d:"M15 7V26","stroke-width":"2","stroke-linecap":"round"}),(0,a.kt)("path",{d:"M9 20L15 26","stroke-width":"2"}),(0,a.kt)("path",{d:"M24 9.5C27.0185 11.7059 31.2444 17.7941 24 24.5",stroke:"currentColor","stroke-width":"2"}),(0,a.kt)("path",{d:"M19.5 13.5C21 14.6667 23.1 17.7 19.5 20.5","stroke-width":"2"})),(0,a.kt)("p",null,"There are two volumeBar components"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("inlineCode",{parentName:"li"},'"volumeBar1"')),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("inlineCode",{parentName:"li"},'"volumeBar2"'))),(0,a.kt)("h2",{id:"volume-bar-1"},"Volume Bar 1"),(0,a.kt)("video",{width:"min(10rem, 100%)",autoPlay:!0,loop:!0,src:"https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs%2Fvolume%2FvolumeBar1-demo.mp4"}),(0,a.kt)("h2",{id:"volume-bar-2"},"Volume Bar 2"),(0,a.kt)("video",{width:"min(10rem, 100%)",autoPlay:!0,loop:!0,src:"https://custoplayer.nyc3.digitaloceanspaces.com/docs%2Fvolume%2FvolumeBar2-demo.mp4"}),(0,a.kt)("h2",{id:"usage"},"Usage"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},'item1: {\n id: \'volumeButton1\',\n barId: \'volumeBar2\',\n volumeColor: \'#a4c3f5\',\n barColor: "white",\n buttonColor: "#a4c3f5",\n scrubberColor: "#a4c3f5",\n scrubberBorderColor: "white"\n},\n')),(0,a.kt)("h2",{id:"properties"},"Properties"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Property Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Required"),(0,a.kt)("th",{parentName:"tr",align:null},"Accepted Values"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"),(0,a.kt)("th",{parentName:"tr",align:null},"Default"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"id"),(0,a.kt)("td",{parentName:"tr",align:null},"Yes"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},'"volumeButton1"')),(0,a.kt)("td",{parentName:"tr",align:null},"Used to render a volumeButton."),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"undefined"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"buttonColor"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},"Any hex or rgb color code"),(0,a.kt)("td",{parentName:"tr",align:null},"Changes the color of the volumeButton."),(0,a.kt)("td",{parentName:"tr",align:null},"Calculated from controlsBar barColor property")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"barId"),(0,a.kt)("td",{parentName:"tr",align:null},"No (No volumeBar will be shown if this is undefined)"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},'"volumeBar1"')," or ",(0,a.kt)("inlineCode",{parentName:"td"},'"volumeBar2"')),(0,a.kt)("td",{parentName:"tr",align:null},"volumeBar1 is horizontal and volumeBar2 is vertical."),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"undefined"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"barColor"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},"Any hex or rgb color code"),(0,a.kt)("td",{parentName:"tr",align:null},"Changes the background color of the volumeBar."),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},'"white"'))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"volumeColor"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},"Any hex or rgb color code"),(0,a.kt)("td",{parentName:"tr",align:null},"Changes the color of the volumeBar volume progress."),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},'"#4ab860"'))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"scrubberColor"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},"Any hex or rgb color code"),(0,a.kt)("td",{parentName:"tr",align:null},"Changes the color of the volumeBar scrubber (the circle at the end of the volume progress)."),(0,a.kt)("td",{parentName:"tr",align:null},"Same as the ",(0,a.kt)("inlineCode",{parentName:"td"},"volumeColor")," if defined or ",(0,a.kt)("inlineCode",{parentName:"td"},'"white"'))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"scrubberBorderColor"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},"Any hex or rgb color code"),(0,a.kt)("td",{parentName:"tr",align:null},"Changes the border color of the volumeBar scrubber."),(0,a.kt)("td",{parentName:"tr",align:null},"A lightened version of the ",(0,a.kt)("inlineCode",{parentName:"td"},"scrubberColor"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"hideOnMobile"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"true")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"false")),(0,a.kt)("td",{parentName:"tr",align:null},"Hides the volumeButton component when the video's width is less than 768px"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"false"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"marginLeft"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},"A string css value for the marginLeft property, ex: '10px', '10rem'"),(0,a.kt)("td",{parentName:"tr",align:null},"Changes the left margin of the volumeButton"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},'"0"'))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"marginRight"),(0,a.kt)("td",{parentName:"tr",align:null},"No"),(0,a.kt)("td",{parentName:"tr",align:null},"A string css value for the marginRight property, ex: '10px', '10rem'"),(0,a.kt)("td",{parentName:"tr",align:null},"Changes the left margin of the volumeButton"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},'"0"'))))))}s.isMDXComponent=!0},876:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>k});var r=n(2784);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=r.createContext({}),m=function(e){var t=r.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},d=function(e){var t=m(e.components);return r.createElement(u.Provider,{value:t},e.children)},p="mdxType",s={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},c=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,u=e.parentName,d=i(e,["components","mdxType","originalType","parentName"]),p=m(n),c=a,k=p["".concat(u,".").concat(c)]||p[c]||s[c]||l;return n?r.createElement(k,o(o({ref:t},d),{},{components:n})):r.createElement(k,o({ref:t},d))}));function k(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,o=new Array(l);o[0]=c;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i[p]="string"==typeof e?e:a,o[1]=i;for(var m=2;m{"use strict";var e,t,r,a,d,o={},f={};function c(e){var t=f[e];if(void 0!==t)return t.exports;var r=f[e]={id:e,loaded:!1,exports:{}};return o[e].call(r.exports,r,r.exports,c),r.loaded=!0,r.exports}c.m=o,c.c=f,e=[],c.O=(t,r,a,d)=>{if(!r){var o=1/0;for(i=0;i=d)&&Object.keys(c.O).every((e=>c.O[e](r[n])))?r.splice(n--,1):(f=!1,d0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[r,a,d]},c.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return c.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,c.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var d=Object.create(null);c.r(d);var o={};t=t||[null,r({}),r([]),r(r)];for(var f=2&a&&e;"object"==typeof f&&!~t.indexOf(f);f=r(f))Object.getOwnPropertyNames(f).forEach((t=>o[t]=()=>e[t]));return o.default=()=>e,c.d(d,o),d},c.d=(e,t)=>{for(var r in t)c.o(t,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},c.f={},c.e=e=>Promise.all(Object.keys(c.f).reduce(((t,r)=>(c.f[r](e,t),t)),[])),c.u=e=>"assets/js/"+({53:"935f2afb",63:"9951fc4d",79:"525d8e6d",85:"1f391b9e",123:"a9f085b9",218:"4d26aaa5",243:"02e3a03e",286:"a874854d",351:"11622df9",360:"72a427b3",372:"1db64337",414:"393be207",477:"6cf79a87",514:"1be78505",531:"31dfdf1a",542:"e974c2ca",617:"afc1c92d",670:"a26d6ac3",699:"c179f821",796:"31ac4d97",817:"14eb3368",835:"1b92342f",916:"bdd177e8",918:"17896441",920:"1a4e3797",995:"6cddd07e"}[e]||e)+"."+{53:"e22a8840",63:"baf24899",79:"0a3090c3",85:"a624c9b9",109:"f4879b1b",123:"c1512861",216:"9c911953",217:"1d4906ed",218:"f97739a2",243:"f6e34c60",286:"827a49c7",351:"6b5998d8",360:"cf1dd3b3",372:"2638c2ea",414:"35f81d5d",477:"b7a6e072",514:"04ed710b",531:"6bdced8c",542:"65f23380",617:"24dcaf97",670:"5a54fb1a",699:"fc8fcb7d",752:"79c2e1de",796:"794decb1",802:"24d3406a",817:"c062136d",829:"ea731169",835:"560d4266",878:"6f80cfd6",916:"72846ebd",918:"eb829f37",920:"7846a6f1",995:"fffbec9b"}[e]+".js",c.miniCssF=e=>{},c.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},d="docs:",c.l=(e,t,r,o)=>{if(a[e])a[e].push(t);else{var f,n;if(void 0!==r)for(var b=document.getElementsByTagName("script"),i=0;i{f.onerror=f.onload=null,clearTimeout(s);var d=a[e];if(delete a[e],f.parentNode&&f.parentNode.removeChild(f),d&&d.forEach((e=>e(r))),t)return t(r)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:f}),12e4);f.onerror=l.bind(null,f.onerror),f.onload=l.bind(null,f.onload),n&&document.head.appendChild(f)}},c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.p="/Custoplayer/",c.gca=function(e){return e={17896441:"918","935f2afb":"53","9951fc4d":"63","525d8e6d":"79","1f391b9e":"85",a9f085b9:"123","4d26aaa5":"218","02e3a03e":"243",a874854d:"286","11622df9":"351","72a427b3":"360","1db64337":"372","393be207":"414","6cf79a87":"477","1be78505":"514","31dfdf1a":"531",e974c2ca:"542",afc1c92d:"617",a26d6ac3:"670",c179f821:"699","31ac4d97":"796","14eb3368":"817","1b92342f":"835",bdd177e8:"916","1a4e3797":"920","6cddd07e":"995"}[e]||e,c.p+c.u(e)},(()=>{var e={303:0,532:0};c.f.j=(t,r)=>{var a=c.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else if(/^(303|532)$/.test(t))e[t]=0;else{var d=new Promise(((r,d)=>a=e[t]=[r,d]));r.push(a[2]=d);var o=c.p+c.u(t),f=new Error;c.l(o,(r=>{if(c.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var d=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;f.message="Loading chunk "+t+" failed.\n("+d+": "+o+")",f.name="ChunkLoadError",f.type=d,f.request=o,a[1](f)}}),"chunk-"+t,t)}},c.O.j=t=>0===e[t];var t=(t,r)=>{var a,d,o=r[0],f=r[1],n=r[2],b=0;if(o.some((t=>0!==e[t]))){for(a in f)c.o(f,a)&&(c.m[a]=f[a]);if(n)var i=n(c)}for(t&&t(r);b{"use strict";var e,t,r,a,d,o={},f={};function c(e){var t=f[e];if(void 0!==t)return t.exports;var r=f[e]={id:e,loaded:!1,exports:{}};return o[e].call(r.exports,r,r.exports,c),r.loaded=!0,r.exports}c.m=o,c.c=f,e=[],c.O=(t,r,a,d)=>{if(!r){var o=1/0;for(i=0;i=d)&&Object.keys(c.O).every((e=>c.O[e](r[n])))?r.splice(n--,1):(f=!1,d0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[r,a,d]},c.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return c.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,c.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var d=Object.create(null);c.r(d);var o={};t=t||[null,r({}),r([]),r(r)];for(var f=2&a&&e;"object"==typeof f&&!~t.indexOf(f);f=r(f))Object.getOwnPropertyNames(f).forEach((t=>o[t]=()=>e[t]));return o.default=()=>e,c.d(d,o),d},c.d=(e,t)=>{for(var r in t)c.o(t,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},c.f={},c.e=e=>Promise.all(Object.keys(c.f).reduce(((t,r)=>(c.f[r](e,t),t)),[])),c.u=e=>"assets/js/"+({53:"935f2afb",63:"9951fc4d",79:"525d8e6d",85:"1f391b9e",123:"a9f085b9",218:"4d26aaa5",243:"02e3a03e",286:"a874854d",351:"11622df9",360:"72a427b3",372:"1db64337",414:"393be207",477:"6cf79a87",514:"1be78505",531:"31dfdf1a",542:"e974c2ca",617:"afc1c92d",670:"a26d6ac3",699:"c179f821",796:"31ac4d97",817:"14eb3368",835:"1b92342f",916:"bdd177e8",918:"17896441",920:"1a4e3797",995:"6cddd07e"}[e]||e)+"."+{53:"e22a8840",63:"baf24899",79:"0a3090c3",85:"a624c9b9",109:"f4879b1b",123:"c1512861",216:"9c911953",217:"1d4906ed",218:"f97739a2",243:"f6e34c60",286:"827a49c7",351:"6b5998d8",360:"cf1dd3b3",372:"2638c2ea",414:"35f81d5d",477:"ca772683",514:"04ed710b",531:"6bdced8c",542:"65f23380",617:"24dcaf97",670:"5a54fb1a",699:"fc8fcb7d",752:"79c2e1de",796:"794decb1",802:"24d3406a",817:"c062136d",829:"ea731169",835:"560d4266",878:"6f80cfd6",916:"30ddad5b",918:"eb829f37",920:"7846a6f1",995:"fffbec9b"}[e]+".js",c.miniCssF=e=>{},c.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},d="docs:",c.l=(e,t,r,o)=>{if(a[e])a[e].push(t);else{var f,n;if(void 0!==r)for(var b=document.getElementsByTagName("script"),i=0;i{f.onerror=f.onload=null,clearTimeout(s);var d=a[e];if(delete a[e],f.parentNode&&f.parentNode.removeChild(f),d&&d.forEach((e=>e(r))),t)return t(r)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:f}),12e4);f.onerror=l.bind(null,f.onerror),f.onload=l.bind(null,f.onload),n&&document.head.appendChild(f)}},c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.p="/Custoplayer/",c.gca=function(e){return e={17896441:"918","935f2afb":"53","9951fc4d":"63","525d8e6d":"79","1f391b9e":"85",a9f085b9:"123","4d26aaa5":"218","02e3a03e":"243",a874854d:"286","11622df9":"351","72a427b3":"360","1db64337":"372","393be207":"414","6cf79a87":"477","1be78505":"514","31dfdf1a":"531",e974c2ca:"542",afc1c92d:"617",a26d6ac3:"670",c179f821:"699","31ac4d97":"796","14eb3368":"817","1b92342f":"835",bdd177e8:"916","1a4e3797":"920","6cddd07e":"995"}[e]||e,c.p+c.u(e)},(()=>{var e={303:0,532:0};c.f.j=(t,r)=>{var a=c.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else if(/^(303|532)$/.test(t))e[t]=0;else{var d=new Promise(((r,d)=>a=e[t]=[r,d]));r.push(a[2]=d);var o=c.p+c.u(t),f=new Error;c.l(o,(r=>{if(c.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var d=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;f.message="Loading chunk "+t+" failed.\n("+d+": "+o+")",f.name="ChunkLoadError",f.type=d,f.request=o,a[1](f)}}),"chunk-"+t,t)}},c.O.j=t=>0===e[t];var t=(t,r)=>{var a,d,o=r[0],f=r[1],n=r[2],b=0;if(o.some((t=>0!==e[t]))){for(a in f)c.o(f,a)&&(c.m[a]=f[a]);if(n)var i=n(c)}for(t&&t(r);b Components | Custoplayer - +
- + \ No newline at end of file diff --git a/components/Time/index.html b/components/Time/index.html index d8212cb..ec73afa 100644 --- a/components/Time/index.html +++ b/components/Time/index.html @@ -4,13 +4,13 @@ Time | Custoplayer - +

Time

There are 2 time components

  1. "currentTime"
  2. "duration"

⌛️ Current Time​

The currentTime component shows the current time of the video.

Usage​

values={{
  item1: {
    id: 'currentTime',
    textColor: '#b7cef4',
  },
}}

Current Time Properties​

Property NameRequiredAccepted ValuesDescriptionDefault
idYes"currentTime"Used to render the currentTime.undefined
textColorNoAny hex or rgb color codeChanges the text color of currentTime.Calculated from controlsBar barColor property
hideOnMobileNotrue or falseHides the currentTime component when the video's width is less than 768pxfalse
marginLeftNoA string css value for the marginLeft property, ex: '10px', '10rem'Changes the left margin of the currentTime"0"
marginRightNoA string css value for the marginRight property, ex: '10px', '10rem'Changes the left margin of the currentTime"0"

⏳ Duration​

The duration component shows the duration of the video.

Usage​

values={{
  item1: {
    id: 'duration',
    textColor: '#b7cef4',
  },
}}

Duration Properties​

Property NameRequiredAccepted ValuesDescriptionDefault
idYes"duration"Used to render the duration.undefined
textColorNoAny hex or rgb color codeChanges the text color of duration.Calculated from controlsBar barColor property
hideOnMobileNotrue or falseHides the duration component when the video's width is less than 768pxfalse
marginLeftNoA string css value for the marginLeft property, ex: '10px', '10rem'Changes the left margin of the duration"0"
marginRightNoA string css value for the marginRight property, ex: '10px', '10rem'Changes the left margin of the duration"0"
- + \ No newline at end of file diff --git a/components/Volume/index.html b/components/Volume/index.html index eedd647..a40cda1 100644 --- a/components/Volume/index.html +++ b/components/Volume/index.html @@ -4,13 +4,13 @@ Volume | Custoplayer - +
-

Volume

To add volume controls to your video you need a volumeButton and a volumeBar.

There is one volumeButton component

  1. "volumeButton1"

Volume Button 1​

There are two volumeBar components

  1. "volumeBar1"
  2. "volumeBar2"

Volume Bar 1​

Volume Bar 2​

Usage​

item1: {
  id: 'volumeButton1',
  barId: 'volumeBar2',
  volumeColor: '#a4c3f5',
  barColor: "white",
  buttonColor: "#a4c3f5",
  scrubberColor: "#a4c3f5",
  scrubberBorderColor: "white"
},

Properties​

Property NameRequiredAccepted ValuesDescriptionDefault
idYes"volumeButton1"Used to render a volumeButton.undefined
buttonColorNoAny hex or rgb color codeChanges the color of the volumeButton.Calculated from controlsBar barColor property
barIdNo (No volumeBar will be shown if this is undefined)"volumeBar1" or "volumeBar2"volumeBar1 is horizontal and volumeBar2 is vertical.undefined
barColorNoAny hex or rgb color codeChanges the background color of the volumeBar."white"
volumeColorNoAny hex or rgb color codeChanges the color of the volumeBar volume progress."#4ab860"
scrubberColorNoAny hex or rgb color codeChanges the color of the volumeBar scrubber (the circle at the end of the volume progress).Same as the volumeColor if defined or "white"
scrubberBorderColorNoAny hex or rgb color codeChanges the border color of the volumeBar scrubber.A lightened version of the scrubberColor
hideOnMobileNotrue or falseHides the volumeButton component when the video's width is less than 768pxfalse
marginLeftNoA string css value for the marginLeft property, ex: '10px', '10rem'Changes the left margin of the volumeButton"0"
marginRightNoA string css value for the marginRight property, ex: '10px', '10rem'Changes the left margin of the volumeButton"0"
- +

Volume

To add volume controls to your video you need a volumeButton and a volumeBar.

There is one volumeButton component

  1. "volumeButton1"

Volume Button 1​

There are two volumeBar components

  1. "volumeBar1"
  2. "volumeBar2"

Volume Bar 1​

Volume Bar 2​

Usage​

item1: {
  id: 'volumeButton1',
  barId: 'volumeBar2',
  volumeColor: '#a4c3f5',
  barColor: "white",
  buttonColor: "#a4c3f5",
  scrubberColor: "#a4c3f5",
  scrubberBorderColor: "white"
},

Properties​

Property NameRequiredAccepted ValuesDescriptionDefault
idYes"volumeButton1"Used to render a volumeButton.undefined
buttonColorNoAny hex or rgb color codeChanges the color of the volumeButton.Calculated from controlsBar barColor property
barIdNo (No volumeBar will be shown if this is undefined)"volumeBar1" or "volumeBar2"volumeBar1 is horizontal and volumeBar2 is vertical.undefined
barColorNoAny hex or rgb color codeChanges the background color of the volumeBar."white"
volumeColorNoAny hex or rgb color codeChanges the color of the volumeBar volume progress."#4ab860"
scrubberColorNoAny hex or rgb color codeChanges the color of the volumeBar scrubber (the circle at the end of the volume progress).Same as the volumeColor if defined or "white"
scrubberBorderColorNoAny hex or rgb color codeChanges the border color of the volumeBar scrubber.A lightened version of the scrubberColor
hideOnMobileNotrue or falseHides the volumeButton component when the video's width is less than 768pxfalse
marginLeftNoA string css value for the marginLeft property, ex: '10px', '10rem'Changes the left margin of the volumeButton"0"
marginRightNoA string css value for the marginRight property, ex: '10px', '10rem'Changes the left margin of the volumeButton"0"
+ \ No newline at end of file diff --git a/components/fullscreen-buttons/index.html b/components/fullscreen-buttons/index.html index 017bf33..bb59d9e 100644 --- a/components/fullscreen-buttons/index.html +++ b/components/fullscreen-buttons/index.html @@ -4,13 +4,13 @@ Fullscreen Buttons | Custoplayer - +

Fullscreen Buttons

There are 2 fullscreen components

  1. "fullscreenButton1"
  2. "fullscreenButton2"

Fullscreen Button 1​

Fullscreen Button 2​

Usage​

item1: {
  id: 'fullscreenButton1',
  buttonColor: '#b7cef4',
},

Properties​

Property NameRequiredAccepted ValuesDescriptionDefault
idYes"fullscreenButton1" or "fullscreenButton2"Used to render a fullscreenButton.undefined
buttonColorNoAny hex or rgb color codeChanges the color of the fullscreenButton.Calculated from controlsBar barColor property
hideOnMobileNotrue or falseHides the fullscreenButton component when the video's width is less than 768pxfalse
marginLeftNoA string css value for the marginLeft property, ex: '10px', '10rem'Changes the left margin of the fullscreenButton"0"
marginRightNoA string css value for the marginRight property, ex: '10px', '10rem'Changes the left margin of the fullscreenButton"0"
- + \ No newline at end of file diff --git a/components/play-buttons/index.html b/components/play-buttons/index.html index 665b2ee..5bf2973 100644 --- a/components/play-buttons/index.html +++ b/components/play-buttons/index.html @@ -4,13 +4,13 @@ Play Buttons | Custoplayer - +

Play Buttons

There are currently two playButtons

  1. "playButton1"
  2. "playButton2"

Play Button 1​

Play Button 2​

Usage​

item1: {
  id: 'playButton1',
  buttonColor: '#a4c3f5',
},

Properties​

Property NameRequiredAccepted ValuesDescriptionDefault
idYes"playButton1" or "playButton2"Used to render a playButton.undefined
buttonColorNoAny hex or rgb color codeChanges the color of the playButton.Calculated from controlsBar barColor property
hideOnMobileNotrue or falseHides the playButton component when the video's width is less than 768pxfalse
marginLeftNoA string css value for the marginLeft property, ex: '10px', '10rem'Changes the left margin of the playButton"0"
marginRightNoA string css value for the marginRight property, ex: '10px', '10rem'Changes the left margin of the playButton"0"
- + \ No newline at end of file diff --git a/components/progress-bars/index.html b/components/progress-bars/index.html index d247711..8fbf2a3 100644 --- a/components/progress-bars/index.html +++ b/components/progress-bars/index.html @@ -4,13 +4,13 @@ Progress Bars | Custoplayer - +

Progress Bars

There are currently three progress bar components

  1. "progressBar1"
  2. "progressBar2"
  3. "progressBar3"

Demo of progressBar1​

Demo of progressBar2​

Demo of progressBar3​

Progress Bars Usage​

item1: {
  id: 'progressBar1',
  progressColor: '#a4c3f5',
  scrubberColor: "#a4c3f5",
  scrubberBorderColor: "white",
  bufferedColor: "#B7B7B7"
}

Progress Bar Properties​

Property NameRequiredAccepted ValuesDescriptionDefault
idYes"progressBar1", "progressBar2", "progressBar3"Used to render a progressBar.undefined
barColorNoAny hex or rgb color codeChanges the background color of the progressBar."white"
progressColorNoAny hex or rgb color codeChanges the color of the progress in the progressBar"#4ab860"
scrubberColorNoAny hex or rgb color codeChanges the color of the progressBar scrubber (the circle at the end of the progress).Same as the progressColor if defined or "white"
scrubberBorderColorNoAny hex or rgb color codeChanges the border color of the progressBar scrubber.A lightened version of the scrubberColor
bufferedColorNoAny hex or rgb color codeChanges the color of the buffered part of the progressBar (the content that is already loaded)."rgba(0,0,0,0.4)"
hideOnMobileNotrue or falseHides the progressBar component when the video's width is less than 768pxfalse
marginLeftNoA string css value for the marginLeft property, ex: '10px', '10rem'Changes the left margin of the progressBar"0"
marginRightNoA string css value for the marginRight property, ex: '10px', '10rem'Changes the left margin of the progressBar"0"

Top Progress Bar

Instead of putting the progress bar in the controls bar, it can be put above the controls bar. This is a good way of saving space in the controls bar.

Demo of topProgressBar​

Top Progress Bar Usage​

topProgressBar: {
  id: 'progressBar1',
  progressColor: '#a4c3f5',
  scrubberColor: "#a4c3f5",
  scrubberBorderColor: "white",
  bufferedColor: "#B7B7B7"
}

The topProgressBar has the same properties as seen in the table above.

- + \ No newline at end of file diff --git a/components/settings-button/index.html b/components/settings-button/index.html index 4334be9..c235254 100644 --- a/components/settings-button/index.html +++ b/components/settings-button/index.html @@ -4,13 +4,13 @@ Settings Button | Custoplayer - +

Settings Button

There is currently one settingsButton

  1. "settingsButton1"

Usage​

item1: {
  id: 'settingsButton1',
  buttonColor: '#a7c957',
  settingsMenuColor: '#386641',
  settingsMenuOrientation:"left",
  options: {
    playbackSpeed: [0.25, 0.5, 1, 1.25, 1.5, 2],
  }
},

Settings Button 1​

Properties​

Property NameRequiredAccepted ValuesDescriptionDefault
idYes"settingsButton1"Used to render a settingsButton.undefined
optionsNo (Yes if you want to see a menu show up on click of the button)accepted values for options propertySee BelowNone
buttonColorNoAny hex or rgb color codeChanges the color of the settingsButton.Calculated from controlsBar barColor property
settingsMenuColorNoAny hex or rgb color codeChanges the backgroundColor of the settingsMenu.Calculated from controlsBar barColor property
settingsMenuOrientationNo"left", "middle", or "right"Changes the position of the settingsMenu relative to the settingsButton"middle"
hideOnMobileNotrue or falseHides the settingsButton component when the video's width is less than 768pxfalse
marginLeftNoA string css value for the marginLeft property, ex: '10px', '10rem'Changes the left margin of the settingsButton"0"
marginRightNoA string css value for the marginRight property, ex: '10px', '10rem'Changes the left margin of the settingsButton"0"

Options Property​

While this property is not required for the settings button to show, clicking on it will do nothing unless the options property is defined.

The property accepts an object that has three available key names, subtitles, quality, and playbackSpeed.

Subtitles​

Setting subtitles to true:

options: {
  subtitles: true,
}

The code above will automatically show the subtitles option if the video is configured with a vtt file.

For more information on how to do this check out this page

Image of the subtitles button

Quality​

options: {
  quality: true,
}

the code above will automatically show the quality option if the video is configured with <source> tags.

For more information on how to do this check out this page

Image of the subtitles button

Playback Speed​

options: {
  playbackSpeed: [0.25, 0.5, 1, 1.25, 1.5, 2],
}

This will automatically show the playbackSpeed option if configured as above.

Image of the subtitles button

settingsMenuOrientation Example​

  • settingsMenuOrientation:"left"
    • Image of the setttings menu with a left orientation
  • settingsMenuOrientation:"middle"
    • Image of the setttings menu with a middle orientation
  • settingsMenuOrientation:"right"
    • Image of the setttings menu with a orientation
- + \ No newline at end of file diff --git a/contributing/index.html b/contributing/index.html index f3a7bf5..d8ab341 100644 --- a/contributing/index.html +++ b/contributing/index.html @@ -4,13 +4,13 @@ Contributing | Custoplayer - +

Contributing

Development​

If you would like to contribute by fixing an open issue or developing a new feature you can use this suggested workflow:

  • First fork the repository,
    • Create a new feature branch off the main branch.
  • Second, install the dependencies of the monorepo:
yarn install
  • Build the library:
cd packages/custoplayer && yarn build
  • Run the development server of the test project:
yarn dev

  • Open http://localhost:3000 with your browser to see the result.

  • Make and commit desired changes.

    • Make sure to run yarn lint --fix before commiting to ensure that there are no linting errors.

  • Finally, submit a pr from your forked branch to the Custoplayer main branch

Testing​

Run Unit Tests​

cd packages/custoplayer && yarn cy:open-unit

If you want to run the unit tests headlessly do:

yarn cy:run-unit

Run e2e Tests​

cd packages/custoplayer && yarn cy:open-e2e

If you want to run the end to end tests headlessly do:

yarn cy:run-e2e
- + \ No newline at end of file diff --git a/index.html b/index.html index c33e1ee..f895b2c 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,13 @@ Custoplayer | Custoplayer - +

Custoplayer

A npm Package to Create Customizable Video Players​

- + \ No newline at end of file diff --git a/license/index.html b/license/index.html index 34afac7..6eab5da 100644 --- a/license/index.html +++ b/license/index.html @@ -4,7 +4,7 @@ License | Custoplayer - + @@ -22,7 +22,7 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

- + \ No newline at end of file diff --git a/markdown-page/index.html b/markdown-page/index.html index 22b5c64..7103476 100644 --- a/markdown-page/index.html +++ b/markdown-page/index.html @@ -4,13 +4,13 @@ Markdown page example | Custoplayer - +

Markdown page example

You don't need React to write simple standalone pages.

- + \ No newline at end of file diff --git a/other-properties/index.html b/other-properties/index.html index b4caf4d..6675ef4 100644 --- a/other-properties/index.html +++ b/other-properties/index.html @@ -4,13 +4,13 @@ Other Properties | Custoplayer - +

Other Properties

focusColor​

The focusColor property is used to set the color of the focus square that appears when the user tabs on a clickable field.

Usage​

import React from 'react';
import { Custoplayer } from 'custoplayer';

function CustoplayerExample() {
  return (
    <Custoplayer
      src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/compressed-custoplayer-demo.mp4'
      values={{
        item1: {
          id: "playButton1"
        },
        focusColor='#77a4ed'
      }}
    />
  );
}

export default CustoplayerExample;
- + \ No newline at end of file diff --git a/overview/index.html b/overview/index.html index ec7d4a1..fc4d7d0 100644 --- a/overview/index.html +++ b/overview/index.html @@ -4,13 +4,13 @@ Overview | Custoplayer - +

Overview

🔧 General Properties​

The Custoplayer component is compatible with all video attributes. This means that you should be able to attach common video attributes/events like src, preload, onTimeUpdate, and onPlay to the Custoplayer component with no problem.

Controls Bar​

The controls bar is the bar that contains all the Item Properties as shown with the green box in the image below:

A dark rectangular bar that contains all the video player items in it.

Usage:​

values={{
  controlsBar: {
    barColor: "rgba(28, 28, 28, 0.85)",
    animate: 'movement'
  },
}}

Controls Bar Properties​

Property NameRequiredAccepted ValuesDescriptionDefault
barColorNoAny hex or rgb color codeChanges the background color of the controlsBar'rgba(28, 28, 28, 0.7)'
animateNo"opacity" or "movement"Changes the animation of the controlsBar when the video is hovered. Setting animate to "opacity" will do a simple fade in animation. Setting animate to "movement" will animate the controls bar from bottom -> up"opacity"
  • The barColor property changes the color of the controlsBar.
    • This also changes the default backgroundColor for the previewToolip.
    • Accepts any hex or rgb color code.
  • The animate property changes how the controlsBar animates.
    • Accepts values of "opacity" and "movement".
      • Setting animate to "opacity" will do a simple fade in animation.
      • Setting animate to "movement" will animate the controls bar from bottom -> up

📓 Item Properties​

Item properties used to customize the video player are all put in the values property.

To understand how to customize a video player there is some general vocab which is helpful to understand as seen in the image below:

An annotated image of the item containers and item components of the video player.

In the above image there are 6 green rectangles. Each rectangle represents a container where you can place a component. The above video uses 6 items, but the package supports a total of 7 items.

The are many components that can be put in a item container. Some of them are "fullscreenButton2", "volumeButton1", "currentTime", and "progressBar1". Components can be customized using property names that are unique to the component. For example, both the "currentTime" and "duration" components have a textColor property.

If a component name is suffixed with a number like 1 or 2, that means that the component has numerous types. For example, there are two fullscreenButton components, "fullscreenButton1" & "fullscreenButton2".

You can go to the bottom of the quick start page to see the above example in action with its code.

To learn more about components you can go to the components page

- + \ No newline at end of file diff --git a/preview-tooltip/index.html b/preview-tooltip/index.html index 07d65ba..b98e46e 100644 --- a/preview-tooltip/index.html +++ b/preview-tooltip/index.html @@ -4,14 +4,14 @@ Preview Tooltip | Custoplayer - +

Preview Tooltip

The preview tooltip is the tooltip that shows up when hovering -over the progress bar.

Usage​

previewTooltip: {
  id: 'text'
},

Properties​

Property NameRequiredAccepted ValuesDescriptionDefault
idYes"text", "thumbnail", or "textAndThumbnail"Used to render a previewTooltip.undefined
atlasImageNoA url to an imageThe image that stores all of the preview thumbnails.undefined

Different Id Values​

Text​

Setting id: "text" will render a tooltip with the text of the current time when the progress bar is hovered or dragged. The atlasImage property is not needed to make this work.

Demo of id: "text"​

Thumbnail​

Setting id: "thumbnail" will render a tooltip with the preview thumbnail of the current time when the progress bar is hovered or dragged. The atlasImage property is needed to make this work.

Two files are required to configure the thumbnail preview tooltip:

  1. The atlasImage jpg file
  2. The thumbnail VTT file

What is an atlasImage?​

The image atlas is a single image that contains all of the preview thumbnails in a grid. Below is an example of how an image atlas looks like.

A sample image atlas file

You can see that the image atlas jpg file contains thumbnails of the video at different times.

What is a thumbnail VTT file?​

The thumbnail vtt file contains the time and position of each thumbnail in the image atlas. Below is an example of how a thumbnail vtt file looks like where the image atlas is called thumbs.jpg. In the below example the thumbs.jpg atlas only has 10 images.

WEBVTT

1
00:00:00.000 --> 00:00:04.685
thumbs.jpg#xywh=0,0,125,70

2
00:00:04.685 --> 00:00:09.370
thumbs.jpg#xywh=125,0,125,70

3
00:00:09.370 --> 00:00:14.056
thumbs.jpg#xywh=250,0,125,70

4
00:00:14.056 --> 00:00:18.741
thumbs.jpg#xywh=375,0,125,70

5
00:00:18.741 --> 00:00:23.426
thumbs.jpg#xywh=500,0,125,70

6
00:00:23.426 --> 00:00:28.111
thumbs.jpg#xywh=625,0,125,70

7
00:00:28.111 --> 00:00:32.796
thumbs.jpg#xywh=750,0,125,70

8
00:00:32.796 --> 00:00:37.481
thumbs.jpg#xywh=875,0,125,70

9
00:00:37.481 --> 00:00:42.167
thumbs.jpg#xywh=1000,0,125,70

10
00:00:42.167 --> 00:00:46.852
thumbs.jpg#xywh=1125,0,125,70

How to generate an image atlas and thumbnail VTT file?​

Luckily these files can be automatically generated. All you have to do is:

  1. Upload your video in the Generate Preview Thumbnail Files section.
  2. Click the "Generate Thumbnails" button
  3. Click the "Download Thumbnail VTT" button and the "Download Thumbnail Atlas" button.

Clicking these buttons should download the jpg file and vtt file for your video.

Demo of id: "thumbnail"​

Demo of id: "textAndThumbnail"​

Generate Preview Thumbnail Files​

Configuring The Files​

There are two steps required to configure the thumbnail preview tooltip:

  1. Set the atlasImage property to the thumbs.jpg file that you downloaded.
  2. Add a track tag as a child to the Custoplayer tag.
    • It should have attributes of:
      • kind="metadata"
      • id="custoplayer-thumbnails".
      • src="Url that hosts thumbnail vtt file"
        • You won't be able to import a vtt file directly into the Custoplayer tag.
        • You will have to host the vtt file somewhere and then set the src attribute to the url of the vtt file.
        • You will also have to set the crossOrigin="anonymous" to avoid CORS issues.
        • A quick free way to host the vtt file is to make a GitHub gist and then use the raw url of the gist as the src attribute.

Example​

import React from 'react';
import { Custoplayer } from 'custoplayer';

export default function ThumbnailExample() {
  return (
    <Custoplayer
      src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-1080.mp4'
      crossOrigin='anonymous'
      values={{
        previewTooltip: {
          id: 'thumbnail',
          atlasImage:
            'https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/thumbs.jpg',
        },
        controlsBar: {
          barColor: '#78a8ecd3',
        },
        item1: {
          id: 'progressBar1',
          progressColor: 'orange',
        },
      }}
    >
      <track
        kind='metadata'
        id='custoplayer-thumbnails'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/thumbs.vtt'
      />
    </Custoplayer>
  );
}
- +over the progress bar.

Usage​

previewTooltip: {
  id: 'text'
},

Properties​

Property NameRequiredAccepted ValuesDescriptionDefault
idYes"text", "thumbnail", or "textAndThumbnail"Used to render a previewTooltip.undefined
atlasImageNoA url to an imageThe image that stores all of the preview thumbnails.undefined

Different Id Values​

Text​

Setting id: "text" will render a tooltip with the text of the current time when the progress bar is hovered or dragged. The atlasImage property is not needed to make this work.

Demo of id: "text"​

Thumbnail​

Setting id: "thumbnail" will render a tooltip with the preview thumbnail of the current time when the progress bar is hovered or dragged. The atlasImage property is needed to make this work.

Two files are required to configure the thumbnail preview tooltip:

  1. The atlasImage jpg file
  2. The thumbnail VTT file

What is an atlasImage?​

The image atlas is a single image that contains all of the preview thumbnails in a grid. Below is an example of how an image atlas looks like.

A sample image atlas file

You can see that the image atlas jpg file contains thumbnails of the video at different times.

What is a thumbnail VTT file?​

The thumbnail vtt file contains the time and position of each thumbnail in the image atlas. Below is an example of how a thumbnail vtt file looks like where the image atlas is called thumbs.jpg. In the below example the thumbs.jpg atlas only has 10 images.

WEBVTT

1
00:00:00.000 --> 00:00:04.685
thumbs.jpg#xywh=0,0,125,70

2
00:00:04.685 --> 00:00:09.370
thumbs.jpg#xywh=125,0,125,70

3
00:00:09.370 --> 00:00:14.056
thumbs.jpg#xywh=250,0,125,70

4
00:00:14.056 --> 00:00:18.741
thumbs.jpg#xywh=375,0,125,70

5
00:00:18.741 --> 00:00:23.426
thumbs.jpg#xywh=500,0,125,70

6
00:00:23.426 --> 00:00:28.111
thumbs.jpg#xywh=625,0,125,70

7
00:00:28.111 --> 00:00:32.796
thumbs.jpg#xywh=750,0,125,70

8
00:00:32.796 --> 00:00:37.481
thumbs.jpg#xywh=875,0,125,70

9
00:00:37.481 --> 00:00:42.167
thumbs.jpg#xywh=1000,0,125,70

10
00:00:42.167 --> 00:00:46.852
thumbs.jpg#xywh=1125,0,125,70

How to generate an image atlas and thumbnail VTT file?​

Luckily these files can be automatically generated. All you have to do is:

  1. Upload your video in the Generate Preview Thumbnail Files section.
  2. Click the "Generate Thumbnails" button
  3. Click the "Download Thumbnail VTT" button and the "Download Thumbnail Atlas" button.

Clicking these buttons should download the jpg file and vtt file for your video.

Demo of id: "thumbnail"​

Demo of id: "textAndThumbnail"​

Generate Preview Thumbnail Files​

Configuring The Files​

There are two steps required to configure the thumbnail preview tooltip:

  1. Set the atlasImage property to the thumbs.jpg file that you downloaded.
  2. Add a track tag as a child to the Custoplayer tag.
    • It should have attributes of:
      • kind="metadata"
      • id="custoplayer-thumbnails".
      • src="Url that hosts thumbnail vtt file"
        • You won't be able to import a vtt file directly into the Custoplayer tag.
        • You will have to host the vtt file somewhere and then set the src attribute to the url of the vtt file.
        • You will also have to set the crossOrigin="anonymous" to avoid CORS issues.
        • A quick free way to host the vtt file is to make a GitHub gist and then use the raw url of the gist as the src attribute.

Example​

import React from 'react';
import { Custoplayer } from 'custoplayer';

export default function ThumbnailExample() {
  return (
    <Custoplayer
      src='https://video-people.nyc3.cdn.digitaloceanspaces.com/cutegeekie/786295c6-b133-41a9-8917-cf66ea6b3665'
      crossOrigin='anonymous'
      values={{
        previewTooltip: {
          id: 'thumbnail',
          atlasImage:
            'https://personal-tasks.nyc3.cdn.digitaloceanspaces.com/testPerson/thumbs.jpg',
        },
        controlsBar: {
          barColor: '#78a8ecd3',
        },
        item1: {
          id: 'progressBar1',
          progressColor: 'orange',
        },
      }}
    >
      <track
        kind='metadata'
        id='custoplayer-thumbnails'
        src='https://personal-tasks.nyc3.cdn.digitaloceanspaces.com/testPerson/thumbs.vtt'
      />
    </Custoplayer>
  );
}
+ \ No newline at end of file diff --git a/quick-start/index.html b/quick-start/index.html index 7ddbfac..74c06ba 100644 --- a/quick-start/index.html +++ b/quick-start/index.html @@ -4,13 +4,13 @@ Quick Start | Custoplayer - +

Quick Start

Custoplayer is a React.js npm package that allows for the quick creation of beautiful video players.

📦 Installation​

npm​

npm install custoplayer

yarn​

yarn add custoplayer

🧑‍💻 Usage​

Using a preset​

All the different preset names

  • midnightBlue
  • fieryRed
  • milkyWhite
  • grassyGreen
  • mint

The specific values for each preset can be found here

import React from 'react';
import { Custoplayer, midnightBlue } from 'custoplayer';

function CustoplayerExample() {
  return (
    <Custoplayer
      poster='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/custoplayer-demo-poster.png'
      src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-1080.mp4'
      values={midnightBlue}
    />
  );
}

export default CustoplayerExample;

A fully custom configuration​

import React from 'react';
import { Custoplayer } from 'custoplayer';

function CustoplayerExample() {
  return (
    <Custoplayer
      poster='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/custoplayer-demo-poster.png'
      src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-1080.mp4'
      values={{
        previewTooltip: {
          id: 'text',
        },
        controlsBar: {
          animate: 'movement',
          barColor: 'rgba(28, 28, 28, 0.85)',
        },
        item1: {
          id: 'playButton1',
          buttonColor: '#b7cef4',
        },
        item2: {
          id: 'volumeButton1',
          barId: 'volumeBar2',
          volumeColor: '#a4c3f5',
          buttonColor: '#a4c3f5',
        },
        item3: {
          id: 'currentTime',
          textColor: '#b7cef4',
        },
        item4: {
          id: 'progressBar1',
          progressColor: '#a4c3f5',
        },
        item5: {
          id: 'duration',
          textColor: '#b7cef4',
        },
        item6: {
          id: 'settingsButton1',
          buttonColor: '#a4c3f5',
          settingsMenuColor: '#a4c3f5c8',
          settingsMenuOrientation: 'left',
          options: {
            playbackSpeed: [0.25, 0.5, 1, 1.5, 2],
          },
        },
        item7: {
          id: 'fullscreenButton1',
          buttonColor: '#b7cef4',
        },
      }}
    />
  );
}

export default CustoplayerExample;

🎥 Example​

- + \ No newline at end of file diff --git a/search/index.html b/search/index.html index 5fe5525..20a08d6 100644 --- a/search/index.html +++ b/search/index.html @@ -4,13 +4,13 @@ Search the documentation | Custoplayer - +

Search the documentation

- + \ No newline at end of file diff --git a/setting-up-subtitles/index.html b/setting-up-subtitles/index.html index db5c652..b949d54 100644 --- a/setting-up-subtitles/index.html +++ b/setting-up-subtitles/index.html @@ -4,13 +4,13 @@ Setting Up Subtitles | Custoplayer - +

Setting Up Subtitles

Configuring subtitles using Custoplayer is quite easy.

There are two steps:

  1. Add a track tag as a child to the Custoplayer tag
    • It should have a label set and have kind='metadata'
    • The src attribute should be set to a url that contains a vtt file.
      • This is where the subtitles info is held
      • The crossOrigin property will probably have to be set to "anonymous" for this to work
  2. Add a settingsButton1 with the options object having subtitles: true

Code Example​

import React from 'react';
import { Custoplayer } from 'custoplayer';

export default function SubtitlesExample() {
  return (
    <Custoplayer
      src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-1080.mp4'
      crossOrigin='anonymous'
      values={{
        controlsBar: {
          animate: 'movement',
          barColor: 'rgba(28, 28, 28, 0.85)',
        },
        item1: {
          id: 'settingsButton1',
          settingsMenuOrientation: 'right',
          options: {
            subtitles: true,
          },
        },
      }}
    >
      <track
        label='English'
        kind='metadata'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-subtitles/English.vtt'
        srcLang='en'
        default
      />
      <track
        label='Spanish'
        kind='metadata'
        srcLang='es'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-subtitles/Spanish.vtt'
      />
    </Custoplayer>
  );
}

Video Example​

- + \ No newline at end of file diff --git a/setting-up-video-qualities/index.html b/setting-up-video-qualities/index.html index 38efc9b..2b4a822 100644 --- a/setting-up-video-qualities/index.html +++ b/setting-up-video-qualities/index.html @@ -4,13 +4,13 @@ Setting Up Video Qualities | Custoplayer - +

Setting Up Video Qualities

To utilize different video qualities (144p, 240p, 360p, 480p, 720p, 1080p, 1440p, 2160p) there are two required steps.

  1. Add a source tag to the Custoplayer tag
    • The src attribute should be set to the video
    • The id of the source tag should be set to custoplayer-{your-quality}
      • For example, the 1080p source should have an id of custoplayer-1080
  2. Add a settingsButton1 with the options object having quality: true

Code Example​

import React from 'react';
import { Custoplayer } from 'custoplayer';

export default function QualityExample() {
  return (
    <Custoplayer
      crossOrigin='anonymous'
      values={{
        controlsBar: {
          animate: 'movement',
          barColor: 'rgba(28, 28, 28, 0.85)',
        },
        item1: {
          id: 'settingsButton1',
          settingsMenuOrientation: 'right',
          options: {
            quality: true,
          },
        },
        item2: {
          id: 'progressBar3',
        },
      }}
    >
      <source
        id='custoplayer-1080'
        type='video/mp4'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-1080.mp4'
      />

      <source
        id='custoplayer-720'
        type='video/mp4'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-720.mp4'
      />

      <source
        id='custoplayer-480'
        type='video/mp4'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-480.mp4'
      />
    </Custoplayer>
  );
}

Video Example​

- + \ No newline at end of file