https://vimejs.com/assets/js/b73d9455.a200056b.js

1"use strict";(self.webpackChunk_vime_docs=self.webpackChunk_vime_docs||[]).push([[5558],{3905:function(e,t,r){r.d(t,{Zo:function(){return p},kt:function(){return d}});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),c=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,l=e.originalType,s=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),m=c(r),d=a,v=m["".concat(s,".").concat(d)]||m[d]||u[d]||l;return r?n.createElement(v,o(o({ref:t},p),{},{components:r})):n.createElement(v,o({ref:t},p))}));function d(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=r.length,o=new Array(l);o[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:a,o[1]=i;for(var c=2;c<l;c++)o[c]=r[c];return n.createElement.apply(null,o)}return n.createElement.apply(null,r)}m.displayName="MDXCreateElement"},8215:function(e,t,r){var n=r(7294);t.Z=function(e){var t=e.children,r=e.hidden,a=e.className;return n.createElement("div",{role:"tabpanel",hidden:r,className:a},t)}},1395:function(e,t,r){r.d(t,{Z:function(){return p}});var n=r(7294),a=r(944),l=r(6010),o="tabItem_1uMI",i="tabItemActive_2DSg";var s=37,c=39;var p=function(e){var t=e.lazy,r=e.block,p=e.defaultValue,u=e.values,m=e.groupId,d=e.className,v=(0,a.Z)(),f=v.tabGroupChoices,h=v.setTabGroupChoices,y=(0,n.useState)(p),g=y[0],b=y[1],k=n.Children.toArray(e.children),x=[];if(null!=m){var P=f[m];null!=P&&P!==g&&u.some((function(e){return e.value===P}))&&b(P)}var N=function(e){var t=e.currentTarget,r=x.indexOf(t),n=u[r].value;b(n),null!=m&&(h(m,n),setTimeout((function(){var e,r,n,a,l,o,s,c;(e=t.getBoundingClientRect(),r=e.top,n=e.left,a=e.bottom,l=e.right,o=window,s=o.innerHeight,c=o.innerWidth,r>=0&&l<=c&&a<=s&&n>=0)||(t.scrollIntoView({block:"center",behavior:"smooth"}),t.classList.add(i),setTimeout((function(){return t.classList.remove(i)}),2e3))}),150))},w=function(e){var t,r;switch(e.keyCode){case c:var n=x.indexOf(e.target)+1;r=x[n]||x[0];break;case s:var a=x.indexOf(e.target)-1;r=x[a]||x[x.length-1]}null==(t=r)||t.focus()};return n.createElement("div",{className:"tabs-container"},n.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,l.default)("tabs",{"tabs--block":r},d)},u.map((function(e){var t=e.value,r=e.label;return n.createElement("li",{role:"tab",tabIndex:g===t?0:-1,"aria-selected":g===t,className:(0,l.default)("tabs__item",o,{"tabs__item--active":g===t}),key:t,ref:function(e){return x.push(e)},onKeyDown:w,onFocus:N,onClick:N},r)}))),t?(0,n.cloneElement)(k.filter((function(e){return e.props.value===g}))[0],{className:"margin-vert--md"}):n.createElement("div",{className:"margin-vert--md"},k.map((function(e,t){return(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==g})}))))}},9443:function(e,t,r){var n=(0,r(7294).createContext)(void 0);t.Z=n},944:function(e,t,r){var n=r(7294),a=r(9443);t.Z=function(){var e=(0,n.useContext)(a.Z);if(null==e)throw new Error("`useUserPreferencesContext` is used outside of `Layout` Component.");return e}},5818:function(e,t,r){r.r(t),r.d(t,{frontMatter:function(){return c},metadata:function(){return p},toc:function(){return u},default:function(){return d}});

1var n=r(7462),a=r(3366),l=(r(7294),r(3905)),o=r(1395),i=r(8215),s=["components"],c={title:"Player",sidebar_label:"Player"},p={unversionedId:"getting-started/player",id:"getting-started/player",isDocsHomePage:!1,title:"Player",description:"Everything starts with the player component, which wraps",source:"@site/docs/getting-started/player.md",sourceDirName:"getting-started",slug:"/getting-started/player",permalink:"/getting-started/player",editUrl:"https://github.com/vime-js/vime/edit/master/docs/docs/getting-started/player.md",version:"current",sidebar_label:"Player",frontMatter:{title:"Player",sidebar_label:"Player"},sidebar:"docs",previous:{title:"Installation",permalink:"/getting-started/installation"},next:{title:"Providers",permalink:"/getting-started/providers"}},u=[],m={toc:u};function d(e){var t=e.components,r=(0,a.Z)(e,s);return(0,l.kt)("wrapper",(0,n.Z)({},m,r,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,"Everything starts with the ",(0,l.kt)("a",{parentName:"p",href:"../components/core/player"},"player component"),", which wraps\nall ",(0,l.kt)("a",{parentName:"p",href:"./providers"},"providers"),", plugins (coming soon) and ",(0,l.kt)("a",{parentName:"p",href:"./ui"},"UI")," components together. It's responsible\nfor holding the state of the player such as whether to autoplay or show controls, and the state\nof media playback such as the current time or duration. This is the primary component\nyou will interact with similar to the ",(0,l.kt)("inlineCode",{parentName:"p"},"audio")," and ",(0,l.kt)("inlineCode",{parentName:"p"},"video")," HTML5 elements, and for simple needs you wont\nneed to go much further than this."),(0,l.kt)("p",null,'Let\'s setup the "shell" of the player so we can start laying out the rest of it:'),(0,l.kt)(o.Z,{groupId:"framework",defaultValue:"html",values:[{label:"HTML",value:"html"},{label:"React",value:"react"},{label:"Vue",value:"vue"},{label:"Svelte",value:"svelte"},{label:"Stencil",value:"stencil"},{label:"Angular",value:"angular"}],mdxType:"Tabs"},(0,l.kt)(i.Z,{value:"html",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="player.html"',title:'"player.html"'},"<vm-player>\n  \x3c!-- Provider component is placed here. --\x3e\n\n  <vm-ui>\n    \x3c!-- UI components are placed here. --\x3e\n  </vm-ui>\n</vm-player>\n"))),(0,l.kt)(i.Z,{value:"react",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-tsx",metastring:'title="Player.tsx"',title:'"Player.tsx"'},"import React from 'react';\nimport { Player, Ui } from '@vime/react';\n\nfunction Player() {\n  return (\n    <Player>\n      {/* Provider component is placed here. */}\n\n      <Ui>{/* UI components are placed here. */}</Ui>\n    </Player>\n  );\n}\n"))),(0,l.kt)(i.Z,{value:"vue",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="Player.vue"',title:'"Player.vue"'},"<template>\n  <Player>\n    \x3c!-- Provider component is placed here. --\x3e\n\n    <Ui>\n      \x3c!-- UI components are placed here. --\x3e\n    </Ui>\n  </Player>\n</template>\n\n<script>\n  import { Player, Ui } from '@vime/vue';\n\n  export default {\n    components: {\n      Player,\n      Ui,\n    },\n  };\n<\/script>\n"))),(0,l.kt)(i.Z,{value:"svelte",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="Player.svelte"',title:'"Player.svelte"'},"<Player>\n  \x3c!-- Provider component is placed here. --\x3e\n\n  <Ui>\n    \x3c!-- UI components are placed here. --\x3e\n  </Ui>\n</Player>\n\n<script lang=\"ts\">\n  import { Player, Ui } from '@vime/svelte';\n<\/script>\n"))),(0,l.kt)(i.Z,{value:"stencil",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-tsx",metastring:'title="player.tsx"',title:'"player.tsx"'},"class Player {\n  // ...\n\n  render() {\n    return (\n      <vm-player>\n        {/* Provider component is placed here. */}\n\n        <vm-ui>{/* UI components are placed here. */}</vm-ui>\n      </vm-player>\n    );\n  }\n}\n"))),(0,l.kt)(i.Z,{value:"angular",mdxType:"TabItem"}

1,(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="player.html"',title:'"player.html"'},"<vm-player>\n  \x3c!-- Provider component is placed here. --\x3e\n\n  <vm-ui>\n    \x3c!-- UI components are placed here. --\x3e\n  </vm-ui>\n</vm-player>\n")))),(0,l.kt)("p",null,"All the player properties, methods, events and CSS properties are listed and demonstrated in the\n",(0,l.kt)("a",{parentName:"p",href:"../components/core/player"},"player component API")," document, so feel free to dig through and see what power\nlays ahead. There are also simple examples setup on our GitHub so you can get a feel of the player\nquickly:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"https://github.com/vime-js/vime/tree/master/examples/html"},"HTML")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"https://github.com/vime-js/vime/tree/master/examples/react"},"React")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"https://github.com/vime-js/vime/tree/master/examples/vue"},"Vue")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"https://github.com/vime-js/vime/tree/master/examples/angular"},"Angular")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"https://github.com/vime-js/vime/tree/master/examples/svelte"},"Svelte")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"https://github.com/vime-js/vime/tree/master/examples/stencil"},"Stencil"))),(0,l.kt)("p",null,"\ud83d\ude82 ","\xa0","Let's move onto ",(0,l.kt)("a",{parentName:"p",href:"./providers"},"setting up our provider!")))}d.isMDXComponent=!0},6010:function(e,t,r){function n(e){var t,r,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(r=n(e[t]))&&(a&&(a+=" "),a+=r);else for(t in e)e[t]&&(a&&(a+=" "),a+=t);return a}function a(){for(var e,t,r=0,a="";r<arguments.length;)(e=arguments[r++])&&(t=n(e))&&(a&&(a+=" "),a+=t);return a}r.r(t),r.d(t,{default:function(){return a}})}}]);