1"use strict";(self.webpackChunk_vime_docs=self.webpackChunk_vime_docs||[]).push([[5230],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return d}});var r=n(7294);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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var m=r.createContext({}),c=function(e){var t=r.useContext(m),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},u=function(e){var t=c(e.components);return r.createElement(m.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},p=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,m=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),p=c(n),d=a,v=p["".concat(m,".").concat(d)]||p[d]||s[d]||l;return n?r.createElement(v,o(o({ref:t},u),{},{components:n})):r.createElement(v,o({ref:t},u))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,o=new Array(l);o[0]=p;var i={};for(var m in t)hasOwnProperty.call(t,m)&&(i[m]=t[m]);i.originalType=e,i.mdxType="string"==typeof e?e:a,o[1]=i;for(var c=2;c<l;c++)o[c]=n[c];return r.createElement.apply(null,o)}return r.createElement.apply(null,n)}p.displayName="MDXCreateElement"},8215:function(e,t,n){var r=n(7294);t.Z=function(e){var t=e.children,n=e.hidden,a=e.className;return r.createElement("div",{role:"tabpanel",hidden:n,className:a},t)}},1395:function(e,t,n){n.d(t,{Z:function(){return u}});var r=n(7294),a=n(944),l=n(6010),o="tabItem_1uMI",i="tabItemActive_2DSg";var m=37,c=39;var u=function(e){var t=e.lazy,n=e.block,u=e.defaultValue,s=e.values,p=e.groupId,d=e.className,v=(0,a.Z)(),f=v.tabGroupChoices,k=v.setTabGroupChoices,h=(0,r.useState)(u),x=h[0],b=h[1],g=r.Children.toArray(e.children),N=[];if(null!=p){var y=f[p];null!=y&&y!==x&&s.some((function(e){return e.value===y}))&&b(y)}var C=function(e){var t=e.currentTarget,n=N.indexOf(t),r=s[n].value;b(r),null!=p&&(k(p,r),setTimeout((function(){var e,n,r,a,l,o,m,c;(e=t.getBoundingClientRect(),n=e.top,r=e.left,a=e.bottom,l=e.right,o=window,m=o.innerHeight,c=o.innerWidth,n>=0&&l<=c&&a<=m&&r>=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,n;switch(e.keyCode){case c:var r=N.indexOf(e.target)+1;n=N[r]||N[0];break;case m:var a=N.indexOf(e.target)-1;n=N[a]||N[N.length-1]}null==(t=n)||t.focus()};return r.createElement("div",{className:"tabs-container"},r.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,l.default)("tabs",{"tabs--block":n},d)},s.map((function(e){var t=e.value,n=e.label;return r.createElement("li",{role:"tab",tabIndex:x===t?0:-1,"aria-selected":x===t,className:(0,l.default)("tabs__item",o,{"tabs__item--active":x===t}),key:t,ref:function(e){return N.push(e)},onKeyDown:w,onFocus:C,onClick:C},n)}))),t?(0,r.cloneElement)(g.filter((function(e){return e.props.value===x}))[0],{className:"margin-vert--md"}):r.createElement("div",{className:"margin-vert--md"},g.map((function(e,t){return(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==x})}))))}},9443:function(e,t,n){var r=(0,n(7294).createContext)(void 0);t.Z=r},944:function(e,t,n){var r=n(7294),a=n(9443);t.Z=function(){var e=(0,r.useContext)(a.Z);if(null==e)throw new Error("`useUserPreferencesContext` is used outside of `Layout` Component.");return e}},5454:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return c},metadata:function(){return u},toc:function(){return s},default:function(){return d}});var r=n(7462),a=n(3366),l=(n(7294),n(3905)),o=n(1395),i=n(8215),m=["components"],c={title:"vime-default-control
1s",sidebar_label:"DefaultControls"},u={unversionedId:"components/ui/controls/default-controls",id:"version-4.x/components/ui/controls/default-controls",isDocsHomePage:!1,title:"vime-default-controls",description:"Default set of controls for when you're in a hurry. The controls displayed depend on whether",source:"@site/versioned_docs/version-4.x/components/ui/controls/default-controls.md",sourceDirName:"components/ui/controls",slug:"/components/ui/controls/default-controls",permalink:"/4.x/components/ui/controls/default-controls",editUrl:"https://github.com/vime-js/vime/edit/master/docs/versioned_docs/version-4.x/components/ui/controls/default-controls.md",version:"4.x",sidebar_label:"DefaultControls",frontMatter:{title:"vime-default-controls",sidebar_label:"DefaultControls"},sidebar:"version-4.x/docs",previous:{title:"vime-controls",permalink:"/4.x/components/ui/controls/controls"},next:{title:"vime-fullscreen-control",permalink:"/4.x/components/ui/controls/fullscreen-control"}},s=[{value:"Usage",id:"usage",children:[]},{value:"Properties",id:"properties",children:[]},{value:"Dependencies",id:"dependencies",children:[{value:"Used by",id:"used-by",children:[]},{value:"Depends on",id:"depends-on",children:[]},{value:"Graph",id:"graph",children:[]}]}],p={toc:s};function d(e){var t=e.components,n=(0,a.Z)(e,m);return(0,l.kt)("wrapper",(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,"Default set of controls for when you're in a hurry. The controls displayed depend on whether\nthe media is audio/video/live, and whether the device is mobile/desktop. See\n",(0,l.kt)("a",{parentName:"p",href:"/4.x/components/ui/default-ui"},(0,l.kt)("inlineCode",{parentName:"a"},"vime-default-ui"))," for visuals."),(0,l.kt)("h2",{id:"usage"},"Usage"),(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:"{5}","{5}":!0},'<vime-player>\n \x3c!-- ... --\x3e\n <vime-ui>\n \x3c!-- ... --\x3e\n <vime-default-controls active-duration="2750"></vime-default-controls>\n </vime-ui>\n</vime-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:"{2,10}","{2,10}":!0},"import React from 'react';\nimport { VimePlayer, VimeUi, VimeDefaultControls } from '@vime/react';\n\nfunction Example() {\n return (\n <VimePlayer>\n {/* ... */}\n <VimeUi>\n {/* ... */}\n <VimeDefaultControls activeDuration={3200} />\n </VimeUi>\n </VimePlayer>\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:'{6,12,18} title="example.vue"',"{6,12,18}":!0,title:'"example.vue"'},"<template>\n <VimePlayer>\n \x3c!-- ... --\x3e\n <VimeUi>\n \x3c!-- ... --\x3e\n <VimeDefaultControls :activeDuration=\"3200\" />\n </VimeUi>\n </VimePlayer>\n</template>\n\n<script>\n import { VimePlayer, VimeUi, VimeDefaultControls } from '@vime/vue';\n\n export default {\n components: {\n VimePlayer,\n VimeUi,\n VimeDefaultControls,\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-tsx",metastring:"{5}","{5}":!0},"<VimePlayer>\n \x3c!-- ... --\x3e\n <VimeUi>\n \x3c!-- ... --\x3e\n <VimeDefaultControls activeDuration={3200} />\n </VimeUi>\n</VimePlayer>\n")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:"{2}","{2}":!0},"<script lang=\"ts\">\n import { VimePlayer, VimeUi, VimeDefaultControls } 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:"{8}","{8}":!0},"class Example {\n render() {\n return (\n <vime-player>\n {/* ... */}\n <vime-ui>\n {/* ... */}
1\n <vime-default-controls activeDuration={3200} />\n </vime-ui>\n </vime-player>\n );\n }\n}\n"))),(0,l.kt)(i.Z,{value:"angular",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'{5} title="example.html"',"{5}":!0,title:'"example.html"'},'<vime-player>\n \x3c!-- ... --\x3e\n <vime-ui>\n \x3c!-- ... --\x3e\n <vime-default-controls [active-duration]="2750"></vime-default-controls>\n </vime-ui>\n</vime-player>\n')))),(0,l.kt)("h2",{id:"properties"},"Properties"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Property"),(0,l.kt)("th",{parentName:"tr",align:null},"Attribute"),(0,l.kt)("th",{parentName:"tr",align:null},"Description"),(0,l.kt)("th",{parentName:"tr",align:null},"Type"),(0,l.kt)("th",{parentName:"tr",align:null},"Default"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"activeDuration")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"active-duration")),(0,l.kt)("td",{parentName:"tr",align:null},"The length in milliseconds that the controls are active for before fading out. Audio players are not effected by this prop."),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"number")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"2750"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"hideOnMouseLeave")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"hide-on-mouse-leave")),(0,l.kt)("td",{parentName:"tr",align:null},"Whether the controls should hide when the mouse leaves the player. Audio players are not effected by this prop."),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"boolean")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"false"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"hideWhenPaused")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"hide-when-paused")),(0,l.kt)("td",{parentName:"tr",align:null},"Whether the controls should show/hide when paused. Audio players are not effected by this prop."),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"boolean")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"false"))),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"waitForPlaybackStart")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"wait-for-playback-start")),(0,l.kt)("td",{parentName:"tr",align:null},"Whether the controls should wait for playback to start before being shown. Audio players are not effected by this prop."),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"boolean")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"false"))))),(0,l.kt)("h2",{id:"dependencies"},"Dependencies"),(0,l.kt)("h3",{id:"used-by"},"Used by"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/default-ui"},"vime-default-ui"))),(0,l.kt)("h3",{id:"depends-on"},"Depends on"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/controls/controls"},"vime-controls")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/controls/playback-control"},"vime-playback-control")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/controls/volume-control"},"vime-volume-control")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/time/current-time"},"vime-current-time")),(0,l.kt)("li",{parentName:"ul"}
1,(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/controls/control-spacer"},"vime-control-spacer")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/controls/scrubber-control"},"vime-scrubber-control")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/live-indicator"},"vime-live-indicator")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/time/end-time"},"vime-end-time")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/controls/settings-control"},"vime-settings-control")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/controls/control-group"},"vime-control-group")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/controls/fullscreen-control"},"vime-fullscreen-control")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/scrim"},"vime-scrim")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/controls/caption-control"},"vime-caption-control")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/time/time-progress"},"vime-time-progress")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/4.x/components/ui/controls/pip-control"},"vime-pip-control"))),(0,l.kt)("h3",{id:"graph"},"Graph"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-mermaid"},"graph TD;\n vime-default-controls --\x3e vime-controls\n vime-default-controls --\x3e vime-playback-control\n vime-default-controls --\x3e vime-volume-control\n vime-default-controls --\x3e vime-current-time\n vime-default-controls --\x3e vime-control-spacer\n vime-default-controls --\x3e vime-scrubber-control\n vime-default-controls --\x3e vime-live-indicator\n vime-default-controls --\x3e vime-end-time\n vime-default-controls --\x3e vime-settings-control\n vime-default-controls --\x3e vime-control-group\n vime-default-controls --\x3e vime-fullscreen-control\n vime-default-controls --\x3e vime-scrim\n vime-default-controls --\x3e vime-caption-control\n vime-default-controls --\x3e vime-time-progress\n vime-default-controls --\x3e vime-pip-control\n vime-playback-control --\x3e vime-control\n vime-playback-control --\x3e vime-icon\n vime-playback-control --\x3e vime-tooltip\n vime-volume-control --\x3e vime-mute-control\n vime-volume-control --\x3e vime-slider\n vime-mute-control --\x3e vime-control\n vime-mute-control --\x3e vime-icon\n vime-mute-control --\x3e vime-tooltip\n vime-current-time --\x3e vime-time\n vime-scrubber-control --\x3e vime-slider\n vime-scrubber-control --\x3e vime-tooltip\n vime-end-time --\x3e vime-time\n vime-settings-control --\x3e vime-control\n vime-settings-control --\x3e vime-icon\n vime-settings-control --\x3e vime-tooltip\n vime-fullscreen-control --\x3e vime-control\n vime-fullscreen-control --\x3e vime-icon\n vime-fullscreen-control --\x3e vime-tooltip\n vime-caption-control --\x3e vime-control\n vime-caption-control --\x3e vime-icon\n vime-caption-control --\x3e vime-tooltip\n vime-time-progress --\x3e vime-current-time\n vime-time-progress --\x3e vime-end-time\n vime-pip-control --\x3e vime-control\n vime-pip-control --\x3e vime-icon\n vime-pip-control --\x3e vime-tooltip\n vime-default-ui --\x3e vime-default-controls\n style vime-default-controls fill:#f9f,stroke:#333,stroke-width:4px\n")),(0,l.kt)("hr",null),(0,l.kt)("p",null,(0,l.kt)("em",{parentName:"p"},"Built with ",(0,l.kt)("a",{parentName:"em",href:"https://stenciljs.com/"},"StencilJS"))))}d.isMDXComponent=!0},6010:function(e,t,n){function r(e){var t,n,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]&&(n=r(e[t]))&&(a&&(a+=" "),a+=n);else for(t in e)e[t]&&(a&&(a+=" "),a+=t);return a}function a(){for(var e,t,n=0,a="";n<arguments.length;)(e=arguments[n++])&&(t=r(e))&&(a&&(a+=" "),a+=t);return a}n.r(t),n.d(t,{default:function(){return a}})}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.