[
  {
    "path": ".editorconfig",
    "content": "# See editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n"
  },
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\ngithub: sampotts\npatreon: plyr\nopen_collective: plyr\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug.md",
    "content": "---\nname: Bug report\nabout: Report an issue or unexpected behaviour with Plyr\n---\n\n<!--\n\nBefore creating the issue, please make sure that...\n\n* You aren't getting any errors in your own code, causing the problem.\n* You are using the latest version of Plyr.\n* There isn't already an open issue for your problem.\n* You are following the documentation correctly (https://github.com/sampotts/plyr/)\n* Your problem doesn't happen if you remove Plyr and use native HTML5 media (when applicable).\n\nFor problems with autoplay, see our FAQ (https://github.com/sampotts/plyr/wiki/FAQ)\n\nIf you have multiple unrelated problems, create separate issues rather than combining them into one.\n\nNote that leaving sections blank or being vague will make it difficult for us to troubleshoot and we may close the issue.\n-->\n\n### Expected behaviour\n\n### Actual behaviour\n\n### Steps to reproduce\n\n### Environment\n\n- Browser:\n- Version:\n- Operating System:\n- Version:\n\n### Console errors (if any)\n\n### Link to where the bug is happening\n\n<!--\nThis link can be either to our demo at https://plyr.io/ if the problem can be observed there, or to a code playground with a **minimal** test case that demonstrates the problem.\n\nYou can use one of our prepared templates to get started creating the test case:\n\n* HTML5 video: https://codepen.io/pen?template=bKeqpr\n* HTML5 audio: https://codepen.io/pen?template=rKLywR\n* YouTube: https://codepen.io/pen?template=GGqbbJ\n* Vimeo: https://codepen.io/pen?template=bKeXNq\n* Dash.js integration: https://codepen.io/pen?template=zaBgBy\n* Hls.js integration: https://codepen.io/pen?template=oyLKQb\n* Shaka Player integration: https://codepen.io/pen?template=ZRpzZO\n\nIt's important that you keep the issue description and replication demo **minimal**. If your replication includes frameworks, libraries or customizations, this makes it much harder to understand the problem and find the bug. For more help on how to create the demo, see https://github.com/sampotts/plyr/wiki/Writing-helpful-issue-descriptions\n\n-->\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/feature.md",
    "content": "---\nname: New feature\nabout: Request new functionality\n---\n\n<!--\nPlease describe the behaviour that you want to add, and why. Be as clear as possible to avoid confusion.\n\nIf you want to request multiple features that aren't directly related, then create one issue per feature.\n-->\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/improvement.md",
    "content": "---\nname: Improvement\nabout: Request a change that isn't a bug or new feature\n---\n\n<!--\nPlease describe the behaviour that you want to change, and why. Be as clear as possible to avoid confusion.\n\nIf you want to request multiple changes that aren't directly related, then create one issue per change.\n-->\n"
  },
  {
    "path": ".github/issue_template.md",
    "content": "PLEASE USE OUR SPECIFIC ISSUE TEMPLATES for bug reports, features and improvement suggestions.\n\nOur issue tracker is not for support questions. If you need help, follow our support instructions: https://github.com/sampotts/plyr/blob/master/CONTRIBUTING.md#support\n"
  },
  {
    "path": ".github/pull_request_template.md",
    "content": "### Link to related issue (if applicable)\n\n### Summary of proposed changes\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\n.DS_Store\ncredentials.json\n*.mp4\nnpm-debug.log\nyarn-error.log\n*.webm\n.idea/\ndist/\n.env\n"
  },
  {
    "path": ".gitpod.yml",
    "content": "tasks:\n  - before: npm install && npm i gulp -g\n    command: gulp\nports:\n  - port: 3000\n    onOpen: open-preview\n"
  },
  {
    "path": ".node-version",
    "content": "22.18.0\n"
  },
  {
    "path": ".npmignore",
    "content": "demo\n.github\n.vscode\n*.code-workspace\nbuild.json\ncredentials.json\ndeploy.json\nyarn.lock\npackage-lock.json\n*.webm\n*.mp4\n!dist/blank.mp4\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"useTabs\": false,\n  \"tabWidth\": 2,\n  \"singleQuote\": true,\n  \"trailingComma\": \"all\",\n  \"printWidth\": 120\n}\n"
  },
  {
    "path": ".stickler.yml",
    "content": "linters:\n  eslint:\nfiles:\n  ignore:\n    - 'node_modules/*'\n"
  },
  {
    "path": ".stylelintrc.json",
    "content": "{\n  \"plugins\": [\"stylelint-selector-bem-pattern\"],\n  \"extends\": [\"stylelint-config-sass-guidelines\"],\n  \"customSyntax\": \"postcss-scss\",\n  \"rules\": {\n    \"selector-class-pattern\": null,\n    \"selector-no-qualifying-type\": [\n      true,\n      {\n        \"ignore\": [\"attribute\", \"class\"]\n      }\n    ],\n    \"max-nesting-depth\": 4,\n    \"scss/no-global-function-names\": null,\n    \"scss/dollar-variable-colon-space-after\": \"always-single-line\",\n    \"@stylistic/function-parentheses-space-inside\": \"never-single-line\",\n    \"plugin/selector-bem-pattern\": {\n      \"preset\": \"bem\",\n      \"componentName\": \"(([a-z0-9]+(?!-$)-?)+)\",\n      \"componentSelectors\": {\n        \"initial\": \"\\\\.{componentName}(((__|--)(([a-z0-9\\\\[\\\\]'=]+(?!-$)-?)+))+)?$\"\n      },\n      \"ignoreSelectors\": [\".*\\\\.has-.*\", \".*\\\\.is-.*\"]\n    }\n  }\n}\n"
  },
  {
    "path": ".vscode/extensions.json",
    "content": "{\n  // See http://go.microsoft.com/fwlink/?LinkId=827846\n  // for the documentation about the extensions.json format\n  \"recommendations\": [\n    \"dbaeumer.vscode-eslint\",\n    \"esbenp.prettier-vscode\",\n    \"hyrious.import-cost\",\n    \"pflannery.vscode-versionlens\",\n    \"streetsidesoftware.code-spell-checker\",\n    \"DavidAnson.vscode-markdownlint\"\n  ]\n}\n"
  },
  {
    "path": ".vscode/launch.json",
    "content": "{\n    // Use IntelliSense to learn about possible attributes.\n    // Hover to view descriptions of existing attributes.\n    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387\n    \"version\": \"0.2.0\",\n    \"configurations\": [\n        {\n            \"type\": \"chrome\",\n            \"request\": \"launch\",\n            \"name\": \"Launch Chrome against localhost\",\n            \"url\": \"http://localhost/dev/plyr/demo\",\n            \"webRoot\": \"${workspaceFolder}\"\n        }\n    ]\n}\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n  // Disable the default formatter, use eslint instead\n  \"prettier.enable\": false,\n  \"editor.formatOnSave\": false,\n\n  // Auto fix\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": \"explicit\",\n    \"source.organizeImports\": \"never\"\n  },\n\n  // Silent the stylistic rules in you IDE, but still auto fix them\n  \"eslint.rules.customizations\": [\n    { \"rule\": \"style/*\", \"severity\": \"off\", \"fixable\": true },\n    { \"rule\": \"format/*\", \"severity\": \"off\", \"fixable\": true },\n    { \"rule\": \"*-indent\", \"severity\": \"off\", \"fixable\": true },\n    { \"rule\": \"*-spacing\", \"severity\": \"off\", \"fixable\": true },\n    { \"rule\": \"*-spaces\", \"severity\": \"off\", \"fixable\": true },\n    { \"rule\": \"*-order\", \"severity\": \"off\", \"fixable\": true },\n    { \"rule\": \"*-dangle\", \"severity\": \"off\", \"fixable\": true },\n    { \"rule\": \"*-newline\", \"severity\": \"off\", \"fixable\": true },\n    { \"rule\": \"*quotes\", \"severity\": \"off\", \"fixable\": true },\n    { \"rule\": \"*semi\", \"severity\": \"off\", \"fixable\": true }\n  ],\n\n  // Enable eslint for all supported languages\n  \"eslint.validate\": [\n    \"javascript\",\n    \"javascriptreact\",\n    \"typescript\",\n    \"typescriptreact\",\n    \"vue\",\n    \"html\",\n    \"markdown\",\n    \"json\",\n    \"jsonc\",\n    \"yaml\",\n    \"toml\",\n    \"xml\",\n    \"gql\",\n    \"graphql\",\n    \"astro\",\n    \"svelte\",\n    \"css\",\n    \"less\",\n    \"scss\",\n    \"pcss\",\n    \"postcss\",\n    \"svg\"\n  ]\n}\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Changelog\n\n### v3.8.4\n\n- Fix import path for ESM import in package.json (fixes #2882)\n- Hide default vimeo captions (fixes #877)\n\n### v3.8.3\n\n- Fix regression in v3.8.2\n\n### v3.8.2\n\n- Add missing types export in package.json.\n\n### v3.8.1\n\n- Fix exports-related regression in 3.8.0. Sorry!\n\n### v3.8.0\n\n- Add @babel/plugin-transform-nullish-coalescing-operator and @rollup/plugin-babel (#2783)\n- Fix #2799 -- drop recommendation of polyfill.io\n- Add Mux as an example in the demo (#2859)\n- Fixed captions when storage has been disabled (#2813)\n- CORS support for preview thumbnails (#2777)\n- fix:progress offset (#2750)\n- docs: fix Koel's tagline and URL (#2857)\n- fix: Set PIP support based on the Picture in Picture API (#2849)\n- docs: update the default value of iconUrl (#2734)\n- housekeeping: update dev deps for build etc.\n\n### v3.7.8\n\n- Feat: Minor demo style tweaks\n- Fix: Minor style fixes related to backgrounds and border radii (🚨 Requires a SCSS/CSS update 🚨)\n\n### v3.7.7\n\n- Fix (Accessibility): Don’t set tabindex on parent container\n- Fix (Accessibility): Add `role=\"timer\"` to time elements\n- Fix (Accessibility): Leverage native `:focus-visible` in CSS, instead of a custom solution (🚨 Requires a SCSS/CSS update 🚨)\n\n### v3.7.6\n\n- Fix: Revert postinstall script\n\n### v3.7.5\n\n- Fix: Replace `pnpm` with `npm` in scripts to fix build issues\n\n### v3.7.4\n\n- Fix: Fixed event key with space (thanks @royeden!)\n- Fix: Changing Vimeo function call from `setVolume` to `setMuted` to fix iOS issue (issue #2624) (thanks @HandreMelo and Andre Fernandes Cristofolini Melo!)\n- Fix: Call preview-thumbnails listeners() function on load (thanks @mogzol!)\n- Fix: Fullscreen improvements for iOS & iPadOS\n- Feat: Remove need for iOS-specific styling (please update [volume.scss](https://github.com/sampotts/plyr/blob/master/src/sass/components/volume.scss))\n\n### v3.7.3\n\n- Fix: force nowrap in progress tooltips (related: #2549) (thanks @raad-altaie!)\n- Feat(i18n): Make captions autodetect text direction (#2540) (thanks @ebraminio!)\n- Fix: fixed menu border radius bug (#2548) (thanks @raad-altaie!)\n- Chore: navigator.platform is deprecated (#2530) (thanks @stamat!)\n- Feat: Added configurable property to elements for re-use (#2489) (thanks @NoirHusky!)\n- Docs: Replace example video ID with one that still works (#2518) (thanks @luvejo!)\n- Fix: Improve accessibility on control buttons with aria-pressed (#2523) (thanks @emilkarl!)\n- Fix: Fix for calc() in newer Dart Sass versions (#2519) (thanks @ckhicks!)\n- Fix: simplify logic for isFunction assertion method\n- Chore: update types to include string for controls\n- Chore: upgrade packages\n- Chore: use `.node-version` instead of `.nvmrc`\n\n### v3.7.2\n\n- Fix: Add `@babel/plugin-proposal-optional-chaining` to transform optional chaining in build output\n\n### v3.7.1\n\n- Feat: Minor styling improvements to the preview thumbnails (🚨 Requires a SCSS/CSS update 🚨)\n- Fix: Fix invalid CSS @charset rule in Sass files (thanks @Hashen110!)\n- Chore: Replace deprecated KeyboardEvent `keyCode` references to use `key` instead (thanks @Hashen110!)\n- Various other code clean up and typo fixes (thanks @Hashen110!)\n\n## v3.7.0\n\n- Feat: Add markers support (🚨 Requires a SCSS/CSS update 🚨) (thanks @ForeverSc and @fengshuo!)\n- Feat: Add support for MediaMetadata (thanks @Hashen110!)\n- Fix: Pass this context to captions.setup (fixes #2352) (thanks @WilliamMHerring, @willherring and @zenyr!)\n- Fix: Modify vimeo parseHash to use non-named capture groups (fixes #2396) (thanks @fekle!)\n- Fix: Replace deprecated String.prototype.substr() (thanks @CommanderRoot!)\n- Docs: Update speed option default to match the source (thanks @ozgurg!)\n- Docs: SASS → Sass (thanks @toastal!)\n\n### v3.6.12\n\n- Fix: remove division logic from ads.scss (fixes #2370)\n\n### v3.6.11\n\n- Fix: Replace `list.slash` added in 3.6.10 with `calc`\n- Chore: Package upgrades\n- Chore: Sass clean up\n- Chore: Improvements to style linting\n\n### v3.6.10\n\n- Fix: Use `list.slash` instead of deprecated syntax\n- Chore: Clean up demo\n\n### v3.6.9\n\n- Fix: Sass issue with division (thanks @ROL4ND909 and @le0pard)\n- Fix: Captions when switching sources (thanks @zexingguo)\n- Fix: Icons loading within iframes (thanks @ajgagnon)\n- Chore: Update TypeScript types (thanks @Jackie1210 and @AntLevin)\n- Fix: iOS fullscreen centering (thanks @hemratna)\n- Feat: Added getter and setter for preview thumbnails (thanks @Benny739)\n- Fix: Change fullscreen element to player rootnode (thanks @Walter van den Houten)\n- Fix: Fixed errors when Plyr instance is destroyed before constructor setTimeout() functions execute (thanks @emilis-ideait)\n- Fix: Invalid CSS selector syntax (thanks @BjornBrandewallNaviga)\n- Fix: Video height issues\n- Feat: Improve support for Vimeo private videos (thanks @Frosch)\n- Fix: YouTube duration issues (thanks @liesahead)\n\n### v3.6.8\n\n- Typings: add FullscreenOptions.container to typing files (thanks @MeguminSama!)\n- Fix: added iPadOS detection to isIos util (thanks @Benny739!)\n- Fix: issues with Vimeo fullscreen\n\n### v3.6.7\n\n- Fix: remove regression caused by optional chaining and nullish coalescing in check for `window.CSS` check for aspect-ratio (fixes #2174)\n\n### v3.6.6\n\n- Improvements to how aspect ratio is handled. Use `aspect-ratio` CSS property instead of the legacy method (still used as fallback). Also automatically determined aspect ratios are rounded to the nearast standard ratio. This fixes issues with the YouTube embeds showing a 1-2px black bar.\n- Hide the YouTube poster image container when paused so that the controls underneath can be used.\n\n### v3.6.5\n\n- Migrate color formatting to colorette (thanks @jorgebucaran)\n- Fix: issue with IE detection\n- Fix: missing styles for embeds\n- Fix: regression regarding poster image\n- Add all required props to vimeo iframe allow attribute - fixes #2151 (thanks @didrip)\n\n### v3.6.4\n\n- Remove unnecessary calc from media query (thanks @naomiaz)\n- Enhance types (thanks @lunika)\n- Fix: Object.values for the providers must be used (thanks @syteknet-core)\n- Fix: Improve support inside iframes (thanks @ajgagnon)\n- Added --plyr-video-background for having control over the background of a video with alpha channel (webm) or a poster image with alpha channel (thanks @nepomuc)\n- Fix issue with not entering iosfullscreen of vimeo videos with playsinline=true (thanks @lordon and @Frosch)\n- fix: use new syntax for iframe allow attribute\n- chore: package updates\n- chore: add @babel/plugin-proposal-class-properties\n- fix: use bound arrow functions in classes\n\n### v3.6.3\n\n- Fix volume when unmuting from volume 0 using YouTube (thanks @stephanefbouchard)\n- Add missing unit to calc in media query (thanks @vincentorback)\n- Assigning player's lastSeekTime on rewind/fast forward to prevent immediate controls hide on mobile (thanks @trafium)\n- Fix for volume control overflowing in Firefox (thanks @dirkjf)\n- Force fullscreen events to trigger on plyr element (media element in iOS) and not fullscreen container (thanks @theprojectsomething)\n- TypeScript types improvements (thanks @akuma06 & @iwatakeshi)\n- Dash demo link fixed (thanks @jonathanarbely)\n- Fix \"A `ReferenceError: _classCallCheck is not defined` error has occurred.\" error (thanks @hex-ci)\n- Fix issue with CSS custom property check (thanks @syedhusain-appspace)\n- Fix for slow loading videos not autoplaying (thanks @DanielHuntleySBG)\n- Fix for network requests are not cancelled after the player is destroyed (thanks @DanielHuntleySBG)\n- Added option to disable custom controls for YouTube and Vimeo\n\n### v3.6.2\n\n- Fixes for CSS Custom Property related errors in some build tools (thanks @Bashev)\n- Fixes for custom controls as element (thanks @taylorchu)\n- Added missing TypeScript interface for preview thumbnail options (thanks @taylorchu)\n\n### v3.6.1\n\n- Safari bug fix\n\n## v3.6.0\n\n- You can now easily change colors using CSS Custom Properties. See the [README](README.md#customizing-the-css).\n- Bug fix for Vimeo fullscreen.\n- Various typos (thanks @likev)\n- Preload TextTracks as per default video element (thanks @theprojectsomething)\n- Features/fullscreen container (thanks @theprojectsomething)\n- Ignore internal play promises (thanks @ydylla)\n- Ads plugin fixes to allow multiple VAST requests (thanks @Steejo)\n- Fix shadowroot (thanks @jnoordsij)\n- Add financial contributors for Open Collective (thanks @monkeywithacupcake)\n- Update the gitpod setup description to be more precise. (thanks @nisarhassan12)\n- Completely hide SVG icons to screen readers (thanks @LeBenLeBen)\n- Preview thumbnails via src:callback() (thanks @doublex)\n- Add missing Typescripts types and options (thanks @hug963)\n- Use number instead of string in TS quality definitions (thanks @mogzol)\n- Fix Vimeo playback rate (thanks @hug963)\n- Fix issue when controls config is string or element (thanks @CzBiX)\n- Simplify contributions by fully automating the dev setup with gitpod (thanks @nisarhassan12)\n\n### v3.5.10\n\n- iOS volume display fix\n\n### v3.5.9\n\n- Fix for regression with volume control width\n- Ensure poster image is not downloaded again for HTML5 videos\n\n### v3.5.8\n\n- Added `flex-direction` property to fix some issues introduced in v3.5.7 when using custom CSS\n- Cleaned up the organization of some of the SCSS files (should not effect CSS output)\n- Added `referrerPolicy` option for Vimeo to prevent an issue present in the demo site\n- Remove all Vimeo controls for Pro & Premium accounts\n- Improve thumbnail size calculations when size is set per css (thanks @ydylla)\n- Add previewThumbnails source setter (thanks @ydylla)\n- More speed setting logic improvements\n\n### v3.5.7\n\n- Typescript typings (thanks @ondratra)\n- `togglePlay` now also returns a `Promise` (thanks @azizhk)\n- Documentation improvements and typo fixes (thanks @ffpetrovic, @skerbis, @ayunami2000, @pjbaert, @MaxGiting, @0xflotus and @thatrobotdev)\n- Accessibility tweak for the play button (thanks @lunika)\n- Fix for ads configuration (thanks @SoftCreatR)\n- Fix handling listener return value (thanks @taion)\n- Added localization key for PIP (picture-in-picture) (thanks @lmislm)\n- Preserve viewBox attribute in SVG sprite symbols (thanks @bseib)\n- Fix being unable to unmute autoplayed video on iOS (thanks @sumanbh)\n- Fixed Plyr container not resizing responsively (thanks @shravan2x)\n- Change vimeo demo video (thanks @thatrobotdev)\n- Fix for `Uncaught RangeError: Maximum call stack size exceeded` (thanks @laukstein)\n- Improve fullscreen experience on some devices (thanks @savroff)\n- Improvements to buffering state for embedded players (thanks @doostinharrell)\n- Prevents IE11 with resetOnEnd option set to true to play video again (thanks @Felipe K. De Boni)\n- Fix for multiple poster image downloads (use the native poster only for HTML5 videos)\n- Various presentational fixes\n- Removed logic to hide/show volume controls based on audio track detection due to it's problematic nature. If you want to hide volume control, use the `controls` option to do so.\n- Fix preview thumbnail scrubbing not working on mobile touch devices (thanks @ydylla)\n- Add download attribute to download button (thanks @Code1110)\n- Trap keyboard focus only when fullscreen (thanks @k-jensen)\n- Improvements to speed options - you can now specify all options in the UI (YouTube and Vimeo only accept 0.5-2) (thanks @ydylla)\n- Improve/fix quality change state restoring (thanks @ydylla)\n\n_Note:_ This update contains CSS changes.\n\n### v3.5.6\n\n- Another Edge fix (thanks Nick Hawk via Slack)\n\n### v3.5.5\n\n- YouTube fix for when there are other embeds on the page (thanks @aFarkas)\n- Separated demo dependencies into their own package.json\n- Fix for Edge controls flexbox issue when resizing the player (thanks Nick Hawk via Slack)\n- More aspect ratio fixes\n\n### v3.5.4\n\n- Added: Set download URL via new setter\n- Improvement: The order of the `controls` option now effects the order in the DOM - i.e. you can re-order the controls - Note: this may break any custom CSS you have setup. Please see the changes in the PR to the default Sass\n- Fixed issue with empty controls and preview thumbs\n- Fixed issue with setGutter call (from Sentry)\n- Fixed issue with initial selected speed not working\n- Added notes on `autoplay` config option and browser compatibility\n- Fixed issue with ads volume not matching current content volume\n- Fixed race condition where ads were loading during source change\n- Improvement: Automatic aspect ratio for YouTube is now supported, meaning all aspect ratios are set based on media content - Note: we're now using a different API to get YouTube video metadata so you may need to adjust any CSPs you have setup\n- Fix for menu in the Shadow DOM (thanks @emielbeinema)\n\n### v3.5.3\n\n- Improved the usage of the `ratio` config option; it now works as expected and for all video types. The default has not changed, it is to dynamically, where possible (except YouTube where 16:9 is used) determine the ratio from the media source so this is not a breaking change.\n- Added new `ratio` getter and setter\n- Fix: Properly clear all timeouts on destroy\n- Fix: Allow absolute paths in preview thumbnails\n- Improvement: Allow optional hours and ms in VTT parser in preview thumbnails\n\n### v3.5.2\n\n- Fixed issue where the preview thumbnail was present while scrubbing\n\n### v3.5.1\n\n- Fixed build issues with babel and browserslist\n\n## v3.5.0\n\n- Preview seek/scrubbing thumbnails (thanks @jamesoflol)\n- Fixes for proxy listeners (thanks @gurupras)\n- Fix for buffer progress transition on WebKit (thanks @samuelgozi)\n- Fix for error when mime type not specified (fixes #1274)\n- Support YouTube noCookie (thanks Omar Khatib)\n- Add Angular plugin reference (thanks @smnbbrv)\n- Use `Math.trunc` instead of `parseInt` (thanks @taion)\n- Many fixes for fullscreen in embedded players with non 16:9 screens or videos\n- Added 'force' fallback option for fullscreen\n- [RangeTouch](https://rangetouch.com) is now bundled with Plyr as a dependency to fix the scrubber on touch devices\n\n### v3.4.8\n\n- Calling customized controls function with proper arguments (thanks @a60814billy)\n\n### v3.4.7\n\n- Fix for Vimeo fullscreen with non native aspect ratios (fixes #854)\n\n### v3.4.6\n\n- Added picture-in-picture support for Chrome 70+\n- Fixed issue with versioning the SVG sprite in the gulp build script\n\n### v3.4.5\n\n- Added download button option to download either current source or a custom URL you specify in options\n- Prevent immediate hiding of controls on mobile (thanks @jamesoflol)\n- Don't hide controls on focusout event (fixes #1122) (thanks @jamesoflol)\n- Fix HTML5 quality settings being incorrectly set in local storage (thanks @TechGuard)\n\n### v3.4.4\n\n- Fixed issue with double binding for `click` and `touchstart` for `clickToPlay` option\n- Improved \"faux\" fullscreen on iPhone X/XS phones with notch\n- Babel 7 upgrade (which reduced the polyfilled build by ~10kb!)\n\n### v3.4.3\n\n- Fixed issue with nodeList for custom playback controls\n\n### v3.4.2\n\n- Fix play/pause button state\n\n### v3.4.1\n\n- Bug fix for custom controls (fixes #1161)\n\n## v3.4.0\n\n- Accessibility improvements (see #905)\n- Improvements to the way the controls work on iOS\n- Demo code clean up\n- YouTube quality selection removed due to their poor support for it. As a result, the `qualityrequested` event has been removed\n- Controls spacing improvements\n- Fix for pressed property missing with custom controls (Fixes #1062)\n- Fix #1153: Captions language fallback (thanks @friday)\n- Fix for setting pressed property of undefined (Fixes #1102)\n\n### v3.3.23\n\n- Add support for YouTube's hl param (thanks @renaudleo)\n- Fix for captions positioning when no controls (thanks @friday and @mjfwebb)\n- Fix #1108: Make sure youtube.onReady doesn't run twice (thanks @friday)\n- Fix for WebKit repaint loop on the `<input type=\"range\">` elements\n\n### v3.3.22\n\n- Travis & CI improvements (thanks @friday)\n- Add navigator.languages fallback for iOS 9 (thanks @friday)\n\n### v3.3.21\n\n- Hide currentTime and progress for streams (thanks @mimse)\n- Fixed condition check (thanks @mimse)\n- Handle undefined this.player.elements.buttons.play (thanks @klassicd)\n- Fix captions.toggle() if there is no toggle button (thanks @friday)\n\n### v3.3.20\n\n- Fix for bug where controls wouldn't show on hover over YouTube video\n\n### v3.3.19\n\n- Remove `pointer-events: none` on embed `<iframe>` to comply with YouTube ToS\n\n### 3.3.18\n\n- Ads are now only supported on HTML5 videos as it violates terms of service for YouTube and Vimeo 😢\n- Fix i18n defaults path on README (thanks @meyt!)\n- Minor increaseVolume and decreaseVolume changes (thanks @friday!)\n\n### v3.3.17\n\n- Fix YouTube muting after seeking with the progress slider (thanks @friday!)\n- Respect preload=\"none\" when setting quality if the media hasn't been loaded some other way (thanks @friday!)\n\n### v3.3.16\n\n- Fixed regression relating the play button status (fixes #1048)\n\n### v3.3.15\n\n- Fix for error relating to play buttons when switching source\n\n### v3.3.14\n\n- Fix sprite loading regression\n\n### v3.3.13\n\nYou guessed it, a load of awesome changes from contributors:\n\nThanks @friday for the following:\n\n- Captions fixes\n- Fix poster race conditions\n- Minor code improvements for quality switching\n- Minor event changes\n- Fix condition in events.toggleListener to allow non-elements\n- Suggestion: Remove array newline rule\n- Contributions improvements\n\nand other folks for:\n\n- Fix: html5.cancelRequest not remove source tag correctly (thanks @a60814billy)\n- remove event listeners in destroy() (thanks @cky917)\n- Fix markdown in README (thanks @azu)\n- Some parts of the accessibility improvements outlined in #905 (more on the way...)\n- Fix for bug where volume slider didn't always show\n\n### v3.3.12\n\n- Fix synthetic event bubble/proxy loses detail (thanks @friday!)\n- Make utils static (thanks @friday!)\n- Fix for YouTube and Vimeo pausing after seek (thanks @friday!)\n- Vimeo: Update playback state and assure events are triggered on load (thanks @friday!)\n- Captions rewrite (use index internally to support missing or duplicate languages) (thanks @friday and @philipgiuliani!)\n- Contributing document and codepen demo updates (thanks @friday!)\n- Fix for after clicking on the progress bar, keyboard operations will not work (thanks @cky917!)\n\n### v3.3.10\n\n- Fix for buffer display alignment and incorrect BEM classname\n- Fix for playback not resuming position after quality swap (fixes #991, thanks @philipgiuliani!)\n- Travis integration (thanks @friday!)\n- Translate quality badges and quality names (thanks @philipgiuliani!)\n- Improve captions handling for streaming (thanks @friday!)\n- Call duration update method manually if user config has duration (thanks @friday!)\n\n### v3.3.9\n\nAgain, more changes from @friday!\n\n- Restore window reference in `is.cue()`\n- Fix InvalidStateError and IE11 issues\n- Respect storage being disabled for storage getter\n\n### v3.3.8\n\nMany changes here thanks to @friday:\n\n- Added missing URL polyfill\n- Pause while seeking to mimic default HTML5 behaviour\n- Add `seeked` event listener to update progress (fixes #966)\n- Trigger seeked event in youtube plugin if either playing or paused (fixes #921)\n- Fix for YouTube and Vimeo autoplays on seek (fixes #876)\n- Toggle controls improvements\n- Cleanup unused code\n- Poster image loading improvements\n- Fix for seek tooltip vs click accuracy\n\n### v3.3.7\n\n- Poster fixes (thanks @friday)\n- Grid tweak\n\n### v3.3.6\n\n- Vimeo fixes for mute state\n- Vimeo ID fix (fixes #945)\n- Use `<div>` for poster container\n- Tooltip fixes for unicode languages (fixes #943)\n\n### v3.3.5\n\n- Removed `.load()` call as it breaks HLS (see #870)\n\n### v3.3.4\n\n- Fix for controls sometimes not showing while video is playing\n- Fixed logic for show home tab on option select\n\n### v3.3.3\n\n- Reverted change to show home tab on option select due to usability regression\n\n### v3.3.2\n\n- Fix for ads running in audio\n- Fix for setting poster on source change\n\n## v3.3.0\n\n- Now using a custom poster image element to hide the YouTube play button and give more control over when the poster image shows\n- Renamed `showPosterOnEnd` to `resetOnEnd` as it makes more sense and now works for all players and does not reload media\n- Fix for same domain SVG URLs (raised by Jochem in Slack)\n- [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/Window/URL) is polyfill now required\n- Added pause className (fixes #941)\n- Button height set in CSS (auto) (fixes #928)\n- Don't autoplay cloned original media (fixes #936)\n- Return to the home menu pane after selecting an option\n\n### v3.2.4\n\n- Fix issue wher player never reports as ready if controls is empty array\n- Fix issue where screen reader labels were removed from time displays\n- Fix issue where custom controls placeholders were not populated\n- Custom controls HTML example updated\n- Fix for aria-label being set to the initial state on toggle buttons, overriding the inner labels\n- Fix for hidden mute button on iOS (not functional for Vimeo due to API limitations) (fixes #656)\n\n### v3.2.3\n\n- Fix for iOS 9 throwing error for `name` property in fullscreen API (fixes #908)\n\n### v3.2.2\n\n- Fix for regression in 3.2.1 resulting in hidden buffer display (fixes #920)\n- Cleaned up incorrect use of `aria-hidden` attribute\n\n### v3.2.1\n\n- Accessibility improvements for the controls (part of #905 fixes)\n- Fix for context menu showing on YouTube (thanks Anthony Recenello in Slack)\n- Vimeo fix for their API not returning the right duration until playback begins (fixes #891)\n\n## v3.2.0\n\n- Fullscreen fixes (thanks @friday)\n- Menu fix for if speed not in config\n- Menu z-index fix (thanks @danielsarin)\n- i18n fix for missing \"Normal\" string (thanks @danielsarin)\n- Safer check for active caption (thanks @Antonio-Laguna)\n- Add custom property fallback (thanks @friday)\n- Fixed bug for captions with no srclang and labels and improved logic (fixes #875)\n- Fix for `playing` false positive (fixes #898)\n- Fix for IE issue with navigator.language (thanks @nicolasthy) (fixes #893)\n- Fix for Vimeo controls missing on iOS (thanks @verde-io) (fixes #807)\n- Fix for double vimeo caption rendering (fixes #877)\n\n## v3.1.0\n\n- Styling fixes\n- YouTube playback speed fixes\n- HTML5 quality selection\n- Improvements to the YouTube quality selection\n\n### v3.0.11\n\n- Muted and autoplay fixes\n- Small bug fixes from Sentry logs\n\n### v3.0.10\n\n- Docs fix\n- Package upgrades\n\n### v3.0.9\n\n- Demo fix\n- Fix Vimeo regression\n\n### v3.0.8\n\n- Vimeo hotfix for private videos\n\n### v3.0.7\n\n- Fix for keyboard shortcut error with fast forward\n- Fix for Vimeo trying to set playback rate when not allowed\n\n### v3.0.6\n\n- Improved the logic for the custom handlers preventing default handlers\n\n### v3.0.5\n\n- Removed console messages\n\n### v3.0.4\n\n- Fixes for fullscreen not working inside iframes\n- Fixes for custom handlers being able to prevent default\n- Fixes for controls not hiding/showing correctly on Mobile Safari\n\n### v3.0.3\n\n- Vimeo offset tweak (fixes #826)\n- Fix for .stop() method (fixes #819)\n- Check for array for speed options (fixes #817)\n- Restore as float (fixes #828)\n- Fix for Firefox fullscreen oddness (Fixes #821)\n- Improve Sprite checking (fixes #827)\n- Fix fast-forward control (thanks @saadshahd)\n- Fix the options link in the readme (thanks @DanielRuf)\n\n### v3.0.2\n\n- Fix for Safari not firing error events when trying to load blocked scripts\n\n### v3.0.1\n\n- Fix for trying to accessing local storage when it's blocked\n\n# v3.0.0\n\nThis is a massive release. A _mostly_ complete rewrite in ES6. What started out as a few changes quickly snowballed. There's many breaking changes so be careful upgrading.\n\n### Big changes\n\n- New settings menu complete with funky animations\n- Ability to adjust speed of playback\n- Ability to toggle caption language (HTML5 and Vimeo only)\n- Ability to set YouTube quality (HTML5 will follow)\n- Added support for Vimeo captions\n- Added Picture-in-Picture support (Safari only)\n- Added AirPlay support (again, Safari only)\n- Added `playsinline` support for iOS 10+\n- Soundcloud removed until I can work on a plugin framework\n- Embedded players are now progressively enhanced - no more empty `<div>`s!\n\n### Other stuff\n\n- Now using Sass exclusively. Sorry, LESS folk it just made sense to maintain one method as Sass is what the cool kids use. It may come back if we work out an automated way to convert the Sass\n- Moved to ES6. All the rage these days. You'll need to look at polyfills. The demo uses [polyfill.io](https://polyfill.io)\n- Added basic looping support\n- Added an aspect ratio option for those that can't leave the 90s and want 4:3\n- `controlshidden` and `controlsshown` events added for when the controls show or hide\n- `qualityrequested` and `qualitychange` events for YouTube quality control (HTML5 will follow)\n- Volume is now `0` to `1` as per HTML5 spec\n- No longer bodging a `<progress>` behind the `<input type=\"range\">` to make up for WebKit's lack of lower fill styling\n- Captions now render with line breaks as intended\n- Captions now render without AJAX using the native events etc\n- Added a fallback for getting YouTube video data incase `.getVideoData()` disappears when one of their developers randomly deletes it again\n- Setup and building of the UI should be way \"snappier\"\n- Click to toggle inverted time (e.g. 0:01 or -2:59 for a 3 minute video at 1 seconds) - new `toggleInvert` and `invertTime` options\n- Added `autopause` option for Vimeo\n- Added `muted` option for you guessed it, muted playback\n- Restored the `.off()` API method\n- `.play()` will now return a promise to prevent that pesky uncaught promise issue in Chrome etc\n- Pressing and hold the seek bar no longer freezes all other updates of the UI\n\n...plus loads of bug fixes.\n\n### Breaking changes\n\nYou gotta break eggs to make an omelette. Sadly, there's quite a few breaking changes:\n\n- Setup now uses proper constructor, accepts a single selector/element/node and returns a single instance - much simpler than before\n- Much of the API is now using getters and setters rather than methods (where it makes sense) to match the HTML5 API - see the docs for more info\n- The data attributes for the embeds are now `data-plyr-provider` and `data-plyr-embed-id` to prevent compatibility issues. These can be changed under `config.attributes.embed` if required\n- `blankUrl` -> `blankVideo`\n- `volume` is now `0` to `1` as per HTML5 spec\n- `keyboardShorcuts` (typo) is now just `keyboard`\n- `loop` is now `loop.active` in preparation for loop enhancements later\n- `html` option for custom controls removed in favour of the `controls` option which now accepts an array (to use built in controls) or a string of HTML for custom controls.\n- `classes` -> `classNames`\n- `classes.videoWrapper` -> `classNames.video`\n- `classes.embedWrapper` -> `classNames.embed`\n- `classes.ready` removed\n- `classes.setup` removed\n- `classes.muted` removed\n- `classes.fullscreen.active` removed in favour of the `:fullscreen` selector\n- `selectors.html5` removed\n- `selectors.embed` removed\n- `selectors.buttons.seek` -> `selectors.inputs.seek`\n- `selectors.volume.input` -> `selectors.inputs.volume`\n- `selectors.volume.display` -> `selectors.display.volume`\n- `selectors.currentTime` -> `selectors.display.currentTime`\n- `selectors.duration` -> `selectors.display.duration`\n\n### Polyfilling\n\nBecause we're using the fancy new ES6 syntax, you will need to polyfill for vintage browsers if you want to use Plyr and still support them. Luckily there's a decent service for this that makes it painless, [polyfill.io](https://polyfill.io). Alternatively, you can use the prebuilt polyfilled build but bear in mind this is 20kb larger. I'd suggest working our your own polyfill strategy.\n\n### v2.0.18\n\n- Fix for YouTube .getVideoData() issue (fixes #709)\n\n### v2.0.17\n\n- Vimeo controls fix (fixes #697)\n- SVG4everybody compatibility fix\n- Allow Plyr.setup event listeners to be set up as separate event listeners (<https://github.com/sampotts/plyr/pull/703>)\n- Added title to the layer html template (for custom controls) (<https://github.com/sampotts/plyr/pull/649>)\n- Target is null bug fix (<https://github.com/sampotts/plyr/pull/617>)\n- fix #684 memory leaks issues after destroy (<https://github.com/sampotts/plyr/pull/700>)\n\n### v2.0.16\n\n- Fullscreen bug fix (fixes #664)\n\n### v2.0.15\n\n- Demo fix\n\n### v2.0.14\n\n- CDN URL updates. Sorry, still working on V3 as hard as I can...\n\n### v2.0.13\n\n- Repo moved and Vimeo demo fix\n\n### v2.0.12\n\n- Ability to set custom `blankUrl` for source changes (<https://github.com/sampotts/plyr/pull/504>)\n- Ability to set caption button listener (<https://github.com/sampotts/plyr/pull/468>)\n\n### v2.0.11\n\n- Fix for `cleanUp` being called twice (thanks to @sebastiancarlsson)\n- Fix for YouTube controls on iPad (fixes #391)\n\n### v2.0.10\n\n- Added seek event fixes for Vimeo and YouTube (fixes #409)\n- Added support for embed URLs rather than ID only (fixes #345)\n\n### v2.0.9\n\n- Temporary patch for the YouTube API issues with `getDuration()` (relates to #374)\n\n### v2.0.8\n\n- Added `isPaused()` API method (thanks to @darrena092)\n- Allowed `.on()` API method to be chainable (thanks to @gurupras) (fixes #357)\n- Improved the \"awful\" rendering of captions on small screens in fullscreen mode (fixes #390)\n- Fix for Firefox VTT compatibility (thanks to @magourex)\n- Fix for Firefox Developer Edition blank video due to `-webkit-mask-image` issue (fixes #392)\n- Added Issue and PR templates with the aim of reducing duplicate or duff issues\n\n### v2.0.7\n\n- Fixed `getCurrentTime()` method (fixes #351)\n- Added `getVolume()` , `isMuted()` and `getDuration()` API methods (fixes #346)\n\n### v2.0.6\n\n- Fixed merge issue with `Updated define to work with AMD imports #326` PR\n- Code formatting\n\n### v2.0.5\n\n- Fix for Vimeo in IE9 & IE10\n- Fix for HTML5 elements not firing `ready` event\n\n### v2.0.4\n\n- Fix for Firefox full screen (fixes #343)\n\n### v2.0.3\n\n- Set 'global' keyboard shortcut option to false as default, added `<textarea>` to editable elements to be ignored\n\n### v2.0.2\n\n- Added 'global' keyboard shortcut option\n\n### v2.0.1\n\n- Version bump for NPM (sorry for folks who upgraded to the now deleted v1.9.0 through NPM)\n\n# v2.0.0\n\nThis version contains several potential **_breaking changes_**:\n\n- `setup()` has been reverted to pre v1.8.0 behaviour; meaning it will return the _instance_ rather than the _element_. This is because the reference to the instance is no longer added to the original element (see below).\n- The reference to the `plyr` instance is now added to the media element rather than original container. This is because if a container with multiple children was passed to `setup()` the references to all instances would have been added to the container, creating issues. I would recommend using the return value from `setup()` or the new `get()` method to access the instance.\n- Players will always be wrapped in their own div now - this makes `setup()` and `destroy()` cleaner. This _may_ break any custom styling based on DOM position.\n- Players no longer seek to 0 on 'ended' - this is to fix a bug with Microsoft Edge as it triggers 'ended' on media change for whatever reason. They'll never change ;-)\n\nAnd some other changes and bug fixes:\n\n- New `get()` method on the global plyr object to get all instances inside a container\n- New API methods: - `getOriginal()` to get the original, _unmodified_ element plyr was setup on (`<video>`, `<audio>` or empty `<div>` for YouTube and Vimeo) - `getContainer()` to get the players outer wrapper element - `getMedia()` to get the players media element (`<video>`, `<audio>` or empty `<div>` for YouTube and Vimeo) - `getEmbed()` to access the YouTube or Vimeo API directly - `getType()` to get the type of the player - `isReady()` to determine if an instance has completed setup and necessary APIs are loaded (for YouTube / Vimeo) - `on()` to provide an easy way to listen to events - `stop()` to, you guessed it, stop the player\n- `destroy()` now works correctly for YouTube and Vimeo (fixes #272)\n- New `destroyed` event when `destroy()` has completed (original element is passed as event.target)\n- Default volume is now 10 (max) rather than 5\n- Sprite is only loaded once (fixes #259)\n- Fixes for Vimeo post message bugs on source change or destroy (fixes #318)\n- Save caption state in storage (fixes #311)\n- Added keyboard shortcuts to the current focused player (with `keyboardShortcuts` boolean option to disable) (fixes #309)\n- Fix for captions bug (fixes #332)\n- Change to AMD (fixes #298)\n\n### v1.8.12\n\n- Vimeo keyboard focus fix (Fixes #317)\n- Fix for Vimeo on basic support devices\n\n### v1.8.11\n\n- Fix for keyboard navigation on Vimeo (Fixes #317)\n- Fix for bug introduced in v1.8.9 related to additional controls\n- Vimeo API upgrade\n- Fix for YouTube bug introduced in v1.8.9\n- Added support for passing array to .setup() (Fixes #319)\n\n### v1.8.10\n\n- Fix for seek issues introduced in v1.8.9\n\n### v1.8.9\n\n- Fix for fullscreen not being defined (Fixes #295)\n- Fix for multiline captions (Fixes #314)\n- Clean up of type checks and fix for `restart()` (Fixes #315)\n- Fix for `MEDIA_ERR_SRC_NOT_SUPPORTED` when calling `.source()` API method\n\n### v1.8.8\n\n- Added getCurrentTime API method (fixes #292)\n- Fix for !hideControls on touch devices (fixes #303)\n\n### v1.8.7\n\n- Line height fix\n\n### v1.8.6\n\n- Reverted font size change\n\n### v1.8.5\n\n- Fixed overflow issues (fixes #286)\n\n### v1.8.4\n\n- Fix for large play button on small videos\n\n### v1.8.3\n\n- Disabled iPad support for YouTube and Vimeo due to iOS limitations with iFrame playback\n- Fixed IE11 icon loading (fixes #269)\n- Updated screenshot (fixes #281)\n- Added WordPress plugin (fixes #239)\n- Added Neos plugin\n- Added HLS, Shaka and dash.js examples (see #235 for more)\n- Improvements for controls hiding and showing on touch devices\n\n### v1.8.2\n\n- Fixed event bubbling\n\n### v1.8.1\n\n- Fixed inaccurate log message\n\n## v1.8.0\n\n- **_(Important)_** `setup()` now returns the element Plyr was setup on rather than the `plyr` object. This means `var player = plyr.setup()[0];` would now be `var player = plyr.setup()[0].plyr;`. This improves support for React and other virtual dom frameworks as mentioned in #254\n- Fixed using a relative URL for `iconUrl` in IE (fixes #269)\n\n## v1.7.0\n\n- Sass cleanup (fixes #265)\n- Docs tidy up to help quick start (fixes #253)\n- Fix for issues with data attribute options passing (fixes #257)\n- **_(Important)_** Removed the requirement for a wrapper div to setup Plyr and removed the dependency on the `plyr` classname as a JS hook. By default it will now look for `<video>`, `<audio>` and `[data-type]` elements. If you are just calling `setup()` with a `<div class=\"plyr\">` you may want to give it a good test after upgrading. You can probably remove the wrapper div. The reason behind this is to make setup easier for newcomers and prevent the styling being used on unsupported players (because the plyr classname was used as a CSS and JS hook - which isn't ideal)\n- Renamed the 'docs' folder to `demo` to avoid confusion - the readme is the docs after all\n\n### v1.6.20\n\n- Fix for multiple sprites being requested (fixes #259)\n\n### v1.6.19\n\n- Fix for scroll direction issues on volume control (fixes #258)\n\n### v1.6.18\n\n- Reduced rounding of seek value from 1 decimal point to 4 (fixes #242)\n\n### v1.6.17\n\n- Added `disableContextMenu` option to hide the right click context menu (fixes #248 and #225)\n\n### v1.6.16\n\n- Always hide standard controls (fixes #225)\n- Fix for Tooltips overflowing (fixes #230)\n\n### v1.6.15\n\n- Restore scroll position when exiting full screen (fixes #236)\n\n### v1.6.14\n\n- SVG sprite loading automatically for an easier setup\n- Touch devices now show controls on touch rather than pausing playback\n\n### v1.6.13\n\n- Decreased sensitivity and inverted scroll on volume slider (scroll up to increase, down to decrease)\n\n### v1.6.12\n\n- Fix for undefined buffer error\n- Add scroll listener on volume slider (PR #227 bty @igoradamenko)\n\n### v1.6.11\n\n- Fix for Vimeo fullscreen (fixes #214)\n\n### v1.6.10\n\n- Changed default icon prefix from 'icon' to 'plyr' to avoid clashes\n\n### v1.6.9\n\n- Added 'latest' CDN option\n- Renamed `sprite.svg` to `plyr.svg` to be inline with the other package files\n\n### v1.6.8\n\n- Fix for bug introduced in v1.6.7\n\n### v1.6.7\n\n- Fixes for using `source` API method on iOS\n\n### v1.6.6\n\n- Icons cleaned up\n- IE11 button fix for tooltips (fixes #210)\n\n### v1.6.5\n\n- IE UI bug fixes\n\n### v1.6.4\n\n- Bug fix for undefined progress bar\n\n### v1.6.3\n\n- Seek back to 0 for all media on ended\n- Check for HTML5 video on ended reload\n- Update to docs for `showPosterOnEnd` option\n\n### v1.6.2\n\n- Fix for tooltip displaying when duration is not set (fixes #177)\n- `showPosterOnEnd` option to show poster when HTML5 video ended (fixes #59)\n- Error handler for YouTube (fixes #189)\n- Initial SoundCloud support (fixes #194)\n- Other minor bug fixes\n\n### v1.6.1\n\n- Tooltip changes for accessibility\n\n## v1.6.0\n\n- New, cleaner, UI: - Controls are now overlaid, maintaining the video's ratio and making sizing easier - A large play button can now be overlaid over videos - Default number of control buttons reduced - New play, pause, rewind and fast forward icons - Flexbox all the things!\n- Tidied up the LESS (and SCSS) as part of the above, variables and mixins in seprate files amking customization and upgrades easier\n- Toggle mute bug fix; if a player was muted previously and the user refreshed, unmuting would have meant volume was still zero (effectively muted), now the config default value is used. Not ideal but good for now\n- New `iconUrl` option allowing specifying a same origin SVG sprite location. Loading this way means you don't need the AJAX sprite loading JavaScript\n- `click` option renamed to `clickToPlay` to make it a bit more self explanatory. Unfortunately cross origin SVG sprites is not supported in any browser yet :-(\n- `hideControls` is now a global option, rather than being exclusive to fullscreen. Controls are now hidden after 2 seconds of no mouse movement. Controls are always shown when media is paused or stopped. This is defaulted to true.\n- `sass` folder in `src` renamed from to `scss`\n\n### v1.5.21\n\n- Bug fix for embeds: `play` not being defined (fixes #185 and #186)\n\n### v1.5.20\n\n- Bug fix for autoplay option\n\n### v1.5.19\n\n- Fix for accessing `embed` property after `ready` event fired\n\n### v1.5.18\n\n- Added 'ready' event for initial setup complete or source change occurs\n- Fixed Sass stylesheet references to transparentize\n- Added default font stack to controls\n- Docs fixes inc controls HTML (fixes #180)\n\n### v1.5.17\n\n- Expose YouTube and Vimeo API (docs update required) (fixes #176)\n- Auto set title based on YouTube getVideoData() title property\n- Bug fix for Vimeo API change (Uncaught TypeError: Cannot read property 'value' of undefined) due to a change their end\n\n### v1.5.16\n\n- Cancel requests on source change (fixes #174)\n\n### v1.5.15\n\n- Fix for CustomEvent polyfill and related bug (see #172)\n\n### v1.5.14\n\n- Volume storage fix (fixes #171)\n\n### v1.5.13\n\n- Fix for manual caption rendering\n\n### v1.5.12\n\n- Added a duration option to pass the duration of the file\n- Added the ability to set options per element by setting a data-plyr attribute on the target elements (this might be useful for the duration option for example)\n- Fixes for Chrome and Safari caption rendering, they now use the default texttrack and cuechange events\n- Firefox bug fix for event not defined\n\n### v1.5.11\n\n- iOS embed bug fixes (fixes #166)\n- Hide IE/Edge <input type='range'> tooltip (since we have a styled one) (fixes #160)\n- Sass bug fix for default values (fixes #158)\n\n### v1.5.9\n\n- NPM bug fixes\n\n### v1.5.10\n\n- NPM bug fixes\n\n### v1.5.8\n\n- Fix for touch device seek tooltip\n- Seek improvements\n\n### v1.5.7\n\n- Fix for control tooltips always showing\n\n### v1.5.6\n\n- Seek tooltip (option for tooltips changed, please check docs)\n- Sass compile error fixes (fixes #148)\n- Fullscreen fixes for controls not always hiding/showing (fixes #149)\n- Screen reader icon fixes (title was being read twice due to the tooltip/hidden label)\n\n### v1.5.5\n\n- Fixed CONTROLS.md example\n- Bug fix for docs error page\n- Bug fix for controls tooltips\n\n### v1.5.4\n\n- Minor bug fix for clicking video to play/pause after source change\n\n### v1.5.3\n\n- Minor bug fix for occasional display of 0:00 as the media duration\n\n### v1.5.2\n\n- `handlers` option renamed to `listeners`\n- Added event listeners for all types to the plyr container (playback, fullscreen, captions etc - see docs)\n- Removed onSetup config option (use the 'setup' event instead, plyr element is event.plyr)\n- Style bug fixes\n- Vimeo seek bug fix (requires whole seconds when seeking)\n- Fix for fullscreen player (using class hook, not browser fullscreen)\n\n### v1.5.1\n\n- Fix for event listeners being duplicated on source change\n\n## v1.5.0\n\n- Vimeo support (fixes #8)\n- New options for initialization (you can now pass a selector, HTMLElement or NodeList) (fixes #118)\n- Switched to BEM methodology (you will need to change CSS and probably HTML)\n- Decoupled CSS and JS hooks (fixes #129)\n- Custom controls container (fixes #98)\n- Fix for private/incognito mode local storage bug (fixes #131)\n- UMD module setup (fixes #121)\n- Specify iframe title for Vimeo and YouTube (fixes #124)\n- Better handling of mission controls (fixes #132)\n- Retain classname on source change (fixes #120)\n- Increased thumb size on seek (partially fixes #130)\n- Passing no argument to `source` api method, now returns current source (by @gurupras)\n- Ability to add custom handlers to controls prior to Plyr bindings (by @gurupras)\n- Keyboard navigation improvements (focus on seek, focus trap in fullscreen) (fixes #135)\n\n### v1.3.5\n\n- Fixed bug with API use on basic supported browsers\n\n### v1.3.4\n\n- Code cleanup by @calvintam236\n\n### v1.3.3\n\n- Removed captions being read by screen readers\n\n### v1.3.2\n\n- Voiceover fix for captions\n\n### v1.3.1\n\n- ARIA improvements for captions being read\n\n### v1.3.0\n\n- Internationalization support (i18n) using default controls (required markup changes to controls)\n- ARIA enhancements for controls (required markup changes to controls)\n- Captions legibility improvements\n- YouTube bug fixes\n\n### v1.2.6\n\n- Sass updates and fixes (cheers @ChristianPV)\n\n### v1.2.5\n\n- Fix for YouTube quality (let them decide quality)\n\n### v1.2.4\n\n- Fix for omitted kind attribute on <track> (fixes #88)\n\n### v1.2.3\n\n- Fix for YouTube on iPhone or unsupported browsers (fallback to YouTube native)\n- Docs tidy up\n- Fullscreen for Safari fix (fixes #96)\n\n### v1.2.2\n\n- Fix for :focus keyboard vs mouse (fixes #61)\n- Fix for caption positioning in full screen (fixes #92)\n\n### v1.2.1\n\n- Tooltip bug fix\n\n## v1.2.0\n\n- Added YouTube support\n\n### v1.1.13\n\n- Added icon prefix option for when using default controls\n\n### v1.1.13\n\n- Logic tweaks for hiding controls in fullscreen\n\n### v1.1.12\n\n- Bug fix for Chrome Canary\n\n### v1.1.11\n\n- Bug fix\n\n### v1.1.10\n\n- Bug fix\n\n### v1.1.9\n\n- Bug fix for 1.1.8\n\n### v1.1.8\n\n- setVolume API method improvements (fixes #83)\n\n### v1.1.7\n\n- Restore classname on destroy()\n\n### v1.1.6\n\n- New API methods (fixes #77), Fix for non strict mode (fixes #78)\n\n### v1.1.5\n\n- Fix for incorrect `isFullscreen()` return value in Mozilla (fixes #38)\n\n### v1.1.4\n\n- Minor bug fixes\n\n### v1.1.3\n\n- Fixes for random id used in controls with multiple instances and one call to setup\n- Audio player UI improvements\n\n### v1.1.2\n\n- Added an onSetup callback option\n- Added fullscreen API methods `toggleFullscreen()` (must be user iniated), and `isFullscreen()`\n\n### v1.1.1\n\n- Fix for unsupported browser handling\n- Fix for config.controls having no effect\n\n## v1.1.0\n\n- Added config option to set which controls are shown (if using the default controls html) and better handling of missing controls\n\n### v1.0.31\n\n- Display duration on `metadataloaded`\n\n### v1.0.30\n\n- Fixed bug with media longer than 60 minutes (fixes #69)\n\n### v1.0.29\n\n- Added option to hide controls on fullscreen (default `true`) while palying, after 1s. Pause, mouse hover on progress, or focus on a child control re-shows the controls. On touch a tap of the video (which plays/pauses the video by default) is required. (fixes #47)\n- Fixed a bug with caption toggle in 1.0.28\n\n### v1.0.28\n\n- Added API support for browsers that don't have full plyr support (pretty much <=IE9 and `<video>` on iPhone/iPod)\n\n### v1.0.27\n\n- Keyboard accessibility improvements (fixes #66)\n\n### v1.0.26\n\n- Fixes for Sass (cheers @brunowego)\n- Indentation reset to 4 spaces\n\n### v1.0.25\n\n- Fixes for iOS volume controls (hidden)\n- Classnames for left/right controls changed\n\n### v1.0.24\n\n- Added tooltip option to display labels as tooltips (fixes #50)\n\n### v1.0.23\n\n- Handling loading states in the UI (fixes #36)\n\n### v1.0.22\n\n- Added support() API method for checking mimetype support\n- Added source() API method for setting media source(s) (fixes #44)\n- Added poster() API method for setting poster source\n- Refactored captions logic for manual captions\n\n### v1.0.21\n\n- Added an <input type=\"range\"> for seeking to improve experience (and support dragging) (fixes #40, #42)\n- Icons for restart and captions improved (and some IDs changed) (fixes #49)\n\n### v1.0.20\n\n- Default controls included (Fixes #45)\n- Volume changes on `input` as well as `change` (fixes #43)\n- Fix for undefined Play text\n- License changed to MIT\n\n### v1.0.19\n\n- Fixed firefox fullscreen issue (fixes #38)\n\n### v1.0.18\n\n- Added CDN references\n\n### v1.0.17\n\n- Sass support added (thanks to @brunowego)\n- Docs completely separated to avoid any confusion\n- New gulp tasks (will add more documentation for this)\n\n### v1.0.16\n\n- Aria label is now dynamic\n\n### v1.0.15\n\n- Fix for seek time display in controls\n- More documentation for controls html\n\n### v1.0.14\n\n- Minor change for bootstrap compatibility\n\n### v1.0.13\n\n- Minor tweaks\n\n### v1.0.12\n\n- Handle native events (issue #34)\n\n### v1.0.11\n\n- Bug fixes for fullscreen mode\n\n### v1.0.10\n\n- Bower includes src files now\n- Folder re-arrangement\n\n### v1.0.9\n\n- Added buffer progress bar\n- Fixed Safari 8 caption track (it needs to be removed from the DOM like in Safari 7)\n- Added validation (it works or it doesn't basically) of the `html` option passed\n\n### v1.0.8\n\n- Bug fix\n\n### v1.0.7\n\n- Storing user selected volume in local storage\n\n### v1.0.6\n\n- Fullscreen fallback for older browsers to use \"full window\"\n\n### v1.0.5\n\n- More minor bug fixes and improvements\n\n### v1.0.4\n\n- Fixed caption legibility issues\n\n### v1.0.3\n\n- Minor bug fixes\n\n### v1.0.2\n\n- Added OGG to <audio> example for Firefox\n- Fixed IE11 fullscreen issues\n\n### v1.0.1\n\n- Bug fixes for IE (as per usual)\n- Added CSS hooks for media type\n- Return instances of Plyr to the element\n\n# v1.0.0\n\n- Initial release\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing\n\nWe welcome bug reports, feature requests and pull requests. If you want to help us out, please follow these guidelines, in order to avoid redundant work.\n\n## Support\n\nBefore asking questions, read our [documentation](https://github.com/sampotts/plyr) and [FAQ](https://github.com/sampotts/plyr/wiki/FAQ).\n\nIf these doesn't answer your question\n\n- Use [Stack Overflow](https://stackoverflow.com/) for questions that doesn't directly involve Plyr. This includes for example how to use Javascript, CSS or HTML5 media in general, and how to use other frameworks, libraries and technology.\n- Use [our Slack](https://bit.ly/plyr-chat) if you need help using Plyr or have questions about Plyr.\n\n## Commenting\n\nWhen commenting, keep a civil tone and stay on topic. Don't ask for [support](#support), or post \"+1\" or \"I agree\" type of comments. Use the emojis instead.\n\nAsking for the status on issues is discouraged. Unless someone has explicitly said in an issue that it's work in progress, most likely that means no one is working on it. We have a lot to do, and it may not be a top priority for us.\n\nWe _may_ moderate discussions. We do this to avoid threads being \"hijacked\", to avoid confusion in case the content is misleading or outdated, and to avoid bothering people with github notifications.\n\n## Creating issues\n\nPlease follow the instructions in our issue templates. Don't use github issues to ask for [support](#support).\n\n## Contributing features and documentation\n\n- If you want to add a feature or make critical changes, you may want to ensure that this is something we also want (so you don't waste your time). Ask us about this in the corresponding issue if there is one, or on [our Slack](https://bit.ly/plyr-chat) otherwise.\n\n- Fork Plyr, and create a new branch in your fork, based on the **develop** branch\n\n- To test locally, you can use the demo site. First make sure you have installed the dependencies with `npm install` or `yarn`. Run `gulp` to build and it will run a local web server for development and watch for any changes.\n\n### Online one-click setup for contributing\n\nYou can use Gitpod (a free online VS Code-like IDE) for contributing. With a single click it will launch a workspace and automatically:\n\n- clone the plyr repo.\n- install the dependencies with `yarn install` in root directory and \"demo\" directory.\n- run `gulp` in root directory to start the dev server.\n\nSo that you can start straight away.\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)\n\n- Develop and test your modifications.\n\n- Preferably commit your changes as independent logical chunks, with meaningful messages. Make sure you do not commit unnecessary files or changes, such as the build output, or logging and breakpoints you added for testing.\n\n- If your modifications changes the documented behavior or add new features, document these changes in [README.md](README.md).\n\n- When finished, push the changes to your GitHub repository and send a pull request. Describe what your PR does.\n\n- If the Travis build fails, or if you get a code review with change requests, you can fix these by pushing new or rebased commits to the branch.\n"
  },
  {
    "path": "CONTROLS.md",
    "content": "# Controls\n\nThis is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. You can pass the following to the `controls` option:\n\n- `Array` of options (this builds the default controls based on your choices)\n- `Element` with the controls\n- `String` containing the desired HTML\n- `false` (or empty string or array) to disable all controls\n- `Function` that will be executed and should return one of the above\n\n## Using default controls\n\nIf you want to use the standard controls as they are, you don't need to pass any options. If you want to turn on off controls, here's the full list:\n\n```javascript\ncontrols: [\n  'play-large', // The large play button in the center\n  'restart', // Restart playback\n  'rewind', // Rewind by the seek time (default 10 seconds)\n  'play', // Play/pause playback\n  'fast-forward', // Fast forward by the seek time (default 10 seconds)\n  'progress', // The progress bar and scrubber for playback and buffering\n  'current-time', // The current time of playback\n  'duration', // The full duration of the media\n  'mute', // Toggle mute\n  'volume', // Volume control\n  'captions', // Toggle captions\n  'settings', // Settings menu\n  'pip', // Picture-in-picture (currently Safari only)\n  'airplay', // Airplay (currently Safari only)\n  'download', // Show a download button with a link to either the current source or a custom URL you specify in your options\n  'fullscreen', // Toggle fullscreen\n];\n```\n\n### Internationalization using default controls\n\nYou can provide an `i18n` object as one of your options when initializing the plugin which we be used when rendering the controls.\n\n#### Example\n\n```javascript\ni18n: {\n    restart: 'Restart',\n    rewind: 'Rewind {seektime} secs',\n    play: 'Play',\n    pause: 'Pause',\n    fastForward: 'Forward {seektime} secs',\n    seek: 'Seek',\n    played: 'Played',\n    buffered: 'Buffered',\n    currentTime: 'Current time',\n    duration: 'Duration',\n    volume: 'Volume',\n    mute: 'Mute',\n    unmute: 'Unmute',\n    enableCaptions: 'Enable captions',\n    disableCaptions: 'Disable captions',\n    enterFullscreen: 'Enter fullscreen',\n    exitFullscreen: 'Exit fullscreen',\n    frameTitle: 'Player for {title}',\n    captions: 'Captions',\n    settings: 'Settings',\n    speed: 'Speed',\n    normal: 'Normal',\n    quality: 'Quality',\n    loop: 'Loop',\n    start: 'Start',\n    end: 'End',\n    all: 'All',\n    reset: 'Reset',\n    disabled: 'Disabled',\n    advertisement: 'Ad',\n}\n```\n\nNote: `{seektime}` will be replaced with your configured seek time or the default. For example \"Forward {seektime} secs\" would render as \"Forward 10 secs\".\n\n## Using custom HTML\n\nYou can specify the HTML as a `String` or your `Function` return for the controls using the `controls` option.\n\nThe classes and data attributes used in your template should match the `selectors` option if you change any.\n\nYou need to add several placeholders to your HTML template that are replaced when rendering:\n\n- `{id}` - the dynamically generated ID for the player (for form controls)\n- `{seektime}` - the seek time specified in options for fast forward and rewind\n- `{title}` - the title of your media, if specified\n\n### Limitations\n\n- Currently the settings menus are not supported with custom controls HTML\n- AirPlay and PiP buttons can be added but you will have to manage feature detection\n\n### Example\n\nHere's an example of custom controls markup (this is just all default controls shown).\n\n```javascript\nconst controls = `\n<div class=\"plyr__controls\">\n    <button type=\"button\" class=\"plyr__control\" data-plyr=\"restart\">\n        <svg role=\"presentation\"><use xlink:href=\"#plyr-restart\"></use></svg>\n        <span class=\"plyr__tooltip\" role=\"tooltip\">Restart</span>\n    </button>\n    <button type=\"button\" class=\"plyr__control\" data-plyr=\"rewind\">\n        <svg role=\"presentation\"><use xlink:href=\"#plyr-rewind\"></use></svg>\n        <span class=\"plyr__tooltip\" role=\"tooltip\">Rewind {seektime} secs</span>\n    </button>\n    <button type=\"button\" class=\"plyr__control\" aria-label=\"Play, {title}\" data-plyr=\"play\">\n        <svg class=\"icon--pressed\" role=\"presentation\"><use xlink:href=\"#plyr-pause\"></use></svg>\n        <svg class=\"icon--not-pressed\" role=\"presentation\"><use xlink:href=\"#plyr-play\"></use></svg>\n        <span class=\"label--pressed plyr__tooltip\" role=\"tooltip\">Pause</span>\n        <span class=\"label--not-pressed plyr__tooltip\" role=\"tooltip\">Play</span>\n    </button>\n    <button type=\"button\" class=\"plyr__control\" data-plyr=\"fast-forward\">\n        <svg role=\"presentation\"><use xlink:href=\"#plyr-fast-forward\"></use></svg>\n        <span class=\"plyr__tooltip\" role=\"tooltip\">Forward {seektime} secs</span>\n    </button>\n    <div class=\"plyr__progress\">\n        <input data-plyr=\"seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.01\" value=\"0\" aria-label=\"Seek\">\n        <progress class=\"plyr__progress__buffer\" min=\"0\" max=\"100\" value=\"0\">% buffered</progress>\n        <span role=\"tooltip\" class=\"plyr__tooltip\">00:00</span>\n    </div>\n    <div class=\"plyr__time plyr__time--current\" aria-label=\"Current time\">00:00</div>\n    <div class=\"plyr__time plyr__time--duration\" aria-label=\"Duration\">00:00</div>\n    <button type=\"button\" class=\"plyr__control\" aria-label=\"Mute\" data-plyr=\"mute\">\n        <svg class=\"icon--pressed\" role=\"presentation\"><use xlink:href=\"#plyr-muted\"></use></svg>\n        <svg class=\"icon--not-pressed\" role=\"presentation\"><use xlink:href=\"#plyr-volume\"></use></svg>\n        <span class=\"label--pressed plyr__tooltip\" role=\"tooltip\">Unmute</span>\n        <span class=\"label--not-pressed plyr__tooltip\" role=\"tooltip\">Mute</span>\n    </button>\n    <div class=\"plyr__volume\">\n        <input data-plyr=\"volume\" type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" value=\"1\" autocomplete=\"off\" aria-label=\"Volume\">\n    </div>\n    <button type=\"button\" class=\"plyr__control\" data-plyr=\"captions\">\n        <svg class=\"icon--pressed\" role=\"presentation\"><use xlink:href=\"#plyr-captions-on\"></use></svg>\n        <svg class=\"icon--not-pressed\" role=\"presentation\"><use xlink:href=\"#plyr-captions-off\"></use></svg>\n        <span class=\"label--pressed plyr__tooltip\" role=\"tooltip\">Disable captions</span>\n        <span class=\"label--not-pressed plyr__tooltip\" role=\"tooltip\">Enable captions</span>\n    </button>\n    <button type=\"button\" class=\"plyr__control\" data-plyr=\"fullscreen\">\n        <svg class=\"icon--pressed\" role=\"presentation\"><use xlink:href=\"#plyr-exit-fullscreen\"></use></svg>\n        <svg class=\"icon--not-pressed\" role=\"presentation\"><use xlink:href=\"#plyr-enter-fullscreen\"></use></svg>\n        <span class=\"label--pressed plyr__tooltip\" role=\"tooltip\">Exit fullscreen</span>\n        <span class=\"label--not-pressed plyr__tooltip\" role=\"tooltip\">Enter fullscreen</span>\n    </button>\n</div>\n`;\n\n// Setup the player\nconst player = new Plyr('#player', { controls });\n```\n"
  },
  {
    "path": "LICENSE.md",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2017 Sam Potts\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
  },
  {
    "path": "README.md",
    "content": "Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports [_modern_](#browser-support) browsers.\n\n[Checkout the demo](https://plyr.io) - [Donate](#donate) - [Slack](https://bit.ly/plyr--chat) - [Video hosting](https://mux.com?ref=plyr-github)\n\n[![npm version](https://badge.fury.io/js/plyr.svg)](https://badge.fury.io/js/plyr) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/sampotts/plyr) [![Financial Contributors on Open Collective](https://opencollective.com/plyr/all/badge.svg?label=financial+contributors)](https://opencollective.com/plyr)\n\n[![Screenshot of Plyr](https://cdn.plyr.io/static/screenshot.webp)](https://plyr.io)\n\n# Features\n\n- 📼 **HTML Video & Audio, YouTube & Vimeo** - support for the major formats\n- 💪 **Accessible** - full support for VTT captions and screen readers\n- 🔧 **[Customizable](#html)** - make the player look how you want with the markup you want\n- 😎 **Clean HTML** - uses the _right_ elements. `<input type=\"range\">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no\n  `<span>` or `<a href=\"#\">` button hacks\n- 📱 **Responsive** - works with any screen size\n- 💵 **[Monetization](#ads)** - make money from your videos\n- 📹 **[Streaming](#demos)** - support for hls.js, Shaka and dash.js streaming playback\n- 🎛 **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API\n- 🎤 **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats\n- 🔎 **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to \"full window\" modes\n- ⌨️ **[Shortcuts](#shortcuts)** - supports keyboard shortcuts\n- 🖥 **Picture-in-Picture** - supports picture-in-picture mode\n- 📱 **Playsinline** - supports the `playsinline` attribute\n- 🏎 **Speed controls** - adjust speed on the fly\n- 📖 **Multiple captions** - support for multiple caption tracks\n- 🌎 **i18n support** - support for internationalization of controls\n- 👌 **[Preview thumbnails](#preview-thumbnails)** - support for displaying preview thumbnails\n- 🤟 **No frameworks** - written in \"vanilla\" ES6 JavaScript, no jQuery required\n- 💁‍♀️ **Sass** - to include in your build processes\n\n## Demos\n\nYou can try Plyr in Codepen using our minimal templates: [HTML5 video](https://codepen.io/pen?template=bKeqpr), [HTML5 audio](https://codepen.io/pen?template=rKLywR), [YouTube](https://codepen.io/pen?template=GGqbbJ), [Vimeo](https://codepen.io/pen?template=bKeXNq). For Streaming we also have example integrations with: [Dash.js](https://codepen.io/pen?template=GRoogML), [Hls.js](https://codepen.io/pen?template=oyLKQb) and [Shaka Player](https://codepen.io/pen?template=ZRpzZO)\n\n# Quick setup\n\n## HTML\n\nPlyr extends upon the standard [HTML5 media element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) markup so that's all you need for those types.\n\n### HTML5 Video\n\n```html\n<video id=\"player\" playsinline controls data-poster=\"/path/to/poster.jpg\">\n  <source src=\"/path/to/video.mp4\" type=\"video/mp4\" />\n  <source src=\"/path/to/video.webm\" type=\"video/webm\" />\n\n  <!-- Captions are optional -->\n  <track kind=\"captions\" label=\"English captions\" src=\"/path/to/captions.vtt\" srclang=\"en\" default />\n</video>\n```\n\n**Note**: The poster image should be specified using `data-poster`. This is to prevent it [being downloaded twice](https://github.com/sampotts/plyr/issues/1531). If you're sure the image will be cached, you can still use the `poster` attribute for true progressive enhancement.\n\n### HTML5 Audio\n\n```html\n<audio id=\"player\" controls>\n  <source src=\"/path/to/audio.mp3\" type=\"audio/mp3\" />\n  <source src=\"/path/to/audio.ogg\" type=\"audio/ogg\" />\n</audio>\n```\n\nFor YouTube and Vimeo players, Plyr uses progressive enhancement to enhance the default `<iframe>` embeds. Below are some examples. The `plyr__video-embed` classname will make the embed responsive. You can add the `autoplay`, `loop`, `hl` (YouTube only) and `playsinline` (YouTube only) query parameters to the URL and they will be set as config options automatically. For YouTube, the `origin` should be updated to reflect the domain you're hosting the embed on, or you can opt to omit it.\n\n### YouTube\n\nWe recommend [progressive enhancement](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/) with the embedded players. You can elect to use an `<iframe>` as the source element (which Plyr will progressively enhance) or a bog standard `<div>` with two essential data attributes - `data-plyr-provider` and `data-plyr-embed-id`.\n\n```html\n<div class=\"plyr__video-embed\" id=\"player\">\n  <iframe\n    src=\"https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1\"\n    allowfullscreen\n    allowtransparency\n    allow=\"autoplay\"\n  ></iframe>\n</div>\n```\n\n_Note_: The `plyr__video-embed` classname will make the player a responsive 16:9 (most common) iframe embed. When plyr itself kicks in, your custom `ratio` config option will be used.\n\nOr the `<div>` non progressively enhanced method:\n\n```html\n<div id=\"player\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"bTqVqk7FSmY\"></div>\n```\n\n_Note_: The `data-plyr-embed-id` can either be the video ID or URL for the media.\n\n### Vimeo\n\nMuch the same as YouTube above.\n\n```html\n<div class=\"plyr__video-embed\" id=\"player\">\n  <iframe\n    src=\"https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media\"\n    allowfullscreen\n    allowtransparency\n    allow=\"autoplay\"\n  ></iframe>\n</div>\n```\n\nOr the `<div>` non progressively enhanced method:\n\n```html\n<div id=\"player\" data-plyr-provider=\"vimeo\" data-plyr-embed-id=\"76979871\"></div>\n```\n\n## JavaScript\n\nYou can use Plyr as an ES6 module as follows:\n\n```js\nimport Plyr from 'plyr';\n\nconst player = new Plyr('#player');\n```\n\nAlternatively you can include the `plyr.js` script before the closing `</body>` tag and then in your JS create a new instance of Plyr as below.\n\n```html\n<script src=\"path/to/plyr.js\"></script>\n<script>\n  const player = new Plyr('#player');\n</script>\n```\n\nSee [initialising](#initializing) for more information on advanced setups.\n\nYou can use our CDN (provided by [Cloudflare](https://www.cloudflare.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills separately as part of your application but to make life easier you can use the polyfilled build.\n\n```html\n<script src=\"https://cdn.plyr.io/3.8.4/plyr.js\"></script>\n```\n\n...or...\n\n```html\n<script src=\"https://cdn.plyr.io/3.8.4/plyr.polyfilled.js\"></script>\n```\n\n## CSS\n\nInclude the `plyr.css` stylesheet into your `<head>`.\n\n```html\n<link rel=\"stylesheet\" href=\"path/to/plyr.css\" />\n```\n\nIf you want to use our CDN (provided by [Cloudflare](https://www.cloudflare.com/)) for the default CSS, you can use the following:\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdn.plyr.io/3.8.4/plyr.css\" />\n```\n\n## SVG Sprite\n\nThe SVG sprite is loaded automatically from our CDN (provided by [Cloudflare](https://www.cloudflare.com/)). To change this, see the [options](#options) below. For\nreference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.8.4/plyr.svg`.\n\n### Self hosting\n\nIf you don't want to create a build system to include Plyr as an npm module, you can use the pre-built files. You have a few options:\n\n- Download the files from the CDN links above, they're already minified.\n- Download the files from [unpkg](https://unpkg.com/browse/plyr/dist/) or similar services.\n- Build the project yourself using `npm i && npm run build`, which installs the dependencies and spits out a build to `dist`.\n\n# Ads\n\nPlyr has partnered up with [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) to offer monetization options for your videos. Getting setup is easy:\n\n- [Sign up for a vi.ai account](https://vi.ai/publisher-video-monetization/?aid=plyrio)\n- Grab your publisher ID from the code snippet\n- Enable ads in the [config options](#options) and enter your publisher ID\n\nAny questions regarding the ads can be sent straight to vi.ai and any issues with rendering raised through GitHub issues.\n\nIf you do not wish to use Vi, you can set your own `ads.tagUrl` [option](#options).\n\n# Advanced\n\n## Customizing the CSS\n\nIf you want to change any design tokens used for the rendering of the player, you can do so using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).\n\nHere's a list of the properties and what they are used for:\n\n| Name                                           | Description                                                                                             | Default / Fallback                                                    |\n| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |\n| `--plyr-color-main`                            | The primary UI color.                                                                                   | ![#f03c15](https://place-hold.it/15/00b3ff/000000?text=+) `#00b3ff`   |\n| `--plyr-video-background`                      | The background color of video and poster wrappers for using alpha channel videos and poster images.     | `rgba(0, 0, 0, 1)`                                                    |\n| `--plyr-focus-visible-color`                   | The color used for the focus styles when an element is `:focus-visible` (keyboard focused).             | `--plyr-color-main`                                                   |\n| `--plyr-badge-background`                      | The background color for badges in the menu.                                                            | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464`   |\n| `--plyr-badge-text-color`                      | The text color for badges.                                                                              | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |\n| `--plyr-badge-border-radius`                   | The border radius used for badges.                                                                      | `2px`                                                                 |\n| `--plyr-captions-background`                   | The color for the background of captions.                                                               | `rgba(0, 0, 0, 0.8)`                                                  |\n| `--plyr-captions-text-color`                   | The color used for the captions text.                                                                   | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |\n| `--plyr-control-icon-size`                     | The size of the icons used in the controls.                                                             | `18px`                                                                |\n| `--plyr-control-spacing`                       | The space between controls (sometimes used in a multiple - e.g. `10px / 2 = 5px`).                      | `10px`                                                                |\n| `--plyr-control-padding`                       | The padding inside controls.                                                                            | `--plyr-control-spacing * 0.7` (`7px`)                                |\n| `--plyr-control-radius`                        | The border radius used on controls.                                                                     | `3px`                                                                 |\n| `--plyr-control-toggle-checked-background`     | The background color used for checked menu items.                                                       | `--plyr-color-main`                                                   |\n| `--plyr-video-controls-background`             | The background for the video controls.                                                                  | `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))`              |\n| `--plyr-video-control-color`                   | The text/icon color for video controls.                                                                 | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |\n| `--plyr-video-control-color-hover`             | The text/icon color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent).  | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |\n| `--plyr-video-control-background-hover`        | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main`                                                   |\n| `--plyr-audio-controls-background`             | The background for the audio controls.                                                                  | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |\n| `--plyr-audio-control-color`                   | The text/icon color for audio controls.                                                                 | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464`   |\n| `--plyr-audio-control-color-hover`             | The text/icon color used when audio controls are `:hover`, `:focus` and `:focus-visible` (equivalent).  | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |\n| `--plyr-audio-control-background-hover`        | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main`                                                   |\n| `--plyr-menu-background`                       | The background color for menus.                                                                         | `rgba(255, 255, 255, 0.9)`                                            |\n| `--plyr-menu-color`                            | The text/icon color for menu items.                                                                     | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464`   |\n| `--plyr-menu-shadow`                           | The shadow used on menus.                                                                               | `0 1px 2px rgba(0, 0, 0, 0.15)`                                       |\n| `--plyr-menu-radius`                           | The border radius on the menu.                                                                          | `4px`                                                                 |\n| `--plyr-menu-arrow-size`                       | The size of the arrow on the bottom of the menu.                                                        | `6px`                                                                 |\n| `--plyr-menu-item-arrow-color`                 | The color of the arrows in the menu.                                                                    | ![#728197](https://place-hold.it/15/728197/000000?text=+) `#728197`   |\n| `--plyr-menu-item-arrow-size`                  | The size of the arrows in the menu.                                                                     | `4px`                                                                 |\n| `--plyr-menu-border-color`                     | The border color for the bottom of the back button in the top of the sub menu pages.                    | ![#dcdfe5](https://place-hold.it/15/dcdfe5/000000?text=+) `#dcdfe5`   |\n| `--plyr-menu-border-shadow-color`              | The shadow below the border of the back button in the top of the sub menu pages.                        | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |\n| `--plyr-progress-loading-size`                 | The size of the stripes in the loading state in the scrubber.                                           | `25px`                                                                |\n| `--plyr-progress-loading-background`           | The background color on the loading state in the scrubber.                                              | `rgba(35, 40, 47, 0.6)`                                               |\n| `--plyr-video-progress-buffered-background`    | The fill color for the buffer indication in the scrubber for video.                                     | `rgba(255, 255, 255, 0.25)`                                           |\n| `--plyr-audio-progress-buffered-background`    | The fill color for the buffer indication in the scrubber for audio.                                     | `rgba(193, 200, 209, 0.6)`                                            |\n| `--plyr-range-thumb-height`                    | The height of the scrubber handle/thumb.                                                                | `13px`                                                                |\n| `--plyr-range-thumb-background`                | The background of the scrubber handle/thumb.                                                            | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |\n| `--plyr-range-thumb-shadow`                    | The shadow of the scrubber handle/thumb.                                                                | `0 1px 1px rgba(215, 26, 18, 0.15), 0 0 0 1px rgba(215, 26, 18, 0.2)` |\n| `--plyr-range-thumb-active-shadow-width`       | The width of the shadow when the scrubber handle/thumb is `:active` (pressed).                          | `3px`                                                                 |\n| `--plyr-range-track-height`                    | The height of the scrubber/progress track.                                                              | `5px`                                                                 |\n| `--plyr-range-fill-background`                 | The fill color of the scrubber/progress.                                                                | `--plyr-color-main`                                                   |\n| `--plyr-video-range-track-background`          | The background of the scrubber/progress.                                                                | `--plyr-video-progress-buffered-background`                           |\n| `--plyr-video-range-thumb-active-shadow-color` | The color of the shadow when the video scrubber handle/thumb is `:active` (pressed).                    | `rgba(255, 255, 255, 0.5)`                                            |\n| `--plyr-audio-range-track-background`          | The background of the scrubber/progress.                                                                | `--plyr-video-progress-buffered-background`                           |\n| `--plyr-audio-range-thumb-active-shadow-color` | The color of the shadow when the audio scrubber handle/thumb is `:active` (pressed).                    | `rgba(215, 26, 18, 0.1)`                                              |\n| `--plyr-tooltip-background`                    | The background color for tooltips.                                                                      | `rgba(255, 255, 255, 0.9)`                                            |\n| `--plyr-tooltip-color`                         | The text color for tooltips.                                                                            | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464`   |\n| `--plyr-tooltip-padding`                       | The padding for tooltips.                                                                               | `calc(var(--plyr-control-spacing) / 2))`                              |\n| `--plyr-tooltip-arrow-size`                    | The size of the arrow under tooltips.                                                                   | `4px`                                                                 |\n| `--plyr-tooltip-radius`                        | The border radius on tooltips.                                                                          | `3px`                                                                 |\n| `--plyr-tooltip-shadow`                        | The shadow on tooltips.                                                                                 | `0 1px 2px rgba(0, 0, 0, 0.15)`                                       |\n| `--plyr-font-family`                           | The font family used in the player.                                                                     |                                                                       |\n| `--plyr-font-size-base`                        | The base font size. Mainly used for captions.                                                           | `15px`                                                                |\n| `--plyr-font-size-small`                       | The smaller font size. Mainly used for captions.                                                        | `13px`                                                                |\n| `--plyr-font-size-large`                       | The larger font size. Mainly used for captions.                                                         | `18px`                                                                |\n| `--plyr-font-size-xlarge`                      | The even larger font size. Mainly used for captions.                                                    | `21px`                                                                |\n| `--plyr-font-size-time`                        | The font size for the time.                                                                             | `--plyr-font-size-small`                                              |\n| `--plyr-font-size-menu`                        | The font size used in the menu.                                                                         | `--plyr-font-size-small`                                              |\n| `--plyr-font-size-badge`                       | The font size used for badges.                                                                          | `9px`                                                                 |\n| `--plyr-font-weight-regular`                   | The regular font weight.                                                                                | `400`                                                                 |\n| `--plyr-font-weight-bold`                      | The bold font weight.                                                                                   | `600`                                                                 |\n| `--plyr-line-height`                           | The line height used within the player.                                                                 | `1.7`                                                                 |\n| `--plyr-font-smoothing`                        | Whether to enable font antialiasing within the player.                                                  | `false`                                                               |\n\nYou can set them in your CSS for all players:\n\n```css\n:root {\n  --plyr-color-main: #1ac266;\n}\n```\n\n...or for a specific class name:\n\n```css\n.player {\n  --plyr-color-main: #1ac266;\n}\n```\n\n...or in your HTML:\n\n```html\n<video class=\"player\" style=\"--plyr-color-main: #1ac266;\">...</video>\n```\n\n### Sass\n\nYou can use `plyr.scss` file included in `/src/sass` as part of your build and change variables to suit your design. The Sass requires you to\nuse [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) (you should be already!) as all declarations use the W3C definitions.\n\nThe HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options to match any custom CSS\nyou write. Check out the JavaScript source for more on this.\n\n## SVG\n\nThe icons used in the Plyr controls are loaded in an SVG sprite. The sprite is automatically loaded from our CDN by default. If you already have an icon build\nsystem in place, you can include the source plyr icons (see `/src/sprite` for source icons).\n\n### Using the `iconUrl` option\n\nYou can however specify your own `iconUrl` option and Plyr will determine if the url is absolute and requires loading by AJAX/CORS due to current browser\nlimitations or if it's a relative path, just use the path directly.\n\nIf you're using the `<base>` tag on your site, you may need to use something like this: [svgfixer.js](https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2)\n\nMore info on SVG sprites here: [http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/) and the AJAX\ntechnique here: [http://css-tricks.com/ajaxing-svg-sprite/](http://css-tricks.com/ajaxing-svg-sprite/)\n\n## Cross Origin (CORS)\n\nYou'll notice the `crossorigin` attribute on the example `<video>` elements. This is because the TextTrack captions are loaded from another domain. If your\nTextTrack captions are also hosted on another domain, you will need to add this attribute and make sure your host has the correct headers setup. For more info\non CORS checkout the MDN docs:\n[https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)\n\nIf you need to attach credentials (such as cookies, authorization headers, or certificates) to preview thumbnail requests, use the `withCredentials` option as\nillustrated below:\n\n```js\nconst player = new Plyr(video, {\n  previewThumbnails: {\n    enabled: true,\n    src: 'https://cdn.example.com/storyboard.vtt',\n    withCredentials: true,\n  },\n});\n```\n\n## Captions\n\nWebVTT captions are supported. To add a caption track, check the HTML example above and look for the `<track>` element. Be sure to\n[validate your caption files](https://quuz.org/webvtt/).\n\n## JavaScript\n\n### Initializing\n\nYou can specify a range of arguments for the constructor to use:\n\n- A [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)\n- A [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)\n- A [jQuery](https://jquery.com) object\n\n_Note_: If a `NodeList`, `Array`, or jQuery object are passed, the first element will be used for setup. To setup multiple players, see [multiple players](#multiple-players) below.\n\n#### Single player\n\nPassing a CSS string selector that's compatible with [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector):\n\n```js\nconst player = new Plyr('#player');\n```\n\nPassing a [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement):\n\n```js\nconst player = new Plyr(document.getElementById('player'));\n```\n\n```js\nconst player = new Plyr(document.querySelector('.js-player'));\n```\n\nThe HTMLElement or string selector can be the target `<video>`, `<audio>`, or `<div>` wrapper for embeds.\n\n#### Multiple players\n\nYou have two choices here. You can either use a simple array loop to map the constructor:\n\n```js\nconst players = Array.from(document.querySelectorAll('.js-player')).map((p) => new Plyr(p));\n```\n\n...or use a static method where you can pass a [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement), or a [JQuery](https://jquery.com) object:\n\n```js\nconst players = Plyr.setup('.js-player');\n```\n\nBoth options will also return an array of instances in the order of they were in the DOM for the string selector or the source NodeList or Array.\n\n#### Options\n\nThe second argument for the constructor is the [options](#options) object:\n\n```js\nconst player = new Plyr('#player', {\n  title: 'Example Title',\n});\n```\n\nOptions can be passed as an object to the constructor as above or as JSON in `data-plyr-config` attribute on each of your target elements:\n\n```html\n<video src=\"/path/to/video.mp4\" id=\"player\" controls data-plyr-config='{ \"title\": \"Example Title\" }'></video>\n```\n\nNote the single quotes encapsulating the JSON and double quotes on the object keys. Only string values need double quotes.\n\n| Option               | Type                       | Default                                                                                                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                             |\n| -------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `enabled`            | Boolean                    | `true`                                                                                                                         | Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically enable or disable Plyr for a certain UA. Example below.                                                                                                                                                                                                                                                                           |\n| `debug`              | Boolean                    | `false`                                                                                                                        | Display debugging information in the console                                                                                                                                                                                                                                                                                                                                                                                            |\n| `controls`           | Array, Function or Element | `['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']` | If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function; `id` (the unique id for the player), `seektime` (the seektime step in seconds), and `title` (the media title). See [CONTROLS.md](CONTROLS.md) for more info on how the html needs to be structured.                                                                  |\n| `settings`           | Array                      | `['captions', 'quality', 'speed', 'loop']`                                                                                     | If the default controls are used, you can specify which settings to show in the menu                                                                                                                                                                                                                                                                                                                                                    |\n| `i18n`               | Object                     | See [defaults.js](/src/js/config/defaults.js)                                                                                  | Used for internationalization (i18n) of the text within the UI.                                                                                                                                                                                                                                                                                                                                                                         |\n| `loadSprite`         | Boolean                    | `true`                                                                                                                         | Load the SVG sprite specified as the `iconUrl` option (if a URL). If `false`, it is assumed you are handling sprite loading yourself.                                                                                                                                                                                                                                                                                                   |\n| `iconUrl`            | String                     | `https://cdn.plyr.io/3.8.4/plyr.svg`                                                                                           | Specify a URL or path to the SVG sprite. See the [SVG section](#svg) for more info.                                                                                                                                                                                                                                                                                                                                                     |\n| `iconPrefix`         | String                     | `plyr`                                                                                                                         | Specify the id prefix for the icons used in the default controls (e.g. \"plyr-play\" would be \"plyr\"). This is to prevent clashes if you're using your own SVG sprite but with the default controls. Most people can ignore this option.                                                                                                                                                                                                  |\n| `blankVideo`         | String                     | `https://cdn.plyr.io/static/blank.mp4`                                                                                         | Specify a URL or path to a blank video file used to properly cancel network requests.                                                                                                                                                                                                                                                                                                                                                   |\n| `autoplay`&sup2;     | Boolean                    | `false`                                                                                                                        | Autoplay the media on load. If the `autoplay` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true.                                                                                                                                                                                                                                                                                         |\n| `autopause`&sup1;    | Boolean                    | `true`                                                                                                                         | Only allow one player playing at once.                                                                                                                                                                                                                                                                                                                                                                                                  |\n| `playsinline`&sup3;  | Boolean                    | `true`                                                                                                                         | Allow inline playback on iOS. Note this has no effect on iPadOS.                                                                                                                                                                                                                                                                                                                                                                        |\n| `seekTime`           | Number                     | `10`                                                                                                                           | The time, in seconds, to seek when a user hits fast forward or rewind.                                                                                                                                                                                                                                                                                                                                  |\n| `volume`             | Number                     | `1`                                                                                                                            | A number, between 0 and 1, representing the initial volume of the player.                                                                                                                                                                                                                                                                                                                               |\n| `muted`              | Boolean                    | `false`                                                                                                                        | Whether to start playback muted. If the `muted` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true.                                                                                                                                                                                                                                                       |\n| `clickToPlay`        | Boolean                    | `true`                                                                                                                         | Click (or tap) of the video container will toggle play/pause.                                                                                                                                                                                                                                                                                                                                           |\n| `disableContextMenu` | Boolean                    | `true`                                                                                                                         | Disable right click menu on video to <em>help</em> as very primitive obfuscation to prevent downloads of content.                                                                                                                                                                                                                                                                                       |\n| `hideControls`       | Boolean                    | `true`                                                                                                                         | Hide video controls automatically after 2s of no mouse or focus movement, on control element blur (tab out), on playback start or entering fullscreen. As soon as the mouse is moved, a control element is focused or playback is paused, the controls reappear instantly.                                                                                                                              |\n| `resetOnEnd`         | Boolean                    | false                                                                                                                          | Reset the playback to the start once playback is complete.                                                                                                                                                                                                                                                                                                                                              |\n| `keyboard`           | Object                     | `{ focused: true, global: false }`                                                                                             | Enable [keyboard shortcuts](#shortcuts) for focused players only or globally                                                                                                                                                                                                                                                                                                                            |\n| `tooltips`           | Object                     | `{ controls: false, seek: true }`                                                                                              | `controls`: Display control labels as tooltips on `:hover` & `:focus` (by default, the labels are screen reader only). `seek`: Display a seek tooltip to indicate on click where the media would seek to.                                                                                                                                                                                               |\n| `duration`           | Number                     | `null`                                                                                                                         | Specify a custom duration for media.                                                                                                                                                                                                                                                                                                                                                                    |\n| `displayDuration`    | Boolean                    | `true`                                                                                                                         | Displays the duration of the media on the \"metadataloaded\" event (on startup) in the current time display. This will only work if the `preload` attribute is not set to `none` (or is not set at all) and you choose not to display the duration (see `controls` option).                                                                                                                               |\n| `invertTime`         | Boolean                    | `true`                                                                                                                         | Display the current time as a countdown rather than an incremental counter.                                                                                                                                                                                                                                                                                                                             |\n| `toggleInvert`       | Boolean                    | `true`                                                                                                                         | Allow users to click to toggle the above.                                                                                                                                                                                                                                                                                                                                                               |\n| `listeners`          | Object                     | `null`                                                                                                                         | Allows binding of event listeners to the controls before the default handlers. See the `defaults.js` for available listeners. If your handler prevents default on the event (`event.preventDefault()`), the default handler will not fire.                                                                                                                                                              |\n| `captions`           | Object                     | `{ active: false, language: 'auto', update: false }`                                                                           | `active`: Toggles if captions should be active by default. `language`: Sets the default language to load (if available). 'auto' uses the browser language. `update`: Listen to changes to tracks and update menu. This is needed for some streaming libraries, but can result in non-selectable language options).                                                                                      |\n| `fullscreen`         | Object                     | `{ enabled: true, fallback: true, iosNative: false, container: null }`                                                         | `enabled`: Toggles whether fullscreen should be enabled. `fallback`: Allow fallback to a full-window solution (`true`/`false`/`'force'`). `iosNative`: whether to use native iOS fullscreen when entering fullscreen (no custom controls). `container`: A selector for an ancestor of the player element, allows contextual content to remain visual in fullscreen mode. Non-ancestors are ignored.     |\n| `ratio`              | String                     | `null`                                                                                                                         | Force an aspect ratio for all videos. The format is `'w:h'` - e.g. `'16:9'` or `'4:3'`. If this is not specified then the default for HTML5 and Vimeo is to use the native resolution of the video. As dimensions are not available from YouTube via SDK, 16:9 is forced as a sensible default.                                                                                                         |\n| `storage`            | Object                     | `{ enabled: true, key: 'plyr' }`                                                                                               | `enabled`: Allow use of local storage to store user settings. `key`: The key name to use.                                                                                                                                                                                                                                                                                                               |\n| `speed`              | Object                     | `{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4] }`                                                              | `selected`: The default speed for playback. `options`: The speed options to display in the UI. YouTube and Vimeo will ignore any options outside of the 0.5-2 range, so options outside of this range will be hidden automatically.                                                                                                                                                                     |\n| `quality`            | Object                     | `{ default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] }`                                           | `default` is the default quality level (if it exists in your sources). `options` are the options to display. This is used to filter the available sources.                                                                                                                                                                                                                                              |\n| `loop`               | Object                     | `{ active: false }`                                                                                                            | `active`: Whether to loop the current video. If the `loop` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true This is an object to support future functionality.                                                                                                                                                                                          |\n| `ads`                | Object                     | `{ enabled: false, publisherId: '', tagUrl: '' }`                                                                              | `enabled`: Whether to enable advertisements. `publisherId`: Your unique [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) publisher ID. `tagUrl` is a URL for a custom VAST tag if you're not using Vi.                                                                                                                                                                                   |\n| `urls`               | Object                     | See source.                                                                                                                    | If you wish to override any API URLs then you can do so here. You can also set a custom download URL for the download button.                                                                                                                                                                                                                                                                           |\n| `vimeo`              | Object                     | `{ byline: false, portrait: false, title: false, speed: true, transparent: false }`                                            | See [Vimeo embed options](https://github.com/vimeo/player.js/#embed-options). Some are set automatically based on other config options, namely: `loop`, `autoplay`, `muted`, `gesture`, `playsinline`                                                                                                                                                                                                   |\n| `youtube`            | Object                     | `{ noCookie: false, rel: 0, showinfo: 0, iv_load_policy: 3, modestbranding: 1 }`                                               | See [YouTube embed options](https://developers.google.com/youtube/player_parameters#Parameters). The only custom option is `noCookie` to use an alternative to YouTube that doesn't use cookies (useful for GDPR, etc). Some are set automatically based on other config options, namely: `autoplay`, `hl`, `controls`, `disablekb`, `playsinline`, `cc_load_policy`, `cc_lang_pref`, `widget_referrer` |\n| `previewThumbnails`  | Object                     | `{ enabled: false, src: '', withCredentials: false }`                                                                          | `enabled`: Whether to enable the preview thumbnails (they must be generated by you). `src`: Must be either a string or an array of strings representing URLs for the VTT files containing the image URL(s). Learn more about [preview thumbnails](#preview-thumbnails) below. `withCredentials`: Whether to attach credentials (such as cookies and authorization headers) to the requests.             |\n| `mediaMetadata`      | Object                     | `{ title: '', artist: '', album: '', artwork: [] }`                                                                            | The [MediaMetadata](https://developer.mozilla.org/en-US/docs/Web/API/MediaMetadata) interface of the Media Session API allows a web page to provide rich media metadata for display in a platform UI.                                                                                                                                                                                                   |\n| `markers`            | Object                     | `{ enabled: false, points: [] }`                                                                                               | `enabled`: Whether to enable markers. `points` is an array of `{ time: number; label: string; }` objects where `time` represents the marker position in seconds and `label` is the HTML string to be displayed.                                                                                                                                                                                         |\n\n1. Vimeo only\n2. Autoplay is generally not recommended as it is seen as a negative user experience. It is also disabled in many browsers. Before raising issues, do your homework. More info can be found here:\n\n- <https://webkit.org/blog/6784/new-video-policies-for-ios/>\n- <https://developers.google.com/web/updates/2017/09/autoplay-policy-changes>\n- <https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/>\n\n3. YouTube does not support programatically toggling the native fullscreen player via it's API. This means on iOS you have two options, neither being perfect:\n\n- Use the fallback/faux fullscreen option which covers the whole viewport (this is the default)\n- Set `playsinline` to `false` and/or `fullscreen.iosNative` to `true` - either option hides the fullscreen toggle in the UI (because of the above API issue) and means iOS will play the video in it's native player.\n\n# API\n\nThere are methods, setters and getters on a Plyr object.\n\n## Object\n\nThe easiest way to access the Plyr object is to set the return value from your call to the constructor to a variable. For example:\n\n```js\nconst player = new Plyr('#player', {\n  /* options */\n});\n```\n\nYou can also access the object through any events:\n\n```js\nelement.addEventListener('ready', (event) => {\n  const player = event.detail.plyr;\n});\n```\n\n## Methods\n\nExample method use:\n\n```js\nplayer.play(); // Start playback\nplayer.fullscreen.enter(); // Enter fullscreen\n```\n\n| Method                                                   | Parameters       | Description                                                                                                |\n| -------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------- |\n| `play()`&sup1;                                           | -                | Start playback.                                                                                            |\n| `pause()`                                                | -                | Pause playback.                                                                                            |\n| `togglePlay(toggle)`&sup1;                               | Boolean          | Toggle playback, if no parameters are passed, it will toggle based on current status.                      |\n| `stop()`                                                 | -                | Stop playback and reset to start.                                                                          |\n| `restart()`                                              | -                | Restart playback.                                                                                          |\n| `rewind(seekTime)`                                       | Number           | Rewind playback by the specified seek time. If no parameter is passed, the default seek time will be used. |\n| `forward(seekTime)`                                      | Number           | Fast forward by the specified seek time. If no parameter is passed, the default seek time will be used.    |\n| `increaseVolume(step)`                                   | Number           | Increase volume by the specified step. If no parameter is passed, the default step will be used.           |\n| `decreaseVolume(step)`                                   | Number           | Increase volume by the specified step. If no parameter is passed, the default step will be used.           |\n| `toggleCaptions(toggle)`                                 | Boolean          | Toggle captions display. If no parameter is passed, it will toggle based on current status.                |\n| `fullscreen.enter()`                                     | -                | Enter fullscreen. If fullscreen is not supported, a fallback \"full window/viewport\" is used instead.       |\n| `fullscreen.exit()`                                      | -                | Exit fullscreen.                                                                                           |\n| `fullscreen.toggle()`                                    | -                | Toggle fullscreen.                                                                                         |\n| `airplay()`                                              | -                | Trigger the airplay dialog on supported devices.                                                           |\n| `setPreviewThumbnails(source: PreviewThumbnailsOptions)` | -                | Sets the preview thumbnails for the current source.                                                        |\n| `toggleControls(toggle)`                                 | Boolean          | Toggle the controls (video only). Takes optional truthy value to force it on/off.                          |\n| `on(event, function)`                                    | String, Function | Add an event listener for the specified event.                                                             |\n| `once(event, function)`                                  | String, Function | Add an event listener for the specified event once.                                                        |\n| `off(event, function)`                                   | String, Function | Remove an event listener for the specified event.                                                          |\n| `supports(type)`                                         | String           | Check support for a mime type.                                                                             |\n| `destroy()`                                              | -                | Destroy the instance and garbage collect any elements.                                                     |\n\n1. For HTML5 players, `play()` will return a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) for most browsers - e.g. Chrome, Firefox, Opera, Safari and Edge [according to MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) at time of writing.\n\n## Getters and Setters\n\nExample setters:\n\n```js\nplayer.volume = 0.5; // Sets volume at 50%\nplayer.currentTime = 10; // Seeks to 10 seconds\n```\n\nExample getters:\n\n```js\nplayer.volume; // 0.5;\nplayer.currentTime; // 10\nplayer.fullscreen.active; // false;\n```\n\n| Property             | Getter | Setter | Description                                                                                                                                                                                                                                                                                                                            |\n| -------------------- | ------ | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `isHTML5`            | ✓      | -      | Returns a boolean indicating if the current player is HTML5.                                                                                                                                                                                                                                                                           |\n| `isEmbed`            | ✓      | -      | Returns a boolean indicating if the current player is an embedded player.                                                                                                                                                                                                                                                              |\n| `playing`            | ✓      | -      | Returns a boolean indicating if the current player is playing.                                                                                                                                                                                                                                                                         |\n| `paused`             | ✓      | -      | Returns a boolean indicating if the current player is paused.                                                                                                                                                                                                                                                                          |\n| `stopped`            | ✓      | -      | Returns a boolean indicating if the current player is stopped.                                                                                                                                                                                                                                                                         |\n| `ended`              | ✓      | -      | Returns a boolean indicating if the current player has finished playback.                                                                                                                                                                                                                                                              |\n| `buffered`           | ✓      | -      | Returns a float between 0 and 1 indicating how much of the media is buffered                                                                                                                                                                                                                                                           |\n| `currentTime`        | ✓      | ✓      | Gets or sets the currentTime for the player. The setter accepts a float in seconds.                                                                                                                                                                                                                                                    |\n| `seeking`            | ✓      | -      | Returns a boolean indicating if the current player is seeking.                                                                                                                                                                                                                                                                         |\n| `duration`           | ✓      | -      | Returns the duration for the current media.                                                                                                                                                                                                                                                                                            |\n| `volume`             | ✓      | ✓      | Gets or sets the volume for the player. The setter accepts a float between 0 and 1.                                                                                                                                                                                                                                                    |\n| `muted`              | ✓      | ✓      | Gets or sets the muted state of the player. The setter accepts a boolean.                                                                                                                                                                                                                                                              |\n| `hasAudio`           | ✓      | -      | Returns a boolean indicating if the current media has an audio track.                                                                                                                                                                                                                                                                  |\n| `speed`              | ✓      | ✓      | Gets or sets the speed for the player. The setter accepts a value in the options specified in your config. Generally the minimum should be 0.5.                                                                                                                                                                                        |\n| `quality`&sup1;      | ✓      | ✓      | Gets or sets the quality for the player. The setter accepts a value from the options specified in your config.                                                                                                                                                                                                                         |\n| `loop`               | ✓      | ✓      | Gets or sets the current loop state of the player. The setter accepts a boolean.                                                                                                                                                                                                                                                       |\n| `source`             | ✓      | ✓      | Gets or sets the current source for the player. The setter accepts an object. See [source setter](#the-source-setter) below for examples.                                                                                                                                                                                              |\n| `poster`             | ✓      | ✓      | Gets or sets the current poster image for the player. The setter accepts a string; the URL for the updated poster image.                                                                                                                                                                                                               |\n| `previewThumbnails`  | ✓      | ✓      | Gets or sets the current preview thumbnail source for the player. The setter accepts a string                                                                                                                                                                                                                                          |\n| `autoplay`           | ✓      | ✓      | Gets or sets the autoplay state of the player. The setter accepts a boolean.                                                                                                                                                                                                                                                           |\n| `currentTrack`       | ✓      | ✓      | Gets or sets the caption track by index. `-1` means the track is missing or captions is not active                                                                                                                                                                                                                                     |\n| `language`           | ✓      | ✓      | Gets or sets the preferred captions language for the player. The setter accepts an ISO two-letter language code. Support for the languages is dependent on the captions you include. If your captions don't have any language data, or if you have multiple tracks with the same language, you may want to use `currentTrack` instead. |\n| `fullscreen.active`  | ✓      | -      | Returns a boolean indicating if the current player is in fullscreen mode.                                                                                                                                                                                                                                                              |\n| `fullscreen.enabled` | ✓      | -      | Returns a boolean indicating if the current player has fullscreen enabled.                                                                                                                                                                                                                                                             |\n| `pip`&sup1;          | ✓      | ✓      | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ (on MacOS Sierra+ and iOS 10+) and Chrome 70+.                                                                                                                                                      |\n| `ratio`              | ✓      | ✓      | Gets or sets the video aspect ratio. The setter accepts a string in the same format as the `ratio` option.                                                                                                                                                                                                                             |\n| `download`           | ✓      | ✓      | Gets or sets the URL for the download button. The setter accepts a string containing a valid absolute URL.                                                                                                                                                                                                                             |\n\n1. HTML5 only\n\n### The `.source` setter\n\nThis allows changing the player source and type on the fly.\n\nVideo example:\n\n```js\nplayer.source = {\n  type: 'video',\n  title: 'Example title',\n  sources: [\n    {\n      src: '/path/to/movie.mp4',\n      type: 'video/mp4',\n      size: 720,\n    },\n    {\n      src: '/path/to/movie.webm',\n      type: 'video/webm',\n      size: 1080,\n    },\n  ],\n  poster: '/path/to/poster.jpg',\n  previewThumbnails: {\n    src: '/path/to/thumbnails.vtt',\n  },\n  tracks: [\n    {\n      kind: 'captions',\n      label: 'English',\n      srclang: 'en',\n      src: '/path/to/captions.en.vtt',\n      default: true,\n    },\n    {\n      kind: 'captions',\n      label: 'French',\n      srclang: 'fr',\n      src: '/path/to/captions.fr.vtt',\n    },\n  ],\n};\n```\n\nAudio example:\n\n```js\nplayer.source = {\n  type: 'audio',\n  title: 'Example title',\n  sources: [\n    {\n      src: '/path/to/audio.mp3',\n      type: 'audio/mp3',\n    },\n    {\n      src: '/path/to/audio.ogg',\n      type: 'audio/ogg',\n    },\n  ],\n};\n```\n\nYouTube example:\n\n```js\nplayer.source = {\n  type: 'video',\n  sources: [\n    {\n      src: 'bTqVqk7FSmY',\n      provider: 'youtube',\n    },\n  ],\n};\n```\n\nVimeo example\n\n```js\nplayer.source = {\n  type: 'video',\n  sources: [\n    {\n      src: '76979871',\n      provider: 'vimeo',\n    },\n  ],\n};\n```\n\n_Note:_ `src` property for YouTube and Vimeo can either be the video ID or the whole URL.\n\n| Property                  | Type   | Description                                                                                                                                                                                                                                                                                                                                                                                                    |\n| ------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `type`                    | String | Either `video` or `audio`. _Note:_ YouTube and Vimeo are currently not supported as audio sources.                                                                                                                                                                                                                                                                                                             |\n| `title`                   | String | _Optional._ Title of the new media. Used for the `aria-label` attribute on the play button, and outer container. YouTube and Vimeo are populated automatically.                                                                                                                                                                                                                                                |\n| `sources`                 | Array  | This is an array of sources. For HTML5 media, the properties of this object are mapped directly to HTML attributes so more can be added to the object if required.                                                                                                                                                                                                                                             |\n| `poster`&sup1;            | String | The URL for the poster image (HTML5 video only).                                                                                                                                                                                                                                                                                                                                                               |\n| `tracks`&sup1;            | String | An array of track objects. Each element in the array is mapped directly to a track element and any keys mapped directly to HTML attributes so as in the example above, it will render as `<track kind=\"captions\" label=\"English\" srclang=\"en\" src=\"https://cdn.selz.com/plyr/1.0/example_captions_en.vtt\" default>` and similar for the French version. Booleans are converted to HTML5 value-less attributes. |\n| `previewThumbnails`&sup1; | Object | The same object like in the `previewThumbnails` constructor option. This means you can either change the thumbnails vtt via the `src` key or disable the thumbnails plugin for the next video by passing `{ enabled: false }`.                                                                                                                                                                                 |\n\n1. HTML5 only\n\n# Events\n\nYou can listen for events on the target element you setup Plyr on (see example under the table). Some events only apply to HTML5 audio and video. Using your\nreference to the instance, you can use the `on()` API method or `addEventListener()`. Access to the API can be obtained this way through the `event.detail.plyr`\nproperty. Here's an example:\n\n```js\nplayer.on('ready', (event) => {\n  const instance = event.detail.plyr;\n});\n```\n\n## Standard Media Events\n\n| Event Type         | Description                                                                                                                                                                                                            |\n| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `progress`         | Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element's `buffered` attribute. |\n| `playing`          | Sent when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).                                                                                         |\n| `play`             | Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior `pause` event.                                                                                        |\n| `pause`            | Sent when playback is paused.                                                                                                                                                                                          |\n| `timeupdate`       | The time indicated by the element's `currentTime` attribute has changed.                                                                                                                                               |\n| `volumechange`     | Sent when the audio volume changes (both when the volume is set and when the `muted` state is changed).                                                                                                                |\n| `seeking`          | Sent when a seek operation begins.                                                                                                                                                                                     |\n| `seeked`           | Sent when a seek operation completes.                                                                                                                                                                                  |\n| `ratechange`       | Sent when the playback speed changes.                                                                                                                                                                                  |\n| `ended`            | Sent when playback completes. _Note:_ This does not fire if `autoplay` is true.                                                                                                                                        |\n| `enterfullscreen`  | Sent when the player enters fullscreen mode (either the proper fullscreen or full-window fallback for older browsers).                                                                                                 |\n| `exitfullscreen`   | Sent when the player exits fullscreen mode.                                                                                                                                                                            |\n| `captionsenabled`  | Sent when captions are enabled.                                                                                                                                                                                        |\n| `captionsdisabled` | Sent when captions are disabled.                                                                                                                                                                                       |\n| `languagechange`   | Sent when the caption language is changed.                                                                                                                                                                             |\n| `controlshidden`   | Sent when the controls are hidden.                                                                                                                                                                                     |\n| `controlsshown`    | Sent when the controls are shown.                                                                                                                                                                                      |\n| `ready`            | Triggered when the instance is ready for API calls.                                                                                                                                                                    |\n\n### HTML5 only\n\n| Event Type       | Description                                                                                                                                                                                                                                                                                                                                    |\n| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loadstart`      | Sent when loading of the media begins.                                                                                                                                                                                                                                                                                                         |\n| `loadeddata`     | The first frame of the media has finished loading.                                                                                                                                                                                                                                                                                             |\n| `loadedmetadata` | The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.                                                                                                                                                                                                                          |\n| `qualitychange`  | The quality of playback has changed.                                                                                                                                                                                                                                                                                                           |\n| `canplay`        | Sent when enough data is available that the media can be played, at least for a couple of frames. This corresponds to the `HAVE_ENOUGH_DATA` `readyState`.                                                                                                                                                                                     |\n| `canplaythrough` | Sent when the ready state changes to `CAN_PLAY_THROUGH`, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level. _Note:_ Manually setting the `currentTime` will eventually fire a `canplaythrough` event in firefox. Other browsers might not fire this event. |\n| `stalled`        | Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.                                                                                                                                                                                                                                              |\n| `waiting`        | Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).                                                                                                                                                                                                                  |\n| `emptied`        | he media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the `load()` method is called to reload it.                                                                                                                                                                         |\n| `cuechange`      | Sent when a `TextTrack` has changed the currently displaying cues.                                                                                                                                                                                                                                                                             |\n| `error`          | Sent when an error occurs. The element's `error` attribute contains more information.                                                                                                                                                                                                                                                          |\n\n### YouTube only\n\n| Event Type    | Description                                                                                                                                                                                                                                                                                                                |\n| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `statechange` | The state of the player has changed. The code can be accessed via `event.detail.code`. Possible values are `-1`: Unstarted, `0`: Ended, `1`: Playing, `2`: Paused, `3`: Buffering, `5`: Video cued. See the [YouTube Docs](https://developers.google.com/youtube/iframe_api_reference#onStateChange) for more information. |\n\n_Note:_ These events also bubble up the DOM. The event target will be the container element.\n\nSome event details borrowed from [MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events).\n\n# Embeds\n\nYouTube and Vimeo are currently supported and function much like a HTML5 video. Similar events and API methods are available for all types. However if you wish\nto access the API's directly. You can do so via the `embed` property of your player object - e.g. `player.embed`. You can then use the relevant methods from the\nthird party APIs. More info on the respective API's here:\n\n- [YouTube iframe API Reference](https://developers.google.com/youtube/iframe_api_reference)\n- [Vimeo player.js Reference](https://github.com/vimeo/player.js)\n\n_Note_: Not all API methods may work 100%. Your mileage may vary. It's better to use the Plyr API where possible.\n\n# Shortcuts\n\nBy default, a player will bind the following keyboard shortcuts when it has focus. If you have the `global` option to `true` and there's only one player in the\ndocument then the shortcuts will work when any element has focus, apart from an element that requires input.\n\n| Key        | Action                                 |\n| ---------- | -------------------------------------- |\n| `0` to `9` | Seek from 0 to 90% respectively        |\n| `space`    | Toggle playback                        |\n| `K`        | Toggle playback                        |\n| &larr;     | Seek backward by the `seekTime` option |\n| &rarr;     | Seek forward by the `seekTime` option  |\n| &uarr;     | Increase volume                        |\n| &darr;     | Decrease volume                        |\n| `M`        | Toggle mute                            |\n| `F`        | Toggle fullscreen                      |\n| `C`        | Toggle captions                        |\n| `L`        | Toggle loop                            |\n\n# Preview thumbnails\n\nIt's possible to display preview thumbnails as per the demo when you hover over the scrubber or while you are scrubbing in the main video area. This can be used for all video types but is easiest with HTML5 of course. You will need to generate the sprite or images yourself. This is possible using something like AWS transcoder to generate the frames and then combine them into a sprite image. Sprites are recommended for performance reasons - they will be much faster to download and easier to compress into a small file size making them load faster.\n\nYou can see the example VTT files [here](https://cdn.plyr.io/static/demo/thumbs/100p.vtt) and [here](https://cdn.plyr.io/static/demo/thumbs/240p.vtt) for how the sprites are done. The coordinates are set as the `xywh` hash on the URL in the order X Offset, Y Offset, Width, Height (e.g. `240p-00001.jpg#xywh=1708,480,427,240` is offset `1708px` from the left, `480px` from the top and is `427x240px`. If you want to include images per frame, this is also possible but will be slower, resulting in a degraded experience.\n\n# Fullscreen\n\nFullscreen in Plyr is supported by all browsers that [currently support it](http://caniuse.com/#feat=fullscreen).\n\n# Browser support\n\nPlyr supports the last 2 versions of most _modern_ browsers.\n\n| Browser       | Supported       |\n| ------------- | --------------- |\n| Safari        | ✓               |\n| Mobile Safari | ✓&sup1;         |\n| Firefox       | ✓               |\n| Chrome        | ✓               |\n| Opera         | ✓               |\n| Edge          | ✓               |\n| IE11          | ✓&sup3;         |\n| IE10          | ✓<sup>2,3</sup> |\n\n1. Mobile Safari on the iPhone forces the native player for `<video>` unless the `playsinline` attribute is present. Volume controls are also disabled as they are handled device wide.\n2. Native player used (no support for `<progress>` or `<input type=\"range\">`) but the API is supported. No native fullscreen support, fallback can be used (see [options](#options)).\n3. Polyfills required. See below.\n\n## Polyfills\n\nPlyr uses ES6 which isn't supported in all browsers quite yet. This means some features will need to be polyfilled to be available otherwise you'll run into issues. We've elected to not burden the ~90% of users that do support these features with extra JS and instead leave polyfilling to you to work out based on your needs.\n\n## Checking for support\n\nYou can use the static method to check for support. For example\n\n```js\nconst supported = Plyr.supported('video', 'html5');\n```\n\nThe arguments are:\n\n- Media type (`'audio' | 'video'`)\n- Provider (`'html5' | 'youtube' | 'vimeo'`)\n\n## Disable support programmatically\n\nThe `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use:\n\n```js\n{\n  enabled: !/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);\n}\n```\n\nIf a User Agent is disabled but supports `<video>` and `<audio>` natively, it will use the native player.\n\n# Plugins & Components\n\nSome awesome folks have made plugins for CMSs and Components for JavaScript frameworks:\n\n| Type        | Maintainer                                                                  | Link                                                                                         |\n| ----------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |\n| WordPress   | Brandon Lavigne ([@drrobotnik](https://github.com/drrobotnik))              | [https://wordpress.org/plugins/plyr/](https://wordpress.org/plugins/plyr/)                   |\n| Angular     | Simon Bobrov ([@smnbbrv](https://github.com/smnbbrv))                       | [https://github.com/smnbbrv/ngx-plyr](https://github.com/smnbbrv/ngx-plyr)                   |\n| React       | Chintan Prajapati ([@chintan9](https://github.com/chintan9))                | [https://github.com/chintan9/plyr-react](https://github.com/chintan9/plyr-react)             |\n| Vue         | Gabe Dunn ([@redxtech](https://github.com/redxtech))                        | [https://github.com/redxtech/vue-plyr](https://github.com/redxtech/vue-plyr)                 |\n| Neos        | Jon Uhlmann ([@jonnitto](https://github.com/jonnitto))                      | [https://packagist.org/packages/jonnitto/plyr](https://packagist.org/packages/jonnitto/plyr) |\n| Kirby       | Dominik Pschenitschni ([@dpschen](https://github.com/dpschen))              | [https://github.com/dpschen/kirby-plyrtag](https://github.com/dpschen/kirby-plyrtag)         |\n| REDAXO      | FriendsOfRedaxo / skerbis ([@skerbis](https://friendsofredaxo.github.io))   | [https://github.com/FriendsOfREDAXO/plyr](https://github.com/FriendsOfREDAXO/plyr)           |\n| svelte-plyr | Ben Woodward / benwoodward ([@benwoodward](https://github.com/benwoodward)) | [https://github.com/benwoodward/svelte-plyr](https://github.com/benwoodward/svelte-plyr)     |\n\n# Issues\n\nIf you find anything weird with Plyr, please let us know using the GitHub issues tracker.\n\n# Author\n\nPlyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) with help from the awesome\n[contributors](https://github.com/sampotts/plyr/graphs/contributors)\n\n# Donate\n\nPlyr costs money to run, not only my time. I donate my time for free as I enjoy building Plyr but unfortunately have to pay for domains, hosting, and more. Any help with costs is appreciated...\n\n- [Donate via Patreon](https://www.patreon.com/plyr)\n- [Donate via PayPal](https://www.paypal.me/pottsy/20usd)\n\n# Mentions\n\n- [ProductHunt](https://www.producthunt.com/tech/plyr)\n- [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)\n- [HTML5 Weekly #177](http://html5weekly.com/issues/177)\n- [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)\n- [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)\n- [Front End Focus #177](https://frontendfoc.us/issues/177)\n- [Hacker News](https://news.ycombinator.com/item?id=9136774)\n- [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)\n- [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)\n- [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)\n- [noupe.com](http://www.noupe.com/design/html5-plyr-is-a-responsive-and-accessible-video-player-94389.html)\n\n# Used by\n\n- [Selz.com](https://selz.com)\n- [Peugeot.fr](http://www.peugeot.fr/marque-et-technologie/technologies/peugeot-i-cockpit.html)\n- [Peugeot.de](http://www.peugeot.de/modelle/modellberater/208-3-turer/fotos-videos.html)\n- [TomTom.com](http://prioritydriving.tomtom.com/)\n- [DIGBMX](http://digbmx.com/)\n- [Grime Archive](https://grimearchive.com/)\n- [Koel - Music streaming solution that works](https://koel.dev/)\n- [Oscar Radio](http://oscar-radio.xyz/)\n- [Sparkk TV](https://www.sparkktv.com/)\n- [@halfhalftravel](https://www.halfhalftravel.com/)\n- [BitChute](https://www.bitchute.com)\n- [Rutheneum-Bote](https://gymnasium-rutheneum.de/content/newspaper/kreativwettbewerb.php)\n- [pressakey.com | Blog-Magazin für Videospiele](https://pressakey.com)\n- [STROLLÿN: Work with a View](https://strollyn.com)\n- [CFDA Runway360](https://runway360.cfda.com/)\n- [NKLAV | Filmmaker](https://nklav.com)\n- [GDI.JS.ORG - Google Drive Index](https://gitlab.com/GoogleDriveIndex/Google-Drive-Index)\n\nIf you want to be added to the list, open a pull request. It'd be awesome to see how you're using Plyr 😎\n\n# Useful links and credits\n\n- [PayPal's Accessible HTML5 Video Player (which Plyr was originally ported from)](https://github.com/paypal/accessible-html5-video-player)\n- [An awesome guide for Plyr in Japanese!](http://syncer.jp/how-to-use-plyr-io) by [@arayutw](https://twitter.com/arayutw)\n\n# Thanks\n\n- [Cloudflare](https://www.cloudflare.com/) for providing the CDN services.\n- [Sentry](https://sentry.io/) for error logging service on the demo website.\n\n## Contributors\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\n<a href=\"https://github.com/sampotts/plyr/graphs/contributors\"><img src=\"https://opencollective.com/plyr/contributors.svg?width=890&button=false\" /></a>\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/plyr/contribute)]\n\n#### Individuals\n\n<a href=\"https://opencollective.com/plyr\"><img src=\"https://opencollective.com/plyr/individuals.svg?width=890\"></a>\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/plyr/contribute)]\n\n<a href=\"https://opencollective.com/plyr/organization/0/website\"><img src=\"https://opencollective.com/plyr/organization/0/avatar.svg\"></a>\n<a href=\"https://opencollective.com/plyr/organization/1/website\"><img src=\"https://opencollective.com/plyr/organization/1/avatar.svg\"></a><a href=\"https://opencollective.com/plyr/organization/2/website\"><img src=\"https://opencollective.com/plyr/organization/2/avatar.svg\"></a>\n\n# Copyright and License\n\n[The MIT license](LICENSE.md)\n"
  },
  {
    "path": "build.json",
    "content": "{\n  \"js\": {\n    \"plyr.js\": {\n      \"src\": \"./src/js/plyr.js\",\n      \"dist\": \"./dist/\",\n      \"formats\": [\"es\", \"umd\"],\n      \"namespace\": \"Plyr\"\n    },\n    \"plyr.polyfilled.js\": {\n      \"src\": \"./src/js/plyr.polyfilled.js\",\n      \"dist\": \"./dist/\",\n      \"formats\": [\"es\", \"umd\"],\n      \"namespace\": \"Plyr\",\n      \"polyfill\": true\n    },\n    \"demo.js\": {\n      \"src\": \"./demo/src/js/demo.js\",\n      \"dist\": \"./demo/dist/\",\n      \"formats\": [\"iife\"],\n      \"namespace\": \"Demo\",\n      \"polyfill\": true\n    }\n  },\n  \"css\": {\n    \"plyr.css\": {\n      \"src\": \"./src/sass/plyr.scss\",\n      \"dist\": \"./dist/\"\n    },\n    \"demo.css\": {\n      \"src\": \"./demo/src/sass/bundles/demo.scss\",\n      \"dist\": \"./demo/dist/\"\n    },\n    \"error.css\": {\n      \"src\": \"./demo/src/sass/bundles/error.scss\",\n      \"dist\": \"./demo/dist/\"\n    }\n  },\n  \"sprite\": {\n    \"plyr.svg\": {\n      \"src\": \"./src/sprite/*.svg\",\n      \"dist\": \"./dist\"\n    },\n    \"demo.svg\": {\n      \"src\": \"./src/sprite/*.svg\",\n      \"dist\": \"./demo/dist\"\n    }\n  }\n}\n"
  },
  {
    "path": "cspell.json",
    "content": "{\n  \"version\": \"0.2\",\n  \"ignorePaths\": [\n    \"package.json\",\n    \"dist/*\",\n    \"demo/node_modules/*\"\n  ],\n  \"dictionaryDefinitions\": [],\n  \"dictionaries\": [\n    \"en-gb\",\n    \"softwareTerms\",\n    \"html\",\n    \"css\",\n    \"typescript\"\n  ],\n  \"words\": [\n    \"autopause\",\n    \"autoplay\",\n    \"bote\",\n    \"cfda\",\n    \"classname\",\n    \"digbmx\",\n    \"fullscreen\",\n    \"gordita\",\n    \"loadjs\",\n    \"magazin\",\n    \"menuitemradio\",\n    \"noupe\",\n    \"otransitionend\",\n    \"playsinline\",\n    \"plyr\",\n    \"rutheneum\",\n    \"seektime\",\n    \"selz\",\n    \"sparkk\",\n    \"srclang\",\n    \"strol\",\n    \"stylelint\",\n    \"unmute\",\n    \"Unstarted\",\n    \"videospiele\",\n    \"xywh\"\n  ],\n  \"ignoreWords\": [],\n  \"import\": []\n}\n"
  },
  {
    "path": "demo/error.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"error\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Doh. Looks like something went wrong.</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\n    <!-- Icons -->\n    <link rel=\"icon\" href=\"https://cdn.plyr.io/static/icons/favicon.ico\" />\n    <link rel=\"icon\" type=\"image/png\" href=\"https://cdn.plyr.io/static/icons/32x32.png\" sizes=\"32x32\" />\n    <link rel=\"icon\" type=\"image/png\" href=\"https://cdn.plyr.io/static/icons/16x16.png\" sizes=\"16x16\" />\n    <link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"https://cdn.plyr.io/static/icons/180x180.png\" />\n\n    <!-- Docs styles -->\n    <link rel=\"stylesheet\" href=\"dist/error.css?v=2\" />\n\n    <!-- Preload -->\n    <link\n      rel=\"preload\"\n      as=\"font\"\n      crossorigin\n      type=\"font/woff2\"\n      href=\"https://cdn.plyr.io/static/fonts/gordita-medium.woff2\"\n    />\n    <link\n      rel=\"preload\"\n      as=\"font\"\n      crossorigin\n      type=\"font/woff2\"\n      href=\"https://cdn.plyr.io/static/fonts/gordita-bold.woff2\"\n    />\n  </head>\n\n  <body>\n    <main>\n      <h1>Doh.</h1>\n      <p>Looks like something went wrong.</p>\n      <a href=\"javascript:history.back()\" class=\"button\">Go back</a>\n    </main>\n  </body>\n</html>\n"
  },
  {
    "path": "demo/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player</title>\n    <meta\n      name=\"description\"\n      property=\"og:description\"\n      content=\"A simple HTML5 media player with custom controls and WebVTT captions.\"\n    />\n    <meta name=\"author\" content=\"Sam Potts\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\n    <!-- Icons -->\n    <link rel=\"icon\" href=\"https://cdn.plyr.io/static/icons/favicon.ico\" />\n    <link rel=\"icon\" type=\"image/png\" href=\"https://cdn.plyr.io/static/icons/32x32.png\" sizes=\"32x32\" />\n    <link rel=\"icon\" type=\"image/png\" href=\"https://cdn.plyr.io/static/icons/16x16.png\" sizes=\"16x16\" />\n    <link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"https://cdn.plyr.io/static/icons/180x180.png\" />\n\n    <!-- Open Graph -->\n    <meta property=\"og:title\" content=\"Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player\" />\n    <meta property=\"og:site_name\" content=\"Plyr\" />\n    <meta property=\"og:url\" content=\"https://plyr.io\" />\n    <meta property=\"og:image\" content=\"https://cdn.plyr.io/static/icons/1200x630.png\" />\n\n    <!-- Twitter -->\n    <meta name=\"twitter:card\" content=\"summary\" />\n    <meta name=\"twitter:site\" content=\"@sam_potts\" />\n    <meta name=\"twitter:creator\" content=\"@sam_potts\" />\n    <meta name=\"twitter:card\" content=\"summary_large_image\" />\n\n    <!-- Docs styles -->\n    <link rel=\"stylesheet\" href=\"dist/demo.css\" />\n\n    <!-- Preload -->\n    <link\n      rel=\"preload\"\n      as=\"font\"\n      crossorigin\n      type=\"font/woff2\"\n      href=\"https://cdn.plyr.io/static/fonts/gordita-medium.woff2\"\n    />\n    <link\n      rel=\"preload\"\n      as=\"font\"\n      crossorigin\n      type=\"font/woff2\"\n      href=\"https://cdn.plyr.io/static/fonts/gordita-bold.woff2\"\n    />\n  </head>\n\n  <body>\n    <div class=\"grid\">\n      <header>\n        <h1>Pl<span>a</span>y<span>e</span>r</h1>\n        <p>\n          A simple, accessible and customisable media player for\n          <button type=\"button\" class=\"link\" data-source=\"video\">\n            <svg class=\"icon\">\n              <title>HTML5</title>\n              <path\n                d=\"M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z\"\n              ></path>\n            </svg>\n            Video</button\n          >,\n          <button type=\"button\" class=\"link\" data-source=\"audio\">\n            <svg class=\"icon\">\n              <title>HTML5</title>\n              <path\n                d=\"M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z\"\n              ></path>\n            </svg>\n            Audio</button\n          >,\n          <button type=\"button\" class=\"link\" data-source=\"mux\">\n            <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M16 0H0V16H16V0ZM11.4398 2.43862C11.8687 2.00974 12.5138 1.88158 13.0742 2.11366C13.6346 2.34574 14.0001 2.8927 14.0001 3.49918V12.4997C14.0001 13.3279 13.3286 13.9995 12.5004 13.9995C11.6722 13.9995 11.0007 13.3279 11.0007 12.4997V7.11959L9.06054 9.05976C8.47495 9.64536 7.52529 9.64536 6.9397 9.05976L4.99958 7.11959V12.4997C4.99958 13.3279 4.32807 13.9995 3.49985 13.9995C2.67162 13.9995 2.00012 13.3279 2.00012 12.4997V3.49918C2.00012 2.89246 2.36539 2.34574 2.92578 2.11366C3.48617 1.88158 4.13127 2.00974 4.56015 2.43862L8 5.87855L11.4398 2.43862ZM11.7564 12.4999C11.7564 12.9108 12.0895 13.2439 12.5004 13.2439C12.9113 13.2439 13.2444 12.9108 13.2444 12.4999C13.2444 12.089 12.9113 11.7559 12.5004 11.7559C12.0895 11.7559 11.7564 12.089 11.7564 12.4999Z\"\n                fill=\"#00b2ff\"\n              />\n            </svg>\n            Mux</button\n          >,\n          <button type=\"button\" class=\"link\" data-source=\"youtube\">\n            <svg class=\"icon\" role=\"presentation\">\n              <title>YouTube</title>\n              <path\n                d=\"M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8\n                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z\n                    M6,11V5l5,3L6,11z\"\n              ></path>\n            </svg>\n            YouTube\n          </button>\n          and\n          <button type=\"button\" class=\"link\" data-source=\"vimeo\">\n            <svg class=\"icon\" role=\"presentation\">\n              <title>Vimeo</title>\n              <path\n                d=\"M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5\n                       C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4\n                       c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z\"\n              ></path>\n            </svg>\n            Vimeo\n          </button>\n        </p>\n\n        <div class=\"call-to-action\">\n          <a href=\"https://github.com/sampotts/plyr\" target=\"_blank\" class=\"button js-shr\">\n            <svg class=\"icon\" role=\"presentation\">\n              <title>GitHub</title>\n              <path\n                d=\"M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6\n               C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5\n               c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1\n               c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8\n               c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2\n               c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z\"\n              ></path>\n            </svg>\n            Download on GitHub\n          </a>\n          <div class=\"cta-mux\">Looking for video hosting? Check out <a href=\"https://mux.com?ref=plyr\">Mux</a>.</div>\n        </div>\n      </header>\n      <main>\n        <div id=\"container\">\n          <video\n            controls\n            crossorigin\n            playsinline\n            data-poster=\"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg\"\n            id=\"player\"\n          >\n            <!-- Video files -->\n            <source\n              src=\"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4\"\n              type=\"video/mp4\"\n              size=\"576\"\n            />\n            <source\n              src=\"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4\"\n              type=\"video/mp4\"\n              size=\"720\"\n            />\n            <source\n              src=\"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4\"\n              type=\"video/mp4\"\n              size=\"1080\"\n            />\n\n            <!-- Caption files -->\n            <track\n              kind=\"captions\"\n              label=\"English\"\n              srclang=\"en\"\n              src=\"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt\"\n              default\n            />\n            <track\n              kind=\"captions\"\n              label=\"Français\"\n              srclang=\"fr\"\n              src=\"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt\"\n            />\n\n            <!-- Fallback for browsers that don't support the <video> element -->\n            <a href=\"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4\" download>Download</a>\n          </video>\n          <video\n            controls\n            crossorigin\n            playsinline\n            data-poster=\"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg\"\n            id=\"player-hls\"\n            hidden\n          ></video>\n        </div>\n\n        <ul>\n          <li class=\"plyr__cite plyr__cite--video\" hidden>\n            <small>\n              <svg class=\"icon\">\n                <title>HTML5</title>\n                <path\n                  d=\"M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z\"\n                ></path>\n              </svg>\n              <a\n                href=\"https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323\"\n                target=\"_blank\"\n                class=\"link\"\n                >View From A Blue Moon</a\n              >\n              <span>&copy; Brainfarm</span>\n            </small>\n          </li>\n          <li class=\"plyr__cite plyr__cite--audio\" hidden>\n            <small>\n              <svg class=\"icon\" title=\"HTML5\">\n                <title>HTML5</title>\n                <path\n                  d=\"M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z\"\n                ></path>\n              </svg>\n              <a href=\"http://www.kishibashi.com/\" target=\"_blank\" class=\"link\"\n                >Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a\n              >\n              <span>&copy; Kishi Bashi</span>\n            </small>\n          </li>\n          <li class=\"plyr__cite plyr__cite--mux\" hidden>\n            <small>\n              <a\n                href=\"https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323\"\n                target=\"_blank\"\n                class=\"link\"\n                >View From A Blue Moon</a\n              >\n              <span>&copy; Brainfarm</span>\n              <span>on</span>\n              <svg\n                class=\"icon\"\n                role=\"presentation\"\n                viewBox=\"0 0 1600 500\"\n                style=\"fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2\"\n              >\n                <title>Mux</title>\n                <path\n                  d=\"M994.287,93.486c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m0,-93.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,68.943 -56.09,125.033 -125.032,125.033c-68.942,-0 -125.03,-56.09 -125.03,-125.033l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,137.853 112.149,250.003 249.999,250.003c137.851,-0 250.001,-112.15 250.001,-250.003l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486\"\n                  style=\"fill-rule: nonzero\"\n                />\n                <path\n                  d=\"M1537.51,468.511c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m-275.883,-218.509l-143.33,143.329c-24.402,24.402 -24.402,63.966 0,88.368c24.402,24.402 63.967,24.402 88.369,-0l143.33,-143.329l143.328,143.329c24.402,24.4 63.967,24.402 88.369,-0c24.403,-24.402 24.403,-63.966 0.001,-88.368l-143.33,-143.329l0.001,-0.004l143.329,-143.329c24.402,-24.402 24.402,-63.965 0,-88.367c-24.402,-24.402 -63.967,-24.402 -88.369,-0l-143.329,143.328l-143.329,-143.328c-24.402,-24.401 -63.967,-24.402 -88.369,-0c-24.402,24.402 -24.402,63.965 0,88.367l143.329,143.329l0,0.004Z\"\n                  style=\"fill-rule: nonzero\"\n                />\n                <path\n                  d=\"M437.511,468.521c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m23.915,-463.762c-23.348,-9.672 -50.226,-4.327 -68.096,13.544l-143.331,143.329l-143.33,-143.329c-17.871,-17.871 -44.747,-23.216 -68.096,-13.544c-23.349,9.671 -38.574,32.455 -38.574,57.729l0,375.026c0,34.51 27.977,62.486 62.487,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-224.173l80.843,80.844c24.404,24.402 63.965,24.402 88.369,-0l80.843,-80.844l0,224.173c0,34.51 27.976,62.486 62.486,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-375.026c0,-25.274 -15.224,-48.058 -38.573,-57.729\"\n                  style=\"fill-rule: nonzero\"\n                />\n              </svg>\n            </small>\n          </li>\n          <li class=\"plyr__cite plyr__cite--youtube\" hidden>\n            <small>\n              <a href=\"https://www.youtube.com/watch?v=bTqVqk7FSmY\" target=\"_blank\" class=\"link\"\n                >View From A Blue Moon</a\n              >\n              on&nbsp;\n              <span class=\"color--youtube\">\n                <svg class=\"icon\" role=\"presentation\">\n                  <title>YouTube</title>\n                  <path\n                    d=\"M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8\n                                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z\n                                    M6,11V5l5,3L6,11z\"\n                  ></path>\n                </svg>\n                YouTube\n              </span>\n            </small>\n          </li>\n          <li class=\"plyr__cite plyr__cite--vimeo\" hidden>\n            <small>\n              <a href=\"https://vimeo.com/40648169\" target=\"_blank\" class=\"link\">Toob “Wavaphon” Music Video</a>\n              on&nbsp;\n              <span class=\"color--vimeo\">\n                <svg class=\"icon\" role=\"presentation\">\n                  <title>Vimeo</title>\n                  <path\n                    d=\"M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5\n                               C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4\n                               c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z\"\n                  ></path>\n                </svg>\n                Vimeo\n              </span>\n            </small>\n          </li>\n        </ul>\n      </main>\n    </div>\n\n    <aside>\n      <svg class=\"icon\">\n        <title>X</title>\n        <path\n          d=\"M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1\n       C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7\n       c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3\n       c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z\"\n        ></path>\n      </svg>\n      <p>\n        If you think Plyr's good,\n        <a\n          href=\"https://x.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&amp;url=http%3A%2F%2Fplyr.io&amp;via=Sam_Potts\"\n          target=\"_blank\"\n          class=\"link js-shr\"\n          >post it on X</a\n        >\n        👍\n      </p>\n    </aside>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/hls.js@1\"></script>\n    <script src=\"dist/demo.js\" crossorigin=\"anonymous\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "demo/media/View_From_A_Blue_Moon_Trailer-HD.en.vtt",
    "content": "WEBVTT FILE\n\n1\n00:00:09.500 --> 00:00:12.000\nThe ocean floor rises 5 miles to the shores\n\n2\n00:00:12.001 --> 00:00:16.500\nof what people call, the seven mile miracle\n\n3\n00:00:25.500 --> 00:00:28.000\nWhat would it be like to be born on this island?\n\n4\n00:00:32.500 --> 00:00:34.500\nTo grow up on these shores\n\n5\n00:00:37.500 --> 00:00:40.000\nTo witness this water, every day\n\n6\n00:00:43.500 --> 00:00:46.000\nYou're about to meet someone, who did\n\n7\n00:02:45.500 --> 00:02:49.000\nThis is a film about John John Florence"
  },
  {
    "path": "demo/media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt",
    "content": "WEBVTT FILE\n\n1\n00:00:09.500 --> 00:00:12.000\nLe fond de l'océan monte 5 miles des rives\n\n2\n00:00:12.001 --> 00:00:16.500\nde ce que les gens appellent le miracle de sept mile\n\n3\n00:00:25.500 --> 00:00:28.000\nQue serait-il d'être né sur cette île?\n\n4\n00:00:32.500 --> 00:00:34.500\nPour grandir sur ces rivages\n\n5\n00:00:37.500 --> 00:00:40.000\nPour assister à cette eau, tous les jours\n\n6\n00:00:43.500 --> 00:00:46.000\nVous êtes sur le point de rencontrer quelqu'un, qui ne\n\n7\n00:02:45.500 --> 00:02:49.000\nCeci est un film sur John John Florence"
  },
  {
    "path": "demo/package.json",
    "content": "{\n  \"name\": \"plyr-demo\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Demo for Plyr\",\n  \"author\": \"Sam Potts <sam@potts.es>\",\n  \"homepage\": \"https://plyr.io\",\n  \"dependencies\": {\n    \"@sentry/browser\": \"^10.5.0\",\n    \"core-js\": \"^3.45.1\",\n    \"custom-event-polyfill\": \"^1.0.7\",\n    \"shr-buttons\": \"2.0.3\",\n    \"url-polyfill\": \"^1.1.13\"\n  }\n}\n"
  },
  {
    "path": "demo/src/js/demo.js",
    "content": "// ==========================================================================\n// Plyr.io demo\n// This code is purely for the https://plyr.io website\n// Please see README.md in the root or github.com/sampotts/plyr\n// ==========================================================================\n\nimport * as Sentry from '@sentry/browser';\nimport Shr from 'shr-buttons';\n\nimport Plyr from '../../../src/js/plyr';\nimport sources from './sources';\n\nimport 'custom-event-polyfill';\nimport 'url-polyfill';\n\nconst commonConfig = {\n  iconUrl: 'dist/demo.svg',\n  debug: true,\n  keyboard: {\n    global: true,\n  },\n  tooltips: {\n    controls: true,\n  },\n  captions: {\n    active: true,\n  },\n  fullscreen: {\n    iosNative: true,\n  },\n  playsinline: true,\n  vimeo: {\n    // Prevent Vimeo blocking plyr.io demo site\n    referrerPolicy: 'no-referrer',\n  },\n};\n\n(() => {\n  const production = 'plyr.io';\n  const isProduction = window.location.host.includes(production);\n\n  // Sentry for demo site (https://plyr.io) only\n  if (isProduction) {\n    try {\n      Sentry.init({\n        dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',\n        whitelistUrls: [production].map(d => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),\n      });\n    }\n    catch {}\n  }\n\n  document.addEventListener('DOMContentLoaded', () => {\n    const selector = '#player';\n\n    // Setup share buttons\n    Shr.setup('.js-shr', {\n      count: {\n        className: 'button__count',\n      },\n      wrapper: {\n        className: 'button--with-count',\n      },\n    });\n\n    // Setup type toggle\n    const buttons = document.querySelectorAll('[data-source]');\n    const types = Object.keys(sources);\n    const historySupport = Boolean(window.history && window.history.pushState);\n    let currentType = window.location.hash.substring(1);\n    const hasInitialType = Boolean(currentType);\n    // If there's no current type set, assume video\n    if (!hasInitialType) currentType = 'video';\n\n    // Setup the player as video by default\n    const player = new Plyr(selector, {\n      ...commonConfig,\n      ...sources[currentType],\n    });\n\n    // Expose for tinkering in the console\n    window.player = player;\n\n    function togglePlayerVisibility(player, show) {\n      if (player?.elements?.container) {\n        player.elements.container.hidden = !show;\n        if (player.media) {\n          player.media.hidden = !show;\n          if (!show) player.pause();\n        }\n      }\n    }\n    function showHlsPlayer() {\n      togglePlayerVisibility(window.player, false);\n      togglePlayerVisibility(window.playerHls, true);\n    }\n    function showMainPlayer() {\n      togglePlayerVisibility(window.player, true);\n      togglePlayerVisibility(window.playerHls, false);\n    }\n\n    function render(type) {\n      // Remove active classes\n      Array.from(buttons).forEach(button => button.classList.toggle('active', false));\n\n      // Set active on parent\n      document.querySelector(`[data-source=\"${type}\"]`).classList.toggle('active', true);\n\n      // Show cite\n      Array.from(document.querySelectorAll('.plyr__cite')).forEach((cite) => {\n        cite.hidden = true;\n      });\n\n      document.querySelector(`.plyr__cite--${type}`).hidden = false;\n\n      if (type === 'mux') {\n        showHlsPlayer();\n      }\n      else {\n        showMainPlayer();\n      }\n    }\n\n    // Set a new source\n    function setSource(type, init) {\n      // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video\n      if (!types.includes(type) || (!init && type === currentType) || (!currentType.length && type === 'video')) {\n        return;\n      }\n\n      const sourceConfig = sources[type];\n      const hlsSource = sourceConfig.hlsSource;\n      if (hlsSource) {\n        const playerHls = new Plyr('#player-hls', { ...commonConfig, ...sourceConfig });\n        window.playerHls = playerHls;\n        const video = playerHls.media;\n        if (Hls.isSupported()) {\n          const hls = new Hls();\n          hls.loadSource(hlsSource);\n          hls.attachMedia(video);\n        }\n        else if (video.canPlayType('application/vnd.apple.mpegurl')) {\n          // eslint-disable-next-line no-undef\n          video.src = videoSrc;\n        }\n      }\n      else {\n        window.playerHls?.destroy();\n        player.source = sourceConfig;\n      }\n      // Set the current type for next time\n      currentType = type;\n      render(type);\n    }\n\n    // Bind to each button\n    Array.from(buttons).forEach((button) => {\n      button.addEventListener('click', () => {\n        const type = button.getAttribute('data-source');\n        setSource(type);\n\n        if (historySupport) {\n          window.history.pushState({ type }, '', `#${type}`);\n        }\n      });\n    });\n\n    // List for backwards/forwards\n    window.addEventListener('popstate', (event) => {\n      if (event.state && Object.keys(event.state).includes('type')) {\n        setSource(event.state.type);\n      }\n    });\n\n    // Replace current history state\n    if (historySupport && types.includes(currentType)) {\n      window.history.replaceState({ type: currentType }, '', hasInitialType ? `#${currentType}` : '');\n    }\n\n    // If it's not video, load the source\n    if (currentType !== 'video') {\n      setSource(currentType, true);\n    }\n\n    render(currentType);\n  });\n})();\n"
  },
  {
    "path": "demo/src/js/sources.js",
    "content": "const sources = {\n  mux: {\n    type: 'video',\n    title: 'View From A Blue Moon',\n    ratio: '16:9',\n    hlsSource: 'https://stream.mux.com/lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML.m3u8',\n    poster: 'https://image.mux.com/lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML/thumbnail.jpg',\n    previewThumbnails: {\n      enabled: true,\n      src: 'https://image.mux.com/lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML/storyboard.vtt',\n    },\n  },\n  video: {\n    type: 'video',\n    title: 'View From A Blue Moon',\n    ratio: '16:9',\n    sources: [\n      {\n        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',\n        type: 'video/mp4',\n        size: 576,\n      },\n      {\n        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',\n        type: 'video/mp4',\n        size: 720,\n      },\n      {\n        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',\n        type: 'video/mp4',\n        size: 1080,\n      },\n      {\n        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',\n        type: 'video/mp4',\n        size: 1440,\n      },\n    ],\n    poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',\n    tracks: [\n      {\n        kind: 'captions',\n        label: 'English',\n        srclang: 'en',\n        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',\n        default: true,\n      },\n      {\n        kind: 'captions',\n        label: 'French',\n        srclang: 'fr',\n        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',\n      },\n    ],\n    previewThumbnails: {\n      enabled: true,\n      src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'],\n    },\n    mediaMetadata: {\n      title: 'View From A Blue Moon',\n      album: 'Sports',\n      artist: 'Brainfarm',\n      artwork: [\n        {\n          src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',\n          type: 'image/jpeg',\n        },\n      ],\n    },\n    markers: {\n      enabled: true,\n      points: [\n        {\n          time: 10,\n          label: 'First marker',\n        },\n        {\n          time: 40,\n          label: 'Second marker',\n        },\n        {\n          time: 120,\n          label: '<strong>Third</strong> marker',\n        },\n      ],\n    },\n  },\n  audio: {\n    type: 'audio',\n    title: 'Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;',\n    sources: [\n      {\n        src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',\n        type: 'audio/mp3',\n      },\n      {\n        src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',\n        type: 'audio/ogg',\n      },\n    ],\n  },\n  youtube: {\n    type: 'video',\n    ratio: '16:9',\n    sources: [\n      {\n        src: 'https://youtube.com/watch?v=bTqVqk7FSmY',\n        provider: 'youtube',\n      },\n    ],\n    mediaMetadata: {\n      title: 'View From A Blue Moon',\n      album: 'Sports',\n      artist: 'Brainfarm',\n      artwork: [\n        {\n          src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',\n          type: 'image/jpeg',\n        },\n      ],\n    },\n  },\n  vimeo: {\n    type: 'video',\n    ratio: '16:9',\n    sources: [\n      {\n        src: 'https://vimeo.com/40648169',\n        provider: 'vimeo',\n      },\n    ],\n  },\n};\n\nexport default sources;\n"
  },
  {
    "path": "demo/src/sass/bundles/demo.scss",
    "content": "@charset \"UTF-8\";\n\n// ==========================================================================\n// Plyr.io Demo Page\n// ==========================================================================\n\n@import '../../../../src/sass/lib/css-vars';\n\n$css-vars-use-native: true;\n\n// Settings\n@import '../settings/breakpoints';\n@import '../settings/colors';\n@import '../settings/cosmetic';\n@import '../settings/icons';\n@import '../settings/layout';\n@import '../settings/plyr';\n@import '../settings/spacing';\n@import '../settings/type';\n\n// Libs\n@import '../lib/fontface';\n@import '../lib/animation';\n@import '../lib/mixins';\n@import '../lib/normalize';\n@import '../lib/reset';\n\n// Layout\n@import '../layout/core';\n@import '../layout/grid';\n\n// Type\n@import '../type/base';\n@import '../type/headings';\n\n// Components\n@import '../components/buttons';\n@import '../components/header';\n@import '../components/icons';\n@import '../components/links';\n@import '../components/lists';\n@import '../components/media';\n@import '../components/navigation';\n@import '../components/players';\n\n// Plyr\n@import '../../../../src/sass/plyr';\n\n// Utils\n@import '../utilities/cosmetic';\n@import '../utilities/hidden';\n"
  },
  {
    "path": "demo/src/sass/bundles/error.scss",
    "content": "@charset \"UTF-8\";\n\n// ==========================================================================\n// Plyr.io Error Page\n// ==========================================================================\n\n// Settings\n@import '../settings/colors';\n@import '../settings/cosmetic';\n@import '../settings/icons';\n@import '../settings/layout';\n@import '../settings/spacing';\n@import '../settings/type';\n\n// Libs\n@import '../lib/fontface';\n@import '../lib/mixins';\n@import '../lib/normalize';\n@import '../lib/reset';\n\n// Layout\n@import '../layout/error';\n\n// Type\n@import '../type/base';\n@import '../type/headings';\n\n// Components\n@import '../components/buttons';\n@import '../components/links';\n"
  },
  {
    "path": "demo/src/sass/components/buttons.scss",
    "content": "// ==========================================================================\n// Buttons\n// ==========================================================================\n\n// Shared\n.button,\n.button__count {\n  align-items: center;\n  border: 0;\n  border-radius: $border-radius-medium;\n  display: inline-flex;\n  padding: ($spacing-base * 0.75);\n  position: relative;\n  text-shadow: none;\n  user-select: none;\n  vertical-align: middle;\n}\n\n// Buttons\n.button {\n  --shadow-color: 0deg 0% 20%;\n  align-items: center;\n  background-color: $color-button-background;\n  background-image: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.05));\n  border: 1px solid darken($color-button-background, 5);\n  box-shadow:\n    0 0.8px 1px hsl(var(--shadow-color) / 0.05),\n    0 1.3px 1.6px -1px hsl(var(--shadow-color) / 0.06),\n    0 2.8px 3.4px -2px hsl(var(--shadow-color) / 0.07);\n  color: $color-button-text;\n  display: inline-flex;\n  font-weight: $font-weight-bold;\n  line-height: $line-height-base;\n  gap: 0.25rem;\n  padding-left: ($spacing-base * 1.25);\n  padding-right: ($spacing-base * 1.25);\n  text-decoration: none;\n  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n  transition: all 0.2s ease;\n\n  &:hover,\n  &:focus {\n    background: $color-button-background-hover;\n    border-color: darken($color-button-background, 7);\n\n    // Remove the underline/border\n    &::after {\n      display: none !important;\n    }\n  }\n\n  &:focus {\n    outline: 0;\n  }\n\n  &:focus-visible {\n    @include focus-visible($color-button-background);\n  }\n\n  &:active {\n    box-shadow: none;\n    top: 1px;\n  }\n\n  .icon {\n    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));\n    flex-shrink: 0;\n  }\n}\n\n// Count bubble\n.button__count {\n  animation: fade-in 0.2s ease;\n  background: $color-button-count-background;\n  border: 1px solid $color-gray-100;\n  color: $color-button-count-text;\n  margin-left: ($spacing-base * 0.75);\n  line-height: $line-height-base;\n\n  &::before {\n    background-color: $color-button-count-background;\n    border: inherit;\n    border-width: 0 0 1px 1px;\n    content: '';\n    display: block;\n    height: 8px;\n    position: absolute;\n    right: 100%;\n    top: 50%;\n    transform: translateY(-50%) translateX(50%) translateX(-1px) rotate(45deg);\n    width: 8px;\n  }\n}\n"
  },
  {
    "path": "demo/src/sass/components/header.scss",
    "content": "// ==========================================================================\n// Header\n// ==========================================================================\n\nheader {\n  padding-bottom: $spacing-base;\n  text-align: center;\n\n  h1 span {\n    animation: shrink-hide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;\n    display: inline-block;\n    font-weight: $font-weight-light;\n    opacity: 0.5;\n  }\n\n  .call-to-action {\n    margin-top: ($spacing-base * 1.5);\n  }\n\n  .cta-mux {\n    margin-top: $spacing-base;\n\n    a {\n      border-bottom: 1px solid $color-link;\n      color: $color-link;\n      text-decoration: none;\n    }\n  }\n\n  @media only screen and (min-width: $screen-md) {\n    margin-right: ($spacing-base * 3);\n    max-width: 360px;\n    padding-bottom: ($spacing-base * 2);\n    text-align: left;\n\n    p:first-of-type {\n      @include font-size($font-size-base + 1);\n    }\n  }\n}\n"
  },
  {
    "path": "demo/src/sass/components/icons.scss",
    "content": "// ==========================================================================\n// Icons\n// ==========================================================================\n\n@use 'sass:math';\n\n// Base size icon styles\n.icon {\n  fill: currentColor;\n  height: $icon-size;\n  vertical-align: -3px;\n  width: $icon-size;\n}\n\n// Within elements\na svg,\nbutton svg,\nlabel svg {\n  pointer-events: none;\n}\n\na .icon,\n.btn .icon {\n  margin-right: math.div($spacing-base, 4);\n}\n"
  },
  {
    "path": "demo/src/sass/components/links.scss",
    "content": "// ==========================================================================\n// Links\n// ==========================================================================\n\n.link {\n  display: inline-flex;\n  gap: 0.25rem;\n  align-items: center;\n  border-bottom: 1px dashed currentColor;\n  color: $color-link;\n  position: relative;\n  text-decoration: none;\n  transition: all 0.2s ease;\n  vertical-align: top;\n\n  &::after {\n    background: currentColor;\n    content: '';\n    height: 1px;\n    left: 50%;\n    position: absolute;\n    top: 100%;\n    transform: translateX(-50%);\n    transition: width 0.2s ease;\n    width: 0;\n  }\n\n  &:hover,\n  &:focus,\n  &.active {\n    border-bottom-color: transparent;\n    outline: 0;\n\n    &::after {\n      width: 100%;\n    }\n  }\n\n  &:focus-visible {\n    @include focus-visible($color-link);\n  }\n\n  &.no-border::after {\n    display: none;\n  }\n}\n"
  },
  {
    "path": "demo/src/sass/components/lists.scss",
    "content": "// ==========================================================================\n// Lists\n// ==========================================================================\n\n// Lists\nul,\nli {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n"
  },
  {
    "path": "demo/src/sass/components/media.scss",
    "content": "// ==========================================================================\n// Basic media\n// ==========================================================================\n\nimg,\nvideo,\naudio {\n  max-width: 100%;\n  vertical-align: middle;\n}\n"
  },
  {
    "path": "demo/src/sass/components/navigation.scss",
    "content": "// ==========================================================================\n// Navigation\n// ==========================================================================\n\nnav {\n  display: flex;\n  justify-content: center;\n  margin-bottom: $spacing-base;\n}\n"
  },
  {
    "path": "demo/src/sass/components/players.scss",
    "content": "// ==========================================================================\n// Examples\n// ==========================================================================\n\n@use 'sass:math';\n\n// Example players\n.plyr {\n  --shadow-color: 197deg 32% 65%;\n  border-radius: $border-radius-2x-large;\n  box-shadow:\n    0 0.5px 0.6px hsl(var(--shadow-color) / 0.36),\n    0 1.7px 1.9px -0.8px hsl(var(--shadow-color) / 0.36),\n    0 4.3px 4.8px -1.7px hsl(var(--shadow-color) / 0.36),\n    -0.1px 10.6px 11.9px -2.5px hsl(var(--shadow-color) / 0.36);\n  margin: $spacing-base auto;\n\n  &.plyr--audio {\n    max-width: 480px;\n  }\n}\n\n.plyr__video-wrapper::after {\n  border: 1px solid rgba(#000, 0.15);\n  border-bottom-color: rgba(#000, 0.25);\n  border-radius: inherit;\n  content: '';\n  inset: 0;\n  pointer-events: none;\n  position: absolute;\n  z-index: 3;\n}\n\n// Style full supported player\n.plyr__cite {\n  color: $color-gray-500;\n\n  small {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 0.5rem;\n  }\n\n  .icon {\n    margin-right: math.div($spacing-base, 6);\n  }\n}\n\n.plyr__cite--mux .icon {\n  height: 20px;\n  width: 53px;\n}\n"
  },
  {
    "path": "demo/src/sass/layout/core.scss",
    "content": "// ==========================================================================\n// Core\n// ==========================================================================\n\n@use 'sass:math';\n\nhtml,\nbody {\n  display: flex;\n  width: 100%;\n}\n\nhtml {\n  background: $page-background;\n  background-attachment: fixed;\n  height: 100%;\n}\n\nbody {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n}\n\n.grid {\n  flex: 1;\n  overflow: auto;\n}\n\n.grid header {\n  line-height: $line-height-loose;\n}\n\nmain {\n  margin: auto;\n  padding-bottom: 1px; // Collapsing margins\n  text-align: center;\n}\n\naside {\n  align-items: center;\n  background: #fff;\n  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  padding: $spacing-base;\n  position: relative;\n  text-align: center;\n  text-shadow: none;\n  width: 100%;\n\n  .icon {\n    fill: $color-twitter;\n    margin-right: math.div($spacing-base, 2);\n  }\n\n  p {\n    margin: 0;\n  }\n\n  a {\n    color: $color-twitter;\n\n    &:focus-visible {\n      @include focus-visible($color-twitter);\n    }\n  }\n}\n"
  },
  {
    "path": "demo/src/sass/layout/error.scss",
    "content": "// ==========================================================================\n// Errors (AWS pages)\n// ==========================================================================\n\n// Error page\nhtml.error,\n.error body {\n  height: 100%;\n}\n\nhtml.error {\n  background: $page-background;\n  background-attachment: fixed;\n}\n\n.error body {\n  align-items: center;\n  display: flex;\n  width: 100%;\n}\n\n.error main {\n  padding: $spacing-base;\n  text-align: center;\n  width: 100%;\n\n  p {\n    @include font-size($font-size-large);\n  }\n}\n"
  },
  {
    "path": "demo/src/sass/layout/grid.scss",
    "content": "// ==========================================================================\n// Super basic grid\n// ==========================================================================\n\n.grid {\n  margin: 0 auto;\n  padding: $spacing-base;\n\n  @media only screen and (min-width: $screen-md) {\n    align-items: center;\n    display: flex;\n    max-width: $container-max-width;\n    width: 100%;\n\n    > * {\n      flex: 1;\n    }\n  }\n}\n"
  },
  {
    "path": "demo/src/sass/lib/animation.scss",
    "content": "// ==========================================================================\n// Animations\n// ==========================================================================\n\n// Fade\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes shrink-hide {\n  0% {\n    opacity: 0.5;\n    width: 38px;\n  }\n\n  20% {\n    width: 45px;\n  }\n\n  100% {\n    opacity: 0;\n    width: 0;\n  }\n}\n"
  },
  {
    "path": "demo/src/sass/lib/fontface.scss",
    "content": "// ==========================================================================\n// Fonts\n// ==========================================================================\n\n@font-face {\n  font-display: swap;\n  font-family: Gordita;\n  font-style: normal;\n  font-weight: $font-weight-light;\n  src:\n    url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),\n    url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');\n}\n\n@font-face {\n  font-display: swap;\n  font-family: Gordita;\n  font-style: normal;\n  font-weight: $font-weight-regular;\n  src:\n    url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),\n    url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff');\n}\n\n@font-face {\n  font-display: swap;\n  font-family: Gordita;\n  font-style: normal;\n  font-weight: $font-weight-medium;\n  src:\n    url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),\n    url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff');\n}\n\n@font-face {\n  font-display: swap;\n  font-family: Gordita;\n  font-style: normal;\n  font-weight: $font-weight-bold;\n  src:\n    url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),\n    url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');\n}\n\n@font-face {\n  font-display: swap;\n  font-family: Gordita;\n  font-style: normal;\n  font-weight: $font-weight-black;\n  src:\n    url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),\n    url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');\n}\n"
  },
  {
    "path": "demo/src/sass/lib/mixins.scss",
    "content": "// ==========================================================================\n// Mixins\n// ==========================================================================\n\n@use 'sass:math';\n\n// Nicer focus styles\n// ---------------------------------------\n@mixin focus-visible($color: $focus-default-color) {\n  outline: 2px dashed $color;\n  outline-offset: 2px;\n}\n\n// Use rems for font sizing\n// Leave <body> at 100%/16px\n// ---------------------------------------\n@function calculate-rem($size) {\n  $rem: math.div($size, 16);\n  @return #{$rem}rem;\n}\n\n@mixin font-size($size: $font-size-base) {\n  font-size: $size * 1px; // Fallback in px\n  font-size: calculate-rem($size);\n}\n\n// Font smoothing\n// ---------------------------------------\n@mixin font-smoothing($enabled: true) {\n  @if $enabled {\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n  } @else {\n    -moz-osx-font-smoothing: auto;\n    -webkit-font-smoothing: subpixel-antialiased;\n  }\n}\n"
  },
  {
    "path": "demo/src/sass/lib/normalize.scss",
    "content": "/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in\n *    IE on Windows Phone and in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n     ========================================================================== */\n\n/**\n   * Remove the margin in all browsers (opinionated).\n   */\n\nbody {\n  margin: 0;\n}\n\n/**\n   * Add the correct display in IE 9-.\n   */\n\narticle,\naside,\nfooter,\nheader,\nnav,\nsection {\n  display: block;\n}\n\n/**\n   * Correct the font size and margin on `h1` elements within `section` and\n   * `article` contexts in Chrome, Firefox, and Safari.\n   */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 9-.\n   * 1. Add the correct display in IE.\n   */\n\nfigcaption,\nfigure,\nmain {\n  /* 1 */\n  display: block;\n}\n\n/**\n   * Add the correct margin in IE 8.\n   */\n\nfigure {\n  margin: 1em 40px;\n}\n\n/**\n   * 1. Add the correct box sizing in Firefox.\n   * 2. Show the overflow in Edge and IE.\n   */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\npre {\n  font-family: monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n     ========================================================================== */\n\n/**\n   * 1. Remove the gray background on active links in IE 10.\n   * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.\n   */\n\na {\n  background-color: transparent; /* 1 */\n  text-decoration-skip: objects; /* 2 */\n}\n\n/**\n   * 1. Remove the bottom border in Chrome 57- and Firefox 39-.\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n   */\n\nabbr[title] {\n  border-bottom: 0; /* 1 */\n  text-decoration: underline; /* 2 */\n  text-decoration: underline dotted; /* 2 */\n}\n\n/**\n   * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n   */\n\nb,\nstrong {\n  font-weight: inherit;\n}\n\n/**\n   * Add the correct font weight in Chrome, Edge, and Safari.\n   */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n   * Add the correct font style in Android 4.3-.\n   */\n\ndfn {\n  font-style: italic;\n}\n\n/**\n   * Add the correct background and color in IE 9-.\n   */\n\nmark {\n  background-color: #ff0;\n  color: #000;\n}\n\n/**\n   * Add the correct font size in all browsers.\n   */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n   * Prevent `sub` and `sup` elements from affecting the line height in\n   * all browsers.\n   */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 9-.\n   */\n\naudio,\nvideo {\n  display: inline-block;\n}\n\n/**\n   * Add the correct display in iOS 4-7.\n   */\n\naudio:not([controls]) {\n  display: none;\n  height: 0;\n}\n\n/**\n   * Remove the border on images inside links in IE 10-.\n   */\n\nimg {\n  border-style: none;\n}\n\n/**\n   * Hide the overflow in IE.\n   */\n\nsvg:not(:root) {\n  overflow: hidden;\n}\n\n/* Forms\n     ========================================================================== */\n\n/**\n   * 1. Change the font styles in all browsers (opinionated).\n   * 2. Remove the margin in Firefox and Safari.\n   */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: sans-serif; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n   * Show the overflow in IE.\n   * 1. Show the overflow in Edge.\n   */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\n   * 1. Remove the inheritance of text transform in Firefox.\n   */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n   * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n   *    controls in Android 4.\n   * 2. Correct the inability to style clickable types in iOS and Safari.\n   */\n\nbutton,\nhtml [type='button'],\n[type='reset'],\n[type='submit'] {\n  appearance: button; /* 2 */\n}\n\n/**\n   * Remove the inner border and padding in Firefox.\n   */\n\nbutton::-moz-focus-inner,\n[type='button']::-moz-focus-inner,\n[type='reset']::-moz-focus-inner,\n[type='submit']::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n   * Restore the focus styles unset by the previous rule.\n   */\n\nbutton:-moz-focusring,\n[type='button']:-moz-focusring,\n[type='reset']:-moz-focusring,\n[type='submit']:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n   * Correct the padding in Firefox.\n   */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n   * 1. Correct the text wrapping in Edge and IE.\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\n   * 3. Remove the padding so developers are not caught out when they zero out\n   *    `fieldset` elements in all browsers.\n   */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n   * 1. Add the correct display in IE 9-.\n   * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.\n   */\n\nprogress {\n  display: inline-block; /* 1 */\n  vertical-align: baseline; /* 2 */\n}\n\n/**\n   * Remove the default vertical scrollbar in IE.\n   */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n   * 1. Add the correct box sizing in IE 10-.\n   * 2. Remove the padding in IE 10-.\n   */\n\n[type='checkbox'],\n[type='radio'] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n   * Correct the cursor style of increment and decrement buttons in Chrome.\n   */\n\n[type='number']::-webkit-inner-spin-button,\n[type='number']::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n   * 1. Correct the odd appearance in Chrome and Safari.\n   * 2. Correct the outline style in Safari.\n   */\n\n[type='search'] {\n  appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n   */\n\n[type='search']::-webkit-search-cancel-button,\n[type='search']::-webkit-search-decoration {\n  appearance: none;\n}\n\n/**\n   * 1. Correct the inability to style clickable types in iOS and Safari.\n   * 2. Change font properties to `inherit` in Safari.\n   */\n\n::-webkit-file-upload-button {\n  appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n     ========================================================================== */\n\n/*\n   * Add the correct display in IE 9-.\n   * 1. Add the correct display in Edge, IE, and Firefox.\n   */\n\ndetails,\nmenu {\n  display: block;\n}\n\n/*\n   * Add the correct display in all browsers.\n   */\n\nsummary {\n  display: list-item;\n}\n\n/* Scripting\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 9-.\n   */\n\ncanvas {\n  display: inline-block;\n}\n\n/**\n   * Add the correct display in IE.\n   */\n\ntemplate {\n  display: none;\n}\n\n/* Hidden\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 10-.\n   */\n\n[hidden] {\n  display: none;\n}\n"
  },
  {
    "path": "demo/src/sass/lib/reset.scss",
    "content": "// ==========================================================================\n// Resets\n// ==========================================================================\n\n// BORDER-BOX ALL THE THINGS!\n// http://paulirish.com/2012/box-sizing-border-box-ftw/\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\nbutton {\n  font-family: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n  background-color: transparent;\n  background-image: none;\n  border: 0;\n}\n"
  },
  {
    "path": "demo/src/sass/settings/breakpoints.scss",
    "content": "// ==========================================================================\n// Breakpoints\n// ==========================================================================\n\n$screen-sm: 480px;\n$screen-md: 768px;\n"
  },
  {
    "path": "demo/src/sass/settings/colors.scss",
    "content": "// ==========================================================================\n// Colors\n// ==========================================================================\n\n// Grayscale\n$color-gray-900: hsl(210deg 15% 16%);\n$color-gray-800: lighten($color-gray-900, 9%);\n$color-gray-700: lighten($color-gray-800, 9%);\n$color-gray-600: lighten($color-gray-700, 9%);\n$color-gray-500: lighten($color-gray-600, 9%);\n$color-gray-400: lighten($color-gray-500, 9%);\n$color-gray-300: lighten($color-gray-400, 9%);\n$color-gray-200: lighten($color-gray-300, 9%);\n$color-gray-100: lighten($color-gray-200, 9%);\n$color-gray-50: lighten($color-gray-100, 9%);\n\n// Branding\n$color-brand-primary: hsl(198deg 100% 50%);\n\n// Text\n$color-text: $color-gray-700;\n$color-headings: $color-brand-primary;\n\n// Brands\n$color-twitter: #4baaf4;\n\n// Elements\n$color-link: $color-brand-primary;\n\n// Background\n$color-background-from: hsl(198deg 100% 94%);\n$color-background-to: hsl(198deg 100% 98%);\n\n// Buttons\n$color-button-background: $color-brand-primary;\n$color-button-text: #fff;\n$color-button-background-hover: hsl(198deg 100% 55%);\n$color-button-count-background: #fff;\n$color-button-count-text: $color-gray-600;\n\n// Focus\n$focus-default-color: $color-brand-primary;\n"
  },
  {
    "path": "demo/src/sass/settings/cosmetic.scss",
    "content": "// ==========================================================================\n// Misc cosmetic\n// ==========================================================================\n\n// Button count arrow size\n$arrow-size: 5px;\n\n// Radii\n$border-radius-small: 4px;\n$border-radius-medium: 6px;\n$border-radius-2x-large: 12px;\n\n// Background\n$page-background: linear-gradient(to left top, $color-background-from, $color-background-to);\n"
  },
  {
    "path": "demo/src/sass/settings/icons.scss",
    "content": "// ==========================================================================\n// Icons\n// ==========================================================================\n\n$icon-size: 16px;\n"
  },
  {
    "path": "demo/src/sass/settings/layout.scss",
    "content": "// ==========================================================================\n// Layout\n// ==========================================================================\n\n$container-max-width: 1240px;\n"
  },
  {
    "path": "demo/src/sass/settings/plyr.scss",
    "content": "// ==========================================================================\n// Plyr Settings\n// ==========================================================================\n\n@include css-vars(\n  (\n    --plyr-color-main: $color-brand-primary,\n    --plyr-font-size-base: 13px,\n    --plyr-font-size-small: 12px,\n    --plyr-font-size-time: 11px,\n    --plyr-font-size-badges: 9px,\n    --plyr-font-size-menu: var(--plyr-font-size-base),\n    --plyr-font-weight-regular: 500,\n    --plyr-font-weight-bold: 600,\n    --plyr-font-size-captions-medium: 18px,\n    --plyr-font-size-captions-large: 21px,\n  )\n);\n"
  },
  {
    "path": "demo/src/sass/settings/spacing.scss",
    "content": "// ==========================================================================\n// Colors\n// ==========================================================================\n\n$spacing-base: 16px;\n"
  },
  {
    "path": "demo/src/sass/settings/type.scss",
    "content": "// ==========================================================================\n// Typography\n// ==========================================================================\n\n$font-sans-serif:\n  Gordita,\n  -apple-system,\n  BlinkMacSystemFont,\n  Segoe UI,\n  Noto Sans,\n  Helvetica,\n  Arial,\n  sans-serif,\n  Apple Color Emoji,\n  Segoe UI Emoji;\n$font-size-base: 15;\n$font-size-small: 13;\n$font-size-large: 18;\n$font-size-h1: 64;\n$font-weight-light: 300;\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n$font-weight-bold: 600;\n$font-weight-black: 900;\n$line-height-tight: 1.2;\n$line-height-base: 1.5;\n$line-height-loose: 1.8;\n$letter-spacing-headings: -0.025em;\n"
  },
  {
    "path": "demo/src/sass/type/base.scss",
    "content": "// ==========================================================================\n// Base\n// ==========================================================================\n\n// Set to 100% for rem sizing\nhtml {\n  font-size: 100%;\n}\n\nbody {\n  @include font-smoothing;\n  @include font-size($font-size-base);\n\n  color: $color-text;\n  font-family: $font-sans-serif;\n  font-weight: $font-weight-medium;\n  line-height: $line-height-base;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n  font: inherit;\n}\n\np,\nsmall {\n  margin: 0 0 ($spacing-base * 1.5);\n}\n\nsmall {\n  @include font-size($font-size-small);\n\n  display: block;\n}\n"
  },
  {
    "path": "demo/src/sass/type/headings.scss",
    "content": "// ==========================================================================\n// Headings\n// ==========================================================================\n\nh1 {\n  @include font-size($font-size-h1);\n\n  color: $color-headings;\n  font-weight: $font-weight-bold;\n  letter-spacing: $letter-spacing-headings;\n  line-height: $line-height-tight;\n  margin: 0 0 ($spacing-base * 1.5);\n}\n"
  },
  {
    "path": "demo/src/sass/utilities/cosmetic.scss",
    "content": "// ==========================================================================\n// Misc cosmetic\n// ==========================================================================\n\n.no-border {\n  border: 0;\n}\n"
  },
  {
    "path": "demo/src/sass/utilities/focus.scss",
    "content": "*:focus-visible {\n  outline: 2px dotted $color-brand-primary;\n  outline-offset: 2px;\n}\n"
  },
  {
    "path": "demo/src/sass/utilities/hidden.scss",
    "content": "// ==========================================================================\n// Hidden\n// ==========================================================================\n\n[hidden] {\n  display: none;\n}\n\n// Hide only visually, but have it available for screen readers: h5bp.com/v\n.sr-only {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  opacity: 0.001;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n"
  },
  {
    "path": "deploy.json",
    "content": "{\n  \"cdn\": {\n    \"type\": \"r2\",\n    \"bucket\": \"plyr\",\n    \"domain\": \"cdn.plyr.io\"\n  },\n  \"demo\": {\n    \"type\": \"s3\",\n    \"bucket\": \"plyr.io\",\n    \"domain\": \"plyr.io\",\n    \"region\": \"us-west-1\"\n  }\n}\n"
  },
  {
    "path": "eslint.config.mjs",
    "content": "import antfu from '@antfu/eslint-config';\nimport { FlatCompat } from '@eslint/eslintrc';\n\nimport globals from 'globals';\n\nconst compat = new FlatCompat({ baseDirectory: import.meta.dirname });\n\nexport default antfu({\n  formatters: {\n    css: true,\n    html: true,\n    markdown: 'prettier',\n    svg: 'prettier',\n  },\n  stylistic: {\n    semi: true,\n    spacedComment: true,\n    indent: 2,\n    quotes: 'single',\n  },\n  ignores: ['node_modules', 'dist', 'src/js/plyr.d.ts'],\n  languageOptions: {\n    globals: {\n      ...globals.browser,\n      Hls: 'readonly',\n      jQuery: 'readonly',\n      Plyr: 'readonly',\n    },\n  },\n}, ...compat.config({\n  rules: {\n    'antfu/if-newline': 'off',\n  },\n}, {\n  files: ['**/*.md'],\n  rules: {\n    'style/max-len': 'off',\n  },\n}));\n"
  },
  {
    "path": "gulpfile.js",
    "content": "// ==========================================================================\n// Gulp build script\n// ==========================================================================\n\nexport { default } from './tasks/build.js';\n\nexport * from './tasks/build.js';\nexport * from './tasks/deploy.js';\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"plyr\",\n  \"type\": \"module\",\n  \"version\": \"3.8.4\",\n  \"description\": \"A simple, accessible and customizable HTML5, YouTube and Vimeo media player\",\n  \"author\": \"Sam Potts <sam@potts.es>\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://plyr.io\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git://github.com/sampotts/plyr.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/sampotts/plyr/issues\"\n  },\n  \"keywords\": [\n    \"HTML5 Video\",\n    \"HTML5 Audio\",\n    \"Media Player\",\n    \"DASH\",\n    \"Shaka\",\n    \"WordPress\",\n    \"HLS\"\n  ],\n  \"exports\": {\n    \".\": {\n      \"types\": \"./src/js/plyr.d.ts\",\n      \"import\": \"./dist/plyr.mjs\",\n      \"require\": \"./dist/plyr.js\",\n      \"browser\": \"./dist/plyr.min.js\",\n      \"default\": \"./dist/plyr.js\"\n    },\n    \"./dist/plyr.css\": \"./dist/plyr.css\",\n    \"./css\": \"./dist/plyr.css\",\n    \"./plyr.scss\": \"./src/sass/plyr.scss\"\n  },\n  \"sass\": \"./src/sass/plyr.scss\",\n  \"style\": \"./dist/plyr.css\",\n  \"browserslist\": \"> 1%\",\n  \"scripts\": {\n    \"build\": \"gulp build\",\n    \"lint\": \"stylelint **/*.scss && eslint src demo && pnpm remark\",\n    \"lint:fix\": \"stylelint **/*.scss --fix && eslint src demo --fix\",\n    \"remark\": \"remark -f --use 'validate-links=repository:\\\"sampotts/plyr\\\"' '{,!(node_modules),.?**/}*.md'\",\n    \"deploy\": \"pnpm run lint && gulp prepare && gulp build && gulp deploy\",\n    \"spellcheck\": \"cspell \\\"**/*.{js,md,scss,json}\\\" --no-must-find-files\",\n    \"start\": \"gulp\"\n  },\n  \"dependencies\": {\n    \"core-js\": \"^3.45.1\",\n    \"custom-event-polyfill\": \"^1.0.7\",\n    \"loadjs\": \"^4.3.0\",\n    \"rangetouch\": \"^2.0.1\",\n    \"url-polyfill\": \"^1.1.13\"\n  },\n  \"devDependencies\": {\n    \"@antfu/eslint-config\": \"^5.2.1\",\n    \"@aws-sdk/client-s3\": \"^3.876.0\",\n    \"@babel/core\": \"^7.28.3\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.18.6\",\n    \"@babel/plugin-proposal-optional-chaining\": \"^7.21.0\",\n    \"@babel/plugin-transform-nullish-coalescing-operator\": \"^7.27.1\",\n    \"@babel/preset-env\": \"^7.28.3\",\n    \"@eslint/eslintrc\": \"^3.3.1\",\n    \"@prettier/plugin-xml\": \"^3.4.2\",\n    \"@rollup/plugin-babel\": \"^6.0.4\",\n    \"@rollup/plugin-commonjs\": \"^28.0.6\",\n    \"@rollup/plugin-node-resolve\": \"^16.0.1\",\n    \"autoprefixer\": \"^10.4.21\",\n    \"aws-sdk\": \"^2.1692.0\",\n    \"babel-eslint\": \"^10.1.0\",\n    \"browser-sync\": \"^3.0.4\",\n    \"colorette\": \"2.0.20\",\n    \"cspell\": \"^9.2.0\",\n    \"cssnano\": \"^7.1.1\",\n    \"del\": \"^8.0.0\",\n    \"dotenv\": \"^17.2.1\",\n    \"eslint\": \"^9.34.0\",\n    \"eslint-plugin-format\": \"^1.0.1\",\n    \"fancy-log\": \"^2.0.0\",\n    \"git-branch\": \"^2.0.1\",\n    \"globals\": \"^16.3.0\",\n    \"gulp\": \"^5.0.1\",\n    \"gulp-better-rollup\": \"^4.0.1\",\n    \"gulp-filter\": \"^9.0.1\",\n    \"gulp-header\": \"^2.0.9\",\n    \"gulp-if\": \"^3.0.0\",\n    \"gulp-imagemin\": \"^9.1.0\",\n    \"gulp-open\": \"^3.0.1\",\n    \"gulp-plumber\": \"^1.2.1\",\n    \"gulp-postcss\": \"^10.0.0\",\n    \"gulp-rename\": \"^2.1.0\",\n    \"gulp-replace\": \"^1.1.4\",\n    \"gulp-sass\": \"^6.0.1\",\n    \"gulp-size\": \"^5.0.0\",\n    \"gulp-sourcemaps\": \"^3.0.0\",\n    \"gulp-svgstore\": \"^9.0.0\",\n    \"gulp-terser\": \"^2.1.0\",\n    \"imagemin-svgo\": \"^11.0.1\",\n    \"mime\": \"^4.0.7\",\n    \"postcss\": \"^8.5.6\",\n    \"postcss-custom-properties\": \"^14.0.6\",\n    \"postcss-scss\": \"^4.0.9\",\n    \"remark-cli\": \"^12.0.1\",\n    \"remark-validate-links\": \"^13.1.0\",\n    \"rollup\": \"^4.48.1\",\n    \"sass\": \"^1.91.0\",\n    \"stylelint\": \"^16.23.1\",\n    \"stylelint-config-sass-guidelines\": \"^12.1.0\",\n    \"stylelint-selector-bem-pattern\": \"^4.0.1\",\n    \"through2\": \"^4.0.2\"\n  }\n}\n"
  },
  {
    "path": "plyr.code-workspace",
    "content": "{\n  \"folders\": [\n    {\n      \"path\": \".\"\n    }\n  ],\n}\n"
  },
  {
    "path": "src/js/captions.js",
    "content": "// ==========================================================================\n// Plyr Captions\n// TODO: Create as class\n// ==========================================================================\n\nimport controls from './controls';\nimport support from './support';\nimport { dedupe } from './utils/arrays';\nimport browser from './utils/browser';\nimport {\n  createElement,\n  emptyElement,\n  getAttributesFromSelector,\n  insertAfter,\n  removeElement,\n  toggleClass,\n} from './utils/elements';\nimport { on, triggerEvent } from './utils/events';\nimport fetch from './utils/fetch';\nimport i18n from './utils/i18n';\nimport is from './utils/is';\nimport { getHTML } from './utils/strings';\nimport { parseUrl } from './utils/urls';\n\nconst captions = {\n  // Setup captions\n  setup() {\n    // Requires UI support\n    if (!this.supported.ui) {\n      return;\n    }\n\n    // Only Vimeo and HTML5 video supported at this point\n    if (!this.isVideo || this.isYouTube || (this.isHTML5 && !support.textTracks)) {\n      // Clear menu and hide\n      if (\n        is.array(this.config.controls)\n        && this.config.controls.includes('settings')\n        && this.config.settings.includes('captions')\n      ) {\n        controls.setCaptionsMenu.call(this);\n      }\n\n      return;\n    }\n\n    // Inject the container\n    if (!is.element(this.elements.captions)) {\n      this.elements.captions = createElement('div', getAttributesFromSelector(this.config.selectors.captions));\n      this.elements.captions.setAttribute('dir', 'auto');\n\n      insertAfter(this.elements.captions, this.elements.wrapper);\n    }\n\n    // Fix IE captions if CORS is used\n    // Fetch captions and inject as blobs instead (data URIs not supported!)\n    if (browser.isIE && window.URL) {\n      const elements = this.media.querySelectorAll('track');\n\n      Array.from(elements).forEach((track) => {\n        const src = track.getAttribute('src');\n        const url = parseUrl(src);\n\n        if (\n          url !== null\n          && url.hostname !== window.location.href.hostname\n          && ['http:', 'https:'].includes(url.protocol)\n        ) {\n          fetch(src, 'blob')\n            .then((blob) => {\n              track.setAttribute('src', window.URL.createObjectURL(blob));\n            })\n            .catch(() => {\n              removeElement(track);\n            });\n        }\n      });\n    }\n\n    // Get and set initial data\n    // The \"preferred\" options are not realized unless / until the wanted language has a match\n    // * languages: Array of user's browser languages.\n    // * language:  The language preferred by user settings or config\n    // * active:    The state preferred by user settings or config\n    // * toggled:   The real captions state\n\n    const browserLanguages = navigator.languages || [navigator.language || navigator.userLanguage || 'en'];\n    const languages = dedupe(browserLanguages.map(language => language.split('-')[0]));\n    let language = (this.storage.get('language') || this.captions.language || this.config.captions.language || 'auto').toLowerCase();\n\n    // Use first browser language when language is 'auto'\n    if (language === 'auto') {\n      [language] = languages;\n    }\n\n    let active = this.storage.get('captions') || this.captions.active;\n    if (!is.boolean(active)) {\n      ({ active } = this.config.captions);\n    }\n\n    Object.assign(this.captions, {\n      toggled: false,\n      active,\n      language,\n      languages,\n    });\n\n    // Watch changes to textTracks and update captions menu\n    if (this.isHTML5) {\n      const trackEvents = this.config.captions.update ? 'addtrack removetrack' : 'removetrack';\n      on.call(this, this.media.textTracks, trackEvents, captions.update.bind(this));\n    }\n\n    // Update available languages in list next tick (the event must not be triggered before the listeners)\n    setTimeout(captions.update.bind(this), 0);\n  },\n\n  // Update available language options in settings based on tracks\n  update() {\n    const tracks = captions.getTracks.call(this, true);\n    // Get the wanted language\n    const { active, language, meta, currentTrackNode } = this.captions;\n    const languageExists = Boolean(tracks.find(track => track.language === language));\n\n    // Handle tracks (add event listener and \"pseudo\"-default)\n    if (this.isHTML5 && this.isVideo) {\n      tracks\n        .filter(track => !meta.get(track))\n        .forEach((track) => {\n          this.debug.log('Track added', track);\n\n          // Attempt to store if the original dom element was \"default\"\n          meta.set(track, {\n            default: track.mode === 'showing',\n          });\n\n          // Turn off native caption rendering to avoid double captions\n          // Note: mode='hidden' forces a track to download. To ensure every track\n          // isn't downloaded at once, only 'showing' tracks should be reassigned\n\n          if (track.mode === 'showing') {\n            track.mode = 'hidden';\n          }\n\n          // Add event listener for cue changes\n          on.call(this, track, 'cuechange', () => captions.updateCues.call(this));\n        });\n    }\n\n    // Update language first time it matches, or if the previous matching track was removed\n    if ((languageExists && this.language !== language) || !tracks.includes(currentTrackNode)) {\n      captions.setLanguage.call(this, language);\n      captions.toggle.call(this, active && languageExists);\n    }\n\n    // Enable or disable captions based on track length\n    if (this.elements) {\n      toggleClass(this.elements.container, this.config.classNames.captions.enabled, !is.empty(tracks));\n    }\n\n    // Update available languages in list\n    if (\n      is.array(this.config.controls)\n      && this.config.controls.includes('settings')\n      && this.config.settings.includes('captions')\n    ) {\n      controls.setCaptionsMenu.call(this);\n    }\n  },\n\n  // Toggle captions display\n  // Used internally for the toggleCaptions method, with the passive option forced to false\n  toggle(input, passive = true) {\n    // If there's no full support\n    if (!this.supported.ui) {\n      return;\n    }\n\n    const { toggled } = this.captions; // Current state\n    const activeClass = this.config.classNames.captions.active;\n    // Get the next state\n    // If the method is called without parameter, toggle based on current value\n    const active = is.nullOrUndefined(input) ? !toggled : input;\n\n    // Update state and trigger event\n    if (active !== toggled) {\n      // When passive, don't override user preferences\n      if (!passive) {\n        this.captions.active = active;\n        this.storage.set({ captions: active });\n      }\n\n      // Force language if the call isn't passive and there is no matching language to toggle to\n      if (!this.language && active && !passive) {\n        const tracks = captions.getTracks.call(this);\n        const track = captions.findTrack.call(this, [this.captions.language, ...this.captions.languages], true);\n\n        // Override user preferences to avoid switching languages if a matching track is added\n        this.captions.language = track.language;\n\n        // Set caption, but don't store in localStorage as user preference\n        captions.set.call(this, tracks.indexOf(track));\n        return;\n      }\n\n      // Toggle button if it's enabled\n      if (this.elements.buttons.captions) {\n        this.elements.buttons.captions.pressed = active;\n      }\n\n      // Add class hook\n      toggleClass(this.elements.container, activeClass, active);\n\n      this.captions.toggled = active;\n\n      // Update settings menu\n      controls.updateSetting.call(this, 'captions');\n\n      // Trigger event (not used internally)\n      triggerEvent.call(this, this.media, active ? 'captionsenabled' : 'captionsdisabled');\n    }\n\n    // Wait for the call stack to clear before setting mode='hidden'\n    // on the active track - forcing the browser to download it\n    setTimeout(() => {\n      if (active && this.captions.toggled) {\n        this.captions.currentTrackNode.mode = 'hidden';\n      }\n    });\n  },\n\n  // Set captions by track index\n  // Used internally for the currentTrack setter with the passive option forced to false\n  set(index, passive = true) {\n    const tracks = captions.getTracks.call(this);\n\n    // Disable captions if setting to -1\n    if (index === -1) {\n      captions.toggle.call(this, false, passive);\n      return;\n    }\n\n    if (!is.number(index)) {\n      this.debug.warn('Invalid caption argument', index);\n      return;\n    }\n\n    if (!(index in tracks)) {\n      this.debug.warn('Track not found', index);\n      return;\n    }\n\n    if (this.captions.currentTrack !== index) {\n      this.captions.currentTrack = index;\n      const track = tracks[index];\n      const { language } = track || {};\n\n      // Store reference to node for invalidation on remove\n      this.captions.currentTrackNode = track;\n\n      // Update settings menu\n      controls.updateSetting.call(this, 'captions');\n\n      // When passive, don't override user preferences\n      if (!passive) {\n        this.captions.language = language;\n        this.storage.set({ language });\n      }\n\n      // Handle Vimeo captions\n      if (this.isVimeo) {\n        // Enable text track but don't render captions within the player\n        // Since we handle that ourselves\n        this.embed.enableTextTrack(language, null, false);\n      }\n\n      // Trigger event\n      triggerEvent.call(this, this.media, 'languagechange');\n    }\n\n    // Show captions\n    captions.toggle.call(this, true, passive);\n\n    if (this.isHTML5 && this.isVideo) {\n      // If we change the active track while a cue is already displayed we need to update it\n      captions.updateCues.call(this);\n    }\n  },\n\n  // Set captions by language\n  // Used internally for the language setter with the passive option forced to false\n  setLanguage(input, passive = true) {\n    if (!is.string(input)) {\n      this.debug.warn('Invalid language argument', input);\n      return;\n    }\n    // Normalize\n    const language = input.toLowerCase();\n    this.captions.language = language;\n\n    // Set currentTrack\n    const tracks = captions.getTracks.call(this);\n    const track = captions.findTrack.call(this, [language]);\n    captions.set.call(this, tracks.indexOf(track), passive);\n  },\n\n  // Get current valid caption tracks\n  // If update is false it will also ignore tracks without metadata\n  // This is used to \"freeze\" the language options when captions.update is false\n  getTracks(update = false) {\n    // Handle media or textTracks missing or null\n    const tracks = Array.from((this.media || {}).textTracks || []);\n    // For HTML5, use cache instead of current tracks when it exists (if captions.update is false)\n    // Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata)\n    return tracks\n      .filter(track => !this.isHTML5 || update || this.captions.meta.has(track))\n      .filter(track => ['captions', 'subtitles'].includes(track.kind));\n  },\n\n  // Match tracks based on languages and get the first\n  findTrack(languages, force = false) {\n    const tracks = captions.getTracks.call(this);\n    const sortIsDefault = track => Number((this.captions.meta.get(track) || {}).default);\n    const sorted = Array.from(tracks).sort((a, b) => sortIsDefault(b) - sortIsDefault(a));\n    let track;\n\n    languages.every((language) => {\n      track = sorted.find(t => t.language === language);\n      return !track; // Break iteration if there is a match\n    });\n\n    // If no match is found but is required, get first\n    return track || (force ? sorted[0] : undefined);\n  },\n\n  // Get the current track\n  getCurrentTrack() {\n    return captions.getTracks.call(this)[this.currentTrack];\n  },\n\n  // Get UI label for track\n  getLabel(track) {\n    let currentTrack = track;\n\n    if (!is.track(currentTrack) && support.textTracks && this.captions.toggled) {\n      currentTrack = captions.getCurrentTrack.call(this);\n    }\n\n    if (is.track(currentTrack)) {\n      if (!is.empty(currentTrack.label)) {\n        return currentTrack.label;\n      }\n\n      if (!is.empty(currentTrack.language)) {\n        return track.language.toUpperCase();\n      }\n\n      return i18n.get('enabled', this.config);\n    }\n\n    return i18n.get('disabled', this.config);\n  },\n\n  // Update captions using current track's active cues\n  // Also optional array argument in case there isn't any track (ex: vimeo)\n  updateCues(input) {\n    // Requires UI\n    if (!this.supported.ui) {\n      return;\n    }\n\n    if (!is.element(this.elements.captions)) {\n      this.debug.warn('No captions element to render to');\n      return;\n    }\n\n    // Only accept array or empty input\n    if (!is.nullOrUndefined(input) && !Array.isArray(input)) {\n      this.debug.warn('updateCues: Invalid input', input);\n      return;\n    }\n\n    let cues = input;\n\n    // Get cues from track\n    if (!cues) {\n      const track = captions.getCurrentTrack.call(this);\n\n      cues = Array.from((track || {}).activeCues || [])\n        .map(cue => cue.getCueAsHTML())\n        .map(getHTML);\n    }\n\n    // Set new caption text\n    const content = cues.map(cueText => cueText.trim()).join('\\n');\n    const changed = content !== this.elements.captions.innerHTML;\n\n    if (changed) {\n      // Empty the container and create a new child element\n      emptyElement(this.elements.captions);\n      const caption = createElement('span', getAttributesFromSelector(this.config.selectors.caption));\n      caption.innerHTML = content;\n      this.elements.captions.appendChild(caption);\n\n      // Trigger event\n      triggerEvent.call(this, this.media, 'cuechange');\n    }\n  },\n};\n\nexport default captions;\n"
  },
  {
    "path": "src/js/config/defaults.js",
    "content": "// ==========================================================================\n// Plyr default config\n// ==========================================================================\n\nconst defaults = {\n  // Disable\n  enabled: true,\n\n  // Custom media title\n  title: '',\n\n  // Logging to console\n  debug: false,\n\n  // Auto play (if supported)\n  autoplay: false,\n\n  // Only allow one media playing at once (vimeo only)\n  autopause: true,\n\n  // Allow inline playback on iOS\n  playsinline: true,\n\n  // Default time to skip when rewind/fast forward\n  seekTime: 10,\n\n  // Default volume\n  volume: 1,\n  muted: false,\n\n  // Pass a custom duration\n  duration: null,\n\n  // Display the media duration on load in the current time position\n  // If you have opted to display both duration and currentTime, this is ignored\n  displayDuration: true,\n\n  // Invert the current time to be a countdown\n  invertTime: true,\n\n  // Clicking the currentTime inverts it's value to show time left rather than elapsed\n  toggleInvert: true,\n\n  // Force an aspect ratio\n  // The format must be `'w:h'` (e.g. `'16:9'`)\n  ratio: null,\n\n  // Click video container to play/pause\n  clickToPlay: true,\n\n  // Auto hide the controls\n  hideControls: true,\n\n  // Reset to start when playback ended\n  resetOnEnd: false,\n\n  // Disable the standard context menu\n  disableContextMenu: true,\n\n  // Sprite (for icons)\n  loadSprite: true,\n  iconPrefix: 'plyr',\n  iconUrl: 'https://cdn.plyr.io/3.8.4/plyr.svg',\n\n  // Blank video (used to prevent errors on source change)\n  blankVideo: 'https://cdn.plyr.io/static/blank.mp4',\n\n  // Quality default\n  quality: {\n    default: 576,\n    // The options to display in the UI, if available for the source media\n    options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240],\n    forced: false,\n    onChange: null,\n  },\n\n  // Set loops\n  loop: {\n    active: false,\n    // start: null,\n    // end: null,\n  },\n\n  // Speed default and options to display\n  speed: {\n    selected: 1,\n    // The options to display in the UI, if available for the source media (e.g. Vimeo and YouTube only support 0.5x-4x)\n    options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4],\n  },\n\n  // Keyboard shortcut settings\n  keyboard: {\n    focused: true,\n    global: false,\n  },\n\n  // Display tooltips\n  tooltips: {\n    controls: false,\n    seek: true,\n  },\n\n  // Captions settings\n  captions: {\n    active: false,\n    language: 'auto',\n    // Listen to new tracks added after Plyr is initialized.\n    // This is needed for streaming captions, but may result in unselectable options\n    update: false,\n  },\n\n  // Fullscreen settings\n  fullscreen: {\n    enabled: true, // Allow fullscreen?\n    fallback: true, // Fallback using full viewport/window\n    iosNative: false, // Use the native fullscreen in iOS (disables custom controls)\n    // Selector for the fullscreen container so contextual / non-player content can remain visible in fullscreen mode\n    // Non-ancestors of the player element will be ignored\n    // container: null, // defaults to the player element\n  },\n\n  // Local storage\n  storage: {\n    enabled: true,\n    key: 'plyr',\n  },\n\n  // Default controls\n  controls: [\n    'play-large',\n    // 'restart',\n    // 'rewind',\n    'play',\n    // 'fast-forward',\n    'progress',\n    'current-time',\n    // 'duration',\n    'mute',\n    'volume',\n    'captions',\n    'settings',\n    'pip',\n    'airplay',\n    // 'download',\n    'fullscreen',\n  ],\n  settings: ['captions', 'quality', 'speed'],\n\n  // Localisation\n  i18n: {\n    restart: 'Restart',\n    rewind: 'Rewind {seektime}s',\n    play: 'Play',\n    pause: 'Pause',\n    fastForward: 'Forward {seektime}s',\n    seek: 'Seek',\n    seekLabel: '{currentTime} of {duration}',\n    played: 'Played',\n    buffered: 'Buffered',\n    currentTime: 'Current time',\n    duration: 'Duration',\n    volume: 'Volume',\n    mute: 'Mute',\n    unmute: 'Unmute',\n    enableCaptions: 'Enable captions',\n    disableCaptions: 'Disable captions',\n    download: 'Download',\n    enterFullscreen: 'Enter fullscreen',\n    exitFullscreen: 'Exit fullscreen',\n    frameTitle: 'Player for {title}',\n    captions: 'Captions',\n    settings: 'Settings',\n    pip: 'PIP',\n    menuBack: 'Go back to previous menu',\n    speed: 'Speed',\n    normal: 'Normal',\n    quality: 'Quality',\n    loop: 'Loop',\n    start: 'Start',\n    end: 'End',\n    all: 'All',\n    reset: 'Reset',\n    disabled: 'Disabled',\n    enabled: 'Enabled',\n    advertisement: 'Ad',\n    qualityBadge: {\n      2160: '4K',\n      1440: 'HD',\n      1080: 'HD',\n      720: 'HD',\n      576: 'SD',\n      480: 'SD',\n    },\n  },\n\n  // URLs\n  urls: {\n    download: null,\n    vimeo: {\n      sdk: 'https://player.vimeo.com/api/player.js',\n      iframe: 'https://player.vimeo.com/video/{0}?{1}',\n      api: 'https://vimeo.com/api/oembed.json?url={0}',\n    },\n    youtube: {\n      sdk: 'https://www.youtube.com/iframe_api',\n      api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}',\n    },\n    googleIMA: {\n      sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',\n    },\n  },\n\n  // Custom control listeners\n  listeners: {\n    seek: null,\n    play: null,\n    pause: null,\n    restart: null,\n    rewind: null,\n    fastForward: null,\n    mute: null,\n    volume: null,\n    captions: null,\n    download: null,\n    fullscreen: null,\n    pip: null,\n    airplay: null,\n    speed: null,\n    quality: null,\n    loop: null,\n    language: null,\n  },\n\n  // Events to watch and bubble\n  events: [\n    // Events to watch on HTML5 media elements and bubble\n    // https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events\n    'ended',\n    'progress',\n    'stalled',\n    'playing',\n    'waiting',\n    'canplay',\n    'canplaythrough',\n    'loadstart',\n    'loadeddata',\n    'loadedmetadata',\n    'timeupdate',\n    'volumechange',\n    'play',\n    'pause',\n    'error',\n    'seeking',\n    'seeked',\n    'emptied',\n    'ratechange',\n    'cuechange',\n\n    // Custom events\n    'download',\n    'enterfullscreen',\n    'exitfullscreen',\n    'captionsenabled',\n    'captionsdisabled',\n    'languagechange',\n    'controlshidden',\n    'controlsshown',\n    'ready',\n\n    // YouTube\n    'statechange',\n\n    // Quality\n    'qualitychange',\n\n    // Ads\n    'adsloaded',\n    'adscontentpause',\n    'adscontentresume',\n    'adstarted',\n    'adsmidpoint',\n    'adscomplete',\n    'adsallcomplete',\n    'adsimpression',\n    'adsclick',\n  ],\n\n  // Selectors\n  // Change these to match your template if using custom HTML\n  selectors: {\n    editable: 'input, textarea, select, [contenteditable]',\n    container: '.plyr',\n    controls: {\n      container: null,\n      wrapper: '.plyr__controls',\n    },\n    labels: '[data-plyr]',\n    buttons: {\n      play: '[data-plyr=\"play\"]',\n      pause: '[data-plyr=\"pause\"]',\n      restart: '[data-plyr=\"restart\"]',\n      rewind: '[data-plyr=\"rewind\"]',\n      fastForward: '[data-plyr=\"fast-forward\"]',\n      mute: '[data-plyr=\"mute\"]',\n      captions: '[data-plyr=\"captions\"]',\n      download: '[data-plyr=\"download\"]',\n      fullscreen: '[data-plyr=\"fullscreen\"]',\n      pip: '[data-plyr=\"pip\"]',\n      airplay: '[data-plyr=\"airplay\"]',\n      settings: '[data-plyr=\"settings\"]',\n      loop: '[data-plyr=\"loop\"]',\n    },\n    inputs: {\n      seek: '[data-plyr=\"seek\"]',\n      volume: '[data-plyr=\"volume\"]',\n      speed: '[data-plyr=\"speed\"]',\n      language: '[data-plyr=\"language\"]',\n      quality: '[data-plyr=\"quality\"]',\n    },\n    display: {\n      currentTime: '.plyr__time--current',\n      duration: '.plyr__time--duration',\n      buffer: '.plyr__progress__buffer',\n      loop: '.plyr__progress__loop', // Used later\n      volume: '.plyr__volume--display',\n    },\n    progress: '.plyr__progress',\n    captions: '.plyr__captions',\n    caption: '.plyr__caption',\n  },\n\n  // Class hooks added to the player in different states\n  classNames: {\n    type: 'plyr--{0}',\n    provider: 'plyr--{0}',\n    video: 'plyr__video-wrapper',\n    embed: 'plyr__video-embed',\n    videoFixedRatio: 'plyr__video-wrapper--fixed-ratio',\n    embedContainer: 'plyr__video-embed__container',\n    poster: 'plyr__poster',\n    posterEnabled: 'plyr__poster-enabled',\n    ads: 'plyr__ads',\n    control: 'plyr__control',\n    controlPressed: 'plyr__control--pressed',\n    playing: 'plyr--playing',\n    paused: 'plyr--paused',\n    stopped: 'plyr--stopped',\n    loading: 'plyr--loading',\n    hover: 'plyr--hover',\n    tooltip: 'plyr__tooltip',\n    cues: 'plyr__cues',\n    marker: 'plyr__progress__marker',\n    hidden: 'plyr__sr-only',\n    hideControls: 'plyr--hide-controls',\n    isTouch: 'plyr--is-touch',\n    uiSupported: 'plyr--full-ui',\n    noTransition: 'plyr--no-transition',\n    display: {\n      time: 'plyr__time',\n    },\n    menu: {\n      value: 'plyr__menu__value',\n      badge: 'plyr__badge',\n      open: 'plyr--menu-open',\n    },\n    captions: {\n      enabled: 'plyr--captions-enabled',\n      active: 'plyr--captions-active',\n    },\n    fullscreen: {\n      enabled: 'plyr--fullscreen-enabled',\n      fallback: 'plyr--fullscreen-fallback',\n    },\n    pip: {\n      supported: 'plyr--pip-supported',\n      active: 'plyr--pip-active',\n    },\n    airplay: {\n      supported: 'plyr--airplay-supported',\n      active: 'plyr--airplay-active',\n    },\n    previewThumbnails: {\n      // Tooltip thumbs\n      thumbContainer: 'plyr__preview-thumb',\n      thumbContainerShown: 'plyr__preview-thumb--is-shown',\n      imageContainer: 'plyr__preview-thumb__image-container',\n      timeContainer: 'plyr__preview-thumb__time-container',\n      // Scrubbing\n      scrubbingContainer: 'plyr__preview-scrubbing',\n      scrubbingContainerShown: 'plyr__preview-scrubbing--is-shown',\n    },\n  },\n\n  // Embed attributes\n  attributes: {\n    embed: {\n      provider: 'data-plyr-provider',\n      id: 'data-plyr-embed-id',\n      hash: 'data-plyr-embed-hash',\n    },\n  },\n\n  // Advertisements plugin\n  // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio\n  ads: {\n    enabled: false,\n    publisherId: '',\n    tagUrl: '',\n  },\n\n  // Preview Thumbnails plugin\n  previewThumbnails: {\n    enabled: false,\n    src: '',\n    withCredentials: false,\n  },\n\n  // Vimeo plugin\n  vimeo: {\n    byline: false,\n    portrait: false,\n    title: false,\n    speed: true,\n    transparent: false,\n    // Custom settings from Plyr\n    customControls: true,\n    referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy\n    // Whether the owner of the video has a Pro or Business account\n    // (which allows us to properly hide controls without CSS hacks, etc)\n    premium: false,\n  },\n\n  // YouTube plugin\n  youtube: {\n    rel: 0, // No related vids\n    showinfo: 0, // Hide info\n    iv_load_policy: 3, // Hide annotations\n    modestbranding: 1, // Hide logos as much as possible (they still show one in the corner when paused)\n    // Custom settings from Plyr\n    customControls: true,\n    noCookie: false, // Whether to use an alternative version of YouTube without cookies\n  },\n\n  // Media Metadata\n  mediaMetadata: {\n    title: '',\n    artist: '',\n    album: '',\n    artwork: [],\n  },\n\n  // Markers\n  markers: {\n    enabled: false,\n    points: [],\n  },\n};\n\nexport default defaults;\n"
  },
  {
    "path": "src/js/config/states.js",
    "content": "// ==========================================================================\n// Plyr states\n// ==========================================================================\n\nexport const pip = {\n  active: 'picture-in-picture',\n  inactive: 'inline',\n};\n\nexport default { pip };\n"
  },
  {
    "path": "src/js/config/types.js",
    "content": "// ==========================================================================\n// Plyr supported types and providers\n// ==========================================================================\n\nexport const providers = {\n  html5: 'html5',\n  youtube: 'youtube',\n  vimeo: 'vimeo',\n};\n\nexport const types = {\n  audio: 'audio',\n  video: 'video',\n};\n\n/**\n * Get provider by URL\n * @param {string} url\n */\nexport function getProviderByUrl(url) {\n  // YouTube\n  if (/^(?:https?:\\/\\/)?(?:www\\.)?(?:youtube\\.com|youtube-nocookie\\.com|youtu\\.?be)\\/.+$/.test(url)) {\n    return providers.youtube;\n  }\n\n  // Vimeo\n  if (/^https?:\\/\\/player.vimeo.com\\/video\\/\\d{0,9}(?=\\b|\\/)/.test(url)) {\n    return providers.vimeo;\n  }\n\n  return null;\n}\n\nexport default { providers, types };\n"
  },
  {
    "path": "src/js/console.js",
    "content": "// ==========================================================================\n// Console wrapper\n// ==========================================================================\n\nfunction noop() {}\n\nexport default class Console {\n  constructor(enabled = false) {\n    this.enabled = window.console && enabled;\n\n    if (this.enabled) {\n      this.log('Debugging enabled');\n    }\n  }\n\n  get log() {\n    // eslint-disable-next-line no-console\n    return this.enabled ? Function.prototype.bind.call(console.log, console) : noop;\n  }\n\n  get warn() {\n    return this.enabled ? Function.prototype.bind.call(console.warn, console) : noop;\n  }\n\n  get error() {\n    return this.enabled ? Function.prototype.bind.call(console.error, console) : noop;\n  }\n}\n"
  },
  {
    "path": "src/js/controls.js",
    "content": "// ==========================================================================\n// Plyr controls\n// TODO: This needs to be split into smaller files and cleaned up\n// ==========================================================================\n\nimport RangeTouch from 'rangetouch';\n\nimport captions from './captions';\nimport html5 from './html5';\nimport support from './support';\nimport { repaint, transitionEndEvent } from './utils/animation';\nimport { dedupe } from './utils/arrays';\nimport browser from './utils/browser';\nimport {\n  createElement,\n  emptyElement,\n  getAttributesFromSelector,\n  getElement,\n  getElements,\n  hasClass,\n  matches,\n  removeElement,\n  setAttributes,\n  setFocus,\n  toggleClass,\n  toggleHidden,\n} from './utils/elements';\nimport { off, on } from './utils/events';\nimport i18n from './utils/i18n';\nimport is from './utils/is';\nimport loadSprite from './utils/load-sprite';\nimport { extend } from './utils/objects';\nimport { getPercentage, replaceAll, toCamelCase, toTitleCase } from './utils/strings';\nimport { formatTime, getHours } from './utils/time';\n\n// TODO: Don't export a massive object - break down and create class\nconst controls = {\n  // Get icon URL\n  getIconUrl() {\n    const url = new URL(this.config.iconUrl, window.location);\n    const host = window.location.host ? window.location.host : window.top.location.host;\n    const cors = url.host !== host || (browser.isIE && !window.svg4everybody);\n\n    return {\n      url: this.config.iconUrl,\n      cors,\n    };\n  },\n\n  // Find the UI controls\n  findElements() {\n    try {\n      this.elements.controls = getElement.call(this, this.config.selectors.controls.wrapper);\n\n      // Buttons\n      this.elements.buttons = {\n        play: getElements.call(this, this.config.selectors.buttons.play),\n        pause: getElement.call(this, this.config.selectors.buttons.pause),\n        restart: getElement.call(this, this.config.selectors.buttons.restart),\n        rewind: getElement.call(this, this.config.selectors.buttons.rewind),\n        fastForward: getElement.call(this, this.config.selectors.buttons.fastForward),\n        mute: getElement.call(this, this.config.selectors.buttons.mute),\n        pip: getElement.call(this, this.config.selectors.buttons.pip),\n        airplay: getElement.call(this, this.config.selectors.buttons.airplay),\n        settings: getElement.call(this, this.config.selectors.buttons.settings),\n        captions: getElement.call(this, this.config.selectors.buttons.captions),\n        fullscreen: getElement.call(this, this.config.selectors.buttons.fullscreen),\n      };\n\n      // Progress\n      this.elements.progress = getElement.call(this, this.config.selectors.progress);\n\n      // Inputs\n      this.elements.inputs = {\n        seek: getElement.call(this, this.config.selectors.inputs.seek),\n        volume: getElement.call(this, this.config.selectors.inputs.volume),\n      };\n\n      // Display\n      this.elements.display = {\n        buffer: getElement.call(this, this.config.selectors.display.buffer),\n        currentTime: getElement.call(this, this.config.selectors.display.currentTime),\n        duration: getElement.call(this, this.config.selectors.display.duration),\n      };\n\n      // Seek tooltip\n      if (is.element(this.elements.progress)) {\n        this.elements.display.seekTooltip = this.elements.progress.querySelector(`.${this.config.classNames.tooltip}`);\n      }\n\n      return true;\n    }\n    catch (error) {\n      // Log it\n      this.debug.warn('It looks like there is a problem with your custom controls HTML', error);\n\n      // Restore native video controls\n      this.toggleNativeControls(true);\n\n      return false;\n    }\n  },\n\n  // Create <svg> icon\n  createIcon(type, attributes) {\n    const namespace = 'http://www.w3.org/2000/svg';\n    const iconUrl = controls.getIconUrl.call(this);\n    const iconPath = `${!iconUrl.cors ? iconUrl.url : ''}#${this.config.iconPrefix}`;\n    // Create <svg>\n    const icon = document.createElementNS(namespace, 'svg');\n    setAttributes(\n      icon,\n      extend(attributes, {\n        'aria-hidden': 'true',\n        'focusable': 'false',\n      }),\n    );\n\n    // Create the <use> to reference sprite\n    const use = document.createElementNS(namespace, 'use');\n    const path = `${iconPath}-${type}`;\n\n    // Set `href` attributes\n    // https://github.com/sampotts/plyr/issues/460\n    // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href\n    if ('href' in use) {\n      use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', path);\n    }\n\n    // Always set the older attribute even though it's \"deprecated\" (it'll be around for ages)\n    use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path);\n\n    // Add <use> to <svg>\n    icon.appendChild(use);\n\n    return icon;\n  },\n\n  // Create hidden text label\n  createLabel(key, attr = {}) {\n    const text = i18n.get(key, this.config);\n    const attributes = { ...attr, class: [attr.class, this.config.classNames.hidden].filter(Boolean).join(' ') };\n\n    return createElement('span', attributes, text);\n  },\n\n  // Create a badge\n  createBadge(text) {\n    if (is.empty(text)) {\n      return null;\n    }\n\n    const badge = createElement('span', {\n      class: this.config.classNames.menu.value,\n    });\n\n    badge.appendChild(\n      createElement(\n        'span',\n        {\n          class: this.config.classNames.menu.badge,\n        },\n        text,\n      ),\n    );\n\n    return badge;\n  },\n\n  // Create a <button>\n  createButton(buttonType, attr) {\n    const attributes = extend({}, attr);\n    let type = toCamelCase(buttonType);\n\n    const props = {\n      element: 'button',\n      toggle: false,\n      label: null,\n      icon: null,\n      labelPressed: null,\n      iconPressed: null,\n    };\n\n    ['element', 'icon', 'label'].forEach((key) => {\n      if (Object.keys(attributes).includes(key)) {\n        props[key] = attributes[key];\n        delete attributes[key];\n      }\n    });\n\n    // Default to 'button' type to prevent form submission\n    if (props.element === 'button' && !Object.keys(attributes).includes('type')) {\n      attributes.type = 'button';\n    }\n\n    // Set class name\n    if (Object.keys(attributes).includes('class')) {\n      if (!attributes.class.split(' ').includes(this.config.classNames.control)) {\n        extend(attributes, {\n          class: `${attributes.class} ${this.config.classNames.control}`,\n        });\n      }\n    }\n    else {\n      attributes.class = this.config.classNames.control;\n    }\n\n    // Large play button\n    switch (buttonType) {\n      case 'play':\n        props.toggle = true;\n        props.label = 'play';\n        props.labelPressed = 'pause';\n        props.icon = 'play';\n        props.iconPressed = 'pause';\n        break;\n\n      case 'mute':\n        props.toggle = true;\n        props.label = 'mute';\n        props.labelPressed = 'unmute';\n        props.icon = 'volume';\n        props.iconPressed = 'muted';\n        break;\n\n      case 'captions':\n        props.toggle = true;\n        props.label = 'enableCaptions';\n        props.labelPressed = 'disableCaptions';\n        props.icon = 'captions-off';\n        props.iconPressed = 'captions-on';\n        break;\n\n      case 'fullscreen':\n        props.toggle = true;\n        props.label = 'enterFullscreen';\n        props.labelPressed = 'exitFullscreen';\n        props.icon = 'enter-fullscreen';\n        props.iconPressed = 'exit-fullscreen';\n        break;\n\n      case 'play-large':\n        attributes.class += ` ${this.config.classNames.control}--overlaid`;\n        type = 'play';\n        props.label = 'play';\n        props.icon = 'play';\n        break;\n\n      default:\n        if (is.empty(props.label)) {\n          props.label = type;\n        }\n        if (is.empty(props.icon)) {\n          props.icon = buttonType;\n        }\n    }\n\n    const button = createElement(props.element);\n\n    // Setup toggle icon and labels\n    if (props.toggle) {\n      // Icon\n      button.appendChild(\n        controls.createIcon.call(this, props.iconPressed, {\n          class: 'icon--pressed',\n        }),\n      );\n      button.appendChild(\n        controls.createIcon.call(this, props.icon, {\n          class: 'icon--not-pressed',\n        }),\n      );\n\n      // Label/Tooltip\n      button.appendChild(\n        controls.createLabel.call(this, props.labelPressed, {\n          class: 'label--pressed',\n        }),\n      );\n      button.appendChild(\n        controls.createLabel.call(this, props.label, {\n          class: 'label--not-pressed',\n        }),\n      );\n    }\n    else {\n      button.appendChild(controls.createIcon.call(this, props.icon));\n      button.appendChild(controls.createLabel.call(this, props.label));\n    }\n\n    // Merge and set attributes\n    extend(attributes, getAttributesFromSelector(this.config.selectors.buttons[type], attributes));\n    setAttributes(button, attributes);\n\n    // We have multiple play buttons\n    if (type === 'play') {\n      if (!is.array(this.elements.buttons[type])) {\n        this.elements.buttons[type] = [];\n      }\n\n      this.elements.buttons[type].push(button);\n    }\n    else {\n      this.elements.buttons[type] = button;\n    }\n\n    return button;\n  },\n\n  // Create an <input type='range'>\n  createRange(type, attributes) {\n    // Seek input\n    const input = createElement(\n      'input',\n      extend(\n        getAttributesFromSelector(this.config.selectors.inputs[type]),\n        {\n          'type': 'range',\n          'min': 0,\n          'max': 100,\n          'step': 0.01,\n          'value': 0,\n          'autocomplete': 'off',\n          // A11y fixes for https://github.com/sampotts/plyr/issues/905\n          'role': 'slider',\n          'aria-label': i18n.get(type, this.config),\n          'aria-valuemin': 0,\n          'aria-valuemax': 100,\n          'aria-valuenow': 0,\n        },\n        attributes,\n      ),\n    );\n\n    this.elements.inputs[type] = input;\n\n    // Set the fill for webkit now\n    controls.updateRangeFill.call(this, input);\n\n    // Improve support on touch devices\n    RangeTouch.setup(input);\n\n    return input;\n  },\n\n  // Create a <progress>\n  createProgress(type, attributes) {\n    const progress = createElement(\n      'progress',\n      extend(\n        getAttributesFromSelector(this.config.selectors.display[type]),\n        {\n          'min': 0,\n          'max': 100,\n          'value': 0,\n          'role': 'progressbar',\n          'aria-hidden': true,\n        },\n        attributes,\n      ),\n    );\n\n    // Create the label inside\n    if (type !== 'volume') {\n      progress.appendChild(createElement('span', null, '0'));\n\n      const suffixKey = {\n        played: 'played',\n        buffer: 'buffered',\n      }[type];\n      const suffix = suffixKey ? i18n.get(suffixKey, this.config) : '';\n\n      progress.textContent = `% ${suffix.toLowerCase()}`;\n    }\n\n    this.elements.display[type] = progress;\n\n    return progress;\n  },\n\n  // Create time display\n  createTime(type, attrs) {\n    const attributes = getAttributesFromSelector(this.config.selectors.display[type], attrs);\n\n    const container = createElement(\n      'div',\n      extend(attributes, {\n        'class': `${attributes.class ? attributes.class : ''} ${this.config.classNames.display.time} `.trim(),\n        'aria-label': i18n.get(type, this.config),\n        'role': 'timer',\n      }),\n      '00:00',\n    );\n\n    // Reference for updates\n    this.elements.display[type] = container;\n\n    return container;\n  },\n\n  // Bind keyboard shortcuts for a menu item\n  // We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus\n  // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n  bindMenuItemShortcuts(menuItem, type) {\n    // Navigate through menus via arrow keys and space\n    on.call(\n      this,\n      menuItem,\n      'keydown keyup',\n      (event) => {\n        // We only care about space and ⬆️ ⬇️️ ➡️\n        if (![' ', 'ArrowUp', 'ArrowDown', 'ArrowRight'].includes(event.key)) {\n          return;\n        }\n\n        // Prevent play / seek\n        event.preventDefault();\n        event.stopPropagation();\n\n        // We're just here to prevent the keydown bubbling\n        if (event.type === 'keydown') {\n          return;\n        }\n\n        const isRadioButton = matches(menuItem, '[role=\"menuitemradio\"]');\n\n        // Show the respective menu\n        if (!isRadioButton && [' ', 'ArrowRight'].includes(event.key)) {\n          controls.showMenuPanel.call(this, type, true);\n        }\n        else {\n          let target;\n\n          if (event.key !== ' ') {\n            if (event.key === 'ArrowDown' || (isRadioButton && event.key === 'ArrowRight')) {\n              target = menuItem.nextElementSibling;\n\n              if (!is.element(target)) {\n                target = menuItem.parentNode.firstElementChild;\n              }\n            }\n            else {\n              target = menuItem.previousElementSibling;\n\n              if (!is.element(target)) {\n                target = menuItem.parentNode.lastElementChild;\n              }\n            }\n\n            setFocus.call(this, target, true);\n          }\n        }\n      },\n      false,\n    );\n\n    // Enter will fire a `click` event but we still need to manage focus\n    // So we bind to keyup which fires after and set focus here\n    on.call(this, menuItem, 'keyup', (event) => {\n      if (event.key !== 'Return') return;\n\n      controls.focusFirstMenuItem.call(this, null, true);\n    });\n  },\n\n  // Create a settings menu item\n  createMenuItem({ value, list, type, title, badge = null, checked = false }) {\n    const attributes = getAttributesFromSelector(this.config.selectors.inputs[type]);\n\n    const menuItem = createElement(\n      'button',\n      extend(attributes, {\n        'type': 'button',\n        'role': 'menuitemradio',\n        'class': `${this.config.classNames.control} ${attributes.class ? attributes.class : ''}`.trim(),\n        'aria-checked': checked,\n        value,\n      }),\n    );\n\n    const flex = createElement('span');\n\n    // We have to set as HTML incase of special characters\n    flex.innerHTML = title;\n\n    if (is.element(badge)) {\n      flex.appendChild(badge);\n    }\n\n    menuItem.appendChild(flex);\n\n    // Replicate radio button behavior\n    Object.defineProperty(menuItem, 'checked', {\n      enumerable: true,\n      get() {\n        return menuItem.getAttribute('aria-checked') === 'true';\n      },\n      set(check) {\n        // Ensure exclusivity\n        if (check) {\n          Array.from(menuItem.parentNode.children)\n            .filter(node => matches(node, '[role=\"menuitemradio\"]'))\n            .forEach(node => node.setAttribute('aria-checked', 'false'));\n        }\n\n        menuItem.setAttribute('aria-checked', check ? 'true' : 'false');\n      },\n    });\n\n    this.listeners.bind(\n      menuItem,\n      'click keyup',\n      (event) => {\n        if (is.keyboardEvent(event) && event.key !== ' ') {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        menuItem.checked = true;\n\n        switch (type) {\n          case 'language':\n            this.currentTrack = Number(value);\n            break;\n\n          case 'quality':\n            this.quality = value;\n            break;\n\n          case 'speed':\n            this.speed = Number.parseFloat(value);\n            break;\n\n          default:\n            break;\n        }\n\n        controls.showMenuPanel.call(this, 'home', is.keyboardEvent(event));\n      },\n      type,\n      false,\n    );\n\n    controls.bindMenuItemShortcuts.call(this, menuItem, type);\n\n    list.appendChild(menuItem);\n  },\n\n  // Format a time for display\n  formatTime(time = 0, inverted = false) {\n    // Bail if the value isn't a number\n    if (!is.number(time)) {\n      return time;\n    }\n\n    // Always display hours if duration is over an hour\n    const forceHours = getHours(this.duration) > 0;\n\n    return formatTime(time, forceHours, inverted);\n  },\n\n  // Update the displayed time\n  updateTimeDisplay(target = null, time = 0, inverted = false) {\n    // Bail if there's no element to display or the value isn't a number\n    if (!is.element(target) || !is.number(time)) {\n      return;\n    }\n\n    target.textContent = controls.formatTime(time, inverted);\n  },\n\n  // Update volume UI and storage\n  updateVolume() {\n    if (!this.supported.ui) {\n      return;\n    }\n\n    // Update range\n    if (is.element(this.elements.inputs.volume)) {\n      controls.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume);\n    }\n\n    // Update mute state\n    if (is.element(this.elements.buttons.mute)) {\n      this.elements.buttons.mute.pressed = this.muted || this.volume === 0;\n    }\n  },\n\n  // Update seek value and lower fill\n  setRange(target, value = 0) {\n    if (!is.element(target)) {\n      return;\n    }\n\n    target.value = value;\n\n    // Webkit range fill\n    controls.updateRangeFill.call(this, target);\n  },\n\n  // Update <progress> elements\n  updateProgress(event) {\n    if (!this.supported.ui || !is.event(event)) {\n      return;\n    }\n\n    let value = 0;\n\n    const setProgress = (target, input) => {\n      const val = is.number(input) ? input : 0;\n      const progress = is.element(target) ? target : this.elements.display.buffer;\n\n      // Update value and label\n      if (is.element(progress)) {\n        progress.value = val;\n\n        // Update text label inside\n        const label = progress.getElementsByTagName('span')[0];\n        if (is.element(label)) {\n          label.childNodes[0].nodeValue = val;\n        }\n      }\n    };\n\n    if (event) {\n      switch (event.type) {\n        // Video playing\n        case 'timeupdate':\n        case 'seeking':\n        case 'seeked':\n          value = getPercentage(this.currentTime, this.duration);\n\n          // Set seek range value only if it's a 'natural' time event\n          if (event.type === 'timeupdate') {\n            controls.setRange.call(this, this.elements.inputs.seek, value);\n          }\n\n          break;\n\n        // Check buffer status\n        case 'playing':\n        case 'progress':\n          setProgress(this.elements.display.buffer, this.buffered * 100);\n\n          break;\n\n        default:\n          break;\n      }\n    }\n  },\n\n  // Webkit polyfill for lower fill range\n  updateRangeFill(target) {\n    // Get range from event if event passed\n    const range = is.event(target) ? target.target : target;\n\n    // Needs to be a valid <input type='range'>\n    if (!is.element(range) || range.getAttribute('type') !== 'range') {\n      return;\n    }\n\n    // Set aria values for https://github.com/sampotts/plyr/issues/905\n    if (matches(range, this.config.selectors.inputs.seek)) {\n      range.setAttribute('aria-valuenow', this.currentTime);\n      const currentTime = controls.formatTime(this.currentTime);\n      const duration = controls.formatTime(this.duration);\n      const format = i18n.get('seekLabel', this.config);\n      range.setAttribute(\n        'aria-valuetext',\n        format.replace('{currentTime}', currentTime).replace('{duration}', duration),\n      );\n    }\n    else if (matches(range, this.config.selectors.inputs.volume)) {\n      const percent = range.value * 100;\n      range.setAttribute('aria-valuenow', percent);\n      range.setAttribute('aria-valuetext', `${percent.toFixed(1)}%`);\n    }\n    else {\n      range.setAttribute('aria-valuenow', range.value);\n    }\n\n    // WebKit only\n    if (!browser.isWebKit && !browser.isIPadOS) {\n      return;\n    }\n\n    // Set CSS custom property\n    range.style.setProperty('--value', `${(range.value / range.max) * 100}%`);\n  },\n\n  // Update hover tooltip for seeking\n  updateSeekTooltip(event) {\n    // Bail if setting not true\n    if (\n      !this.config.tooltips.seek\n      || !is.element(this.elements.inputs.seek)\n      || !is.element(this.elements.display.seekTooltip)\n      || this.duration === 0\n    ) {\n      return;\n    }\n\n    const tipElement = this.elements.display.seekTooltip;\n    const visible = `${this.config.classNames.tooltip}--visible`;\n    const toggle = show => toggleClass(tipElement, visible, show);\n\n    // Hide on touch\n    if (this.touch) {\n      toggle(false);\n      return;\n    }\n\n    // Determine percentage, if already visible\n    let percent = 0;\n    const clientRect = this.elements.progress.getBoundingClientRect();\n\n    if (is.event(event)) {\n      const scrollLeft = event.pageX - event.clientX;\n      percent = (100 / clientRect.width) * (event.pageX - clientRect.left - scrollLeft);\n    }\n    else if (hasClass(tipElement, visible)) {\n      percent = Number.parseFloat(tipElement.style.left, 10);\n    }\n    else {\n      return;\n    }\n\n    // Set bounds\n    if (percent < 0) {\n      percent = 0;\n    }\n    else if (percent > 100) {\n      percent = 100;\n    }\n\n    const time = (this.duration / 100) * percent;\n\n    // Display the time a click would seek to\n    tipElement.textContent = controls.formatTime(time);\n\n    // Get marker point for time\n    const point = this.config.markers?.points?.find(({ time: t }) => t === Math.round(time));\n\n    // Append the point label to the tooltip\n    if (point) {\n      tipElement.insertAdjacentHTML('afterbegin', `${point.label}<br>`);\n    }\n\n    // Set position\n    tipElement.style.left = `${percent}%`;\n\n    // Show/hide the tooltip\n    // If the event is a moues in/out and percentage is inside bounds\n    if (is.event(event) && ['mouseenter', 'mouseleave'].includes(event.type)) {\n      toggle(event.type === 'mouseenter');\n    }\n  },\n\n  // Handle time change event\n  timeUpdate(event) {\n    // Only invert if only one time element is displayed and used for both duration and currentTime\n    const invert = !is.element(this.elements.display.duration) && this.config.invertTime;\n\n    // Duration\n    controls.updateTimeDisplay.call(\n      this,\n      this.elements.display.currentTime,\n      invert ? this.duration - this.currentTime : this.currentTime,\n      invert,\n    );\n\n    // Ignore updates while seeking\n    if (event && event.type === 'timeupdate' && this.media.seeking) {\n      return;\n    }\n\n    // Playing progress\n    controls.updateProgress.call(this, event);\n  },\n\n  // Show the duration on metadataloaded or durationchange events\n  durationUpdate() {\n    // Bail if no UI or durationchange event triggered after playing/seek when invertTime is false\n    if (!this.supported.ui || (!this.config.invertTime && this.currentTime)) {\n      return;\n    }\n\n    // If duration is the 2**32 (shaka), Infinity (HLS), DASH-IF (Number.MAX_SAFE_INTEGER || Number.MAX_VALUE) indicating live we hide the currentTime and progressbar.\n    // https://github.com/video-dev/hls.js/blob/5820d29d3c4c8a46e8b75f1e3afa3e68c1a9a2db/src/controller/buffer-controller.js#L415\n    // https://github.com/google/shaka-player/blob/4d889054631f4e1cf0fbd80ddd2b71887c02e232/lib/media/streaming_engine.js#L1062\n    // https://github.com/Dash-Industry-Forum/dash.js/blob/69859f51b969645b234666800d4cb596d89c602d/src/dash/models/DashManifestModel.js#L338\n    if (this.duration >= 2 ** 32) {\n      toggleHidden(this.elements.display.currentTime, true);\n      toggleHidden(this.elements.progress, true);\n      return;\n    }\n\n    // Update ARIA values\n    if (is.element(this.elements.inputs.seek)) {\n      this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration);\n    }\n\n    // If there's a spot to display duration\n    const hasDuration = is.element(this.elements.display.duration);\n\n    // If there's only one time display, display duration there\n    if (!hasDuration && this.config.displayDuration && this.paused) {\n      controls.updateTimeDisplay.call(this, this.elements.display.currentTime, this.duration);\n    }\n\n    // If there's a duration element, update content\n    if (hasDuration) {\n      controls.updateTimeDisplay.call(this, this.elements.display.duration, this.duration);\n    }\n\n    if (this.config.markers.enabled) {\n      controls.setMarkers.call(this);\n    }\n\n    // Update the tooltip (if visible)\n    controls.updateSeekTooltip.call(this);\n  },\n\n  // Hide/show a tab\n  toggleMenuButton(setting, toggle) {\n    toggleHidden(this.elements.settings.buttons[setting], !toggle);\n  },\n\n  // Update the selected setting\n  updateSetting(setting, container, input) {\n    const pane = this.elements.settings.panels[setting];\n    let value = null;\n    let list = container;\n\n    if (setting === 'captions') {\n      value = this.currentTrack;\n    }\n    else {\n      value = !is.empty(input) ? input : this[setting];\n\n      // Get default\n      if (is.empty(value)) {\n        value = this.config[setting].default;\n      }\n\n      // Unsupported value\n      if (!is.empty(this.options[setting]) && !this.options[setting].includes(value)) {\n        this.debug.warn(`Unsupported value of '${value}' for ${setting}`);\n        return;\n      }\n\n      // Disabled value\n      if (!this.config[setting].options.includes(value)) {\n        this.debug.warn(`Disabled value of '${value}' for ${setting}`);\n        return;\n      }\n    }\n\n    // Get the list if we need to\n    if (!is.element(list)) {\n      list = pane && pane.querySelector('[role=\"menu\"]');\n    }\n\n    // If there's no list it means it's not been rendered...\n    if (!is.element(list)) {\n      return;\n    }\n\n    // Update the label\n    const label = this.elements.settings.buttons[setting].querySelector(`.${this.config.classNames.menu.value}`);\n    label.innerHTML = controls.getLabel.call(this, setting, value);\n\n    // Find the radio option and check it\n    const target = list && list.querySelector(`[value=\"${value}\"]`);\n\n    if (is.element(target)) {\n      target.checked = true;\n    }\n  },\n\n  // Translate a value into a nice label\n  getLabel(setting, value) {\n    switch (setting) {\n      case 'speed':\n        return value === 1 ? i18n.get('normal', this.config) : `${value}&times;`;\n\n      case 'quality':\n        if (is.number(value)) {\n          const label = i18n.get(`qualityLabel.${value}`, this.config);\n\n          if (!label.length) {\n            return `${value}p`;\n          }\n\n          return label;\n        }\n\n        return toTitleCase(value);\n\n      case 'captions':\n        return captions.getLabel.call(this);\n\n      default:\n        return null;\n    }\n  },\n\n  // Set the quality menu\n  setQualityMenu(options) {\n    // Menu required\n    if (!is.element(this.elements.settings.panels.quality)) {\n      return;\n    }\n\n    const type = 'quality';\n    const list = this.elements.settings.panels.quality.querySelector('[role=\"menu\"]');\n\n    // Set options if passed and filter based on uniqueness and config\n    if (is.array(options)) {\n      this.options.quality = dedupe(options).filter(quality => this.config.quality.options.includes(quality));\n    }\n\n    // Toggle the pane and tab\n    const toggle = !is.empty(this.options.quality) && this.options.quality.length > 1;\n    controls.toggleMenuButton.call(this, type, toggle);\n\n    // Empty the menu\n    emptyElement(list);\n\n    // Check if we need to toggle the parent\n    controls.checkMenu.call(this);\n\n    // If we're hiding, nothing more to do\n    if (!toggle) {\n      return;\n    }\n\n    // Get the badge HTML for HD, 4K etc\n    const getBadge = (quality) => {\n      const label = i18n.get(`qualityBadge.${quality}`, this.config);\n\n      if (!label.length) {\n        return null;\n      }\n\n      return controls.createBadge.call(this, label);\n    };\n\n    // Sort options by the config and then render options\n    this.options.quality\n      .sort((a, b) => {\n        const sorting = this.config.quality.options;\n        return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;\n      })\n      .forEach((quality) => {\n        controls.createMenuItem.call(this, {\n          value: quality,\n          list,\n          type,\n          title: controls.getLabel.call(this, 'quality', quality),\n          badge: getBadge(quality),\n        });\n      });\n\n    controls.updateSetting.call(this, type, list);\n  },\n\n  // Set the looping options\n  /* setLoopMenu() {\n        // Menu required\n        if (!is.element(this.elements.settings.panels.loop)) {\n            return;\n        }\n\n        const options = ['start', 'end', 'all', 'reset'];\n        const list = this.elements.settings.panels.loop.querySelector('[role=\"menu\"]');\n\n        // Show the pane and tab\n        toggleHidden(this.elements.settings.buttons.loop, false);\n        toggleHidden(this.elements.settings.panels.loop, false);\n\n        // Toggle the pane and tab\n        const toggle = !is.empty(this.loop.options);\n        controls.toggleMenuButton.call(this, 'loop', toggle);\n\n        // Empty the menu\n        emptyElement(list);\n\n        options.forEach(option => {\n            const item = createElement('li');\n\n            const button = createElement(\n                'button',\n                extend(getAttributesFromSelector(this.config.selectors.buttons.loop), {\n                    type: 'button',\n                    class: this.config.classNames.control,\n                    'data-plyr-loop-action': option,\n                }),\n                i18n.get(option, this.config)\n            );\n\n            if (['start', 'end'].includes(option)) {\n                const badge = controls.createBadge.call(this, '00:00');\n                button.appendChild(badge);\n            }\n\n            item.appendChild(button);\n            list.appendChild(item);\n        });\n    }, */\n\n  // Get current selected caption language\n  // TODO: rework this to user the getter in the API?\n\n  // Set a list of available captions languages\n  setCaptionsMenu() {\n    // Menu required\n    if (!is.element(this.elements.settings.panels.captions)) {\n      return;\n    }\n\n    // TODO: Captions or language? Currently it's mixed\n    const type = 'captions';\n    const list = this.elements.settings.panels.captions.querySelector('[role=\"menu\"]');\n    const tracks = captions.getTracks.call(this);\n    const toggle = Boolean(tracks.length);\n\n    // Toggle the pane and tab\n    controls.toggleMenuButton.call(this, type, toggle);\n\n    // Empty the menu\n    emptyElement(list);\n\n    // Check if we need to toggle the parent\n    controls.checkMenu.call(this);\n\n    // If there's no captions, bail\n    if (!toggle) {\n      return;\n    }\n\n    // Generate options data\n    const options = tracks.map((track, value) => ({\n      value,\n      checked: this.captions.toggled && this.currentTrack === value,\n      title: captions.getLabel.call(this, track),\n      badge: track.language && controls.createBadge.call(this, track.language.toUpperCase()),\n      list,\n      type: 'language',\n    }));\n\n    // Add the \"Disabled\" option to turn off captions\n    options.unshift({\n      value: -1,\n      checked: !this.captions.toggled,\n      title: i18n.get('disabled', this.config),\n      list,\n      type: 'language',\n    });\n\n    // Generate options\n    options.forEach(controls.createMenuItem.bind(this));\n\n    controls.updateSetting.call(this, type, list);\n  },\n\n  // Set a list of available captions languages\n  setSpeedMenu() {\n    // Menu required\n    if (!is.element(this.elements.settings.panels.speed)) {\n      return;\n    }\n\n    const type = 'speed';\n    const list = this.elements.settings.panels.speed.querySelector('[role=\"menu\"]');\n\n    // Filter out invalid speeds\n    this.options.speed = this.options.speed.filter(o => o >= this.minimumSpeed && o <= this.maximumSpeed);\n\n    // Toggle the pane and tab\n    const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1;\n    controls.toggleMenuButton.call(this, type, toggle);\n\n    // Empty the menu\n    emptyElement(list);\n\n    // Check if we need to toggle the parent\n    controls.checkMenu.call(this);\n\n    // If we're hiding, nothing more to do\n    if (!toggle) {\n      return;\n    }\n\n    // Create items\n    this.options.speed.forEach((speed) => {\n      controls.createMenuItem.call(this, {\n        value: speed,\n        list,\n        type,\n        title: controls.getLabel.call(this, 'speed', speed),\n      });\n    });\n\n    controls.updateSetting.call(this, type, list);\n  },\n\n  // Check if we need to hide/show the settings menu\n  checkMenu() {\n    const { buttons } = this.elements.settings;\n    const visible = !is.empty(buttons) && Object.values(buttons).some(button => !button.hidden);\n\n    toggleHidden(this.elements.settings.menu, !visible);\n  },\n\n  // Focus the first menu item in a given (or visible) menu\n  focusFirstMenuItem(pane, focusVisible = false) {\n    if (this.elements.settings.popup.hidden) {\n      return;\n    }\n\n    let target = pane;\n\n    if (!is.element(target)) {\n      target = Object.values(this.elements.settings.panels).find(p => !p.hidden);\n    }\n\n    const firstItem = target.querySelector('[role^=\"menuitem\"]');\n\n    setFocus.call(this, firstItem, focusVisible);\n  },\n\n  // Show/hide menu\n  toggleMenu(input) {\n    const { popup } = this.elements.settings;\n    const button = this.elements.buttons.settings;\n\n    // Menu and button are required\n    if (!is.element(popup) || !is.element(button)) {\n      return;\n    }\n\n    // True toggle by default\n    const { hidden } = popup;\n    let show = hidden;\n\n    if (is.boolean(input)) {\n      show = input;\n    }\n    else if (is.keyboardEvent(input) && input.key === 'Escape') {\n      show = false;\n    }\n    else if (is.event(input)) {\n      // If Plyr is in a shadowDOM, the event target is set to the component, instead of the\n      // Element in the shadowDOM. The path, if available, is complete.\n      const target = is.function(input.composedPath) ? input.composedPath()[0] : input.target;\n      const isMenuItem = popup.contains(target);\n\n      // If the click was inside the menu or if the click\n      // wasn't the button or menu item and we're trying to\n      // show the menu (a doc click shouldn't show the menu)\n      if (isMenuItem || (!isMenuItem && input.target !== button && show)) {\n        return;\n      }\n    }\n\n    // Set button attributes\n    button.setAttribute('aria-expanded', show);\n\n    // Show the actual popup\n    toggleHidden(popup, !show);\n\n    // Add class hook\n    toggleClass(this.elements.container, this.config.classNames.menu.open, show);\n\n    // Focus the first item if key interaction\n    if (show && is.keyboardEvent(input)) {\n      controls.focusFirstMenuItem.call(this, null, true);\n    }\n    else if (!show && !hidden) {\n      // If closing, re-focus the button\n      setFocus.call(this, button, is.keyboardEvent(input));\n    }\n  },\n\n  // Get the natural size of a menu panel\n  getMenuSize(tab) {\n    const clone = tab.cloneNode(true);\n    clone.style.position = 'absolute';\n    clone.style.opacity = 0;\n    clone.removeAttribute('hidden');\n\n    // Append to parent so we get the \"real\" size\n    tab.parentNode.appendChild(clone);\n\n    // Get the sizes before we remove\n    const width = clone.scrollWidth;\n    const height = clone.scrollHeight;\n\n    // Remove from the DOM\n    removeElement(clone);\n\n    return {\n      width,\n      height,\n    };\n  },\n\n  // Show a panel in the menu\n  showMenuPanel(type = '', focusVisible = false) {\n    const target = this.elements.container.querySelector(`#plyr-settings-${this.id}-${type}`);\n\n    // Nothing to show, bail\n    if (!is.element(target)) {\n      return;\n    }\n\n    // Hide all other panels\n    const container = target.parentNode;\n    const current = Array.from(container.children).find(node => !node.hidden);\n\n    // If we can do fancy animations, we'll animate the height/width\n    if (support.transitions && !support.reducedMotion) {\n      // Set the current width as a base\n      container.style.width = `${current.scrollWidth}px`;\n      container.style.height = `${current.scrollHeight}px`;\n\n      // Get potential sizes\n      const size = controls.getMenuSize.call(this, target);\n\n      // Restore auto height/width\n      const restore = (event) => {\n        // We're only bothered about height and width on the container\n        if (event.target !== container || !['width', 'height'].includes(event.propertyName)) {\n          return;\n        }\n\n        // Revert back to auto\n        container.style.width = '';\n        container.style.height = '';\n\n        // Only listen once\n        off.call(this, container, transitionEndEvent, restore);\n      };\n\n      // Listen for the transition finishing and restore auto height/width\n      on.call(this, container, transitionEndEvent, restore);\n\n      // Set dimensions to target\n      container.style.width = `${size.width}px`;\n      container.style.height = `${size.height}px`;\n    }\n\n    // Set attributes on current tab\n    toggleHidden(current, true);\n\n    // Set attributes on target\n    toggleHidden(target, false);\n\n    // Focus the first item\n    controls.focusFirstMenuItem.call(this, target, focusVisible);\n  },\n\n  // Set the download URL\n  setDownloadUrl() {\n    const button = this.elements.buttons.download;\n\n    // Bail if no button\n    if (!is.element(button)) {\n      return;\n    }\n\n    // Set attribute\n    button.setAttribute('href', this.download);\n  },\n\n  // Build the default HTML\n  create(data) {\n    const {\n      bindMenuItemShortcuts,\n      createButton,\n      createProgress,\n      createRange,\n      createTime,\n      setQualityMenu,\n      setSpeedMenu,\n      showMenuPanel,\n    } = controls;\n    this.elements.controls = null;\n\n    // Larger overlaid play button\n    if (is.array(this.config.controls) && this.config.controls.includes('play-large')) {\n      this.elements.container.appendChild(createButton.call(this, 'play-large'));\n    }\n\n    // Create the container\n    const container = createElement('div', getAttributesFromSelector(this.config.selectors.controls.wrapper));\n    this.elements.controls = container;\n\n    // Default item attributes\n    const defaultAttributes = { class: 'plyr__controls__item' };\n\n    // Loop through controls in order\n    dedupe(is.array(this.config.controls) ? this.config.controls : []).forEach((control) => {\n      // Restart button\n      if (control === 'restart') {\n        container.appendChild(createButton.call(this, 'restart', defaultAttributes));\n      }\n\n      // Rewind button\n      if (control === 'rewind') {\n        container.appendChild(createButton.call(this, 'rewind', defaultAttributes));\n      }\n\n      // Play/Pause button\n      if (control === 'play') {\n        container.appendChild(createButton.call(this, 'play', defaultAttributes));\n      }\n\n      // Fast forward button\n      if (control === 'fast-forward') {\n        container.appendChild(createButton.call(this, 'fast-forward', defaultAttributes));\n      }\n\n      // Progress\n      if (control === 'progress') {\n        const progressContainer = createElement('div', {\n          class: `${defaultAttributes.class} plyr__progress__container`,\n        });\n\n        const progress = createElement('div', getAttributesFromSelector(this.config.selectors.progress));\n\n        // Seek range slider\n        progress.appendChild(\n          createRange.call(this, 'seek', {\n            id: `plyr-seek-${data.id}`,\n          }),\n        );\n\n        // Buffer progress\n        progress.appendChild(createProgress.call(this, 'buffer'));\n\n        // TODO: Add loop display indicator\n\n        // Seek tooltip\n        if (this.config.tooltips.seek) {\n          const tooltip = createElement(\n            'span',\n            {\n              class: this.config.classNames.tooltip,\n            },\n            '00:00',\n          );\n\n          progress.appendChild(tooltip);\n          this.elements.display.seekTooltip = tooltip;\n        }\n\n        this.elements.progress = progress;\n        progressContainer.appendChild(this.elements.progress);\n        container.appendChild(progressContainer);\n      }\n\n      // Media current time display\n      if (control === 'current-time') {\n        container.appendChild(createTime.call(this, 'currentTime', defaultAttributes));\n      }\n\n      // Media duration display\n      if (control === 'duration') {\n        container.appendChild(createTime.call(this, 'duration', defaultAttributes));\n      }\n\n      // Volume controls\n      if (control === 'mute' || control === 'volume') {\n        let { volume } = this.elements;\n\n        // Create the volume container if needed\n        if (!is.element(volume) || !container.contains(volume)) {\n          volume = createElement(\n            'div',\n            extend({}, defaultAttributes, {\n              class: `${defaultAttributes.class} plyr__volume`.trim(),\n            }),\n          );\n\n          this.elements.volume = volume;\n\n          container.appendChild(volume);\n        }\n\n        // Toggle mute button\n        if (control === 'mute') {\n          volume.appendChild(createButton.call(this, 'mute'));\n        }\n\n        // Volume range control\n        // Ignored on iOS as it's handled globally\n        // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html\n        if (control === 'volume' && !browser.isIos && !browser.isIPadOS) {\n          // Set the attributes\n          const attributes = {\n            max: 1,\n            step: 0.05,\n            value: this.config.volume,\n          };\n\n          // Create the volume range slider\n          volume.appendChild(\n            createRange.call(\n              this,\n              'volume',\n              extend(attributes, {\n                id: `plyr-volume-${data.id}`,\n              }),\n            ),\n          );\n        }\n      }\n\n      // Toggle captions button\n      if (control === 'captions') {\n        container.appendChild(createButton.call(this, 'captions', defaultAttributes));\n      }\n\n      // Settings button / menu\n      if (control === 'settings' && !is.empty(this.config.settings)) {\n        const wrapper = createElement(\n          'div',\n          extend({}, defaultAttributes, {\n            class: `${defaultAttributes.class} plyr__menu`.trim(),\n            hidden: '',\n          }),\n        );\n\n        wrapper.appendChild(\n          createButton.call(this, 'settings', {\n            'aria-haspopup': true,\n            'aria-controls': `plyr-settings-${data.id}`,\n            'aria-expanded': false,\n          }),\n        );\n\n        const popup = createElement('div', {\n          class: 'plyr__menu__container',\n          id: `plyr-settings-${data.id}`,\n          hidden: '',\n        });\n\n        const inner = createElement('div');\n\n        const home = createElement('div', {\n          id: `plyr-settings-${data.id}-home`,\n        });\n\n        // Create the menu\n        const menu = createElement('div', {\n          role: 'menu',\n        });\n\n        home.appendChild(menu);\n        inner.appendChild(home);\n        this.elements.settings.panels.home = home;\n\n        // Build the menu items\n        this.config.settings.forEach((type) => {\n          // TODO: bundle this with the createMenuItem helper and bindings\n          const menuItem = createElement(\n            'button',\n            extend(getAttributesFromSelector(this.config.selectors.buttons.settings), {\n              'type': 'button',\n              'class': `${this.config.classNames.control} ${this.config.classNames.control}--forward`,\n              'role': 'menuitem',\n              'aria-haspopup': true,\n              'hidden': '',\n            }),\n          );\n\n          // Bind menu shortcuts for keyboard users\n          bindMenuItemShortcuts.call(this, menuItem, type);\n\n          // Show menu on click\n          on.call(this, menuItem, 'click', () => {\n            showMenuPanel.call(this, type, false);\n          });\n\n          const flex = createElement('span', null, i18n.get(type, this.config));\n\n          const value = createElement('span', {\n            class: this.config.classNames.menu.value,\n          });\n\n          // Speed contains HTML entities\n          value.innerHTML = data[type];\n\n          flex.appendChild(value);\n          menuItem.appendChild(flex);\n          menu.appendChild(menuItem);\n\n          // Build the panes\n          const pane = createElement('div', {\n            id: `plyr-settings-${data.id}-${type}`,\n            hidden: '',\n          });\n\n          // Back button\n          const backButton = createElement('button', {\n            type: 'button',\n            class: `${this.config.classNames.control} ${this.config.classNames.control}--back`,\n          });\n\n          // Visible label\n          backButton.appendChild(\n            createElement(\n              'span',\n              {\n                'aria-hidden': true,\n              },\n              i18n.get(type, this.config),\n            ),\n          );\n\n          // Screen reader label\n          backButton.appendChild(\n            createElement(\n              'span',\n              {\n                class: this.config.classNames.hidden,\n              },\n              i18n.get('menuBack', this.config),\n            ),\n          );\n\n          // Go back via keyboard\n          on.call(\n            this,\n            pane,\n            'keydown',\n            (event) => {\n              if (event.key !== 'ArrowLeft') return;\n\n              // Prevent seek\n              event.preventDefault();\n              event.stopPropagation();\n\n              // Show the respective menu\n              showMenuPanel.call(this, 'home', true);\n            },\n            false,\n          );\n\n          // Go back via button click\n          on.call(this, backButton, 'click', () => {\n            showMenuPanel.call(this, 'home', false);\n          });\n\n          // Add to pane\n          pane.appendChild(backButton);\n\n          // Menu\n          pane.appendChild(\n            createElement('div', {\n              role: 'menu',\n            }),\n          );\n\n          inner.appendChild(pane);\n\n          this.elements.settings.buttons[type] = menuItem;\n          this.elements.settings.panels[type] = pane;\n        });\n\n        popup.appendChild(inner);\n        wrapper.appendChild(popup);\n        container.appendChild(wrapper);\n\n        this.elements.settings.popup = popup;\n        this.elements.settings.menu = wrapper;\n      }\n\n      // Picture in picture button\n      if (control === 'pip' && support.pip) {\n        container.appendChild(createButton.call(this, 'pip', defaultAttributes));\n      }\n\n      // Airplay button\n      if (control === 'airplay' && support.airplay) {\n        container.appendChild(createButton.call(this, 'airplay', defaultAttributes));\n      }\n\n      // Download button\n      if (control === 'download') {\n        const attributes = extend({}, defaultAttributes, {\n          element: 'a',\n          href: this.download,\n          target: '_blank',\n        });\n\n        // Set download attribute for HTML5 only\n        if (this.isHTML5) {\n          attributes.download = '';\n        }\n\n        const { download } = this.config.urls;\n\n        if (!is.url(download) && this.isEmbed) {\n          extend(attributes, {\n            icon: `logo-${this.provider}`,\n            label: this.provider,\n          });\n        }\n\n        container.appendChild(createButton.call(this, 'download', attributes));\n      }\n\n      // Toggle fullscreen button\n      if (control === 'fullscreen') {\n        container.appendChild(createButton.call(this, 'fullscreen', defaultAttributes));\n      }\n    });\n\n    // Set available quality levels\n    if (this.isHTML5) {\n      setQualityMenu.call(this, html5.getQualityOptions.call(this));\n    }\n\n    setSpeedMenu.call(this);\n\n    return container;\n  },\n\n  // Insert controls\n  inject() {\n    // Sprite\n    if (this.config.loadSprite) {\n      const icon = controls.getIconUrl.call(this);\n\n      // Only load external sprite using AJAX\n      if (icon.cors) {\n        loadSprite(icon.url, 'sprite-plyr');\n      }\n    }\n\n    // Create a unique ID\n    this.id = Math.floor(Math.random() * 10000);\n\n    // Null by default\n    let container = null;\n    this.elements.controls = null;\n\n    // Set template properties\n    const props = {\n      id: this.id,\n      seektime: this.config.seekTime,\n      title: this.config.title,\n    };\n    let update = true;\n\n    // If function, run it and use output\n    if (is.function(this.config.controls)) {\n      this.config.controls = this.config.controls.call(this, props);\n    }\n\n    // Convert falsy controls to empty array (primarily for empty strings)\n    if (!this.config.controls) {\n      this.config.controls = [];\n    }\n\n    if (is.element(this.config.controls) || is.string(this.config.controls)) {\n      // HTMLElement or Non-empty string passed as the option\n      container = this.config.controls;\n    }\n    else {\n      // Create controls\n      container = controls.create.call(this, {\n        id: this.id,\n        seektime: this.config.seekTime,\n        speed: this.speed,\n        quality: this.quality,\n        captions: captions.getLabel.call(this),\n        // TODO: Looping\n        // loop: 'None',\n      });\n      update = false;\n    }\n\n    // Replace props with their value\n    const replace = (input) => {\n      let result = input;\n\n      Object.entries(props).forEach(([key, value]) => {\n        result = replaceAll(result, `{${key}}`, value);\n      });\n\n      return result;\n    };\n\n    // Update markup\n    if (update) {\n      if (is.string(this.config.controls)) {\n        container = replace(container);\n      }\n    }\n\n    // Controls container\n    let target;\n\n    // Inject to custom location\n    if (is.string(this.config.selectors.controls.container)) {\n      target = document.querySelector(this.config.selectors.controls.container);\n    }\n\n    // Inject into the container by default\n    if (!is.element(target)) {\n      target = this.elements.container;\n    }\n\n    // Inject controls HTML (needs to be before captions, hence \"afterbegin\")\n    const insertMethod = is.element(container) ? 'insertAdjacentElement' : 'insertAdjacentHTML';\n    target[insertMethod]('afterbegin', container);\n\n    // Find the elements if need be\n    if (!is.element(this.elements.controls)) {\n      controls.findElements.call(this);\n    }\n\n    // Add pressed property to buttons\n    if (!is.empty(this.elements.buttons)) {\n      const addProperty = (button) => {\n        const className = this.config.classNames.controlPressed;\n        button.setAttribute('aria-pressed', 'false');\n\n        Object.defineProperty(button, 'pressed', {\n          configurable: true,\n          enumerable: true,\n          get() {\n            return hasClass(button, className);\n          },\n          set(pressed = false) {\n            toggleClass(button, className, pressed);\n            button.setAttribute('aria-pressed', pressed ? 'true' : 'false');\n          },\n        });\n      };\n\n      // Toggle classname when pressed property is set\n      Object.values(this.elements.buttons)\n        .filter(Boolean)\n        .forEach((button) => {\n          if (is.array(button) || is.nodeList(button)) {\n            Array.from(button).filter(Boolean).forEach(addProperty);\n          }\n          else {\n            addProperty(button);\n          }\n        });\n    }\n\n    // Edge sometimes doesn't finish the paint so force a repaint\n    if (browser.isEdge) {\n      repaint(target);\n    }\n\n    // Setup tooltips\n    if (this.config.tooltips.controls) {\n      const { classNames, selectors } = this.config;\n      const selector = `${selectors.controls.wrapper} ${selectors.labels} .${classNames.hidden}`;\n      const labels = getElements.call(this, selector);\n\n      Array.from(labels).forEach((label) => {\n        toggleClass(label, this.config.classNames.hidden, false);\n        toggleClass(label, this.config.classNames.tooltip, true);\n      });\n    }\n  },\n\n  // Set media metadata\n  setMediaMetadata() {\n    try {\n      if ('mediaSession' in navigator) {\n        navigator.mediaSession.metadata = new window.MediaMetadata({\n          title: this.config.mediaMetadata.title,\n          artist: this.config.mediaMetadata.artist,\n          album: this.config.mediaMetadata.album,\n          artwork: this.config.mediaMetadata.artwork,\n        });\n      }\n    }\n    catch {\n      // Do nothing\n    }\n  },\n\n  // Add markers\n  setMarkers() {\n    if (!this.duration || this.elements.markers) return;\n\n    // Get valid points\n    const points = this.config.markers?.points?.filter(({ time }) => time > 0 && time < this.duration);\n    if (!points?.length) return;\n\n    const containerFragment = document.createDocumentFragment();\n    const pointsFragment = document.createDocumentFragment();\n    let tipElement = null;\n    const tipVisible = `${this.config.classNames.tooltip}--visible`;\n    const toggleTip = show => toggleClass(tipElement, tipVisible, show);\n\n    // Inject markers to progress container\n    points.forEach((point) => {\n      const markerElement = createElement(\n        'span',\n        {\n          class: this.config.classNames.marker,\n        },\n        '',\n      );\n\n      const left = `${(point.time / this.duration) * 100}%`;\n\n      if (tipElement) {\n        // Show on hover\n        markerElement.addEventListener('mouseenter', () => {\n          if (point.label) return;\n          tipElement.style.left = left;\n          tipElement.innerHTML = point.label;\n          toggleTip(true);\n        });\n\n        // Hide on leave\n        markerElement.addEventListener('mouseleave', () => {\n          toggleTip(false);\n        });\n      }\n\n      markerElement.addEventListener('click', () => {\n        this.currentTime = point.time;\n      });\n\n      markerElement.style.left = left;\n      pointsFragment.appendChild(markerElement);\n    });\n\n    containerFragment.appendChild(pointsFragment);\n\n    // Inject a tooltip if needed\n    if (!this.config.tooltips.seek) {\n      tipElement = createElement(\n        'span',\n        {\n          class: this.config.classNames.tooltip,\n        },\n        '',\n      );\n\n      containerFragment.appendChild(tipElement);\n    }\n\n    this.elements.markers = {\n      points: pointsFragment,\n      tip: tipElement,\n    };\n\n    this.elements.progress.appendChild(containerFragment);\n  },\n};\n\nexport default controls;\n"
  },
  {
    "path": "src/js/fullscreen.js",
    "content": "// ==========================================================================\n// Fullscreen wrapper\n// https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#prefixing\n// https://webkit.org/blog/7929/designing-websites-for-iphone-x/\n// ==========================================================================\n\nimport browser from './utils/browser';\nimport { closest, getElements, hasClass, toggleClass } from './utils/elements';\nimport { on, triggerEvent } from './utils/events';\nimport is from './utils/is';\nimport { silencePromise } from './utils/promise';\n\nclass Fullscreen {\n  constructor(player) {\n    // Keep reference to parent\n    this.player = player;\n\n    // Get prefix\n    this.prefix = Fullscreen.prefix;\n    this.property = Fullscreen.property;\n\n    // Scroll position\n    this.scrollPosition = { x: 0, y: 0 };\n\n    // Force the use of 'full window/browser' rather than fullscreen\n    this.forceFallback = player.config.fullscreen.fallback === 'force';\n\n    // Get the fullscreen element\n    // Checks container is an ancestor, defaults to null\n    this.player.elements.fullscreen\n      = player.config.fullscreen.container && closest(this.player.elements.container, player.config.fullscreen.container);\n\n    // Register event listeners\n    // Handle event (incase user presses escape etc)\n    on.call(\n      this.player,\n      document,\n      this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`,\n      () => {\n        // TODO: Filter for target??\n        this.onChange();\n      },\n    );\n\n    // Fullscreen toggle on double click\n    on.call(this.player, this.player.elements.container, 'dblclick', (event) => {\n      // Ignore double click in controls\n      if (is.element(this.player.elements.controls) && this.player.elements.controls.contains(event.target)) {\n        return;\n      }\n\n      this.player.listeners.proxy(event, this.toggle, 'fullscreen');\n    });\n\n    // Tap focus when in fullscreen\n    on.call(this, this.player.elements.container, 'keydown', event => this.trapFocus(event));\n\n    // Update the UI\n    this.update();\n  }\n\n  // Determine if native supported\n  static get nativeSupported() {\n    return !!(\n      document.fullscreenEnabled\n      || document.webkitFullscreenEnabled\n      || document.mozFullScreenEnabled\n      || document.msFullscreenEnabled\n    );\n  }\n\n  // If we're actually using native\n  get useNative() {\n    return Fullscreen.nativeSupported && !this.forceFallback;\n  }\n\n  // Get the prefix for handlers\n  static get prefix() {\n    // No prefix\n    if (is.function(document.exitFullscreen)) return '';\n\n    // Check for fullscreen support by vendor prefix\n    let value = '';\n    const prefixes = ['webkit', 'moz', 'ms'];\n\n    prefixes.some((pre) => {\n      if (is.function(document[`${pre}ExitFullscreen`]) || is.function(document[`${pre}CancelFullScreen`])) {\n        value = pre;\n        return true;\n      }\n\n      return false;\n    });\n\n    return value;\n  }\n\n  static get property() {\n    return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';\n  }\n\n  // Determine if fullscreen is supported\n  get supported() {\n    return [\n      // Fullscreen is enabled in config\n      this.player.config.fullscreen.enabled,\n      // Must be a video\n      this.player.isVideo,\n      // Either native is supported or fallback enabled\n      Fullscreen.nativeSupported || this.player.config.fullscreen.fallback,\n      // YouTube has no way to trigger fullscreen, so on devices with no native support, playsinline\n      // must be enabled and iosNative fullscreen must be disabled to offer the fullscreen fallback\n      !this.player.isYouTube\n      || Fullscreen.nativeSupported\n      || !browser.isIos\n      || (this.player.config.playsinline && !this.player.config.fullscreen.iosNative),\n    ].every(Boolean);\n  }\n\n  // Get active state\n  get active() {\n    if (!this.supported) return false;\n\n    // Fallback using classname\n    if (!Fullscreen.nativeSupported || this.forceFallback) {\n      return hasClass(this.target, this.player.config.classNames.fullscreen.fallback);\n    }\n\n    const element = !this.prefix\n      ? this.target.getRootNode().fullscreenElement\n      : this.target.getRootNode()[`${this.prefix}${this.property}Element`];\n\n    return element && element.shadowRoot ? element === this.target.getRootNode().host : element === this.target;\n  }\n\n  // Get target element\n  get target() {\n    return browser.isIos && this.player.config.fullscreen.iosNative\n      ? this.player.media\n      : this.player.elements.fullscreen ?? this.player.elements.container;\n  }\n\n  onChange = () => {\n    if (!this.supported) return;\n\n    // Update toggle button\n    const button = this.player.elements.buttons.fullscreen;\n    if (is.element(button)) {\n      button.pressed = this.active;\n    }\n\n    // Always trigger events on the plyr / media element (not a fullscreen container) and let them bubble up\n    const target = this.target === this.player.media ? this.target : this.player.elements.container;\n    // Trigger an event\n    triggerEvent.call(this.player, target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);\n  };\n\n  toggleFallback = (toggle = false) => {\n    // Store or restore scroll position\n    if (toggle) {\n      this.scrollPosition = {\n        x: window.scrollX ?? 0,\n        y: window.scrollY ?? 0,\n      };\n    }\n    else {\n      window.scrollTo(this.scrollPosition.x, this.scrollPosition.y);\n    }\n\n    // Toggle scroll\n    document.body.style.overflow = toggle ? 'hidden' : '';\n\n    // Toggle class hook\n    toggleClass(this.target, this.player.config.classNames.fullscreen.fallback, toggle);\n\n    // Force full viewport on iPhone X+\n    if (browser.isIos) {\n      let viewport = document.head.querySelector('meta[name=\"viewport\"]');\n      const property = 'viewport-fit=cover';\n\n      // Inject the viewport meta if required\n      if (!viewport) {\n        viewport = document.createElement('meta');\n        viewport.setAttribute('name', 'viewport');\n      }\n\n      // Check if the property already exists\n      const hasProperty = is.string(viewport.content) && viewport.content.includes(property);\n\n      if (toggle) {\n        this.cleanupViewport = !hasProperty;\n        if (!hasProperty) viewport.content += `,${property}`;\n      }\n      else if (this.cleanupViewport) {\n        viewport.content = viewport.content\n          .split(',')\n          .filter(part => part.trim() !== property)\n          .join(',');\n      }\n    }\n\n    // Toggle button and fire events\n    this.onChange();\n  };\n\n  // Trap focus inside container\n  trapFocus = (event) => {\n    // Bail if iOS/iPadOS, not active, not the tab key\n    if (browser.isIos || browser.isIPadOS || !this.active || event.key !== 'Tab') return;\n\n    // Get the current focused element\n    const focused = document.activeElement;\n    const focusable = getElements.call(this.player, 'a[href], button:not(:disabled), input:not(:disabled), [tabindex]');\n    const [first] = focusable;\n    const last = focusable[focusable.length - 1];\n\n    if (focused === last && !event.shiftKey) {\n      // Move focus to first element that can be tabbed if Shift isn't used\n      first.focus();\n      event.preventDefault();\n    }\n    else if (focused === first && event.shiftKey) {\n      // Move focus to last element that can be tabbed if Shift is used\n      last.focus();\n      event.preventDefault();\n    }\n  };\n\n  // Update UI\n  update = () => {\n    if (this.supported) {\n      let mode;\n\n      if (this.forceFallback) mode = 'Fallback (forced)';\n      else if (Fullscreen.nativeSupported) mode = 'Native';\n      else mode = 'Fallback';\n\n      this.player.debug.log(`${mode} fullscreen enabled`);\n    }\n    else {\n      this.player.debug.log('Fullscreen not supported and fallback disabled');\n    }\n\n    // Add styling hook to show button\n    toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.supported);\n  };\n\n  // Make an element fullscreen\n  enter = () => {\n    if (!this.supported) return;\n\n    // iOS native fullscreen doesn't need the request step\n    if (browser.isIos && this.player.config.fullscreen.iosNative) {\n      if (this.player.isVimeo) {\n        this.player.embed.requestFullscreen();\n      }\n      else {\n        this.target.webkitEnterFullscreen();\n      }\n    }\n    else if (!Fullscreen.nativeSupported || this.forceFallback) {\n      this.toggleFallback(true);\n    }\n    else if (!this.prefix) {\n      this.target.requestFullscreen({ navigationUI: 'hide' });\n    }\n    else if (!is.empty(this.prefix)) {\n      this.target[`${this.prefix}Request${this.property}`]();\n    }\n  };\n\n  // Bail from fullscreen\n  exit = () => {\n    if (!this.supported) return;\n\n    // iOS native fullscreen\n    if (browser.isIos && this.player.config.fullscreen.iosNative) {\n      if (this.player.isVimeo) {\n        this.player.embed.exitFullscreen();\n      }\n      else {\n        this.target.webkitEnterFullscreen();\n      }\n      silencePromise(this.player.play());\n    }\n    else if (!Fullscreen.nativeSupported || this.forceFallback) {\n      this.toggleFallback(false);\n    }\n    else if (!this.prefix) {\n      (document.cancelFullScreen || document.exitFullscreen).call(document);\n    }\n    else if (!is.empty(this.prefix)) {\n      const action = this.prefix === 'moz' ? 'Cancel' : 'Exit';\n      document[`${this.prefix}${action}${this.property}`]();\n    }\n  };\n\n  // Toggle state\n  toggle = () => {\n    if (!this.active) this.enter();\n    else this.exit();\n  };\n}\n\nexport default Fullscreen;\n"
  },
  {
    "path": "src/js/html5.js",
    "content": "// ==========================================================================\n// Plyr HTML5 helpers\n// ==========================================================================\n\nimport support from './support';\nimport { removeElement } from './utils/elements';\nimport { triggerEvent } from './utils/events';\nimport is from './utils/is';\nimport { silencePromise } from './utils/promise';\nimport { setAspectRatio } from './utils/style';\n\nconst html5 = {\n  getSources() {\n    if (!this.isHTML5) {\n      return [];\n    }\n\n    const sources = Array.from(this.media.querySelectorAll('source'));\n\n    // Filter out unsupported sources (if type is specified)\n    return sources.filter((source) => {\n      const type = source.getAttribute('type');\n\n      if (is.empty(type)) {\n        return true;\n      }\n\n      return support.mime.call(this, type);\n    });\n  },\n\n  // Get quality levels\n  getQualityOptions() {\n    // Whether we're forcing all options (e.g. for streaming)\n    if (this.config.quality.forced) {\n      return this.config.quality.options;\n    }\n\n    // Get sizes from <source> elements\n    return html5.getSources\n      .call(this)\n      .map(source => Number(source.getAttribute('size')))\n      .filter(Boolean);\n  },\n\n  setup() {\n    if (!this.isHTML5) {\n      return;\n    }\n\n    const player = this;\n\n    // Set speed options from config\n    player.options.speed = player.config.speed.options;\n\n    // Set aspect ratio if fixed\n    if (!is.empty(this.config.ratio)) {\n      setAspectRatio.call(player);\n    }\n\n    // Quality\n    Object.defineProperty(player.media, 'quality', {\n      get() {\n        // Get sources\n        const sources = html5.getSources.call(player);\n        const source = sources.find(s => s.getAttribute('src') === player.source);\n\n        // Return size, if match is found\n        return source && Number(source.getAttribute('size'));\n      },\n      set(input) {\n        if (player.quality === input) {\n          return;\n        }\n\n        // If we're using an external handler...\n        if (player.config.quality.forced && is.function(player.config.quality.onChange)) {\n          player.config.quality.onChange(input);\n        }\n        else {\n          // Get sources\n          const sources = html5.getSources.call(player);\n          // Get first match for requested size\n          const source = sources.find(s => Number(s.getAttribute('size')) === input);\n\n          // No matching source found\n          if (!source) {\n            return;\n          }\n\n          // Get current state\n          const { currentTime, paused, preload, readyState, playbackRate } = player.media;\n\n          // Set new source\n          player.media.src = source.getAttribute('src');\n\n          // Prevent loading if preload=\"none\" and the current source isn't loaded (#1044)\n          if (preload !== 'none' || readyState) {\n            // Restore time\n            player.once('loadedmetadata', () => {\n              player.speed = playbackRate;\n              player.currentTime = currentTime;\n\n              // Resume playing\n              if (!paused) {\n                silencePromise(player.play());\n              }\n            });\n\n            // Load new source\n            player.media.load();\n          }\n        }\n\n        // Trigger change event\n        triggerEvent.call(player, player.media, 'qualitychange', false, {\n          quality: input,\n        });\n      },\n    });\n  },\n\n  // Cancel current network requests\n  // See https://github.com/sampotts/plyr/issues/174\n  cancelRequests() {\n    if (!this.isHTML5) {\n      return;\n    }\n\n    // Remove child sources\n    removeElement(html5.getSources.call(this));\n\n    // Set blank video src attribute\n    // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error\n    // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection\n    this.media.setAttribute('src', this.config.blankVideo);\n\n    // Load the new empty source\n    // This will cancel existing requests\n    // See https://github.com/sampotts/plyr/issues/174\n    this.media.load();\n\n    // Debugging\n    this.debug.log('Cancelled network requests');\n  },\n};\n\nexport default html5;\n"
  },
  {
    "path": "src/js/listeners.js",
    "content": "// ==========================================================================\n// Plyr Event Listeners\n// ==========================================================================\n\nimport controls from './controls';\nimport ui from './ui';\nimport { repaint } from './utils/animation';\nimport browser from './utils/browser';\nimport { getElement, getElements, matches, toggleClass } from './utils/elements';\nimport { off, on, once, toggleListener, triggerEvent } from './utils/events';\nimport is from './utils/is';\nimport { silencePromise } from './utils/promise';\nimport { getAspectRatio, getViewportSize, supportsCSS } from './utils/style';\n\nclass Listeners {\n  constructor(player) {\n    this.player = player;\n    this.lastKey = null;\n    this.focusTimer = null;\n    this.lastKeyDown = null;\n\n    this.handleKey = this.handleKey.bind(this);\n    this.toggleMenu = this.toggleMenu.bind(this);\n    this.firstTouch = this.firstTouch.bind(this);\n  }\n\n  // Handle key presses\n  handleKey(event) {\n    const { player } = this;\n    const { elements } = player;\n    const { key, type, altKey, ctrlKey, metaKey, shiftKey } = event;\n    const pressed = type === 'keydown';\n    const repeat = pressed && key === this.lastKey;\n\n    // Bail if a modifier key is set\n    if (altKey || ctrlKey || metaKey || shiftKey) {\n      return;\n    }\n\n    // If the event is bubbled from the media element\n    // Firefox doesn't get the key for whatever reason\n    if (!key) {\n      return;\n    }\n\n    // Seek by increment\n    const seekByIncrement = (increment) => {\n      // Divide the max duration into 10th's and times by the number value\n      player.currentTime = (player.duration / 10) * increment;\n    };\n\n    // Handle the key on keydown\n    // Reset on keyup\n    if (pressed) {\n      // Check focused element\n      // and if the focused element is not editable (e.g. text input)\n      // and any that accept key input http://webaim.org/techniques/keyboard/\n      const focused = document.activeElement;\n      if (is.element(focused)) {\n        const { editable } = player.config.selectors;\n        const { seek } = elements.inputs;\n\n        if (focused !== seek && matches(focused, editable)) {\n          return;\n        }\n\n        if (event.key === ' ' && matches(focused, 'button, [role^=\"menuitem\"]')) {\n          return;\n        }\n      }\n\n      // Which keys should we prevent default\n      const preventDefault = [\n        ' ',\n        'ArrowLeft',\n        'ArrowUp',\n        'ArrowRight',\n        'ArrowDown',\n\n        '0',\n        '1',\n        '2',\n        '3',\n        '4',\n        '5',\n        '6',\n        '7',\n        '8',\n        '9',\n\n        'c',\n        'f',\n        'k',\n        'l',\n        'm',\n      ];\n\n      // If the key is found prevent default (e.g. prevent scrolling for arrows)\n      if (preventDefault.includes(key)) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      switch (key) {\n        case '0':\n        case '1':\n        case '2':\n        case '3':\n        case '4':\n        case '5':\n        case '6':\n        case '7':\n        case '8':\n        case '9':\n          if (!repeat) {\n            seekByIncrement(Number.parseInt(key, 10));\n          }\n          break;\n\n        case ' ':\n        case 'k':\n          if (!repeat) {\n            silencePromise(player.togglePlay());\n          }\n          break;\n\n        case 'ArrowUp':\n          player.increaseVolume(0.1);\n          break;\n\n        case 'ArrowDown':\n          player.decreaseVolume(0.1);\n          break;\n\n        case 'm':\n          if (!repeat) {\n            player.muted = !player.muted;\n          }\n          break;\n\n        case 'ArrowRight':\n          player.forward();\n          break;\n\n        case 'ArrowLeft':\n          player.rewind();\n          break;\n\n        case 'f':\n          player.fullscreen.toggle();\n          break;\n\n        case 'c':\n          if (!repeat) {\n            player.toggleCaptions();\n          }\n          break;\n\n        case 'l':\n          player.loop = !player.loop;\n          break;\n\n        default:\n          break;\n      }\n\n      // Escape is handle natively when in full screen\n      // So we only need to worry about non native\n      if (key === 'Escape' && !player.fullscreen.usingNative && player.fullscreen.active) {\n        player.fullscreen.toggle();\n      }\n\n      // Store last key for next cycle\n      this.lastKey = key;\n    }\n    else {\n      this.lastKey = null;\n    }\n  }\n\n  // Toggle menu\n  toggleMenu(event) {\n    controls.toggleMenu.call(this.player, event);\n  }\n\n  // Device is touch enabled\n  firstTouch = () => {\n    const { player } = this;\n    const { elements } = player;\n\n    player.touch = true;\n\n    // Add touch class\n    toggleClass(elements.container, player.config.classNames.isTouch, true);\n  };\n\n  // Global window & document listeners\n  global = (toggle = true) => {\n    const { player } = this;\n\n    // Keyboard shortcuts\n    if (player.config.keyboard.global) {\n      toggleListener.call(player, window, 'keydown keyup', this.handleKey, toggle, false);\n    }\n\n    // Click anywhere closes menu\n    toggleListener.call(player, document.body, 'click', this.toggleMenu, toggle);\n\n    // Detect touch by events\n    once.call(player, document.body, 'touchstart', this.firstTouch);\n  };\n\n  // Container listeners\n  container = () => {\n    const { player } = this;\n    const { config, elements, timers } = player;\n\n    // Keyboard shortcuts\n    if (!config.keyboard.global && config.keyboard.focused) {\n      on.call(player, elements.container, 'keydown keyup', this.handleKey, false);\n    }\n\n    // Toggle controls on mouse events and entering fullscreen\n    on.call(\n      player,\n      elements.container,\n      'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen',\n      (event) => {\n        const { controls: controlsElement } = elements;\n\n        // Remove button states for fullscreen\n        if (controlsElement && event.type === 'enterfullscreen') {\n          controlsElement.pressed = false;\n          controlsElement.hover = false;\n        }\n\n        // Show, then hide after a timeout unless another control event occurs\n        const show = ['touchstart', 'touchmove', 'mousemove'].includes(event.type);\n        let delay = 0;\n\n        if (show) {\n          ui.toggleControls.call(player, true);\n          // Use longer timeout for touch devices\n          delay = player.touch ? 3000 : 2000;\n        }\n\n        // Clear timer\n        clearTimeout(timers.controls);\n\n        // Set new timer to prevent flicker when seeking\n        timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay);\n      },\n    );\n\n    // Set a gutter for Vimeo\n    const setGutter = () => {\n      if (!player.isVimeo || player.config.vimeo.premium) {\n        return;\n      }\n\n      const target = elements.wrapper;\n      const { active } = player.fullscreen;\n      const [videoWidth, videoHeight] = getAspectRatio.call(player);\n      const useNativeAspectRatio = supportsCSS(`aspect-ratio: ${videoWidth} / ${videoHeight}`);\n\n      // If not active, remove styles\n      if (!active) {\n        if (useNativeAspectRatio) {\n          target.style.width = null;\n          target.style.height = null;\n        }\n        else {\n          target.style.maxWidth = null;\n          target.style.margin = null;\n        }\n        return;\n      }\n\n      // Determine which dimension will overflow and constrain view\n      const [viewportWidth, viewportHeight] = getViewportSize();\n      const overflow = viewportWidth / viewportHeight > videoWidth / videoHeight;\n\n      if (useNativeAspectRatio) {\n        target.style.width = overflow ? 'auto' : '100%';\n        target.style.height = overflow ? '100%' : 'auto';\n      }\n      else {\n        target.style.maxWidth = overflow ? `${(viewportHeight / videoHeight) * videoWidth}px` : null;\n        target.style.margin = overflow ? '0 auto' : null;\n      }\n    };\n\n    // Handle resizing\n    const resized = () => {\n      clearTimeout(timers.resized);\n      timers.resized = setTimeout(setGutter, 50);\n    };\n\n    on.call(player, elements.container, 'enterfullscreen exitfullscreen', (event) => {\n      const { target } = player.fullscreen;\n\n      // Ignore events not from target\n      if (target !== elements.container) {\n        return;\n      }\n\n      // If it's not an embed and no ratio specified\n      if (!player.isEmbed && is.empty(player.config.ratio)) {\n        return;\n      }\n\n      // Set Vimeo gutter\n      setGutter();\n\n      // Watch for resizes\n      const method = event.type === 'enterfullscreen' ? on : off;\n      method.call(player, window, 'resize', resized);\n    });\n  };\n\n  // Listen for media events\n  media = () => {\n    const { player } = this;\n    const { elements } = player;\n\n    // Time change on media\n    on.call(player, player.media, 'timeupdate seeking seeked', event => controls.timeUpdate.call(player, event));\n\n    // Display duration\n    on.call(player, player.media, 'durationchange loadeddata loadedmetadata', event =>\n      controls.durationUpdate.call(player, event));\n\n    // Handle the media finishing\n    on.call(player, player.media, 'ended', () => {\n      // Show poster on end\n      if (player.isHTML5 && player.isVideo && player.config.resetOnEnd) {\n        // Restart\n        player.restart();\n\n        // Call pause otherwise IE11 will start playing the video again\n        player.pause();\n      }\n    });\n\n    // Check for buffer progress\n    on.call(player, player.media, 'progress playing seeking seeked', event =>\n      controls.updateProgress.call(player, event));\n\n    // Handle volume changes\n    on.call(player, player.media, 'volumechange', event => controls.updateVolume.call(player, event));\n\n    // Handle play/pause\n    on.call(player, player.media, 'playing play pause ended emptied timeupdate', event =>\n      ui.checkPlaying.call(player, event));\n\n    // Loading state\n    on.call(player, player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(player, event));\n\n    // Click video\n    if (player.supported.ui && player.config.clickToPlay && !player.isAudio) {\n      // Re-fetch the wrapper\n      const wrapper = getElement.call(player, `.${player.config.classNames.video}`);\n\n      // Bail if there's no wrapper (this should never happen)\n      if (!is.element(wrapper)) {\n        return;\n      }\n\n      // On click play, pause or restart\n      on.call(player, elements.container, 'click', (event) => {\n        const targets = [elements.container, wrapper];\n\n        // Ignore if click if not container or in video wrapper\n        if (!targets.includes(event.target) && !wrapper.contains(event.target)) {\n          return;\n        }\n\n        // Touch devices will just show controls (if hidden)\n        if (player.touch && player.config.hideControls) {\n          return;\n        }\n\n        if (player.ended) {\n          this.proxy(event, player.restart, 'restart');\n          this.proxy(\n            event,\n            () => {\n              silencePromise(player.play());\n            },\n            'play',\n          );\n        }\n        else {\n          this.proxy(\n            event,\n            () => {\n              silencePromise(player.togglePlay());\n            },\n            'play',\n          );\n        }\n      });\n    }\n\n    // Disable right click\n    if (player.supported.ui && player.config.disableContextMenu) {\n      on.call(\n        player,\n        elements.wrapper,\n        'contextmenu',\n        (event) => {\n          event.preventDefault();\n        },\n        false,\n      );\n    }\n\n    // Volume change\n    on.call(player, player.media, 'volumechange', () => {\n      // Save to storage\n      player.storage.set({\n        volume: player.volume,\n        muted: player.muted,\n      });\n    });\n\n    // Speed change\n    on.call(player, player.media, 'ratechange', () => {\n      // Update UI\n      controls.updateSetting.call(player, 'speed');\n\n      // Save to storage\n      player.storage.set({ speed: player.speed });\n    });\n\n    // Quality change\n    on.call(player, player.media, 'qualitychange', (event) => {\n      // Update UI\n      controls.updateSetting.call(player, 'quality', null, event.detail.quality);\n    });\n\n    // Update download link when ready and if quality changes\n    on.call(player, player.media, 'ready qualitychange', () => {\n      controls.setDownloadUrl.call(player);\n    });\n\n    // Proxy events to container\n    // Bubble up key events for Edge\n    const proxyEvents = player.config.events.concat(['keyup', 'keydown']).join(' ');\n\n    on.call(player, player.media, proxyEvents, (event) => {\n      let { detail = {} } = event;\n\n      // Get error details from media\n      if (event.type === 'error') {\n        detail = player.media.error;\n      }\n\n      triggerEvent.call(player, elements.container, event.type, true, detail);\n    });\n  };\n\n  // Run default and custom handlers\n  proxy = (event, defaultHandler, customHandlerKey) => {\n    const { player } = this;\n    const customHandler = player.config.listeners[customHandlerKey];\n    const hasCustomHandler = is.function(customHandler);\n    let returned = true;\n\n    // Execute custom handler\n    if (hasCustomHandler) {\n      returned = customHandler.call(player, event);\n    }\n\n    // Only call default handler if not prevented in custom handler\n    if (returned !== false && is.function(defaultHandler)) {\n      defaultHandler.call(player, event);\n    }\n  };\n\n  // Trigger custom and default handlers\n  bind = (element, type, defaultHandler, customHandlerKey, passive = true) => {\n    const { player } = this;\n    const customHandler = player.config.listeners[customHandlerKey];\n    const hasCustomHandler = is.function(customHandler);\n\n    on.call(\n      player,\n      element,\n      type,\n      event => this.proxy(event, defaultHandler, customHandlerKey),\n      passive && !hasCustomHandler,\n    );\n  };\n\n  // Listen for control events\n  controls = () => {\n    const { player } = this;\n    const { elements } = player;\n    // IE doesn't support input event, so we fallback to change\n    const inputEvent = browser.isIE ? 'change' : 'input';\n\n    // Play/pause toggle\n    if (elements.buttons.play) {\n      Array.from(elements.buttons.play).forEach((button) => {\n        this.bind(\n          button,\n          'click',\n          () => {\n            silencePromise(player.togglePlay());\n          },\n          'play',\n        );\n      });\n    }\n\n    // Pause\n    this.bind(elements.buttons.restart, 'click', player.restart, 'restart');\n\n    // Rewind\n    this.bind(\n      elements.buttons.rewind,\n      'click',\n      () => {\n        // Record seek time so we can prevent hiding controls for a few seconds after rewind\n        player.lastSeekTime = Date.now();\n        player.rewind();\n      },\n      'rewind',\n    );\n\n    // Rewind\n    this.bind(\n      elements.buttons.fastForward,\n      'click',\n      () => {\n        // Record seek time so we can prevent hiding controls for a few seconds after fast forward\n        player.lastSeekTime = Date.now();\n        player.forward();\n      },\n      'fastForward',\n    );\n\n    // Mute toggle\n    this.bind(\n      elements.buttons.mute,\n      'click',\n      () => {\n        player.muted = !player.muted;\n      },\n      'mute',\n    );\n\n    // Captions toggle\n    this.bind(elements.buttons.captions, 'click', () => player.toggleCaptions());\n\n    // Download\n    this.bind(\n      elements.buttons.download,\n      'click',\n      () => {\n        triggerEvent.call(player, player.media, 'download');\n      },\n      'download',\n    );\n\n    // Fullscreen toggle\n    this.bind(\n      elements.buttons.fullscreen,\n      'click',\n      () => {\n        player.fullscreen.toggle();\n      },\n      'fullscreen',\n    );\n\n    // Picture-in-Picture\n    this.bind(\n      elements.buttons.pip,\n      'click',\n      () => {\n        player.pip = 'toggle';\n      },\n      'pip',\n    );\n\n    // Airplay\n    this.bind(elements.buttons.airplay, 'click', player.airplay, 'airplay');\n\n    // Settings menu - click toggle\n    this.bind(\n      elements.buttons.settings,\n      'click',\n      (event) => {\n        // Prevent the document click listener closing the menu\n        event.stopPropagation();\n        event.preventDefault();\n\n        controls.toggleMenu.call(player, event);\n      },\n      null,\n      false,\n    ); // Can't be passive as we're preventing default\n\n    // Settings menu - keyboard toggle\n    // We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus\n    // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n    this.bind(\n      elements.buttons.settings,\n      'keyup',\n      (event) => {\n        if (![' ', 'Enter'].includes(event.key)) {\n          return;\n        }\n\n        // Because return triggers a click anyway, all we need to do is set focus\n        if (event.key === 'Enter') {\n          controls.focusFirstMenuItem.call(player, null, true);\n          return;\n        }\n\n        // Prevent scroll\n        event.preventDefault();\n\n        // Prevent playing video (Firefox)\n        event.stopPropagation();\n\n        // Toggle menu\n        controls.toggleMenu.call(player, event);\n      },\n      null,\n      false, // Can't be passive as we're preventing default\n    );\n\n    // Escape closes menu\n    this.bind(elements.settings.menu, 'keydown', (event) => {\n      if (event.key === 'Escape') {\n        controls.toggleMenu.call(player, event);\n      }\n    });\n\n    // Set range input alternative \"value\", which matches the tooltip time (#954)\n    this.bind(elements.inputs.seek, 'mousedown mousemove', (event) => {\n      const rect = elements.progress.getBoundingClientRect();\n      const scrollLeft = event.pageX - event.clientX;\n      const percent = (100 / rect.width) * (event.pageX - rect.left - scrollLeft);\n      event.currentTarget.setAttribute('seek-value', percent);\n    });\n\n    // Pause while seeking\n    this.bind(elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', (event) => {\n      const seek = event.currentTarget;\n      const attribute = 'play-on-seeked';\n\n      if (is.keyboardEvent(event) && !['ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        return;\n      }\n\n      // Record seek time so we can prevent hiding controls for a few seconds after seek\n      player.lastSeekTime = Date.now();\n\n      // Was playing before?\n      const play = seek.hasAttribute(attribute);\n      // Done seeking\n      const done = ['mouseup', 'touchend', 'keyup'].includes(event.type);\n\n      // If we're done seeking and it was playing, resume playback\n      if (play && done) {\n        seek.removeAttribute(attribute);\n        silencePromise(player.play());\n      }\n      else if (!done && player.playing) {\n        seek.setAttribute(attribute, '');\n        player.pause();\n      }\n    });\n\n    // Fix range inputs on iOS\n    // Super weird iOS bug where after you interact with an <input type=\"range\">,\n    // it takes over further interactions on the page. This is a hack\n    if (browser.isIos) {\n      const inputs = getElements.call(player, 'input[type=\"range\"]');\n      Array.from(inputs).forEach(input => this.bind(input, inputEvent, event => repaint(event.target)));\n    }\n\n    // Seek\n    this.bind(\n      elements.inputs.seek,\n      inputEvent,\n      (event) => {\n        const seek = event.currentTarget;\n        // If it exists, use seek-value instead of \"value\" for consistency with tooltip time (#954)\n        let seekTo = seek.getAttribute('seek-value');\n\n        if (is.empty(seekTo)) {\n          seekTo = seek.value;\n        }\n\n        seek.removeAttribute('seek-value');\n\n        player.currentTime = (seekTo / seek.max) * player.duration;\n      },\n      'seek',\n    );\n\n    // Seek tooltip\n    this.bind(elements.progress, 'mouseenter mouseleave mousemove', event =>\n      controls.updateSeekTooltip.call(player, event));\n\n    // Preview thumbnails plugin\n    // TODO: Really need to work on some sort of plug-in wide event bus or pub-sub for this\n    this.bind(elements.progress, 'mousemove touchmove', (event) => {\n      const { previewThumbnails } = player;\n\n      if (previewThumbnails && previewThumbnails.loaded) {\n        previewThumbnails.startMove(event);\n      }\n    });\n\n    // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering\n    this.bind(elements.progress, 'mouseleave touchend click', () => {\n      const { previewThumbnails } = player;\n\n      if (previewThumbnails && previewThumbnails.loaded) {\n        previewThumbnails.endMove(false, true);\n      }\n    });\n\n    // Show scrubbing preview\n    this.bind(elements.progress, 'mousedown touchstart', (event) => {\n      const { previewThumbnails } = player;\n\n      if (previewThumbnails && previewThumbnails.loaded) {\n        previewThumbnails.startScrubbing(event);\n      }\n    });\n\n    this.bind(elements.progress, 'mouseup touchend', (event) => {\n      const { previewThumbnails } = player;\n\n      if (previewThumbnails && previewThumbnails.loaded) {\n        previewThumbnails.endScrubbing(event);\n      }\n    });\n\n    // Polyfill for lower fill in <input type=\"range\"> for webkit\n    if (browser.isWebKit) {\n      Array.from(getElements.call(player, 'input[type=\"range\"]')).forEach((element) => {\n        this.bind(element, 'input', event => controls.updateRangeFill.call(player, event.target));\n      });\n    }\n\n    // Current time invert\n    // Only if one time element is used for both currentTime and duration\n    if (player.config.toggleInvert && !is.element(elements.display.duration)) {\n      this.bind(elements.display.currentTime, 'click', () => {\n        // Do nothing if we're at the start\n        if (player.currentTime === 0) {\n          return;\n        }\n\n        player.config.invertTime = !player.config.invertTime;\n\n        controls.timeUpdate.call(player);\n      });\n    }\n\n    // Volume\n    this.bind(\n      elements.inputs.volume,\n      inputEvent,\n      (event) => {\n        player.volume = event.target.value;\n      },\n      'volume',\n    );\n\n    // Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)\n    this.bind(elements.controls, 'mouseenter mouseleave', (event) => {\n      elements.controls.hover = !player.touch && event.type === 'mouseenter';\n    });\n\n    // Also update controls.hover state for any non-player children of fullscreen element (as above)\n    if (elements.fullscreen) {\n      Array.from(elements.fullscreen.children)\n        .filter(c => !c.contains(elements.container))\n        .forEach((child) => {\n          this.bind(child, 'mouseenter mouseleave', (event) => {\n            if (elements.controls) {\n              elements.controls.hover = !player.touch && event.type === 'mouseenter';\n            }\n          });\n        });\n    }\n\n    // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)\n    this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', (event) => {\n      elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);\n    });\n\n    // Show controls when they receive focus (e.g., when using keyboard tab key)\n    this.bind(elements.controls, 'focusin', () => {\n      const { config, timers } = player;\n\n      // Skip transition to prevent focus from scrolling the parent element\n      toggleClass(elements.controls, config.classNames.noTransition, true);\n\n      // Toggle\n      ui.toggleControls.call(player, true);\n\n      // Restore transition\n      setTimeout(() => {\n        toggleClass(elements.controls, config.classNames.noTransition, false);\n      }, 0);\n\n      // Delay a little more for mouse users\n      const delay = this.touch ? 3000 : 4000;\n\n      // Clear timer\n      clearTimeout(timers.controls);\n\n      // Hide again after delay\n      timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay);\n    });\n\n    // Mouse wheel for volume\n    this.bind(\n      elements.inputs.volume,\n      'wheel',\n      (event) => {\n        // Detect \"natural\" scroll - supported on OS X Safari only\n        // Other browsers on OS X will be inverted until support improves\n        const inverted = event.webkitDirectionInvertedFromDevice;\n        // Get delta from event. Invert if `inverted` is true\n        const [x, y] = [event.deltaX, -event.deltaY].map(value => (inverted ? -value : value));\n        // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)\n        const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);\n\n        // Change the volume by 2%\n        player.increaseVolume(direction / 50);\n\n        // Don't break page scrolling at max and min\n        const { volume } = player.media;\n        if ((direction === 1 && volume < 1) || (direction === -1 && volume > 0)) {\n          event.preventDefault();\n        }\n      },\n      'volume',\n      false,\n    );\n  };\n}\n\nexport default Listeners;\n"
  },
  {
    "path": "src/js/media.js",
    "content": "// ==========================================================================\n// Plyr Media\n// ==========================================================================\n\nimport html5 from './html5';\nimport vimeo from './plugins/vimeo';\nimport youtube from './plugins/youtube';\nimport { createElement, toggleClass, wrap } from './utils/elements';\n\nconst media = {\n  // Setup media\n  setup() {\n    // If there's no media, bail\n    if (!this.media) {\n      this.debug.warn('No media element found!');\n      return;\n    }\n\n    // Add type class\n    toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', this.type), true);\n\n    // Add provider class\n    toggleClass(this.elements.container, this.config.classNames.provider.replace('{0}', this.provider), true);\n\n    // Add video class for embeds\n    // This will require changes if audio embeds are added\n    if (this.isEmbed) {\n      toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', 'video'), true);\n    }\n\n    // Inject the player wrapper\n    if (this.isVideo) {\n      // Create the wrapper div\n      this.elements.wrapper = createElement('div', {\n        class: this.config.classNames.video,\n      });\n\n      // Wrap the video in a container\n      wrap(this.media, this.elements.wrapper);\n\n      // Poster image container\n      this.elements.poster = createElement('div', {\n        class: this.config.classNames.poster,\n      });\n\n      this.elements.wrapper.appendChild(this.elements.poster);\n    }\n\n    if (this.isHTML5) {\n      html5.setup.call(this);\n    }\n    else if (this.isYouTube) {\n      youtube.setup.call(this);\n    }\n    else if (this.isVimeo) {\n      vimeo.setup.call(this);\n    }\n  },\n};\n\nexport default media;\n"
  },
  {
    "path": "src/js/plugins/ads.js",
    "content": "// ==========================================================================\n// Advertisement plugin using Google IMA HTML5 SDK\n// Create an account with our ad partner, vi here:\n// https://www.vi.ai/publisher-video-monetization/\n// ==========================================================================\n\n/* global google */\n\nimport { createElement } from '../utils/elements';\nimport { triggerEvent } from '../utils/events';\nimport i18n from '../utils/i18n';\nimport is from '../utils/is';\nimport loadScript from '../utils/load-script';\nimport { silencePromise } from '../utils/promise';\nimport { formatTime } from '../utils/time';\nimport { buildUrlParams } from '../utils/urls';\n\nfunction destroy(instance) {\n  // Destroy our adsManager\n  if (instance.manager) {\n    instance.manager.destroy();\n  }\n\n  // Destroy our adsManager\n  if (instance.elements.displayContainer) {\n    instance.elements.displayContainer.destroy();\n  }\n\n  instance.elements.container.remove();\n}\n\nclass Ads {\n  /**\n   * Ads constructor.\n   * @param {object} player\n   * @return {Ads}\n   */\n  constructor(player) {\n    this.player = player;\n    this.config = player.config.ads;\n    this.playing = false;\n    this.initialized = false;\n    this.elements = {\n      container: null,\n      displayContainer: null,\n    };\n    this.manager = null;\n    this.loader = null;\n    this.cuePoints = null;\n    this.events = {};\n    this.safetyTimer = null;\n    this.countdownTimer = null;\n\n    // Setup a promise to resolve when the IMA manager is ready\n    this.managerPromise = new Promise((resolve, reject) => {\n      // The ad is loaded and ready\n      this.on('loaded', resolve);\n\n      // Ads failed\n      this.on('error', reject);\n    });\n\n    this.load();\n  }\n\n  get enabled() {\n    const { config } = this;\n\n    return (\n      this.player.isHTML5\n      && this.player.isVideo\n      && config.enabled\n      && (!is.empty(config.publisherId) || is.url(config.tagUrl))\n    );\n  }\n\n  /**\n   * Load the IMA SDK\n   */\n  load = () => {\n    if (!this.enabled) {\n      return;\n    }\n\n    // Check if the Google IMA3 SDK is loaded or load it ourselves\n    if (!is.object(window.google) || !is.object(window.google.ima)) {\n      loadScript(this.player.config.urls.googleIMA.sdk)\n        .then(() => {\n          this.ready();\n        })\n        .catch(() => {\n          // Script failed to load or is blocked\n          this.trigger('error', new Error('Google IMA SDK failed to load'));\n        });\n    }\n    else {\n      this.ready();\n    }\n  };\n\n  /**\n   * Get the ads instance ready\n   */\n  ready = () => {\n    // Double check we're enabled\n    if (!this.enabled) {\n      destroy(this);\n    }\n\n    // Start ticking our safety timer. If the whole advertisement\n    // thing doesn't resolve within our set time; we bail\n    this.startSafetyTimer(12000, 'ready()');\n\n    // Clear the safety timer\n    this.managerPromise.then(() => {\n      this.clearSafetyTimer('onAdsManagerLoaded()');\n    });\n\n    // Set listeners on the Plyr instance\n    this.listeners();\n\n    // Setup the IMA SDK\n    this.setupIMA();\n  };\n\n  // Build the tag URL\n  get tagUrl() {\n    const { config } = this;\n\n    if (is.url(config.tagUrl)) {\n      return config.tagUrl;\n    }\n\n    const params = {\n      AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',\n      AV_CHANNELID: '5a0458dc28a06145e4519d21',\n      AV_URL: window.location.hostname,\n      cb: Date.now(),\n      AV_WIDTH: 640,\n      AV_HEIGHT: 480,\n      AV_CDIM2: config.publisherId,\n    };\n\n    const base = 'https://go.aniview.com/api/adserver6/vast/';\n\n    return `${base}?${buildUrlParams(params)}`;\n  }\n\n  /**\n   * In order for the SDK to display ads for our video, we need to tell it where to put them,\n   * so here we define our ad container. This div is set up to render on top of the video player.\n   * Using the code below, we tell the SDK to render ads within that div. We also provide a\n   * handle to the content video player - the SDK will poll the current time of our player to\n   * properly place mid-rolls. After we create the ad display container, we initialize it. On\n   * mobile devices, this initialization is done as the result of a user action.\n   */\n  setupIMA = () => {\n    // Create the container for our advertisements\n    this.elements.container = createElement('div', {\n      class: this.player.config.classNames.ads,\n    });\n\n    this.player.elements.container.appendChild(this.elements.container);\n\n    // So we can run VPAID2\n    google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED);\n\n    // Set language\n    google.ima.settings.setLocale(this.player.config.ads.language);\n\n    // Set playback for iOS10+\n    google.ima.settings.setDisableCustomPlaybackForIOS10Plus(this.player.config.playsinline);\n\n    // We assume the adContainer is the video container of the plyr element that will house the ads\n    this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container, this.player.media);\n\n    // Create ads loader\n    this.loader = new google.ima.AdsLoader(this.elements.displayContainer);\n\n    // Listen and respond to ads loaded and error events\n    this.loader.addEventListener(\n      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,\n      event => this.onAdsManagerLoaded(event),\n      false,\n    );\n    this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error), false);\n\n    // Request video ads to be pre-loaded\n    this.requestAds();\n  };\n\n  /**\n   * Request advertisements\n   */\n  requestAds = () => {\n    const { container } = this.player.elements;\n\n    try {\n      // Request video ads\n      const request = new google.ima.AdsRequest();\n      request.adTagUrl = this.tagUrl;\n\n      // Specify the linear and nonlinear slot sizes. This helps the SDK\n      // to select the correct creative if multiple are returned\n      request.linearAdSlotWidth = container.offsetWidth;\n      request.linearAdSlotHeight = container.offsetHeight;\n      request.nonLinearAdSlotWidth = container.offsetWidth;\n      request.nonLinearAdSlotHeight = container.offsetHeight;\n\n      // We only overlay ads as we only support video.\n      request.forceNonLinearFullSlot = false;\n\n      // Mute based on current state\n      request.setAdWillPlayMuted(!this.player.muted);\n\n      this.loader.requestAds(request);\n    }\n    catch (error) {\n      this.onAdError(error);\n    }\n  };\n\n  /**\n   * Update the ad countdown\n   * @param {boolean} start\n   */\n  pollCountdown = (start = false) => {\n    if (!start) {\n      clearInterval(this.countdownTimer);\n      this.elements.container.removeAttribute('data-badge-text');\n      return;\n    }\n\n    const update = () => {\n      const time = formatTime(Math.max(this.manager.getRemainingTime(), 0));\n      const label = `${i18n.get('advertisement', this.player.config)} - ${time}`;\n      this.elements.container.setAttribute('data-badge-text', label);\n    };\n\n    this.countdownTimer = setInterval(update, 100);\n  };\n\n  /**\n   * This method is called whenever the ads are ready inside the AdDisplayContainer\n   * @param {Event} event - adsManagerLoadedEvent\n   */\n  onAdsManagerLoaded = (event) => {\n    // Load could occur after a source change (race condition)\n    if (!this.enabled) {\n      return;\n    }\n\n    // Get the ads manager\n    const settings = new google.ima.AdsRenderingSettings();\n\n    // Tell the SDK to save and restore content video state on our behalf\n    settings.restoreCustomPlaybackStateOnAdBreakComplete = true;\n    settings.enablePreloading = true;\n\n    // The SDK is polling currentTime on the contentPlayback. And needs a duration\n    // so it can determine when to start the mid- and post-roll\n    this.manager = event.getAdsManager(this.player, settings);\n\n    // Get the cue points for any mid-rolls by filtering out the pre- and post-roll\n    this.cuePoints = this.manager.getCuePoints();\n\n    // Add listeners to the required events\n    // Advertisement error events\n    this.manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error));\n\n    // Advertisement regular events\n    Object.keys(google.ima.AdEvent.Type).forEach((type) => {\n      this.manager.addEventListener(google.ima.AdEvent.Type[type], e => this.onAdEvent(e));\n    });\n\n    // Resolve our adsManager\n    this.trigger('loaded');\n  };\n\n  addCuePoints = () => {\n    // Add advertisement cue's within the time line if available\n    if (!is.empty(this.cuePoints)) {\n      this.cuePoints.forEach((cuePoint) => {\n        if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < this.player.duration) {\n          const seekElement = this.player.elements.progress;\n\n          if (is.element(seekElement)) {\n            const cuePercentage = (100 / this.player.duration) * cuePoint;\n            const cue = createElement('span', {\n              class: this.player.config.classNames.cues,\n            });\n\n            cue.style.left = `${cuePercentage.toString()}%`;\n            seekElement.appendChild(cue);\n          }\n        }\n      });\n    }\n  };\n\n  /**\n   * This is where all the event handling takes place. Retrieve the ad from the event. Some\n   * events (e.g. ALL_ADS_COMPLETED) don't have the ad object associated\n   * https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/apis#ima.AdEvent.Type\n   * @param {Event} event\n   */\n  onAdEvent = (event) => {\n    const { container } = this.player.elements;\n    // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)\n    // don't have ad object associated\n    const ad = event.getAd();\n    const adData = event.getAdData();\n\n    // Proxy event\n    const dispatchEvent = (type) => {\n      triggerEvent.call(this.player, this.player.media, `ads${type.replace(/_/g, '').toLowerCase()}`);\n    };\n\n    // Bubble the event\n    dispatchEvent(event.type);\n\n    switch (event.type) {\n      case google.ima.AdEvent.Type.LOADED:\n        // This is the first event sent for an ad - it is possible to determine whether the\n        // ad is a video ad or an overlay\n        this.trigger('loaded');\n\n        // Start countdown\n        this.pollCountdown(true);\n\n        if (!ad.isLinear()) {\n          // Position AdDisplayContainer correctly for overlay\n          ad.width = container.offsetWidth;\n          ad.height = container.offsetHeight;\n        }\n\n        // console.info('Ad type: ' + event.getAd().getAdPodInfo().getPodIndex());\n        // console.info('Ad time: ' + event.getAd().getAdPodInfo().getTimeOffset());\n\n        break;\n\n      case google.ima.AdEvent.Type.STARTED:\n        // Set volume to match player\n        this.manager.setVolume(this.player.volume);\n\n        break;\n\n      case google.ima.AdEvent.Type.ALL_ADS_COMPLETED:\n        // All ads for the current videos are done. We can now request new advertisements\n        // in case the video is re-played\n\n        // TODO: Example for what happens when a next video in a playlist would be loaded.\n        // So here we load a new video when all ads are done.\n        // Then we load new ads within a new adsManager. When the video\n        // Is started - after - the ads are loaded, then we get ads.\n        // You can also easily test cancelling and reloading by running\n        // player.ads.cancel() and player.ads.play from the console I guess.\n        // this.player.source = {\n        //     type: 'video',\n        //     title: 'View From A Blue Moon',\n        //     sources: [{\n        //         src:\n        // 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4', type:\n        // 'video/mp4', }], poster:\n        // 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg', tracks:\n        // [ { kind: 'captions', label: 'English', srclang: 'en', src:\n        // 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',\n        // default: true, }, { kind: 'captions', label: 'French', srclang: 'fr', src:\n        // 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', }, ],\n        // };\n\n        // TODO: So there is still this thing where a video should only be allowed to start\n        // playing when the IMA SDK is ready or has failed\n\n        if (this.player.ended) {\n          this.loadAds();\n        }\n        else {\n          // The SDK won't allow new ads to be called without receiving a contentComplete()\n          this.loader.contentComplete();\n        }\n\n        break;\n\n      case google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED:\n        // This event indicates the ad has started - the video player can adjust the UI,\n        // for example display a pause button and remaining time. Fired when content should\n        // be paused. This usually happens right before an ad is about to cover the content\n\n        this.pauseContent();\n\n        break;\n\n      case google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED:\n        // This event indicates the ad has finished - the video player can perform\n        // appropriate UI actions, such as removing the timer for remaining time detection.\n        // Fired when content should be resumed. This usually happens when an ad finishes\n        // or collapses\n\n        this.pollCountdown();\n\n        this.resumeContent();\n\n        break;\n\n      case google.ima.AdEvent.Type.LOG:\n        if (adData.adError) {\n          this.player.debug.warn(`Non-fatal ad error: ${adData.adError.getMessage()}`);\n        }\n\n        break;\n\n      default:\n        break;\n    }\n  };\n\n  /**\n   * Any ad error handling comes through here\n   * @param {Event} event\n   */\n  onAdError = (event) => {\n    this.cancel();\n    this.player.debug.warn('Ads error', event);\n  };\n\n  /**\n   * Setup hooks for Plyr and window events. This ensures\n   * the mid- and post-roll launch at the correct time. And\n   * resize the advertisement when the player resizes\n   */\n  listeners = () => {\n    const { container } = this.player.elements;\n    let time;\n\n    this.player.on('canplay', () => {\n      this.addCuePoints();\n    });\n\n    this.player.on('ended', () => {\n      this.loader.contentComplete();\n    });\n\n    this.player.on('timeupdate', () => {\n      time = this.player.currentTime;\n    });\n\n    this.player.on('seeked', () => {\n      const seekedTime = this.player.currentTime;\n\n      if (is.empty(this.cuePoints)) {\n        return;\n      }\n\n      this.cuePoints.forEach((cuePoint, index) => {\n        if (time < cuePoint && cuePoint < seekedTime) {\n          this.manager.discardAdBreak();\n          this.cuePoints.splice(index, 1);\n        }\n      });\n    });\n\n    // Listen to the resizing of the window. And resize ad accordingly\n    // TODO: eventually implement ResizeObserver\n    window.addEventListener('resize', () => {\n      if (this.manager) {\n        this.manager.resize(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL);\n      }\n    });\n  };\n\n  /**\n   * Initialize the adsManager and start playing advertisements\n   */\n  play = () => {\n    const { container } = this.player.elements;\n\n    if (!this.managerPromise) {\n      this.resumeContent();\n    }\n\n    // Play the requested advertisement whenever the adsManager is ready\n    this.managerPromise\n      .then(() => {\n        // Set volume to match player\n        this.manager.setVolume(this.player.volume);\n\n        // Initialize the container. Must be done via a user action on mobile devices\n        this.elements.displayContainer.initialize();\n\n        try {\n          if (!this.initialized) {\n            // Initialize the ads manager. Ad rules playlist will start at this time\n            this.manager.init(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL);\n\n            // Call play to start showing the ad. Single video and overlay ads will\n            // start at this time; the call will be ignored for ad rules\n            this.manager.start();\n          }\n\n          this.initialized = true;\n        }\n        catch (adError) {\n          // An error may be thrown if there was a problem with the\n          // VAST response\n          this.onAdError(adError);\n        }\n      })\n      .catch(() => {});\n  };\n\n  /**\n   * Resume our video\n   */\n  resumeContent = () => {\n    // Hide the advertisement container\n    this.elements.container.style.zIndex = '';\n\n    // Ad is stopped\n    this.playing = false;\n\n    // Play video\n    silencePromise(this.player.media.play());\n  };\n\n  /**\n   * Pause our video\n   */\n  pauseContent = () => {\n    // Show the advertisement container\n    this.elements.container.style.zIndex = 3;\n\n    // Ad is playing\n    this.playing = true;\n\n    // Pause our video.\n    this.player.media.pause();\n  };\n\n  /**\n   * Destroy the adsManager so we can grab new ads after this. If we don't then we're not\n   * allowed to call new ads based on google policies, as they interpret this as an accidental\n   * video requests. https://developers.google.com/interactive-\n   * media-ads/docs/sdks/android/faq#8\n   */\n  cancel = () => {\n    // Pause our video\n    if (this.initialized) {\n      this.resumeContent();\n    }\n\n    // Tell our instance that we're done for now\n    this.trigger('error');\n\n    // Re-create our adsManager\n    this.loadAds();\n  };\n\n  /**\n   * Re-create our adsManager\n   */\n  loadAds = () => {\n    // Tell our adsManager to go bye bye\n    this.managerPromise\n      .then(() => {\n        // Destroy our adsManager\n        if (this.manager) {\n          this.manager.destroy();\n        }\n\n        // Re-set our adsManager promises\n        this.managerPromise = new Promise((resolve) => {\n          this.on('loaded', resolve);\n          this.player.debug.log(this.manager);\n        });\n        // Now that the manager has been destroyed set it to also be un-initialized\n        this.initialized = false;\n\n        // Now request some new advertisements\n        this.requestAds();\n      })\n      .catch(() => {});\n  };\n\n  /**\n   * Handles callbacks after an ad event was invoked\n   * @param {string} event - Event type\n   * @param args\n   */\n  trigger = (event, ...args) => {\n    const handlers = this.events[event];\n\n    if (is.array(handlers)) {\n      handlers.forEach((handler) => {\n        if (is.function(handler)) {\n          handler.apply(this, args);\n        }\n      });\n    }\n  };\n\n  /**\n   * Add event listeners\n   * @param {string} event - Event type\n   * @param {Function} callback - Callback for when event occurs\n   * @return {Ads}\n   */\n  on = (event, callback) => {\n    if (!is.array(this.events[event])) {\n      this.events[event] = [];\n    }\n\n    this.events[event].push(callback);\n\n    return this;\n  };\n\n  /**\n   * Setup a safety timer for when the ad network doesn't respond for whatever reason.\n   * The advertisement has 12 seconds to get its things together. We stop this timer when the\n   * advertisement is playing, or when a user action is required to start, then we clear the\n   * timer on ad ready\n   * @param {number} time\n   * @param {string} from\n   */\n  startSafetyTimer = (time, from) => {\n    this.player.debug.log(`Safety timer invoked from: ${from}`);\n\n    this.safetyTimer = setTimeout(() => {\n      this.cancel();\n      this.clearSafetyTimer('startSafetyTimer()');\n    }, time);\n  };\n\n  /**\n   * Clear our safety timer(s)\n   * @param {string} from\n   */\n  clearSafetyTimer = (from) => {\n    if (!is.nullOrUndefined(this.safetyTimer)) {\n      this.player.debug.log(`Safety timer cleared from: ${from}`);\n\n      clearTimeout(this.safetyTimer);\n      this.safetyTimer = null;\n    }\n  };\n}\n\nexport default Ads;\n"
  },
  {
    "path": "src/js/plugins/preview-thumbnails.js",
    "content": "import { createElement } from '../utils/elements';\nimport { once } from '../utils/events';\nimport fetch from '../utils/fetch';\nimport is from '../utils/is';\nimport { clamp } from '../utils/numbers';\nimport { formatTime } from '../utils/time';\n\n// Arg: vttDataString example: \"WEBVTT\\n\\n1\\n00:00:05.000 --> 00:00:10.000\\n1080p-00001.jpg\"\nfunction parseVtt(vttDataString) {\n  const processedList = [];\n  const frames = vttDataString.split(/\\r\\n\\r\\n|\\n\\n|\\r\\r/);\n\n  frames.forEach((frame) => {\n    const result = {};\n    const lines = frame.split(/\\r\\n|\\n|\\r/);\n\n    lines.forEach((line) => {\n      if (!is.number(result.startTime)) {\n        // The line with start and end times on it is the first line of interest\n        const matchTimes = line.match(\n          /(\\d{2})?:?(\\d{2}):(\\d{2}).(\\d{2,3})( ?--> ?)(\\d{2})?:?(\\d{2}):(\\d{2}).(\\d{2,3})/,\n        ); // Note that this currently ignores caption formatting directives that are optionally on the end of this line - fine for non-captions VTT\n\n        if (matchTimes) {\n          result.startTime\n            = Number(matchTimes[1] || 0) * 60 * 60\n              + Number(matchTimes[2]) * 60\n              + Number(matchTimes[3])\n              + Number(`0.${matchTimes[4]}`);\n          result.endTime\n            = Number(matchTimes[6] || 0) * 60 * 60\n              + Number(matchTimes[7]) * 60\n              + Number(matchTimes[8])\n              + Number(`0.${matchTimes[9]}`);\n        }\n      }\n      else if (!is.empty(line.trim()) && is.empty(result.text)) {\n        // If we already have the startTime, then we're definitely up to the text line(s)\n        const lineSplit = line.trim().split('#xywh=');\n        [result.text] = lineSplit;\n\n        // If there's content in lineSplit[1], then we have sprites. If not, then it's just one frame per image\n        if (lineSplit[1]) {\n          [result.x, result.y, result.w, result.h] = lineSplit[1].split(',');\n        }\n      }\n    });\n\n    if (result.text) {\n      processedList.push(result);\n    }\n  });\n\n  return processedList;\n}\n\n/**\n * Preview thumbnails for seek hover and scrubbing\n * Seeking: Hover over the seek bar (desktop only): shows a small preview container above the seek bar\n * Scrubbing: Click and drag the seek bar (desktop and mobile): shows the preview image over the entire video, as if the video is scrubbing at very high speed\n *\n * Notes:\n * - Thumbs are set via JS settings on Plyr init, not HTML5 'track' property. Using the track property would be a bit gross, because it doesn't support custom 'kinds'. kind=metadata might be used for something else, and we want to allow multiple thumbnails tracks. Tracks must have a unique combination of 'kind' and 'label'. We would have to do something like kind=metadata,label=thumbnails1 / kind=metadata,label=thumbnails2. Square peg, round hole\n * - VTT info: the image URL is relative to the VTT, not the current document. But if the url starts with a slash, it will naturally be relative to the current domain. https://support.jwplayer.com/articles/how-to-add-preview-thumbnails\n * - This implementation uses multiple separate img elements. Other implementations use background-image on one element. This would be nice and simple, but Firefox and Safari have flickering issues with replacing backgrounds of larger images. It seems that YouTube perhaps only avoids this because they don't have the option for high-res previews (even the fullscreen ones, when mousedown/seeking). Images appear over the top of each other, and previous ones are discarded once the new ones have been rendered\n */\n\nfunction fitRatio(ratio, outer) {\n  const targetRatio = outer.width / outer.height;\n  const result = {};\n  if (ratio > targetRatio) {\n    result.width = outer.width;\n    result.height = (1 / ratio) * outer.width;\n  }\n  else {\n    result.height = outer.height;\n    result.width = ratio * outer.height;\n  }\n\n  return result;\n}\n\nclass PreviewThumbnails {\n  /**\n   * PreviewThumbnails constructor.\n   * @param {Plyr} player\n   * @return {PreviewThumbnails}\n   */\n  constructor(player) {\n    this.player = player;\n    this.thumbnails = [];\n    this.loaded = false;\n    this.lastMouseMoveTime = Date.now();\n    this.mouseDown = false;\n    this.loadedImages = [];\n\n    this.elements = {\n      thumb: {},\n      scrubbing: {},\n    };\n\n    this.load();\n  }\n\n  get enabled() {\n    return this.player.isHTML5 && this.player.isVideo && this.player.config.previewThumbnails.enabled;\n  }\n\n  load = () => {\n    // Toggle the regular seek tooltip\n    if (this.player.elements.display.seekTooltip) {\n      this.player.elements.display.seekTooltip.hidden = this.enabled;\n    }\n\n    if (!this.enabled) return;\n\n    this.getThumbnails().then(() => {\n      if (!this.enabled) {\n        return;\n      }\n\n      // Render DOM elements\n      this.render();\n\n      // Check to see if thumb container size was specified manually in CSS\n      this.determineContainerAutoSizing();\n\n      // Set up listeners\n      this.listeners();\n\n      this.loaded = true;\n    });\n  };\n\n  // Download VTT files and parse them\n  getThumbnails = () => {\n    return new Promise((resolve) => {\n      const { src } = this.player.config.previewThumbnails;\n\n      if (is.empty(src)) {\n        throw new Error('Missing previewThumbnails.src config attribute');\n      }\n\n      // Resolve promise\n      const sortAndResolve = () => {\n        // Sort smallest to biggest (e.g., [120p, 480p, 1080p])\n        this.thumbnails.sort((x, y) => x.height - y.height);\n\n        this.player.debug.log('Preview thumbnails', this.thumbnails);\n\n        resolve();\n      };\n\n      // Via callback()\n      if (is.function(src)) {\n        src((thumbnails) => {\n          this.thumbnails = thumbnails;\n          sortAndResolve();\n        });\n      }\n      // VTT urls\n      else {\n        // If string, convert into single-element list\n        const urls = is.string(src) ? [src] : src;\n        // Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails\n        const promises = urls.map(u => this.getThumbnail(u));\n        // Resolve\n        Promise.all(promises).then(sortAndResolve);\n      }\n    });\n  };\n\n  // Process individual VTT file\n  getThumbnail = (url) => {\n    return new Promise((resolve) => {\n      fetch(url, undefined, this.player.config.previewThumbnails.withCredentials).then((response) => {\n        const thumbnail = {\n          frames: parseVtt(response),\n          height: null,\n          urlPrefix: '',\n        };\n\n        // If the URLs don't start with '/', then we need to set their relative path to be the location of the VTT file\n        // If the URLs do start with '/', then they obviously don't need a prefix, so it will remain blank\n        // If the thumbnail URLs start with with none of '/', 'http://' or 'https://', then we need to set their relative path to be the location of the VTT file\n        if (\n          !thumbnail.frames[0].text.startsWith('/')\n          && !thumbnail.frames[0].text.startsWith('http://')\n          && !thumbnail.frames[0].text.startsWith('https://')\n        ) {\n          thumbnail.urlPrefix = url.substring(0, url.lastIndexOf('/') + 1);\n        }\n\n        // Download the first frame, so that we can determine/set the height of this thumbnailsDef\n        const tempImage = new Image();\n\n        tempImage.onload = () => {\n          thumbnail.height = tempImage.naturalHeight;\n          thumbnail.width = tempImage.naturalWidth;\n\n          this.thumbnails.push(thumbnail);\n\n          resolve();\n        };\n\n        tempImage.src = thumbnail.urlPrefix + thumbnail.frames[0].text;\n      });\n    });\n  };\n\n  startMove = (event) => {\n    if (!this.loaded) return;\n\n    if (!is.event(event) || !['touchmove', 'mousemove'].includes(event.type)) return;\n\n    // Wait until media has a duration\n    if (!this.player.media.duration) return;\n\n    if (event.type === 'touchmove') {\n      // Calculate seek hover position as approx video seconds\n      this.seekTime = this.player.media.duration * (this.player.elements.inputs.seek.value / 100);\n    }\n    else {\n      // Calculate seek hover position as approx video seconds\n      const clientRect = this.player.elements.progress.getBoundingClientRect();\n      const percentage = (100 / clientRect.width) * (event.pageX - clientRect.left);\n      this.seekTime = this.player.media.duration * (percentage / 100);\n\n      if (this.seekTime < 0) {\n        // The mousemove fires for 10+px out to the left\n        this.seekTime = 0;\n      }\n\n      if (this.seekTime > this.player.media.duration - 1) {\n        // Took 1 second off the duration for safety, because different players can disagree on the real duration of a video\n        this.seekTime = this.player.media.duration - 1;\n      }\n\n      this.mousePosX = event.pageX;\n\n      // Set time text inside image container\n      this.elements.thumb.time.textContent = formatTime(this.seekTime);\n\n      // Get marker point for time\n      const point = this.player.config.markers?.points?.find(({ time: t }) => t === Math.round(this.seekTime));\n\n      // Append the point label to the tooltip\n      if (point) {\n        // this.elements.thumb.time.innerText.concat('\\n');\n        this.elements.thumb.time.insertAdjacentHTML('afterbegin', `${point.label}<br>`);\n      }\n    }\n\n    // Download and show image\n    this.showImageAtCurrentTime();\n  };\n\n  endMove = () => {\n    this.toggleThumbContainer(false, true);\n  };\n\n  startScrubbing = (event) => {\n    // Only act on left mouse button (0), or touch device (event.button does not exist or is false)\n    if (is.nullOrUndefined(event.button) || event.button === false || event.button === 0) {\n      this.mouseDown = true;\n\n      // Wait until media has a duration\n      if (this.player.media.duration) {\n        this.toggleScrubbingContainer(true);\n        this.toggleThumbContainer(false, true);\n\n        // Download and show image\n        this.showImageAtCurrentTime();\n      }\n    }\n  };\n\n  endScrubbing = () => {\n    this.mouseDown = false;\n\n    // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview\n    if (Math.ceil(this.lastTime) === Math.ceil(this.player.media.currentTime)) {\n      // The video was already seeked/loaded at the chosen time - hide immediately\n      this.toggleScrubbingContainer(false);\n    }\n    else {\n      // The video hasn't seeked yet. Wait for that\n      once.call(this.player, this.player.media, 'timeupdate', () => {\n        // Re-check mousedown - we might have already started scrubbing again\n        if (!this.mouseDown) {\n          this.toggleScrubbingContainer(false);\n        }\n      });\n    }\n  };\n\n  /**\n   * Setup hooks for Plyr and window events\n   */\n  listeners = () => {\n    // Hide thumbnail preview - on mouse click, mouse leave (in listeners.js for now), and video play/seek. All four are required, e.g., for buffering\n    this.player.on('play', () => {\n      this.toggleThumbContainer(false, true);\n    });\n\n    this.player.on('seeked', () => {\n      this.toggleThumbContainer(false);\n    });\n\n    this.player.on('timeupdate', () => {\n      this.lastTime = this.player.media.currentTime;\n    });\n  };\n\n  /**\n   * Create HTML elements for image containers\n   */\n  render = () => {\n    // Create HTML element: plyr__preview-thumbnail-container\n    this.elements.thumb.container = createElement('div', {\n      class: this.player.config.classNames.previewThumbnails.thumbContainer,\n    });\n\n    // Wrapper for the image for styling\n    this.elements.thumb.imageContainer = createElement('div', {\n      class: this.player.config.classNames.previewThumbnails.imageContainer,\n    });\n    this.elements.thumb.container.appendChild(this.elements.thumb.imageContainer);\n\n    // Create HTML element, parent+span: time text (e.g., 01:32:00)\n    const timeContainer = createElement('div', {\n      class: this.player.config.classNames.previewThumbnails.timeContainer,\n    });\n\n    this.elements.thumb.time = createElement('span', {}, '00:00');\n    timeContainer.appendChild(this.elements.thumb.time);\n\n    this.elements.thumb.imageContainer.appendChild(timeContainer);\n\n    // Inject the whole thumb\n    if (is.element(this.player.elements.progress)) {\n      this.player.elements.progress.appendChild(this.elements.thumb.container);\n    }\n\n    // Create HTML element: plyr__preview-scrubbing-container\n    this.elements.scrubbing.container = createElement('div', {\n      class: this.player.config.classNames.previewThumbnails.scrubbingContainer,\n    });\n\n    this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);\n  };\n\n  destroy = () => {\n    if (this.elements.thumb.container) {\n      this.elements.thumb.container.remove();\n    }\n    if (this.elements.scrubbing.container) {\n      this.elements.scrubbing.container.remove();\n    }\n  };\n\n  showImageAtCurrentTime = () => {\n    if (this.mouseDown) {\n      this.setScrubbingContainerSize();\n    }\n    else {\n      this.setThumbContainerSizeAndPos();\n    }\n\n    // Find the desired thumbnail index\n    // TODO: Handle a video longer than the thumbs where thumbNum is null\n    const thumbNum = this.thumbnails[0].frames.findIndex(\n      frame => this.seekTime >= frame.startTime && this.seekTime <= frame.endTime,\n    );\n    const hasThumb = thumbNum >= 0;\n    let qualityIndex = 0;\n\n    // Show the thumb container if we're not scrubbing\n    if (!this.mouseDown) {\n      this.toggleThumbContainer(hasThumb);\n    }\n\n    // No matching thumb found\n    if (!hasThumb) {\n      return;\n    }\n\n    // Check to see if we've already downloaded higher quality versions of this image\n    this.thumbnails.forEach((thumbnail, index) => {\n      if (this.loadedImages.includes(thumbnail.frames[thumbNum].text)) {\n        qualityIndex = index;\n      }\n    });\n\n    // Only proceed if either thumb num or thumbfilename has changed\n    if (thumbNum !== this.showingThumb) {\n      this.showingThumb = thumbNum;\n      this.loadImage(qualityIndex);\n    }\n  };\n\n  // Show the image that's currently specified in this.showingThumb\n  loadImage = (qualityIndex = 0) => {\n    const thumbNum = this.showingThumb;\n    const thumbnail = this.thumbnails[qualityIndex];\n    const { urlPrefix } = thumbnail;\n    const frame = thumbnail.frames[thumbNum];\n    const thumbFilename = thumbnail.frames[thumbNum].text;\n    const thumbUrl = urlPrefix + thumbFilename;\n\n    if (!this.currentImageElement || this.currentImageElement.dataset.filename !== thumbFilename) {\n      // If we're already loading a previous image, remove its onload handler - we don't want it to load after this one\n      // Only do this if not using sprites. Without sprites we really want to show as many images as possible, as a best-effort\n      if (this.loadingImage && this.usingSprites) {\n        this.loadingImage.onload = null;\n      }\n\n      // We're building and adding a new image. In other implementations of similar functionality (YouTube), background image\n      // is instead used. But this causes issues with larger images in Firefox and Safari - switching between background\n      // images causes a flicker. Putting a new image over the top does not\n      const previewImage = new Image();\n      previewImage.src = thumbUrl;\n      previewImage.dataset.index = thumbNum;\n      previewImage.dataset.filename = thumbFilename;\n      this.showingThumbFilename = thumbFilename;\n\n      this.player.debug.log(`Loading image: ${thumbUrl}`);\n\n      // For some reason, passing the named function directly causes it to execute immediately. So I've wrapped it in an anonymous function...\n      previewImage.onload = () => this.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true);\n      this.loadingImage = previewImage;\n      this.removeOldImages(previewImage);\n    }\n    else {\n      // Update the existing image\n      this.showImage(this.currentImageElement, frame, qualityIndex, thumbNum, thumbFilename, false);\n      this.currentImageElement.dataset.index = thumbNum;\n      this.removeOldImages(this.currentImageElement);\n    }\n  };\n\n  showImage = (previewImage, frame, qualityIndex, thumbNum, thumbFilename, newImage = true) => {\n    this.player.debug.log(\n      `Showing thumb: ${thumbFilename}. num: ${thumbNum}. qual: ${qualityIndex}. newimg: ${newImage}`,\n    );\n    this.setImageSizeAndOffset(previewImage, frame);\n\n    if (newImage) {\n      this.currentImageContainer.appendChild(previewImage);\n      this.currentImageElement = previewImage;\n\n      if (!this.loadedImages.includes(thumbFilename)) {\n        this.loadedImages.push(thumbFilename);\n      }\n    }\n\n    // Preload images before and after the current one\n    // Show higher quality of the same frame\n    // Each step here has a short time delay, and only continues if still hovering/seeking the same spot. This is to protect slow connections from overloading\n    this.preloadNearby(thumbNum, true)\n      .then(this.preloadNearby(thumbNum, false))\n      .then(this.getHigherQuality(qualityIndex, previewImage, frame, thumbFilename));\n  };\n\n  // Remove all preview images that aren't the designated current image\n  removeOldImages = (currentImage) => {\n    // Get a list of all images, convert it from a DOM list to an array\n    Array.from(this.currentImageContainer.children).forEach((image) => {\n      if (image.tagName.toLowerCase() !== 'img') {\n        return;\n      }\n\n      const removeDelay = this.usingSprites ? 500 : 1000;\n\n      if (image.dataset.index !== currentImage.dataset.index && !image.dataset.deleting) {\n        // Wait 200ms, as the new image can take some time to show on certain browsers (even though it was downloaded before showing). This will prevent flicker, and show some generosity towards slower clients\n        // First set attribute 'deleting' to prevent multi-handling of this on repeat firing of this function\n\n        image.dataset.deleting = true;\n\n        // This has to be set before the timeout - to prevent issues switching between hover and scrub\n        const { currentImageContainer } = this;\n\n        setTimeout(() => {\n          currentImageContainer.removeChild(image);\n          this.player.debug.log(`Removing thumb: ${image.dataset.filename}`);\n        }, removeDelay);\n      }\n    });\n  };\n\n  // Preload images before and after the current one. Only if the user is still hovering/seeking the same frame\n  // This will only preload the lowest quality\n  preloadNearby = (thumbNum, forward = true) => {\n    return new Promise((resolve) => {\n      setTimeout(() => {\n        const oldThumbFilename = this.thumbnails[0].frames[thumbNum].text;\n\n        if (this.showingThumbFilename === oldThumbFilename) {\n          // Find the nearest thumbs with different filenames. Sometimes it'll be the next index, but in the case of sprites, it might be 100+ away\n          let thumbnailsClone;\n          if (forward) {\n            thumbnailsClone = this.thumbnails[0].frames.slice(thumbNum);\n          }\n          else {\n            thumbnailsClone = this.thumbnails[0].frames.slice(0, thumbNum).reverse();\n          }\n\n          let foundOne = false;\n\n          thumbnailsClone.forEach((frame) => {\n            const newThumbFilename = frame.text;\n\n            if (newThumbFilename !== oldThumbFilename) {\n              // Found one with a different filename. Make sure it hasn't already been loaded on this page visit\n              if (!this.loadedImages.includes(newThumbFilename)) {\n                foundOne = true;\n                this.player.debug.log(`Preloading thumb filename: ${newThumbFilename}`);\n\n                const { urlPrefix } = this.thumbnails[0];\n                const thumbURL = urlPrefix + newThumbFilename;\n                const previewImage = new Image();\n                previewImage.src = thumbURL;\n                previewImage.onload = () => {\n                  this.player.debug.log(`Preloaded thumb filename: ${newThumbFilename}`);\n                  if (!this.loadedImages.includes(newThumbFilename)) this.loadedImages.push(newThumbFilename);\n\n                  // We don't resolve until the thumb is loaded\n                  resolve();\n                };\n              }\n            }\n          });\n\n          // If there are none to preload then we want to resolve immediately\n          if (!foundOne) {\n            resolve();\n          }\n        }\n      }, 300);\n    });\n  };\n\n  // If user has been hovering current image for half a second, look for a higher quality one\n  getHigherQuality = (currentQualityIndex, previewImage, frame, thumbFilename) => {\n    if (currentQualityIndex < this.thumbnails.length - 1) {\n      // Only use the higher quality version if it's going to look any better - if the current thumb is of a lower pixel density than the thumbnail container\n      let previewImageHeight = previewImage.naturalHeight;\n\n      if (this.usingSprites) {\n        previewImageHeight = frame.h;\n      }\n\n      if (previewImageHeight < this.thumbContainerHeight) {\n        // Recurse back to the loadImage function - show a higher quality one, but only if the viewer is on this frame for a while\n        setTimeout(() => {\n          // Make sure the mouse hasn't already moved on and started hovering at another image\n          if (this.showingThumbFilename === thumbFilename) {\n            this.player.debug.log(`Showing higher quality thumb for: ${thumbFilename}`);\n            this.loadImage(currentQualityIndex + 1);\n          }\n        }, 300);\n      }\n    }\n  };\n\n  get currentImageContainer() {\n    return this.mouseDown ? this.elements.scrubbing.container : this.elements.thumb.imageContainer;\n  }\n\n  get usingSprites() {\n    return Object.keys(this.thumbnails[0].frames[0]).includes('w');\n  }\n\n  get thumbAspectRatio() {\n    if (this.usingSprites) {\n      return this.thumbnails[0].frames[0].w / this.thumbnails[0].frames[0].h;\n    }\n\n    return this.thumbnails[0].width / this.thumbnails[0].height;\n  }\n\n  get thumbContainerHeight() {\n    if (this.mouseDown) {\n      const { height } = fitRatio(this.thumbAspectRatio, {\n        width: this.player.media.clientWidth,\n        height: this.player.media.clientHeight,\n      });\n      return height;\n    }\n\n    // If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset)\n    if (this.sizeSpecifiedInCSS) {\n      return this.elements.thumb.imageContainer.clientHeight;\n    }\n\n    return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);\n  }\n\n  get currentImageElement() {\n    return this.mouseDown ? this.currentScrubbingImageElement : this.currentThumbnailImageElement;\n  }\n\n  set currentImageElement(element) {\n    if (this.mouseDown) {\n      this.currentScrubbingImageElement = element;\n    }\n    else {\n      this.currentThumbnailImageElement = element;\n    }\n  }\n\n  toggleThumbContainer = (toggle = false, clearShowing = false) => {\n    const className = this.player.config.classNames.previewThumbnails.thumbContainerShown;\n    this.elements.thumb.container.classList.toggle(className, toggle);\n\n    if (!toggle && clearShowing) {\n      this.showingThumb = null;\n      this.showingThumbFilename = null;\n    }\n  };\n\n  toggleScrubbingContainer = (toggle = false) => {\n    const className = this.player.config.classNames.previewThumbnails.scrubbingContainerShown;\n    this.elements.scrubbing.container.classList.toggle(className, toggle);\n\n    if (!toggle) {\n      this.showingThumb = null;\n      this.showingThumbFilename = null;\n    }\n  };\n\n  determineContainerAutoSizing = () => {\n    if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {\n      // This will prevent auto sizing in this.setThumbContainerSizeAndPos()\n      this.sizeSpecifiedInCSS = true;\n    }\n  };\n\n  // Set the size to be about a quarter of the size of video. Unless option dynamicSize === false, in which case it needs to be set in CSS\n  setThumbContainerSizeAndPos = () => {\n    const { imageContainer } = this.elements.thumb;\n\n    if (!this.sizeSpecifiedInCSS) {\n      const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);\n      imageContainer.style.height = `${this.thumbContainerHeight}px`;\n      imageContainer.style.width = `${thumbWidth}px`;\n    }\n    else if (imageContainer.clientHeight > 20 && imageContainer.clientWidth < 20) {\n      const thumbWidth = Math.floor(imageContainer.clientHeight * this.thumbAspectRatio);\n      imageContainer.style.width = `${thumbWidth}px`;\n    }\n    else if (imageContainer.clientHeight < 20 && imageContainer.clientWidth > 20) {\n      const thumbHeight = Math.floor(imageContainer.clientWidth / this.thumbAspectRatio);\n      imageContainer.style.height = `${thumbHeight}px`;\n    }\n\n    this.setThumbContainerPos();\n  };\n\n  setThumbContainerPos = () => {\n    const scrubberRect = this.player.elements.progress.getBoundingClientRect();\n    const containerRect = this.player.elements.container.getBoundingClientRect();\n    const { container } = this.elements.thumb;\n    // Find the lowest and highest desired left-position, so we don't slide out the side of the video container\n    const min = containerRect.left - scrubberRect.left + 10;\n    const max = containerRect.right - scrubberRect.left - container.clientWidth - 10;\n    // Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth\n    const position = this.mousePosX - scrubberRect.left - container.clientWidth / 2;\n    const clamped = clamp(position, min, max);\n\n    // Move the popover position\n    container.style.left = `${clamped}px`;\n\n    // The arrow can follow the cursor\n    container.style.setProperty('--preview-arrow-offset', `${position - clamped}px`);\n  };\n\n  // Can't use 100% width, in case the video is a different aspect ratio to the video container\n  setScrubbingContainerSize = () => {\n    const { width, height } = fitRatio(this.thumbAspectRatio, {\n      width: this.player.media.clientWidth,\n      height: this.player.media.clientHeight,\n    });\n    this.elements.scrubbing.container.style.width = `${width}px`;\n    this.elements.scrubbing.container.style.height = `${height}px`;\n  };\n\n  // Sprites need to be offset to the correct location\n  setImageSizeAndOffset = (previewImage, frame) => {\n    if (!this.usingSprites) return;\n\n    // Find difference between height and preview container height\n    const multiplier = this.thumbContainerHeight / frame.h;\n\n    previewImage.style.height = `${previewImage.naturalHeight * multiplier}px`;\n\n    previewImage.style.width = `${previewImage.naturalWidth * multiplier}px`;\n\n    previewImage.style.left = `-${frame.x * multiplier}px`;\n\n    previewImage.style.top = `-${frame.y * multiplier}px`;\n  };\n}\n\nexport default PreviewThumbnails;\n"
  },
  {
    "path": "src/js/plugins/vimeo.js",
    "content": "// ==========================================================================\n// Vimeo plugin\n// ==========================================================================\n\nimport captions from '../captions';\nimport controls from '../controls';\nimport ui from '../ui';\nimport { createElement, replaceElement, toggleClass } from '../utils/elements';\nimport { triggerEvent } from '../utils/events';\nimport fetch from '../utils/fetch';\nimport is from '../utils/is';\nimport loadScript from '../utils/load-script';\nimport { format, stripHTML } from '../utils/strings';\nimport { roundAspectRatio, setAspectRatio } from '../utils/style';\nimport { buildUrlParams } from '../utils/urls';\n\n// Parse Vimeo ID from URL\nfunction parseId(url) {\n  if (is.empty(url)) {\n    return null;\n  }\n\n  if (is.number(Number(url))) {\n    return url;\n  }\n\n  // eslint-disable-next-line regexp/optimal-quantifier-concatenation\n  const regex = /^.*(vimeo.com\\/|video\\/)(\\d+).*/;\n  const match = url.match(regex);\n  return match ? match[2] : url;\n}\n\n// Try to extract a hash for private videos from the URL\nfunction parseHash(url) {\n  /* This regex matches a hexadecimal hash if given in any of these forms:\n   *  - [https://player.]vimeo.com/video/{id}/{hash}[?params]\n   *  - [https://player.]vimeo.com/video/{id}?h={hash}[&params]\n   *  - [https://player.]vimeo.com/video/{id}?[params]&h={hash}\n   *  - video/{id}/{hash}\n   * If matched, the hash is available in capture group 4\n   */\n  const regex = /^.*(vimeo.com\\/|video\\/)(\\d+)(\\?.*h=|\\/)+([\\d,a-f]+)/;\n  const found = url.match(regex);\n\n  return found && found.length === 5 ? found[4] : null;\n}\n\n// Set playback state and trigger change (only on actual change)\nfunction assurePlaybackState(play) {\n  if (play && !this.embed.hasPlayed) {\n    this.embed.hasPlayed = true;\n  }\n  if (this.media.paused === play) {\n    this.media.paused = !play;\n    triggerEvent.call(this, this.media, play ? 'play' : 'pause');\n  }\n}\n\nconst vimeo = {\n  setup() {\n    const player = this;\n\n    // Add embed class for responsive\n    toggleClass(player.elements.wrapper, player.config.classNames.embed, true);\n\n    // Set speed options from config\n    player.options.speed = player.config.speed.options;\n\n    // Set initial ratio\n    setAspectRatio.call(player);\n\n    // Load the SDK if not already\n    if (!is.object(window.Vimeo)) {\n      loadScript(player.config.urls.vimeo.sdk)\n        .then(() => {\n          vimeo.ready.call(player);\n        })\n        .catch((error) => {\n          player.debug.warn('Vimeo SDK (player.js) failed to load', error);\n        });\n    }\n    else {\n      vimeo.ready.call(player);\n    }\n  },\n\n  // API Ready\n  ready() {\n    const player = this;\n    const config = player.config.vimeo;\n    const { premium, referrerPolicy, ...frameParams } = config;\n    // Get the source URL or ID\n    let source = player.media.getAttribute('src');\n    let hash = '';\n    // Get from <div> if needed\n    if (is.empty(source)) {\n      source = player.media.getAttribute(player.config.attributes.embed.id);\n      // hash can also be set as attribute on the <div>\n      hash = player.media.getAttribute(player.config.attributes.embed.hash);\n    }\n    else {\n      hash = parseHash(source);\n    }\n    const hashParam = hash ? { h: hash } : {};\n\n    // If the owner has a pro or premium account then we can hide controls etc\n    if (premium) {\n      Object.assign(frameParams, {\n        controls: false,\n        sidedock: false,\n      });\n    }\n\n    // Get Vimeo params for the iframe\n    const params = buildUrlParams({\n      loop: player.config.loop.active,\n      autoplay: player.autoplay,\n      muted: player.muted,\n      gesture: 'media',\n      playsinline: player.config.playsinline,\n      // hash has to be added to iframe-URL\n      ...hashParam,\n      ...frameParams,\n    });\n\n    const id = parseId(source);\n    // Build an iframe\n    const iframe = createElement('iframe');\n    const src = format(player.config.urls.vimeo.iframe, id, params);\n    iframe.setAttribute('src', src);\n    iframe.setAttribute('allowfullscreen', '');\n    iframe.setAttribute(\n      'allow',\n      ['autoplay', 'fullscreen', 'picture-in-picture', 'encrypted-media', 'accelerometer', 'gyroscope'].join('; '),\n    );\n\n    // Set the referrer policy if required\n    if (!is.empty(referrerPolicy)) {\n      iframe.setAttribute('referrerPolicy', referrerPolicy);\n    }\n\n    // Inject the package\n    if (premium || !config.customControls) {\n      iframe.setAttribute('data-poster', player.poster);\n      player.media = replaceElement(iframe, player.media);\n    }\n    else {\n      const wrapper = createElement('div', {\n        'class': player.config.classNames.embedContainer,\n        'data-poster': player.poster,\n      });\n      wrapper.appendChild(iframe);\n      player.media = replaceElement(wrapper, player.media);\n    }\n\n    // Get poster image\n    if (!config.customControls) {\n      fetch(format(player.config.urls.vimeo.api, src)).then((response) => {\n        if (is.empty(response) || !response.thumbnail_url) {\n          return;\n        }\n\n        // Set and show poster\n        ui.setPoster.call(player, response.thumbnail_url).catch(() => {});\n      });\n    }\n\n    // Setup instance\n    // https://github.com/vimeo/player.js\n    player.embed = new window.Vimeo.Player(iframe, {\n      autopause: player.config.autopause,\n      muted: player.muted,\n    });\n\n    player.media.paused = true;\n    player.media.currentTime = 0;\n\n    // Disable native text track rendering\n    if (player.supported.ui) {\n      player.embed.disableTextTrack();\n    }\n\n    // Create a faux HTML5 API using the Vimeo API\n    player.media.play = () => {\n      assurePlaybackState.call(player, true);\n      return player.embed.play();\n    };\n\n    player.media.pause = () => {\n      assurePlaybackState.call(player, false);\n      return player.embed.pause();\n    };\n\n    player.media.stop = () => {\n      player.pause();\n      player.currentTime = 0;\n    };\n\n    // Seeking\n    let { currentTime } = player.media;\n    Object.defineProperty(player.media, 'currentTime', {\n      get() {\n        return currentTime;\n      },\n      set(time) {\n        // Vimeo will automatically play on seek if the video hasn't been played before\n\n        // Get current paused state and volume etc\n        const { embed, media, paused, volume } = player;\n        const restorePause = paused && !embed.hasPlayed;\n\n        // Set seeking state and trigger event\n        media.seeking = true;\n        triggerEvent.call(player, media, 'seeking');\n\n        // If paused, mute until seek is complete\n        Promise.resolve(restorePause && embed.setVolume(0))\n          // Seek\n          .then(() => embed.setCurrentTime(time))\n          // Restore paused\n          .then(() => restorePause && embed.pause())\n          // Restore volume\n          .then(() => restorePause && embed.setVolume(volume))\n          .catch(() => {\n            // Do nothing\n          });\n      },\n    });\n\n    // Playback speed\n    let speed = player.config.speed.selected;\n    Object.defineProperty(player.media, 'playbackRate', {\n      get() {\n        return speed;\n      },\n      set(input) {\n        player.embed\n          .setPlaybackRate(input)\n          .then(() => {\n            speed = input;\n            triggerEvent.call(player, player.media, 'ratechange');\n          })\n          .catch(() => {\n            // Cannot set Playback Rate, Video is probably not on Pro account\n            player.options.speed = [1];\n          });\n      },\n    });\n\n    // Volume\n    let { volume } = player.config;\n    Object.defineProperty(player.media, 'volume', {\n      get() {\n        return volume;\n      },\n      set(input) {\n        player.embed.setVolume(input).then(() => {\n          volume = input;\n          triggerEvent.call(player, player.media, 'volumechange');\n        });\n      },\n    });\n\n    // Muted\n    let { muted } = player.config;\n    Object.defineProperty(player.media, 'muted', {\n      get() {\n        return muted;\n      },\n      set(input) {\n        const toggle = is.boolean(input) ? input : false;\n\n        player.embed.setMuted(toggle ? true : player.config.muted).then(() => {\n          muted = toggle;\n          triggerEvent.call(player, player.media, 'volumechange');\n        });\n      },\n    });\n\n    // Loop\n    let { loop } = player.config;\n    Object.defineProperty(player.media, 'loop', {\n      get() {\n        return loop;\n      },\n      set(input) {\n        const toggle = is.boolean(input) ? input : player.config.loop.active;\n\n        player.embed.setLoop(toggle).then(() => {\n          loop = toggle;\n        });\n      },\n    });\n\n    // Source\n    let currentSrc;\n    player.embed\n      .getVideoUrl()\n      .then((value) => {\n        currentSrc = value;\n        controls.setDownloadUrl.call(player);\n      })\n      .catch((error) => {\n        this.debug.warn(error);\n      });\n\n    Object.defineProperty(player.media, 'currentSrc', {\n      get() {\n        return currentSrc;\n      },\n    });\n\n    // Ended\n    Object.defineProperty(player.media, 'ended', {\n      get() {\n        return player.currentTime === player.duration;\n      },\n    });\n\n    // Set aspect ratio based on video size\n    Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then((dimensions) => {\n      const [width, height] = dimensions;\n      player.embed.ratio = roundAspectRatio(width, height);\n      setAspectRatio.call(this);\n    });\n\n    // Set autopause\n    player.embed.setAutopause(player.config.autopause).then((state) => {\n      player.config.autopause = state;\n    });\n\n    // Get title\n    player.embed.getVideoTitle().then((title) => {\n      player.config.title = title;\n      ui.setTitle.call(this);\n    });\n\n    // Get current time\n    player.embed.getCurrentTime().then((value) => {\n      currentTime = value;\n      triggerEvent.call(player, player.media, 'timeupdate');\n    });\n\n    // Get duration\n    player.embed.getDuration().then((value) => {\n      player.media.duration = value;\n      triggerEvent.call(player, player.media, 'durationchange');\n    });\n\n    // Get captions\n    player.embed.getTextTracks().then((tracks) => {\n      player.media.textTracks = tracks;\n      captions.setup.call(player);\n    });\n\n    player.embed.on('cuechange', ({ cues = [] }) => {\n      const strippedCues = cues.map(cue => stripHTML(cue.text));\n      captions.updateCues.call(player, strippedCues);\n    });\n\n    player.embed.on('loaded', () => {\n      // Assure state and events are updated on autoplay\n      player.embed.getPaused().then((paused) => {\n        assurePlaybackState.call(player, !paused);\n        if (!paused) {\n          triggerEvent.call(player, player.media, 'playing');\n        }\n      });\n\n      if (is.element(player.embed.element) && player.supported.ui) {\n        const frame = player.embed.element;\n\n        // Fix keyboard focus issues\n        // https://github.com/sampotts/plyr/issues/317\n        frame.setAttribute('tabindex', -1);\n      }\n    });\n\n    player.embed.on('bufferstart', () => {\n      triggerEvent.call(player, player.media, 'waiting');\n    });\n\n    player.embed.on('bufferend', () => {\n      triggerEvent.call(player, player.media, 'playing');\n    });\n\n    player.embed.on('play', () => {\n      assurePlaybackState.call(player, true);\n      triggerEvent.call(player, player.media, 'playing');\n    });\n\n    player.embed.on('pause', () => {\n      assurePlaybackState.call(player, false);\n    });\n\n    player.embed.on('timeupdate', (data) => {\n      player.media.seeking = false;\n      currentTime = data.seconds;\n      triggerEvent.call(player, player.media, 'timeupdate');\n    });\n\n    player.embed.on('progress', (data) => {\n      player.media.buffered = data.percent;\n      triggerEvent.call(player, player.media, 'progress');\n\n      // Check all loaded\n      if (Number.parseInt(data.percent, 10) === 1) {\n        triggerEvent.call(player, player.media, 'canplaythrough');\n      }\n\n      // Get duration as if we do it before load, it gives an incorrect value\n      // https://github.com/sampotts/plyr/issues/891\n      player.embed.getDuration().then((value) => {\n        if (value !== player.media.duration) {\n          player.media.duration = value;\n          triggerEvent.call(player, player.media, 'durationchange');\n        }\n      });\n    });\n\n    player.embed.on('seeked', () => {\n      player.media.seeking = false;\n      triggerEvent.call(player, player.media, 'seeked');\n    });\n\n    player.embed.on('ended', () => {\n      player.media.paused = true;\n      triggerEvent.call(player, player.media, 'ended');\n    });\n\n    player.embed.on('error', (detail) => {\n      player.media.error = detail;\n      triggerEvent.call(player, player.media, 'error');\n    });\n\n    // Rebuild UI\n    if (config.customControls) {\n      setTimeout(() => ui.build.call(player), 0);\n    }\n  },\n};\n\nexport default vimeo;\n"
  },
  {
    "path": "src/js/plugins/youtube.js",
    "content": "// ==========================================================================\n// YouTube plugin\n// ==========================================================================\n\nimport ui from '../ui';\nimport { createElement, replaceElement, toggleClass } from '../utils/elements';\nimport { triggerEvent } from '../utils/events';\nimport fetch from '../utils/fetch';\nimport is from '../utils/is';\nimport loadImage from '../utils/load-image';\nimport loadScript from '../utils/load-script';\nimport { extend } from '../utils/objects';\nimport { format, generateId } from '../utils/strings';\nimport { roundAspectRatio, setAspectRatio } from '../utils/style';\n\n// Parse YouTube ID from URL\nfunction parseId(url) {\n  if (is.empty(url)) {\n    return null;\n  }\n\n  const regex = /^.*(youtu.be\\/|v\\/|u\\/\\w\\/|embed\\/|watch\\?v=|&v=)([^#&?]*).*/;\n  const match = url.match(regex);\n  return match && match[2] ? match[2] : url;\n}\n\n// Set playback state and trigger change (only on actual change)\nfunction assurePlaybackState(play) {\n  if (play && !this.embed.hasPlayed) {\n    this.embed.hasPlayed = true;\n  }\n  if (this.media.paused === play) {\n    this.media.paused = !play;\n    triggerEvent.call(this, this.media, play ? 'play' : 'pause');\n  }\n}\n\nfunction getHost(config) {\n  if (config.noCookie) {\n    return 'https://www.youtube-nocookie.com';\n  }\n\n  if (window.location.protocol === 'http:') {\n    return 'http://www.youtube.com';\n  }\n\n  // Use YouTube's default\n  return undefined;\n}\n\nconst youtube = {\n  setup() {\n    // Add embed class for responsive\n    toggleClass(this.elements.wrapper, this.config.classNames.embed, true);\n\n    // Setup API\n    if (is.object(window.YT) && is.function(window.YT.Player)) {\n      youtube.ready.call(this);\n    }\n    else {\n      // Reference current global callback\n      const callback = window.onYouTubeIframeAPIReady;\n\n      // Set callback to process queue\n      window.onYouTubeIframeAPIReady = () => {\n        // Call global callback if set\n        if (is.function(callback)) {\n          callback();\n        }\n\n        youtube.ready.call(this);\n      };\n\n      // Load the SDK\n      loadScript(this.config.urls.youtube.sdk).catch((error) => {\n        this.debug.warn('YouTube API failed to load', error);\n      });\n    }\n  },\n\n  // Get the media title\n  getTitle(videoId) {\n    const url = format(this.config.urls.youtube.api, videoId);\n\n    fetch(url)\n      .then((data) => {\n        if (is.object(data)) {\n          const { title, height, width } = data;\n\n          // Set title\n          this.config.title = title;\n          ui.setTitle.call(this);\n\n          // Set aspect ratio\n          this.embed.ratio = roundAspectRatio(width, height);\n        }\n\n        setAspectRatio.call(this);\n      })\n      .catch(() => {\n        // Set aspect ratio\n        setAspectRatio.call(this);\n      });\n  },\n\n  // API ready\n  ready() {\n    const player = this;\n    const config = player.config.youtube;\n    // Ignore already setup (race condition)\n    const currentId = player.media && player.media.getAttribute('id');\n    if (!is.empty(currentId) && currentId.startsWith('youtube-')) {\n      return;\n    }\n\n    // Get the source URL or ID\n    let source = player.media.getAttribute('src');\n\n    // Get from <div> if needed\n    if (is.empty(source)) {\n      source = player.media.getAttribute(this.config.attributes.embed.id);\n    }\n\n    // Replace the <iframe> with a <div> due to YouTube API issues\n    const videoId = parseId(source);\n    const id = generateId(player.provider);\n    // Replace media element\n    const container = createElement('div', { id, 'data-poster': config.customControls ? player.poster : undefined });\n    player.media = replaceElement(container, player.media);\n\n    // Only load the poster when using custom controls\n    if (config.customControls) {\n      const posterSrc = s => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;\n\n      // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)\n      loadImage(posterSrc('maxres'), 121) // Highest quality and un-padded\n        .catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3\n        .catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists\n        .then(image => ui.setPoster.call(player, image.src))\n        .then((src) => {\n          // If the image is padded, use background-size \"cover\" instead (like youtube does too with their posters)\n          if (!src.includes('maxres')) {\n            player.elements.poster.style.backgroundSize = 'cover';\n          }\n        })\n        .catch(() => {});\n    }\n\n    // Setup instance\n    // https://developers.google.com/youtube/iframe_api_reference\n    player.embed = new window.YT.Player(player.media, {\n      videoId,\n      host: getHost(config),\n      playerVars: extend(\n        {},\n        {\n          // Autoplay\n          autoplay: player.config.autoplay ? 1 : 0,\n          // iframe interface language\n          hl: player.config.hl,\n          // Only show controls if not fully supported or opted out\n          controls: player.supported.ui && config.customControls ? 0 : 1,\n          // Disable keyboard as we handle it\n          disablekb: 1,\n          // Allow iOS inline playback\n          playsinline: player.config.playsinline && !player.config.fullscreen.iosNative ? 1 : 0,\n          // Captions are flaky on YouTube\n          cc_load_policy: player.captions.active ? 1 : 0,\n          cc_lang_pref: player.config.captions.language,\n          // Tracking for stats\n          widget_referrer: window ? window.location.href : null,\n        },\n        config,\n      ),\n      events: {\n        onError(event) {\n          // YouTube may fire onError twice, so only handle it once\n          if (!player.media.error) {\n            const code = event.data;\n            // Messages copied from https://developers.google.com/youtube/iframe_api_reference#onError\n            const message\n              = {\n                2: 'The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.',\n                5: 'The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.',\n                100: 'The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.',\n                101: 'The owner of the requested video does not allow it to be played in embedded players.',\n                150: 'The owner of the requested video does not allow it to be played in embedded players.',\n              }[code] || 'An unknown error occurred';\n\n            player.media.error = { code, message };\n\n            triggerEvent.call(player, player.media, 'error');\n          }\n        },\n        onPlaybackRateChange(event) {\n          // Get the instance\n          const instance = event.target;\n\n          // Get current speed\n          player.media.playbackRate = instance.getPlaybackRate();\n\n          triggerEvent.call(player, player.media, 'ratechange');\n        },\n        onReady(event) {\n          // Bail if onReady has already been called. See issue #1108\n          if (is.function(player.media.play)) {\n            return;\n          }\n          // Get the instance\n          const instance = event.target;\n\n          // Get the title\n          youtube.getTitle.call(player, videoId);\n\n          // Create a faux HTML5 API using the YouTube API\n          player.media.play = () => {\n            assurePlaybackState.call(player, true);\n            instance.playVideo();\n          };\n\n          player.media.pause = () => {\n            assurePlaybackState.call(player, false);\n            instance.pauseVideo();\n          };\n\n          player.media.stop = () => {\n            instance.stopVideo();\n          };\n\n          player.media.duration = instance.getDuration();\n          player.media.paused = true;\n\n          // Seeking\n          player.media.currentTime = 0;\n          Object.defineProperty(player.media, 'currentTime', {\n            get() {\n              return Number(instance.getCurrentTime());\n            },\n            set(time) {\n              // If paused and never played, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet).\n              if (player.paused && !player.embed.hasPlayed) {\n                player.embed.mute();\n              }\n\n              // Set seeking state and trigger event\n              player.media.seeking = true;\n              triggerEvent.call(player, player.media, 'seeking');\n\n              // Seek after events sent\n              instance.seekTo(time);\n            },\n          });\n\n          // Playback speed\n          Object.defineProperty(player.media, 'playbackRate', {\n            get() {\n              return instance.getPlaybackRate();\n            },\n            set(input) {\n              instance.setPlaybackRate(input);\n            },\n          });\n\n          // Volume\n          let { volume } = player.config;\n          Object.defineProperty(player.media, 'volume', {\n            get() {\n              return volume;\n            },\n            set(input) {\n              volume = input;\n              instance.setVolume(volume * 100);\n              triggerEvent.call(player, player.media, 'volumechange');\n            },\n          });\n\n          // Muted\n          let { muted } = player.config;\n          Object.defineProperty(player.media, 'muted', {\n            get() {\n              return muted;\n            },\n            set(input) {\n              const toggle = is.boolean(input) ? input : muted;\n              muted = toggle;\n              instance[toggle ? 'mute' : 'unMute']();\n              instance.setVolume(volume * 100);\n              triggerEvent.call(player, player.media, 'volumechange');\n            },\n          });\n\n          // Source\n          Object.defineProperty(player.media, 'currentSrc', {\n            get() {\n              return instance.getVideoUrl();\n            },\n          });\n\n          // Ended\n          Object.defineProperty(player.media, 'ended', {\n            get() {\n              return player.currentTime === player.duration;\n            },\n          });\n\n          // Get available speeds\n          const speeds = instance.getAvailablePlaybackRates();\n          // Filter based on config\n          player.options.speed = speeds.filter(s => player.config.speed.options.includes(s));\n\n          // Set the tabindex to avoid focus entering iframe\n          if (player.supported.ui && config.customControls) {\n            player.media.setAttribute('tabindex', -1);\n          }\n\n          triggerEvent.call(player, player.media, 'timeupdate');\n          triggerEvent.call(player, player.media, 'durationchange');\n\n          // Reset timer\n          clearInterval(player.timers.buffering);\n\n          // Setup buffering\n          player.timers.buffering = setInterval(() => {\n            // Get loaded % from YouTube\n            player.media.buffered = instance.getVideoLoadedFraction();\n\n            // Trigger progress only when we actually buffer something\n            if (player.media.lastBuffered === null || player.media.lastBuffered < player.media.buffered) {\n              triggerEvent.call(player, player.media, 'progress');\n            }\n\n            // Set last buffer point\n            player.media.lastBuffered = player.media.buffered;\n\n            // Bail if we're at 100%\n            if (player.media.buffered === 1) {\n              clearInterval(player.timers.buffering);\n\n              // Trigger event\n              triggerEvent.call(player, player.media, 'canplaythrough');\n            }\n          }, 200);\n\n          // Rebuild UI\n          if (config.customControls) {\n            setTimeout(() => ui.build.call(player), 50);\n          }\n        },\n        onStateChange(event) {\n          // Get the instance\n          const instance = event.target;\n\n          // Reset timer\n          clearInterval(player.timers.playing);\n\n          const seeked = player.media.seeking && [1, 2].includes(event.data);\n\n          if (seeked) {\n            // Unset seeking and fire seeked event\n            player.media.seeking = false;\n            triggerEvent.call(player, player.media, 'seeked');\n          }\n\n          // Handle events\n          // -1   Unstarted\n          // 0    Ended\n          // 1    Playing\n          // 2    Paused\n          // 3    Buffering\n          // 5    Video cued\n          switch (event.data) {\n            case -1:\n              // Update scrubber\n              triggerEvent.call(player, player.media, 'timeupdate');\n\n              // Get loaded % from YouTube\n              player.media.buffered = instance.getVideoLoadedFraction();\n              triggerEvent.call(player, player.media, 'progress');\n\n              break;\n\n            case 0:\n              assurePlaybackState.call(player, false);\n\n              // YouTube doesn't support loop for a single video, so mimick it.\n              if (player.media.loop) {\n                // YouTube needs a call to `stopVideo` before playing again\n                instance.stopVideo();\n                instance.playVideo();\n              }\n              else {\n                triggerEvent.call(player, player.media, 'ended');\n              }\n\n              break;\n\n            case 1:\n              // Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)\n              if (config.customControls && !player.config.autoplay && player.media.paused && !player.embed.hasPlayed) {\n                player.media.pause();\n              }\n              else {\n                assurePlaybackState.call(player, true);\n\n                triggerEvent.call(player, player.media, 'playing');\n\n                // Poll to get playback progress\n                player.timers.playing = setInterval(() => {\n                  triggerEvent.call(player, player.media, 'timeupdate');\n                }, 50);\n\n                // Check duration again due to YouTube bug\n                // https://github.com/sampotts/plyr/issues/374\n                // https://code.google.com/p/gdata-issues/issues/detail?id=8690\n                if (player.media.duration !== instance.getDuration()) {\n                  player.media.duration = instance.getDuration();\n                  triggerEvent.call(player, player.media, 'durationchange');\n                }\n              }\n\n              break;\n\n            case 2:\n              // Restore audio (YouTube starts playing on seek if the video hasn't been played yet)\n              if (!player.muted) {\n                player.embed.unMute();\n              }\n              assurePlaybackState.call(player, false);\n\n              break;\n\n            case 3:\n              // Trigger waiting event to add loading classes to container as the video buffers.\n              triggerEvent.call(player, player.media, 'waiting');\n\n              break;\n\n            default:\n              break;\n          }\n\n          triggerEvent.call(player, player.elements.container, 'statechange', false, {\n            code: event.data,\n          });\n        },\n      },\n    });\n  },\n};\n\nexport default youtube;\n"
  },
  {
    "path": "src/js/plyr.d.ts",
    "content": "// Type definitions for plyr 3.5\n// Project: https://plyr.io\n// Definitions by: ondratra <https://github.com/ondratra>\n// TypeScript Version: 3.0\n\n\n\ndeclare class Plyr {\n  /**\n   * Setup a new instance\n   */\n  static setup(targets: NodeList | HTMLElement | HTMLElement[] | string, options?: Plyr.Options): Plyr[];\n\n  /**\n   * Check for support\n   * @param mediaType\n   * @param provider\n   * @param playsInline Whether the player has the playsinline attribute (only applicable to iOS 10+)\n   */\n  static supported(mediaType?: Plyr.MediaType, provider?: Plyr.Provider, playsInline?: boolean): Plyr.Support;\n\n  constructor(targets: NodeList | HTMLElement | HTMLElement[] | string, options?: Plyr.Options);\n\n  /**\n   * Indicates if the current player is HTML5.\n   */\n  readonly isHTML5: boolean;\n\n  /**\n   * Indicates if the current player is an embedded player.\n   */\n  readonly isEmbed: boolean;\n\n  /**\n   * Indicates if the current player is playing.\n   */\n  readonly playing: boolean;\n\n  /**\n   * Indicates if the current player is paused.\n   */\n  readonly paused: boolean;\n\n  /**\n   * Indicates if the current player is stopped.\n   */\n  readonly stopped: boolean;\n\n  /**\n   * Indicates if the current player has finished playback.\n   */\n  readonly ended: boolean;\n\n  /**\n   * Returns a float between 0 and 1 indicating how much of the media is buffered\n   */\n  readonly buffered: number;\n\n  /**\n   * Gets or sets the currentTime for the player. The setter accepts a float in seconds.\n   */\n  currentTime: number;\n\n  /**\n   * Indicates if the current player is seeking.\n   */\n  readonly seeking: boolean;\n\n  /**\n   * Returns the duration for the current media.\n   */\n  readonly duration: number;\n\n  /**\n   * Gets or sets the volume for the player. The setter accepts a float between 0 and 1.\n   */\n  volume: number;\n\n  /**\n   * Gets or sets the muted state of the player. The setter accepts a boolean.\n   */\n  muted: boolean;\n\n  /**\n   * Indicates if the current media has an audio track.\n   */\n  readonly hasAudio: boolean;\n\n  /**\n   * Gets or sets the speed for the player. The setter accepts a value in the options specified in your config. Generally the minimum should be 0.5.\n   */\n  speed: number;\n\n  /**\n   * Gets or sets the quality for the player. The setter accepts a value from the options specified in your config.\n   */\n  quality: number;\n\n  /**\n   * Gets or sets the current loop state of the player.\n   */\n  loop: boolean;\n\n  /**\n   * Gets or sets the current source for the player.\n   */\n  source: Plyr.SourceInfo;\n\n  /**\n   * Gets or sets the current poster image URL for the player.\n   */\n  poster: string;\n\n  /**\n   * Gets or sets the autoplay state of the player.\n   */\n  autoplay: boolean;\n\n  /**\n   * Gets or sets the caption track by index. 1 means the track is missing or captions is not active\n   */\n  currentTrack: number;\n\n  /**\n   * Gets or sets the preferred captions language for the player. The setter accepts an ISO twoletter language code. Support for the languages is dependent on the captions you include.\n   * If your captions don't have any language data, or if you have multiple tracks with the same language, you may want to use currentTrack instead.\n   */\n  language: string;\n\n  /**\n   * Gets or sets the picture-in-picture state of the player. This currently only supported on Safari 10+ on MacOS Sierra+ and iOS 10+.\n   */\n  pip: boolean;\n\n  /**\n   * Gets or sets the aspect ratio for embedded players.\n   */\n  ratio?: string;\n\n  /**\n   * Access Elements cache\n   */\n  elements: Plyr.Elements;\n\n  /**\n   * Returns the current video Provider\n   */\n  readonly provider: Plyr.Provider;\n\n  /**\n   * Returns the native API for Vimeo or Youtube players\n   */\n  readonly embed?: any;\n\n  readonly fullscreen: Plyr.FullscreenControl;\n\n  /**\n   * Start playback.\n   * For HTML5 players, play() will return a Promise in some browsers - WebKit and Mozilla according to MDN at time of writing.\n   */\n  play(): Promise<void> | void;\n\n  /**\n   * Pause playback.\n   */\n  pause(): void;\n\n  /**\n   * Toggle playback, if no parameters are passed, it will toggle based on current status.\n   */\n  togglePlay(toggle?: boolean): boolean;\n\n  /**\n   * Stop playback and reset to start.\n   */\n  stop(): void;\n\n  /**\n   * Restart playback.\n   */\n  restart(): void;\n\n  /**\n   * Rewind playback by the specified seek time. If no parameter is passed, the default seek time will be used.\n   */\n  rewind(seekTime?: number): void;\n\n  /**\n   * Fast forward by the specified seek time. If no parameter is passed, the default seek time will be used.\n   */\n  forward(seekTime?: number): void;\n\n  /**\n   * Increase volume by the specified step. If no parameter is passed, the default step will be used.\n   */\n  increaseVolume(step?: number): void;\n\n  /**\n   * Increase volume by the specified step. If no parameter is passed, the default step will be used.\n   */\n  decreaseVolume(step?: number): void;\n\n  /**\n   * Toggle captions display. If no parameter is passed, it will toggle based on current status.\n   */\n  toggleCaptions(toggle?: boolean): void;\n\n  /**\n   * Trigger the airplay dialog on supported devices.\n   */\n  airplay(): void;\n\n  /**\n   * Sets the preview thumbnails for the current source.\n   */\n  setPreviewThumbnails(source: Plyr.PreviewThumbnailsOptions): void;\n\n  /**\n   * Toggle the controls (video only). Takes optional truthy value to force it on/off.\n   */\n  toggleControls(toggle: boolean): void;\n\n  /**\n   * Add an event listener for the specified event.\n   */\n  on<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;\n\n  /**\n   * Add an event listener for the specified event once.\n   */\n  once<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;\n\n  /**\n   * Remove an event listener for the specified event.\n   */\n  off<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;\n\n  /**\n   * Check support for a mime type.\n   */\n  supports(type: string): boolean;\n\n  /**\n   * Destroy lib instance\n   * @param {Function} callback - Callback for when destroy is complete\n   * @param {Boolean} soft - Whether it's a soft destroy (for source changes etc)\n   */\n  destroy(callback?: (...args: any[]) => void, soft?: boolean): void;\n}\n\ndeclare namespace Plyr {\n  type MediaType = 'audio' | 'video';\n  type Provider = 'html5' | 'youtube' | 'vimeo';\n  type StandardEventMap = {\n    progress: PlyrEvent;\n    playing: PlyrEvent;\n    play: PlyrEvent;\n    pause: PlyrEvent;\n    timeupdate: PlyrEvent;\n    volumechange: PlyrEvent;\n    seeking: PlyrEvent;\n    seeked: PlyrEvent;\n    ratechange: PlyrEvent;\n    ended: PlyrEvent;\n    enterfullscreen: PlyrEvent;\n    exitfullscreen: PlyrEvent;\n    captionsenabled: PlyrEvent;\n    captionsdisabled: PlyrEvent;\n    languagechange: PlyrEvent;\n    controlshidden: PlyrEvent;\n    controlsshown: PlyrEvent;\n    ready: PlyrEvent;\n  };\n  // For retrocompatibility, we keep StandardEvent\n  type StandardEvent = keyof Plyr.StandardEventMap;\n  type Html5EventMap = {\n    loadstart: PlyrEvent;\n    loadeddata: PlyrEvent;\n    loadedmetadata: PlyrEvent;\n    canplay: PlyrEvent;\n    canplaythrough: PlyrEvent;\n    stalled: PlyrEvent;\n    waiting: PlyrEvent;\n    emptied: PlyrEvent;\n    cuechange: PlyrEvent;\n    error: PlyrEvent;\n  };\n  // For retrocompatibility, we keep Html5Event\n  type Html5Event = keyof Plyr.Html5EventMap;\n  type YoutubeEventMap = {\n    statechange: PlyrStateChangeEvent;\n    qualitychange: PlyrEvent;\n    qualityrequested: PlyrEvent;\n  };\n  // For retrocompatibility, we keep YoutubeEvent\n  type YoutubeEvent = keyof Plyr.YoutubeEventMap;\n\n  type PlyrEventMap = StandardEventMap & Html5EventMap & YoutubeEventMap;\n\n  interface FullscreenControl {\n    /**\n     * Indicates if the current player is in fullscreen mode.\n     */\n    readonly active: boolean;\n\n    /**\n     * Indicates if the current player has fullscreen enabled.\n     */\n    readonly enabled: boolean;\n\n    /**\n     * Enter fullscreen. If fullscreen is not supported, a fallback \"\"full window/viewport\"\" is used instead.\n     */\n    enter(): void;\n\n    /**\n     * Exit fullscreen.\n     */\n    exit(): void;\n\n    /**\n     * Toggle fullscreen.\n     */\n    toggle(): void;\n  }\n\n  interface Options {\n    /**\n     * Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically enable or disable Plyr for a certain UA. Example below.\n     */\n    enabled?: boolean;\n\n    /**\n     * Display debugging information in the console\n     */\n    debug?: boolean;\n\n    /**\n     * If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function;\n     * id (the unique id for the player), seektime (the seektime step in seconds), and title (the media title). See CONTROLS.md for more info on how the html needs to be structured.\n     * Defaults to ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']\n     */\n    controls?: string | string[] | ((id: string, seektime: number, title: string) => unknown) | Element;\n\n    /**\n     * If you're using the default controls are used then you can specify which settings to show in the menu\n     * Defaults to ['captions', 'quality', 'speed', 'loop']\n     */\n    settings?: string[];\n\n    /**\n     * Used for internationalization (i18n) of the text within the UI.\n     */\n    i18n?: any;\n\n    /**\n     * Load the SVG sprite specified as the iconUrl option (if a URL). If false, it is assumed you are handling sprite loading yourself.\n     */\n    loadSprite?: boolean;\n\n    /**\n     * Specify a URL or path to the SVG sprite. See the SVG section for more info.\n     */\n    iconUrl?: string;\n\n    /**\n     * Specify the id prefix for the icons used in the default controls (e.g. plyr-play would be plyr).\n     * This is to prevent clashes if you're using your own SVG sprite but with the default controls.\n     * Most people can ignore this option.\n     */\n    iconPrefix?: string;\n\n    /**\n     * Specify a URL or path to a blank video file used to properly cancel network requests.\n     */\n    blankVideo?: string;\n\n    /**\n     * Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled by default in some browsers.\n     * If the autoplay attribute is present on a <video> or <audio> element, this will be automatically set to true.\n     */\n    autoplay?: boolean;\n\n    /**\n     * Only allow one player playing at once.\n     */\n    autopause?: boolean;\n\n    /**\n     * The time, in seconds, to seek when a user hits fast forward or rewind.\n     */\n    seekTime?: number;\n\n    /**\n     * A number, between 0 and 1, representing the initial volume of the player.\n     */\n    volume?: number;\n\n    /**\n     * Whether to start playback muted. If the muted attribute is present on a <video> or <audio> element, this will be automatically set to true.\n     */\n    muted?: boolean;\n\n    /**\n     * Click (or tap) of the video container will toggle play/pause.\n     */\n    clickToPlay?: boolean;\n\n    /**\n     * Disable right click menu on video to help as very primitive obfuscation to prevent downloads of content.\n     */\n    disableContextMenu?: boolean;\n\n    /**\n     * Hide video controls automatically after 2s of no mouse or focus movement, on control element blur (tab out), on playback start or entering fullscreen.\n     * As soon as the mouse is moved, a control element is focused or playback is paused, the controls reappear instantly.\n     */\n    hideControls?: boolean;\n\n    /**\n     * Reset the playback to the start once playback is complete.\n     */\n    resetOnEnd?: boolean;\n\n    /**\n     * Enable keyboard shortcuts for focused players only or globally\n     */\n    keyboard?: KeyboardOptions;\n\n    /**\n     * controls: Display control labels as tooltips on :hover & :focus (by default, the labels are screen reader only).\n     * seek: Display a seek tooltip to indicate on click where the media would seek to.\n     */\n    tooltips?: TooltipOptions;\n\n    /**\n     * Specify a custom duration for media.\n     */\n    duration?: number;\n\n    /**\n     * Displays the duration of the media on the metadataloaded event (on startup) in the current time display.\n     * This will only work if the preload attribute is not set to none (or is not set at all) and you choose not to display the duration (see controls option).\n     */\n    displayDuration?: boolean;\n\n    /**\n     * Display the current time as a countdown rather than an incremental counter.\n     */\n    invertTime?: boolean;\n\n    /**\n     * Allow users to click to toggle the above.\n     */\n    toggleInvert?: boolean;\n\n    /**\n     * Allows binding of event listeners to the controls before the default handlers. See the defaults.js for available listeners.\n     * If your handler prevents default on the event (event.preventDefault()), the default handler will not fire.\n     */\n    listeners?: { [key: string]: (error: PlyrEvent) => void };\n\n    /**\n     * active: Toggles if captions should be active by default. language: Sets the default language to load (if available). 'auto' uses the browser language.\n     * update: Listen to changes to tracks and update menu. This is needed for some streaming libraries, but can result in unselectable language options).\n     */\n    captions?: CaptionOptions;\n\n    /**\n     * enabled: Toggles whether fullscreen should be enabled. fallback: Allow fallback to a full-window solution.\n     * iosNative: whether to use native iOS fullscreen when entering fullscreen (no custom controls)\n     */\n    fullscreen?: FullScreenOptions;\n\n    /**\n     * The aspect ratio you want to use for embedded players.\n     */\n    ratio?: string;\n\n    /**\n     * enabled: Allow use of local storage to store user settings. key: The key name to use.\n     */\n    storage?: StorageOptions;\n\n    /**\n     * selected: The default speed for playback. options: The speed options to display in the UI. YouTube and Vimeo will ignore any options outside of the 0.5-2 range, so options outside of this range will be hidden automatically.\n     */\n    speed?: SpeedOptions;\n\n    /**\n     * Currently only supported by YouTube. default is the default quality level, determined by YouTube. options are the options to display.\n     */\n    quality?: QualityOptions;\n\n    /**\n     * active: Whether to loop the current video. If the loop attribute is present on a <video> or <audio> element,\n     * this will be automatically set to true This is an object to support future functionality.\n     */\n    loop?: LoopOptions;\n\n    /**\n     * enabled: Whether to enable vi.ai ads. publisherId: Your unique vi.ai publisher ID.\n     */\n    ads?: AdOptions;\n\n    /**\n     * Vimeo Player Options.\n     */\n    vimeo?: object;\n\n    /**\n     * Youtube Player Options.\n     */\n    youtube?: object;\n\n    /**\n     * Preview Thumbnails Options.\n     */\n    previewThumbnails?: PreviewThumbnailsOptions;\n\n    /**\n     * Media Metadata Options.\n     */\n    mediaMetadata?: MediaMetadataOptions;\n\n    /**\n     * Markers Options\n     */\n    markers?: MarkersOptions;\n  }\n\n  interface QualityOptions {\n    default: number;\n    forced?: boolean;\n    onChange?: (quality: number) => void;\n    options: number[];\n  }\n\n  interface LoopOptions {\n    active: boolean;\n  }\n\n  interface AdOptions {\n    enabled: boolean;\n    publisherId?: string;\n    tagUrl?: string;\n  }\n\n  interface SpeedOptions {\n    selected: number;\n    options: number[];\n  }\n\n  interface KeyboardOptions {\n    focused?: boolean;\n    global?: boolean;\n  }\n\n  interface TooltipOptions {\n    controls?: boolean;\n    seek?: boolean;\n  }\n\n  interface FullScreenOptions {\n    enabled?: boolean;\n    fallback?: boolean | 'force';\n    iosNative?: boolean;\n    container?: string;\n  }\n\n  interface CaptionOptions {\n    active?: boolean;\n    language?: string;\n    update?: boolean;\n  }\n\n  interface StorageOptions {\n    enabled?: boolean;\n    key?: string;\n  }\n\n  interface PreviewThumbnailsOptions {\n    enabled?: boolean;\n    src?: string | string[];\n    withCredentials?: boolean;\n  }\n\n  interface MediaMetadataArtwork {\n    src: string;\n    sizes?: string;\n    type: string;\n  }\n\n  interface MediaMetadataOptions {\n    title?: string;\n    artist?: string;\n    album?: string;\n    artwork?: MediaMetadataArtwork[];\n  }\n\n  interface MarkersPoints {\n    time: number;\n    label: string;\n  }\n\n  interface MarkersOptions {\n    enabled: boolean;\n    points: MarkersPoints[];\n  }\n\n  export interface Elements {\n    buttons: {\n      airplay?: HTMLButtonElement;\n      captions?: HTMLButtonElement;\n      download?: HTMLButtonElement;\n      fastForward?: HTMLButtonElement;\n      fullscreen?: HTMLButtonElement;\n      mute?: HTMLButtonElement;\n      pip?: HTMLButtonElement;\n      play?: HTMLButtonElement | HTMLButtonElement[];\n      restart?: HTMLButtonElement;\n      rewind?: HTMLButtonElement;\n      settings?: HTMLButtonElement;\n    };\n    captions: HTMLElement | null;\n    container: HTMLElement | null;\n    controls: HTMLElement | null;\n    fullscreen: HTMLElement | null;\n    wrapper: HTMLElement | null;\n  }\n\n  interface SourceInfo {\n    /**\n     * Note: YouTube and Vimeo are currently not supported as audio sources.\n     */\n    type: MediaType;\n\n    /**\n     * Title of the new media. Used for the aria-label attribute on the play button, and outer container. YouTube and Vimeo are populated automatically.\n     */\n    title?: string;\n\n    /**\n     * This is an array of sources. For HTML5 media, the properties of this object are mapped directly to HTML attributes so more can be added to the object if required.\n     */\n    sources: Source[];\n\n    /**\n     * The URL for the poster image (HTML5 video only).\n     */\n    poster?: string;\n\n    /**\n     * An array of track objects. Each element in the array is mapped directly to a track element and any keys mapped directly to HTML attributes so as in the example above,\n     * it will render as <track kind=\"captions\" label=\"English\" srclang=\"en\" src=\"https://cdn.selz.com/plyr/1.0/example_captions_en.vtt\" default> and similar for the French version.\n     * Booleans are converted to HTML5 value-less attributes.\n     */\n    tracks?: Track[];\n\n    /**\n     * Enable or disable preview thumbnails for current source\n     */\n    previewThumbnails?: Plyr.PreviewThumbnailsOptions;\n  }\n\n  interface Source {\n    /**\n     * The URL of the media file (or YouTube/Vimeo URL).\n     */\n    src: string;\n    /**\n     * The MIME type of the media file (if HTML5).\n     */\n    type?: string;\n    provider?: Provider;\n    size?: number;\n  }\n\n  type TrackKind = 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';\n  interface Track {\n    /**\n     * Indicates how the text track is meant to be used\n     */\n    kind: TrackKind;\n    /**\n     * Indicates a user-readable title for the track\n     */\n    label: string;\n    /**\n     * The language of the track text data. It must be a valid BCP 47 language tag. If the kind attribute is set to subtitles, then srclang must be defined.\n     */\n    srcLang?: string;\n    /**\n     * The URL of the track (.vtt file).\n     */\n    src: string;\n\n    default?: boolean;\n  }\n\n  interface PlyrEvent extends CustomEvent {\n    readonly detail: { readonly plyr: Plyr };\n  }\n\n  enum YoutubeState {\n    UNSTARTED = -1,\n    ENDED = 0,\n    PLAYING = 1,\n    PAUSED = 2,\n    BUFFERING = 3,\n    CUED = 5,\n  }\n\n  interface PlyrStateChangeEvent extends CustomEvent {\n    readonly detail: {\n      readonly plyr: Plyr;\n      readonly code: YoutubeState;\n    };\n  }\n\n  interface Support {\n    api: boolean;\n    ui: boolean;\n  }\n}\n\nexport = Plyr;\nexport as namespace Plyr;\nexport default Plyr;\n"
  },
  {
    "path": "src/js/plyr.js",
    "content": "// ==========================================================================\n// Plyr\n// plyr.js v3.8.4\n// https://github.com/sampotts/plyr\n// License: The MIT License (MIT)\n// ==========================================================================\n\nimport captions from './captions';\nimport defaults from './config/defaults';\nimport { pip } from './config/states';\nimport { getProviderByUrl, providers, types } from './config/types';\nimport Console from './console';\nimport controls from './controls';\nimport Fullscreen from './fullscreen';\nimport html5 from './html5';\nimport Listeners from './listeners';\nimport media from './media';\nimport Ads from './plugins/ads';\nimport PreviewThumbnails from './plugins/preview-thumbnails';\nimport source from './source';\nimport Storage from './storage';\nimport support from './support';\nimport ui from './ui';\nimport { closest } from './utils/arrays';\nimport { createElement, hasClass, removeElement, replaceElement, toggleClass, wrap } from './utils/elements';\nimport { off, on, once, triggerEvent, unbindListeners } from './utils/events';\nimport is from './utils/is';\nimport loadSprite from './utils/load-sprite';\nimport { clamp } from './utils/numbers';\nimport { cloneDeep, extend } from './utils/objects';\nimport { silencePromise } from './utils/promise';\nimport { getAspectRatio, reduceAspectRatio, setAspectRatio, validateAspectRatio } from './utils/style';\nimport { parseUrl } from './utils/urls';\n\n// Private properties\n// TODO: Use a WeakMap for private globals\n// const globals = new WeakMap();\n\n// Plyr instance\nclass Plyr {\n  constructor(target, options) {\n    this.timers = {};\n\n    // State\n    this.ready = false;\n    this.loading = false;\n    this.failed = false;\n\n    // Touch device\n    this.touch = support.touch;\n\n    // Set the media element\n    this.media = target;\n\n    // String selector passed\n    if (is.string(this.media)) {\n      this.media = document.querySelectorAll(this.media);\n    }\n\n    // jQuery, NodeList or Array passed, use first element\n    if ((window.jQuery && this.media instanceof jQuery) || is.nodeList(this.media) || is.array(this.media)) {\n      this.media = this.media[0];\n    }\n\n    // Set config\n    this.config = extend(\n      {},\n      defaults,\n      Plyr.defaults,\n      options || {},\n      (() => {\n        try {\n          return JSON.parse(this.media.getAttribute('data-plyr-config'));\n        }\n        catch {\n          return {};\n        }\n      })(),\n    );\n\n    // Elements cache\n    this.elements = {\n      container: null,\n      fullscreen: null,\n      captions: null,\n      buttons: {},\n      display: {},\n      progress: {},\n      inputs: {},\n      settings: {\n        popup: null,\n        menu: null,\n        panels: {},\n        buttons: {},\n      },\n    };\n\n    // Captions\n    this.captions = {\n      active: null,\n      currentTrack: -1,\n      meta: new WeakMap(),\n    };\n\n    // Fullscreen\n    this.fullscreen = {\n      active: false,\n    };\n\n    // Options\n    this.options = {\n      speed: [],\n      quality: [],\n    };\n\n    // Debugging\n    // TODO: move to globals\n    this.debug = new Console(this.config.debug);\n\n    // Log config options and support\n    this.debug.log('Config', this.config);\n    this.debug.log('Support', support);\n\n    // We need an element to setup\n    if (is.nullOrUndefined(this.media) || !is.element(this.media)) {\n      this.debug.error('Setup failed: no suitable element passed');\n      return;\n    }\n\n    // Bail if the element is initialized\n    if (this.media.plyr) {\n      this.debug.warn('Target already setup');\n      return;\n    }\n\n    // Bail if not enabled\n    if (!this.config.enabled) {\n      this.debug.error('Setup failed: disabled by config');\n      return;\n    }\n\n    // Bail if disabled or no basic support\n    // You may want to disable certain UAs etc\n    if (!support.check().api) {\n      this.debug.error('Setup failed: no support');\n      return;\n    }\n\n    // Cache original element state for .destroy()\n    const clone = this.media.cloneNode(true);\n    clone.autoplay = false;\n    this.elements.original = clone;\n\n    // Set media type based on tag or data attribute\n    // Supported: video, audio, vimeo, youtube\n    const type = this.media.tagName.toLowerCase();\n    // Embed properties\n    let iframe = null;\n    let url = null;\n\n    // Different setup based on type\n    switch (type) {\n      case 'div':\n        // Find the frame\n        iframe = this.media.querySelector('iframe');\n\n        // <iframe> type\n        if (is.element(iframe)) {\n          // Detect provider\n          url = parseUrl(iframe.getAttribute('src'));\n          this.provider = getProviderByUrl(url.toString());\n\n          // Rework elements\n          this.elements.container = this.media;\n          this.media = iframe;\n\n          // Reset classname\n          this.elements.container.className = '';\n\n          // Get attributes from URL and set config\n          if (url.search.length) {\n            const truthy = ['1', 'true'];\n\n            if (truthy.includes(url.searchParams.get('autoplay'))) {\n              this.config.autoplay = true;\n            }\n            if (truthy.includes(url.searchParams.get('loop'))) {\n              this.config.loop.active = true;\n            }\n\n            // TODO: replace fullscreen.iosNative with this playsinline config option\n            // YouTube requires the playsinline in the URL\n            if (this.isYouTube) {\n              this.config.playsinline = truthy.includes(url.searchParams.get('playsinline'));\n              this.config.youtube.hl = url.searchParams.get('hl'); // TODO: Should this be setting language?\n            }\n            else {\n              this.config.playsinline = true;\n            }\n          }\n        }\n        else {\n          // <div> with attributes\n          this.provider = this.media.getAttribute(this.config.attributes.embed.provider);\n\n          // Remove attribute\n          this.media.removeAttribute(this.config.attributes.embed.provider);\n        }\n\n        // Unsupported or missing provider\n        if (is.empty(this.provider) || !Object.values(providers).includes(this.provider)) {\n          this.debug.error('Setup failed: Invalid provider');\n          return;\n        }\n\n        // Audio will come later for external providers\n        this.type = types.video;\n\n        break;\n\n      case 'video':\n      case 'audio':\n        this.type = type;\n        this.provider = providers.html5;\n\n        // Get config from attributes\n        if (this.media.hasAttribute('crossorigin')) {\n          this.config.crossorigin = true;\n        }\n        if (this.media.hasAttribute('autoplay')) {\n          this.config.autoplay = true;\n        }\n        if (this.media.hasAttribute('playsinline') || this.media.hasAttribute('webkit-playsinline')) {\n          this.config.playsinline = true;\n        }\n        if (this.media.hasAttribute('muted')) {\n          this.config.muted = true;\n        }\n        if (this.media.hasAttribute('loop')) {\n          this.config.loop.active = true;\n        }\n\n        break;\n\n      default:\n        this.debug.error('Setup failed: unsupported type');\n        return;\n    }\n\n    // Check for support again but with type\n    this.supported = support.check(this.type, this.provider);\n\n    // If no support for even API, bail\n    if (!this.supported.api) {\n      this.debug.error('Setup failed: no support');\n      return;\n    }\n\n    this.eventListeners = [];\n\n    // Create listeners\n    this.listeners = new Listeners(this);\n\n    // Setup local storage for user settings\n    this.storage = new Storage(this);\n\n    // Store reference\n    this.media.plyr = this;\n\n    // Wrap media\n    if (!is.element(this.elements.container)) {\n      this.elements.container = createElement('div');\n      wrap(this.media, this.elements.container);\n    }\n\n    // Migrate custom properties from media to container (so they work 😉)\n    ui.migrateStyles.call(this);\n\n    // Add style hook\n    ui.addStyleHook.call(this);\n\n    // Setup media\n    media.setup.call(this);\n\n    // Listen for events if debugging\n    if (this.config.debug) {\n      on.call(this, this.elements.container, this.config.events.join(' '), (event) => {\n        this.debug.log(`event: ${event.type}`);\n      });\n    }\n\n    // Setup fullscreen\n    this.fullscreen = new Fullscreen(this);\n\n    // Setup interface\n    // If embed but not fully supported, build interface now to avoid flash of controls\n    if (this.isHTML5 || (this.isEmbed && !this.supported.ui)) {\n      ui.build.call(this);\n    }\n\n    // Container listeners\n    this.listeners.container();\n\n    // Global listeners\n    this.listeners.global();\n\n    // Setup ads if provided\n    if (this.config.ads.enabled) {\n      this.ads = new Ads(this);\n    }\n\n    // Autoplay if required\n    if (this.isHTML5 && this.config.autoplay) {\n      this.once('canplay', () => silencePromise(this.play()));\n    }\n\n    // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek\n    this.lastSeekTime = 0;\n\n    // Setup preview thumbnails if enabled\n    if (this.config.previewThumbnails.enabled) {\n      this.previewThumbnails = new PreviewThumbnails(this);\n    }\n  }\n\n  // ---------------------------------------\n  // API\n  // ---------------------------------------\n\n  /**\n   * Types and provider helpers\n   */\n  get isHTML5() {\n    return this.provider === providers.html5;\n  }\n\n  get isEmbed() {\n    return this.isYouTube || this.isVimeo;\n  }\n\n  get isYouTube() {\n    return this.provider === providers.youtube;\n  }\n\n  get isVimeo() {\n    return this.provider === providers.vimeo;\n  }\n\n  get isVideo() {\n    return this.type === types.video;\n  }\n\n  get isAudio() {\n    return this.type === types.audio;\n  }\n\n  /**\n   * Play the media, or play the advertisement (if they are not blocked)\n   */\n  play = () => {\n    if (!is.function(this.media.play)) {\n      return null;\n    }\n\n    // Intecept play with ads\n    if (this.ads && this.ads.enabled) {\n      this.ads.managerPromise.then(() => this.ads.play()).catch(() => silencePromise(this.media.play()));\n    }\n\n    // Return the promise (for HTML5)\n    return this.media.play();\n  };\n\n  /**\n   * Pause the media\n   */\n  pause = () => {\n    if (!this.playing || !is.function(this.media.pause)) {\n      return null;\n    }\n\n    return this.media.pause();\n  };\n\n  /**\n   * Get playing state\n   */\n  get playing() {\n    return Boolean(this.ready && !this.paused && !this.ended);\n  }\n\n  /**\n   * Get paused state\n   */\n  get paused() {\n    return Boolean(this.media.paused);\n  }\n\n  /**\n   * Get stopped state\n   */\n  get stopped() {\n    return Boolean(this.paused && this.currentTime === 0);\n  }\n\n  /**\n   * Get ended state\n   */\n  get ended() {\n    return Boolean(this.media.ended);\n  }\n\n  /**\n   * Toggle playback based on current status\n   * @param {boolean} input\n   */\n  togglePlay = (input) => {\n    // Toggle based on current state if nothing passed\n    const toggle = is.boolean(input) ? input : !this.playing;\n\n    if (toggle) {\n      return this.play();\n    }\n\n    return this.pause();\n  };\n\n  /**\n   * Stop playback\n   */\n  stop = () => {\n    if (this.isHTML5) {\n      this.pause();\n      this.restart();\n    }\n    else if (is.function(this.media.stop)) {\n      this.media.stop();\n    }\n  };\n\n  /**\n   * Restart playback\n   */\n  restart = () => {\n    this.currentTime = 0;\n  };\n\n  /**\n   * Rewind\n   * @param {number} seekTime - how far to rewind in seconds. Defaults to the config.seekTime\n   */\n  rewind = (seekTime) => {\n    this.currentTime -= is.number(seekTime) ? seekTime : this.config.seekTime;\n  };\n\n  /**\n   * Fast forward\n   * @param {number} seekTime - how far to fast forward in seconds. Defaults to the config.seekTime\n   */\n  forward = (seekTime) => {\n    this.currentTime += is.number(seekTime) ? seekTime : this.config.seekTime;\n  };\n\n  /**\n   * Seek to a time\n   * @param {number} input - where to seek to in seconds. Defaults to 0 (the start)\n   */\n  set currentTime(input) {\n    // Bail if media duration isn't available yet\n    if (!this.duration) {\n      return;\n    }\n\n    // Validate input\n    const inputIsValid = is.number(input) && input > 0;\n\n    // Set\n    this.media.currentTime = inputIsValid ? Math.min(input, this.duration) : 0;\n\n    // Logging\n    this.debug.log(`Seeking to ${this.currentTime} seconds`);\n  }\n\n  /**\n   * Get current time\n   */\n  get currentTime() {\n    return Number(this.media.currentTime);\n  }\n\n  /**\n   * Get buffered\n   */\n  get buffered() {\n    const { buffered } = this.media;\n\n    // YouTube / Vimeo return a float between 0-1\n    if (is.number(buffered)) {\n      return buffered;\n    }\n\n    // HTML5\n    // TODO: Handle buffered chunks of the media\n    // (i.e. seek to another section buffers only that section)\n    if (buffered && buffered.length && this.duration > 0) {\n      return buffered.end(0) / this.duration;\n    }\n\n    return 0;\n  }\n\n  /**\n   * Get seeking status\n   */\n  get seeking() {\n    return Boolean(this.media.seeking);\n  }\n\n  /**\n   * Get the duration of the current media\n   */\n  get duration() {\n    // Faux duration set via config\n    const fauxDuration = Number.parseFloat(this.config.duration);\n    // Media duration can be NaN or Infinity before the media has loaded\n    const realDuration = (this.media || {}).duration;\n    const duration = !is.number(realDuration) || realDuration === Infinity ? 0 : realDuration;\n\n    // If config duration is funky, use regular duration\n    return fauxDuration || duration;\n  }\n\n  /**\n   * Set the player volume\n   * @param {number} value - must be between 0 and 1. Defaults to the value from local storage and config.volume if not set in storage\n   */\n  set volume(value) {\n    let volume = value;\n    const max = 1;\n    const min = 0;\n\n    if (is.string(volume)) {\n      volume = Number(volume);\n    }\n\n    // Load volume from storage if no value specified\n    if (!is.number(volume)) {\n      volume = this.storage.get('volume');\n    }\n\n    // Use config if all else fails\n    if (!is.number(volume)) {\n      ({ volume } = this.config);\n    }\n\n    // Maximum is volumeMax\n    if (volume > max) {\n      volume = max;\n    }\n    // Minimum is volumeMin\n    if (volume < min) {\n      volume = min;\n    }\n\n    // Update config\n    this.config.volume = volume;\n\n    // Set the player volume\n    this.media.volume = volume;\n\n    // If muted, and we're increasing volume manually, reset muted state\n    if (!is.empty(value) && this.muted && volume > 0) {\n      this.muted = false;\n    }\n  }\n\n  /**\n   * Get the current player volume\n   */\n  get volume() {\n    return Number(this.media.volume);\n  }\n\n  /**\n   * Increase volume\n   * @param {boolean} step - How much to decrease by (between 0 and 1)\n   */\n  increaseVolume = (step) => {\n    const volume = this.media.muted ? 0 : this.volume;\n    this.volume = volume + (is.number(step) ? step : 0);\n  };\n\n  /**\n   * Decrease volume\n   * @param {boolean} step - How much to decrease by (between 0 and 1)\n   */\n  decreaseVolume = (step) => {\n    this.increaseVolume(-step);\n  };\n\n  /**\n   * Set muted state\n   * @param {boolean} mute\n   */\n  set muted(mute) {\n    let toggle = mute;\n\n    // Load muted state from storage\n    if (!is.boolean(toggle)) {\n      toggle = this.storage.get('muted');\n    }\n\n    // Use config if all else fails\n    if (!is.boolean(toggle)) {\n      toggle = this.config.muted;\n    }\n\n    // Update config\n    this.config.muted = toggle;\n\n    // Set mute on the player\n    this.media.muted = toggle;\n  }\n\n  /**\n   * Get current muted state\n   */\n  get muted() {\n    return Boolean(this.media.muted);\n  }\n\n  /**\n   * Check if the media has audio\n   */\n  get hasAudio() {\n    // Assume yes for all non HTML5 (as we can't tell...)\n    if (!this.isHTML5) {\n      return true;\n    }\n\n    if (this.isAudio) {\n      return true;\n    }\n\n    // Get audio tracks\n    return (\n      Boolean(this.media.mozHasAudio)\n      || Boolean(this.media.webkitAudioDecodedByteCount)\n      || Boolean(this.media.audioTracks && this.media.audioTracks.length)\n    );\n  }\n\n  /**\n   * Set playback speed\n   * @param {number} input - the speed of playback (0.5-2.0)\n   */\n  set speed(input) {\n    let speed = null;\n\n    if (is.number(input)) {\n      speed = input;\n    }\n\n    if (!is.number(speed)) {\n      speed = this.storage.get('speed');\n    }\n\n    if (!is.number(speed)) {\n      speed = this.config.speed.selected;\n    }\n\n    // Clamp to min/max\n    const { minimumSpeed: min, maximumSpeed: max } = this;\n    speed = clamp(speed, min, max);\n\n    // Update config\n    this.config.speed.selected = speed;\n\n    // Set media speed\n    setTimeout(() => {\n      if (this.media) {\n        this.media.playbackRate = speed;\n      }\n    }, 0);\n  }\n\n  /**\n   * Get current playback speed\n   */\n  get speed() {\n    return Number(this.media.playbackRate);\n  }\n\n  /**\n   * Get the minimum allowed speed\n   */\n  get minimumSpeed() {\n    if (this.isYouTube) {\n      // https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate\n      return Math.min(...this.options.speed);\n    }\n\n    if (this.isVimeo) {\n      // https://github.com/vimeo/player.js/#setplaybackrateplaybackrate-number-promisenumber-rangeerrorerror\n      return 0.5;\n    }\n\n    // https://stackoverflow.com/a/32320020/1191319\n    return 0.0625;\n  }\n\n  /**\n   * Get the maximum allowed speed\n   */\n  get maximumSpeed() {\n    if (this.isYouTube) {\n      // https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate\n      return Math.max(...this.options.speed);\n    }\n\n    if (this.isVimeo) {\n      // https://github.com/vimeo/player.js/#setplaybackrateplaybackrate-number-promisenumber-rangeerrorerror\n      return 2;\n    }\n\n    // https://stackoverflow.com/a/32320020/1191319\n    return 16;\n  }\n\n  /**\n   * Set playback quality\n   * Currently HTML5 & YouTube only\n   * @param {number} input - Quality level\n   */\n  set quality(input) {\n    const config = this.config.quality;\n    const options = this.options.quality;\n\n    if (!options.length) {\n      return;\n    }\n\n    let quality = [\n      !is.empty(input) && Number(input),\n      this.storage.get('quality'),\n      config.selected,\n      config.default,\n    ].find(is.number);\n\n    let updateStorage = true;\n\n    if (!options.includes(quality)) {\n      const value = closest(options, quality);\n      this.debug.warn(`Unsupported quality option: ${quality}, using ${value} instead`);\n      quality = value;\n\n      // Don't update storage if quality is not supported\n      updateStorage = false;\n    }\n\n    // Update config\n    config.selected = quality;\n\n    // Set quality\n    this.media.quality = quality;\n\n    // Save to storage\n    if (updateStorage) {\n      this.storage.set({ quality });\n    }\n  }\n\n  /**\n   * Get current quality level\n   */\n  get quality() {\n    return this.media.quality;\n  }\n\n  /**\n   * Toggle loop\n   * TODO: Finish fancy new logic. Set the indicator on load as user may pass loop as config\n   * @param {boolean} input - Whether to loop or not\n   */\n  set loop(input) {\n    const toggle = is.boolean(input) ? input : this.config.loop.active;\n    this.config.loop.active = toggle;\n    this.media.loop = toggle;\n\n    // Set default to be a true toggle\n    /* const type = ['start', 'end', 'all', 'none', 'toggle'].includes(input) ? input : 'toggle';\n\n        switch (type) {\n            case 'start':\n                if (this.config.loop.end && this.config.loop.end <= this.currentTime) {\n                    this.config.loop.end = null;\n                }\n                this.config.loop.start = this.currentTime;\n                // this.config.loop.indicator.start = this.elements.display.played.value;\n                break;\n\n            case 'end':\n                if (this.config.loop.start >= this.currentTime) {\n                    return this;\n                }\n                this.config.loop.end = this.currentTime;\n                // this.config.loop.indicator.end = this.elements.display.played.value;\n                break;\n\n            case 'all':\n                this.config.loop.start = 0;\n                this.config.loop.end = this.duration - 2;\n                this.config.loop.indicator.start = 0;\n                this.config.loop.indicator.end = 100;\n                break;\n\n            case 'toggle':\n                if (this.config.loop.active) {\n                    this.config.loop.start = 0;\n                    this.config.loop.end = null;\n                } else {\n                    this.config.loop.start = 0;\n                    this.config.loop.end = this.duration - 2;\n                }\n                break;\n\n            default:\n                this.config.loop.start = 0;\n                this.config.loop.end = null;\n                break;\n        } */\n  }\n\n  /**\n   * Get current loop state\n   */\n  get loop() {\n    return Boolean(this.media.loop);\n  }\n\n  /**\n   * Set new media source\n   * @param {object} input - The new source object (see docs)\n   */\n  set source(input) {\n    source.change.call(this, input);\n  }\n\n  /**\n   * Get current source\n   */\n  get source() {\n    return this.media.currentSrc;\n  }\n\n  /**\n   * Get a download URL (either source or custom)\n   */\n  get download() {\n    const { download } = this.config.urls;\n\n    return is.url(download) ? download : this.source;\n  }\n\n  /**\n   * Set the download URL\n   */\n  set download(input) {\n    if (!is.url(input)) {\n      return;\n    }\n\n    this.config.urls.download = input;\n\n    controls.setDownloadUrl.call(this);\n  }\n\n  /**\n   * Set the poster image for a video\n   * @param {string} input - the URL for the new poster image\n   */\n  set poster(input) {\n    if (!this.isVideo) {\n      this.debug.warn('Poster can only be set for video');\n      return;\n    }\n\n    ui.setPoster.call(this, input, false).catch(() => {});\n  }\n\n  /**\n   * Get the current poster image\n   */\n  get poster() {\n    if (!this.isVideo) {\n      return null;\n    }\n\n    return this.media.getAttribute('poster') || this.media.getAttribute('data-poster');\n  }\n\n  /**\n   * Get the current aspect ratio in use\n   */\n  get ratio() {\n    if (!this.isVideo) {\n      return null;\n    }\n\n    const ratio = reduceAspectRatio(getAspectRatio.call(this));\n\n    return is.array(ratio) ? ratio.join(':') : ratio;\n  }\n\n  /**\n   * Set video aspect ratio\n   */\n  set ratio(input) {\n    if (!this.isVideo) {\n      this.debug.warn('Aspect ratio can only be set for video');\n      return;\n    }\n\n    if (!is.string(input) || !validateAspectRatio(input)) {\n      this.debug.error(`Invalid aspect ratio specified (${input})`);\n      return;\n    }\n\n    this.config.ratio = reduceAspectRatio(input);\n\n    setAspectRatio.call(this);\n  }\n\n  /**\n   * Set the autoplay state\n   * @param {boolean} input - Whether to autoplay or not\n   */\n  set autoplay(input) {\n    this.config.autoplay = is.boolean(input) ? input : this.config.autoplay;\n  }\n\n  /**\n   * Get the current autoplay state\n   */\n  get autoplay() {\n    return Boolean(this.config.autoplay);\n  }\n\n  /**\n   * Toggle captions\n   * @param {boolean} input - Whether to enable captions\n   */\n  toggleCaptions(input) {\n    captions.toggle.call(this, input, false);\n  }\n\n  /**\n   * Set the caption track by index\n   * @param {number} input - Caption index\n   */\n  set currentTrack(input) {\n    captions.set.call(this, input, false);\n    captions.setup.call(this);\n  }\n\n  /**\n   * Get the current caption track index (-1 if disabled)\n   */\n  get currentTrack() {\n    const { toggled, currentTrack } = this.captions;\n    return toggled ? currentTrack : -1;\n  }\n\n  /**\n   * Set the wanted language for captions\n   * Since tracks can be added later it won't update the actual caption track until there is a matching track\n   * @param {string} input - Two character ISO language code (e.g. EN, FR, PT, etc)\n   */\n  set language(input) {\n    captions.setLanguage.call(this, input, false);\n  }\n\n  /**\n   * Get the current track's language\n   */\n  get language() {\n    return (captions.getCurrentTrack.call(this) || {}).language;\n  }\n\n  /**\n   * Toggle picture-in-picture playback on WebKit/MacOS\n   * TODO: update player with state, support, enabled\n   * TODO: detect outside changes\n   */\n  set pip(input) {\n    // Bail if no support\n    if (!support.pip) {\n      return;\n    }\n\n    // Toggle based on current state if not passed\n    const toggle = is.boolean(input) ? input : !this.pip;\n\n    // Toggle based on current state\n    // Safari\n    if (is.function(this.media.webkitSetPresentationMode)) {\n      this.media.webkitSetPresentationMode(toggle ? pip.active : pip.inactive);\n    }\n\n    // Chrome\n    if (is.function(this.media.requestPictureInPicture)) {\n      if (!this.pip && toggle) {\n        this.media.requestPictureInPicture();\n      }\n      else if (this.pip && !toggle) {\n        document.exitPictureInPicture();\n      }\n    }\n  }\n\n  /**\n   * Get the current picture-in-picture state\n   */\n  get pip() {\n    if (!support.pip) {\n      return null;\n    }\n\n    // Safari\n    if (!is.empty(this.media.webkitPresentationMode)) {\n      return this.media.webkitPresentationMode === pip.active;\n    }\n\n    // Chrome\n    return this.media === document.pictureInPictureElement;\n  }\n\n  /**\n   * Sets the preview thumbnails for the current source\n   */\n  setPreviewThumbnails(thumbnailSource) {\n    if (this.previewThumbnails && this.previewThumbnails.loaded) {\n      this.previewThumbnails.destroy();\n      this.previewThumbnails = null;\n    }\n\n    Object.assign(this.config.previewThumbnails, thumbnailSource);\n\n    // Create new instance if it is still enabled\n    if (this.config.previewThumbnails.enabled) {\n      this.previewThumbnails = new PreviewThumbnails(this);\n    }\n  }\n\n  /**\n   * Trigger the airplay dialog\n   * TODO: update player with state, support, enabled\n   */\n  airplay = () => {\n    // Show dialog if supported\n    if (support.airplay) {\n      this.media.webkitShowPlaybackTargetPicker();\n    }\n  };\n\n  /**\n   * Toggle the player controls\n   * @param {boolean} [toggle] - Whether to show the controls\n   */\n  toggleControls = (toggle) => {\n    // Don't toggle if missing UI support or if it's audio\n    if (this.supported.ui && !this.isAudio) {\n      // Get state before change\n      const isHidden = hasClass(this.elements.container, this.config.classNames.hideControls);\n      // Negate the argument if not undefined since adding the class to hides the controls\n      const force = typeof toggle === 'undefined' ? undefined : !toggle;\n      // Apply and get updated state\n      const hiding = toggleClass(this.elements.container, this.config.classNames.hideControls, force);\n\n      // Close menu\n      if (\n        hiding\n        && is.array(this.config.controls)\n        && this.config.controls.includes('settings')\n        && !is.empty(this.config.settings)\n      ) {\n        controls.toggleMenu.call(this, false);\n      }\n\n      // Trigger event on change\n      if (hiding !== isHidden) {\n        const eventName = hiding ? 'controlshidden' : 'controlsshown';\n        triggerEvent.call(this, this.media, eventName);\n      }\n\n      return !hiding;\n    }\n\n    return false;\n  };\n\n  /**\n   * Add event listeners\n   * @param {string} event - Event type\n   * @param {Function} callback - Callback for when event occurs\n   */\n  on = (event, callback) => {\n    on.call(this, this.elements.container, event, callback);\n  };\n\n  /**\n   * Add event listeners once\n   * @param {string} event - Event type\n   * @param {Function} callback - Callback for when event occurs\n   */\n  once = (event, callback) => {\n    once.call(this, this.elements.container, event, callback);\n  };\n\n  /**\n   * Remove event listeners\n   * @param {string} event - Event type\n   * @param {Function} callback - Callback for when event occurs\n   */\n  off = (event, callback) => {\n    off(this.elements.container, event, callback);\n  };\n\n  /**\n   * Destroy an instance\n   * Event listeners are removed when elements are removed\n   * http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory\n   * @param {Function} callback - Callback for when destroy is complete\n   * @param {boolean} soft - Whether it's a soft destroy (for source changes etc)\n   */\n  destroy = (callback, soft = false) => {\n    if (!this.ready) {\n      return;\n    }\n\n    const done = () => {\n      // Reset overflow (incase destroyed while in fullscreen)\n      document.body.style.overflow = '';\n\n      // GC for embed\n      this.embed = null;\n\n      // If it's a soft destroy, make minimal changes\n      if (soft) {\n        if (Object.keys(this.elements).length) {\n          // Remove elements\n          removeElement(this.elements.buttons.play);\n          removeElement(this.elements.captions);\n          removeElement(this.elements.controls);\n          removeElement(this.elements.wrapper);\n\n          // Clear for GC\n          this.elements.buttons.play = null;\n          this.elements.captions = null;\n          this.elements.controls = null;\n          this.elements.wrapper = null;\n        }\n\n        // Callback\n        if (is.function(callback)) {\n          callback();\n        }\n      }\n      else {\n        // Unbind listeners\n        unbindListeners.call(this);\n\n        // Cancel current network requests\n        html5.cancelRequests.call(this);\n\n        // Replace the container with the original element provided\n        replaceElement(this.elements.original, this.elements.container);\n\n        // Event\n        triggerEvent.call(this, this.elements.original, 'destroyed', true);\n\n        // Callback\n        if (is.function(callback)) {\n          callback.call(this.elements.original);\n        }\n\n        // Reset state\n        this.ready = false;\n\n        // Clear for garbage collection\n        setTimeout(() => {\n          this.elements = null;\n          this.media = null;\n        }, 200);\n      }\n    };\n\n    // Stop playback\n    this.stop();\n\n    // Clear timeouts\n    clearTimeout(this.timers.loading);\n    clearTimeout(this.timers.controls);\n    clearTimeout(this.timers.resized);\n\n    // Provider specific stuff\n    if (this.isHTML5) {\n      // Restore native video controls\n      ui.toggleNativeControls.call(this, true);\n\n      // Clean up\n      done();\n    }\n    else if (this.isYouTube) {\n      // Clear timers\n      clearInterval(this.timers.buffering);\n      clearInterval(this.timers.playing);\n\n      // Destroy YouTube API\n      if (this.embed !== null && is.function(this.embed.destroy)) {\n        this.embed.destroy();\n      }\n\n      // Clean up\n      done();\n    }\n    else if (this.isVimeo) {\n      // Destroy Vimeo API\n      // then clean up (wait, to prevent postmessage errors)\n      if (this.embed !== null) {\n        this.embed.unload().then(done);\n      }\n\n      // Vimeo does not always return\n      setTimeout(done, 200);\n    }\n  };\n\n  /**\n   * Check for support for a mime type (HTML5 only)\n   * @param {string} type - Mime type\n   */\n  supports = type => support.mime.call(this, type);\n\n  /**\n   * Check for support\n   * @param {string} type - Player type (audio/video)\n   * @param {string} provider - Provider (html5/youtube/vimeo)\n   */\n  static supported(type, provider) {\n    return support.check(type, provider);\n  }\n\n  /**\n   * Load an SVG sprite into the page\n   * @param {string} url - URL for the SVG sprite\n   * @param {string} [id] - Unique ID\n   */\n  static loadSprite(url, id) {\n    return loadSprite(url, id);\n  }\n\n  /**\n   * Setup multiple instances\n   * @param {*} selector\n   * @param {object} options\n   */\n  static setup(selector, options = {}) {\n    let targets = null;\n\n    if (is.string(selector)) {\n      targets = Array.from(document.querySelectorAll(selector));\n    }\n    else if (is.nodeList(selector)) {\n      targets = Array.from(selector);\n    }\n    else if (is.array(selector)) {\n      targets = selector.filter(is.element);\n    }\n\n    if (is.empty(targets)) {\n      return null;\n    }\n\n    return targets.map(t => new Plyr(t, options));\n  }\n}\n\nPlyr.defaults = cloneDeep(defaults);\n\nexport default Plyr;\n"
  },
  {
    "path": "src/js/plyr.polyfilled.js",
    "content": "// ==========================================================================\n// Plyr Polyfilled Build\n// plyr.js v3.8.4\n// https://github.com/sampotts/plyr\n// License: The MIT License (MIT)\n// ==========================================================================\n\nimport Plyr from './plyr';\nimport 'custom-event-polyfill';\n\nimport 'url-polyfill';\n\nexport default Plyr;\n"
  },
  {
    "path": "src/js/source.js",
    "content": "// ==========================================================================\n// Plyr source update\n// ==========================================================================\n\nimport { providers } from './config/types';\nimport html5 from './html5';\nimport media from './media';\nimport PreviewThumbnails from './plugins/preview-thumbnails';\nimport support from './support';\nimport ui from './ui';\nimport { createElement, insertElement, removeElement } from './utils/elements';\nimport is from './utils/is';\nimport { getDeep } from './utils/objects';\n\nconst source = {\n  // Add elements to HTML5 media (source, tracks, etc)\n  insertElements(type, attributes) {\n    if (is.string(attributes)) {\n      insertElement(type, this.media, {\n        src: attributes,\n      });\n    }\n    else if (is.array(attributes)) {\n      attributes.forEach((attribute) => {\n        insertElement(type, this.media, attribute);\n      });\n    }\n  },\n\n  // Update source\n  // Sources are not checked for support so be careful\n  change(input) {\n    if (!getDeep(input, 'sources.length')) {\n      this.debug.warn('Invalid source format');\n      return;\n    }\n\n    // Cancel current network requests\n    html5.cancelRequests.call(this);\n\n    // Destroy instance and re-setup\n    this.destroy(() => {\n      // Reset quality options\n      this.options.quality = [];\n\n      // Remove elements\n      removeElement(this.media);\n      this.media = null;\n\n      // Reset class name\n      if (is.element(this.elements.container)) {\n        this.elements.container.removeAttribute('class');\n      }\n\n      // Set the type and provider\n      const { sources, type } = input;\n      const [{ provider = providers.html5, src }] = sources;\n      const tagName = provider === 'html5' ? type : 'div';\n      const attributes = provider === 'html5' ? {} : { src };\n\n      Object.assign(this, {\n        provider,\n        type,\n        // Check for support\n        supported: support.check(type, provider, this.config.playsinline),\n        // Create new element\n        media: createElement(tagName, attributes),\n      });\n\n      // Inject the new element\n      this.elements.container.appendChild(this.media);\n\n      // Autoplay the new source?\n      if (is.boolean(input.autoplay)) {\n        this.config.autoplay = input.autoplay;\n      }\n\n      // Set attributes for audio and video\n      if (this.isHTML5) {\n        if (this.config.crossorigin) {\n          this.media.setAttribute('crossorigin', '');\n        }\n        if (this.config.autoplay) {\n          this.media.setAttribute('autoplay', '');\n        }\n        if (!is.empty(input.poster)) {\n          this.poster = input.poster;\n        }\n        if (this.config.loop.active) {\n          this.media.setAttribute('loop', '');\n        }\n        if (this.config.muted) {\n          this.media.setAttribute('muted', '');\n        }\n        if (this.config.playsinline) {\n          this.media.setAttribute('playsinline', '');\n        }\n      }\n\n      // Restore class hook\n      ui.addStyleHook.call(this);\n\n      // Set new sources for html5\n      if (this.isHTML5) {\n        source.insertElements.call(this, 'source', sources);\n      }\n\n      // Set video title\n      this.config.title = input.title;\n\n      // Set up from scratch\n      media.setup.call(this);\n\n      // HTML5 stuff\n      if (this.isHTML5) {\n        // Setup captions\n        if (Object.keys(input).includes('tracks')) {\n          source.insertElements.call(this, 'track', input.tracks);\n        }\n      }\n\n      // If HTML5 or embed but not fully supported, setupInterface and call ready now\n      if (this.isHTML5 || (this.isEmbed && !this.supported.ui)) {\n        // Setup interface\n        ui.build.call(this);\n      }\n\n      // Load HTML5 sources\n      if (this.isHTML5) {\n        this.media.load();\n      }\n\n      // Update previewThumbnails config & reload plugin\n      if (!is.empty(input.previewThumbnails)) {\n        Object.assign(this.config.previewThumbnails, input.previewThumbnails);\n\n        // Cleanup previewThumbnails plugin if it was loaded\n        if (this.previewThumbnails && this.previewThumbnails.loaded) {\n          this.previewThumbnails.destroy();\n          this.previewThumbnails = null;\n        }\n\n        // Create new instance if it is still enabled\n        if (this.config.previewThumbnails.enabled) {\n          this.previewThumbnails = new PreviewThumbnails(this);\n        }\n      }\n\n      // Update the fullscreen support\n      this.fullscreen.update();\n    }, true);\n  },\n};\n\nexport default source;\n"
  },
  {
    "path": "src/js/storage.js",
    "content": "// ==========================================================================\n// Plyr storage\n// ==========================================================================\n\nimport is from './utils/is';\nimport { extend } from './utils/objects';\n\nclass Storage {\n  constructor(player) {\n    this.enabled = player.config.storage.enabled;\n    this.key = player.config.storage.key;\n  }\n\n  // Check for actual support (see if we can use it)\n  static get supported() {\n    try {\n      if (!('localStorage' in window)) return false;\n      const test = '___test';\n      // Try to use it (it might be disabled, e.g. user is in private mode)\n      // see: https://github.com/sampotts/plyr/issues/131\n      window.localStorage.setItem(test, test);\n      window.localStorage.removeItem(test);\n      return true;\n    }\n    catch {\n      return false;\n    }\n  }\n\n  get = (key) => {\n    if (!Storage.supported || !this.enabled) {\n      return null;\n    }\n    const store = window.localStorage.getItem(this.key);\n    if (is.empty(store)) return null;\n    const json = JSON.parse(store);\n    return is.string(key) && key.length ? json[key] : json;\n  };\n\n  set = (object) => {\n    // Bail if we don't have localStorage support or it's disabled\n    if (!Storage.supported || !this.enabled) {\n      return;\n    }\n\n    // Can only store objects\n    if (!is.object(object)) {\n      return;\n    }\n\n    // Get current storage\n    let storage = this.get();\n\n    // Default to empty object\n    if (is.empty(storage)) {\n      storage = {};\n    }\n\n    // Update the working copy of the values\n    extend(storage, object);\n\n    // Update storage\n    try {\n      window.localStorage.setItem(this.key, JSON.stringify(storage));\n    }\n    catch { }\n  };\n}\n\nexport default Storage;\n"
  },
  {
    "path": "src/js/support.js",
    "content": "// ==========================================================================\n// Plyr support checks\n// ==========================================================================\n\nimport { transitionEndEvent } from './utils/animation';\nimport { createElement } from './utils/elements';\nimport is from './utils/is';\n\n// Default codecs for checking mimetype support\nconst defaultCodecs = {\n  'audio/ogg': 'vorbis',\n  'audio/wav': '1',\n  'video/webm': 'vp8, vorbis',\n  'video/mp4': 'avc1.42E01E, mp4a.40.2',\n  'video/ogg': 'theora',\n};\n\n// Check for feature support\nconst support = {\n  // Basic support\n  audio: 'canPlayType' in document.createElement('audio'),\n  video: 'canPlayType' in document.createElement('video'),\n\n  // Check for support\n  // Basic functionality vs full UI\n  check(type, provider) {\n    const api = support[type] || provider !== 'html5';\n    const ui = api && support.rangeInput;\n\n    return {\n      api,\n      ui,\n    };\n  },\n\n  // Picture-in-picture support\n  pip: (() => {\n    return (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture);\n  })(),\n\n  // Airplay support\n  // Safari only currently\n  airplay: is.function(window.WebKitPlaybackTargetAvailabilityEvent),\n\n  // Inline playback support\n  // https://webkit.org/blog/6784/new-video-policies-for-ios/\n  playsinline: 'playsInline' in document.createElement('video'),\n\n  // Check for mime type support against a player instance\n  // Credits: http://diveintohtml5.info/everything.html\n  // Related: http://www.leanbackplayer.com/test/h5mt.html\n  mime(input) {\n    if (is.empty(input)) {\n      return false;\n    }\n\n    const [mediaType] = input.split('/');\n    let type = input;\n\n    // Verify we're using HTML5 and there's no media type mismatch\n    if (!this.isHTML5 || mediaType !== this.type) {\n      return false;\n    }\n\n    // Add codec if required\n    if (Object.keys(defaultCodecs).includes(type)) {\n      type += `; codecs=\"${defaultCodecs[input]}\"`;\n    }\n\n    try {\n      return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));\n    }\n    catch {\n      return false;\n    }\n  },\n\n  // Check for textTracks support\n  textTracks: 'textTracks' in document.createElement('video'),\n\n  // <input type=\"range\"> Sliders\n  rangeInput: (() => {\n    const range = document.createElement('input');\n    range.type = 'range';\n    return range.type === 'range';\n  })(),\n\n  // Touch\n  // NOTE: Remember a device can be mouse + touch enabled so we check on first touch event\n  touch: 'ontouchstart' in document.documentElement,\n\n  // Detect transitions support\n  transitions: transitionEndEvent !== false,\n\n  // Reduced motion iOS & MacOS setting\n  // https://webkit.org/blog/7551/responsive-design-for-motion/\n  reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches,\n};\n\nexport default support;\n"
  },
  {
    "path": "src/js/ui.js",
    "content": "// ==========================================================================\n// Plyr UI\n// ==========================================================================\n\nimport captions from './captions';\nimport controls from './controls';\nimport support from './support';\nimport { getElement, toggleClass } from './utils/elements';\nimport { ready, triggerEvent } from './utils/events';\nimport i18n from './utils/i18n';\nimport is from './utils/is';\nimport loadImage from './utils/load-image';\n\nconst ui = {\n  addStyleHook() {\n    toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true);\n    toggleClass(this.elements.container, this.config.classNames.uiSupported, this.supported.ui);\n  },\n\n  // Toggle native HTML5 media controls\n  toggleNativeControls(toggle = false) {\n    if (toggle && this.isHTML5) {\n      this.media.setAttribute('controls', '');\n    }\n    else {\n      this.media.removeAttribute('controls');\n    }\n  },\n\n  // Setup the UI\n  build() {\n    // Re-attach media element listeners\n    // TODO: Use event bubbling?\n    this.listeners.media();\n\n    // Don't setup interface if no support\n    if (!this.supported.ui) {\n      this.debug.warn(`Basic support only for ${this.provider} ${this.type}`);\n\n      // Restore native controls\n      ui.toggleNativeControls.call(this, true);\n\n      // Bail\n      return;\n    }\n\n    // Inject custom controls if not present\n    if (!is.element(this.elements.controls)) {\n      // Inject custom controls\n      controls.inject.call(this);\n\n      // Re-attach control listeners\n      this.listeners.controls();\n    }\n\n    // Remove native controls\n    ui.toggleNativeControls.call(this);\n\n    // Setup captions for HTML5\n    if (this.isHTML5) {\n      captions.setup.call(this);\n    }\n\n    // Reset volume\n    this.volume = null;\n\n    // Reset mute state\n    this.muted = null;\n\n    // Reset loop state\n    this.loop = null;\n\n    // Reset quality setting\n    this.quality = null;\n\n    // Reset speed\n    this.speed = null;\n\n    // Reset volume display\n    controls.updateVolume.call(this);\n\n    // Reset time display\n    controls.timeUpdate.call(this);\n\n    // Reset duration display\n    controls.durationUpdate.call(this);\n\n    // Update the UI\n    ui.checkPlaying.call(this);\n\n    // Check for picture-in-picture support\n    toggleClass(\n      this.elements.container,\n      this.config.classNames.pip.supported,\n      support.pip && this.isHTML5 && this.isVideo,\n    );\n\n    // Check for airplay support\n    toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5);\n\n    // Add touch class\n    toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch);\n\n    // Ready for API calls\n    this.ready = true;\n\n    // Ready event at end of execution stack\n    setTimeout(() => {\n      triggerEvent.call(this, this.media, 'ready');\n    }, 0);\n\n    // Set the title\n    ui.setTitle.call(this);\n\n    // Assure the poster image is set, if the property was added before the element was created\n    if (this.poster) {\n      ui.setPoster.call(this, this.poster, false).catch(() => {});\n    }\n\n    // Manually set the duration if user has overridden it.\n    // The event listeners for it doesn't get called if preload is disabled (#701)\n    if (this.config.duration) {\n      controls.durationUpdate.call(this);\n    }\n\n    // Media metadata\n    if (this.config.mediaMetadata) {\n      controls.setMediaMetadata.call(this);\n    }\n  },\n\n  // Setup aria attribute for play and iframe title\n  setTitle() {\n    // Find the current text\n    let label = i18n.get('play', this.config);\n\n    // If there's a media title set, use that for the label\n    if (is.string(this.config.title) && !is.empty(this.config.title)) {\n      label += `, ${this.config.title}`;\n    }\n\n    // If there's a play button, set label\n    Array.from(this.elements.buttons.play || []).forEach((button) => {\n      button.setAttribute('aria-label', label);\n    });\n\n    // Set iframe title\n    // https://github.com/sampotts/plyr/issues/124\n    if (this.isEmbed) {\n      const iframe = getElement.call(this, 'iframe');\n\n      if (!is.element(iframe)) {\n        return;\n      }\n\n      // Default to media type\n      const title = !is.empty(this.config.title) ? this.config.title : 'video';\n      const format = i18n.get('frameTitle', this.config);\n\n      iframe.setAttribute('title', format.replace('{title}', title));\n    }\n  },\n\n  // Toggle poster\n  togglePoster(enable) {\n    toggleClass(this.elements.container, this.config.classNames.posterEnabled, enable);\n  },\n\n  // Set the poster image (async)\n  // Used internally for the poster setter, with the passive option forced to false\n  setPoster(poster, passive = true) {\n    // Don't override if call is passive\n    if (passive && this.poster) {\n      return Promise.reject(new Error('Poster already set'));\n    }\n\n    // Set property synchronously to respect the call order\n    this.media.setAttribute('data-poster', poster);\n\n    // Show the poster\n    this.elements.poster.removeAttribute('hidden');\n\n    // Wait until ui is ready\n    return (\n      ready\n        .call(this)\n        // Load image\n        .then(() => loadImage(poster))\n        .catch((error) => {\n          // Hide poster on error unless it's been set by another call\n          if (poster === this.poster) {\n            ui.togglePoster.call(this, false);\n          }\n          // Rethrow\n          throw error;\n        })\n        .then(() => {\n          // Prevent race conditions\n          if (poster !== this.poster) {\n            throw new Error('setPoster cancelled by later call to setPoster');\n          }\n        })\n        .then(() => {\n          Object.assign(this.elements.poster.style, {\n            backgroundImage: `url('${poster}')`,\n            // Reset backgroundSize as well (since it can be set to \"cover\" for padded thumbnails for youtube)\n            backgroundSize: '',\n          });\n\n          ui.togglePoster.call(this, true);\n\n          return poster;\n        })\n    );\n  },\n\n  // Check playing state\n  checkPlaying(event) {\n    // Class hooks\n    toggleClass(this.elements.container, this.config.classNames.playing, this.playing);\n    toggleClass(this.elements.container, this.config.classNames.paused, this.paused);\n    toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);\n\n    // Set state\n    Array.from(this.elements.buttons.play || []).forEach((target) => {\n      Object.assign(target, { pressed: this.playing });\n      target.setAttribute('aria-label', i18n.get(this.playing ? 'pause' : 'play', this.config));\n    });\n\n    // Only update controls on non timeupdate events\n    if (is.event(event) && event.type === 'timeupdate') {\n      return;\n    }\n\n    // Toggle controls\n    ui.toggleControls.call(this);\n  },\n\n  // Check if media is loading\n  checkLoading(event) {\n    this.loading = ['stalled', 'waiting'].includes(event.type);\n\n    // Clear timer\n    clearTimeout(this.timers.loading);\n\n    // Timer to prevent flicker when seeking\n    this.timers.loading = setTimeout(\n      () => {\n        // Update progress bar loading class state\n        toggleClass(this.elements.container, this.config.classNames.loading, this.loading);\n\n        // Update controls visibility\n        ui.toggleControls.call(this);\n      },\n      this.loading ? 250 : 0,\n    );\n  },\n\n  // Toggle controls based on state and `force` argument\n  toggleControls(force) {\n    const { controls: controlsElement } = this.elements;\n\n    if (controlsElement && this.config.hideControls) {\n      // Don't hide controls if a touch-device user recently seeked. (Must be limited to touch devices, or it occasionally prevents desktop controls from hiding.)\n      const recentTouchSeek = this.touch && this.lastSeekTime + 2000 > Date.now();\n\n      // Show controls if force, loading, paused, button interaction, or recent seek, otherwise hide\n      this.toggleControls(\n        Boolean(\n          force || this.loading || this.paused || controlsElement.pressed || controlsElement.hover || recentTouchSeek,\n        ),\n      );\n    }\n  },\n\n  // Migrate any custom properties from the media to the parent\n  migrateStyles() {\n    // Loop through values (as they are the keys when the object is spread 🤔)\n    Object.values({ ...this.media.style })\n      // We're only fussed about Plyr specific properties\n      .filter(key => !is.empty(key) && is.string(key) && key.startsWith('--plyr'))\n      .forEach((key) => {\n        // Set on the container\n        this.elements.container.style.setProperty(key, this.media.style.getPropertyValue(key));\n\n        // Clean up from media element\n        this.media.style.removeProperty(key);\n      });\n\n    // Remove attribute if empty\n    if (is.empty(this.media.style)) {\n      this.media.removeAttribute('style');\n    }\n  },\n};\n\nexport default ui;\n"
  },
  {
    "path": "src/js/utils/animation.js",
    "content": "// ==========================================================================\n// Animation utils\n// ==========================================================================\n\nimport is from './is';\n\nexport const transitionEndEvent = (() => {\n  const element = document.createElement('span');\n\n  const events = {\n    WebkitTransition: 'webkitTransitionEnd',\n    MozTransition: 'transitionend',\n    OTransition: 'oTransitionEnd otransitionend',\n    transition: 'transitionend',\n  };\n\n  const type = Object.keys(events).find(event => element.style[event] !== undefined);\n\n  return is.string(type) ? events[type] : false;\n})();\n\n// Force repaint of element\nexport function repaint(element, delay) {\n  setTimeout(() => {\n    try {\n      element.hidden = true;\n      // eslint-disable-next-line no-unused-expressions\n      element.offsetHeight;\n      element.hidden = false;\n    }\n    catch {}\n  }, delay);\n}\n"
  },
  {
    "path": "src/js/utils/arrays.js",
    "content": "// ==========================================================================\n// Array utils\n// ==========================================================================\n\nimport is from './is';\n\n// Remove duplicates in an array\nexport function dedupe(array) {\n  if (!is.array(array)) {\n    return array;\n  }\n\n  return array.filter((item, index) => array.indexOf(item) === index);\n}\n\n// Get the closest value in an array\nexport function closest(array, value) {\n  if (!is.array(array) || !array.length) {\n    return null;\n  }\n\n  return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));\n}\n"
  },
  {
    "path": "src/js/utils/browser.js",
    "content": "// ==========================================================================\n// Browser sniffing\n// Unfortunately, due to mixed support, UA sniffing is required\n// ==========================================================================\n\nconst isIE = Boolean(window.document.documentMode);\nconst isEdge = /Edge/.test(navigator.userAgent);\nconst isWebKit = 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent);\nconst isIPhone = /iPhone|iPod/i.test(navigator.userAgent) && navigator.maxTouchPoints > 1;\n// navigator.platform may be deprecated but this check is still required\nconst isIPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;\nconst isIos = /iPad|iPhone|iPod/i.test(navigator.userAgent) && navigator.maxTouchPoints > 1;\n\nexport default {\n  isIE,\n  isEdge,\n  isWebKit,\n  isIPhone,\n  isIPadOS,\n  isIos,\n};\n"
  },
  {
    "path": "src/js/utils/elements.js",
    "content": "// ==========================================================================\n// Element utils\n// ==========================================================================\n\nimport is from './is';\nimport { extend } from './objects';\n\n// Wrap an element\nexport function wrap(elements, wrapper) {\n  // Convert `elements` to an array, if necessary.\n  const targets = elements.length ? elements : [elements];\n\n  // Loops backwards to prevent having to clone the wrapper on the\n  // first element (see `child` below).\n  Array.from(targets)\n    .reverse()\n    .forEach((element, index) => {\n      const child = index > 0 ? wrapper.cloneNode(true) : wrapper;\n      // Cache the current parent and sibling.\n      const parent = element.parentNode;\n      const sibling = element.nextSibling;\n\n      // Wrap the element (is automatically removed from its current\n      // parent).\n      child.appendChild(element);\n\n      // If the element had a sibling, insert the wrapper before\n      // the sibling to maintain the HTML structure; otherwise, just\n      // append it to the parent.\n      if (sibling) {\n        parent.insertBefore(child, sibling);\n      }\n      else {\n        parent.appendChild(child);\n      }\n    });\n}\n\n// Set attributes\nexport function setAttributes(element, attributes) {\n  if (!is.element(element) || is.empty(attributes)) return;\n\n  // Assume null and undefined attributes should be left out,\n  // Setting them would otherwise convert them to \"null\" and \"undefined\"\n  Object.entries(attributes)\n    .filter(([, value]) => !is.nullOrUndefined(value))\n    .forEach(([key, value]) => element.setAttribute(key, value));\n}\n\n// Create a DocumentFragment\nexport function createElement(type, attributes, text) {\n  // Create a new <element>\n  const element = document.createElement(type);\n\n  // Set all passed attributes\n  if (is.object(attributes)) {\n    setAttributes(element, attributes);\n  }\n\n  // Add text node\n  if (is.string(text)) {\n    element.textContent = text;\n  }\n\n  // Return built element\n  return element;\n}\n\n// Insert an element after another\nexport function insertAfter(element, target) {\n  if (!is.element(element) || !is.element(target)) return;\n\n  target.parentNode.insertBefore(element, target.nextSibling);\n}\n\n// Insert a DocumentFragment\nexport function insertElement(type, parent, attributes, text) {\n  if (!is.element(parent)) return;\n\n  parent.appendChild(createElement(type, attributes, text));\n}\n\n// Remove element(s)\nexport function removeElement(element) {\n  if (is.nodeList(element) || is.array(element)) {\n    Array.from(element).forEach(removeElement);\n    return;\n  }\n\n  if (!is.element(element) || !is.element(element.parentNode)) {\n    return;\n  }\n\n  element.parentNode.removeChild(element);\n}\n\n// Remove all child elements\nexport function emptyElement(element) {\n  if (!is.element(element)) return;\n\n  let { length } = element.childNodes;\n\n  while (length > 0) {\n    element.removeChild(element.lastChild);\n    length -= 1;\n  }\n}\n\n// Replace element\nexport function replaceElement(newChild, oldChild) {\n  if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) return null;\n\n  oldChild.parentNode.replaceChild(newChild, oldChild);\n\n  return newChild;\n}\n\n// Get an attribute object from a string selector\nexport function getAttributesFromSelector(sel, existingAttributes) {\n  // For example:\n  // '.test' to { class: 'test' }\n  // '#test' to { id: 'test' }\n  // '[data-test=\"test\"]' to { 'data-test': 'test' }\n\n  if (!is.string(sel) || is.empty(sel)) return {};\n\n  const attributes = {};\n  const existing = extend({}, existingAttributes);\n\n  sel.split(',').forEach((s) => {\n    // Remove whitespace\n    const selector = s.trim();\n    const className = selector.replace('.', '');\n    const stripped = selector.replace(/[[\\]]/g, '');\n    // Get the parts and value\n    const parts = stripped.split('=');\n    const [key] = parts;\n    const value = parts.length > 1 ? parts[1].replace(/[\"']/g, '') : '';\n    // Get the first character\n    const start = selector.charAt(0);\n\n    switch (start) {\n      case '.':\n        // Add to existing classname\n        if (is.string(existing.class)) {\n          attributes.class = `${existing.class} ${className}`;\n        }\n        else {\n          attributes.class = className;\n        }\n        break;\n\n      case '#':\n        // ID selector\n        attributes.id = selector.replace('#', '');\n        break;\n\n      case '[':\n        // Attribute selector\n        attributes[key] = value;\n\n        break;\n\n      default:\n        break;\n    }\n  });\n\n  return extend(existing, attributes);\n}\n\n// Toggle hidden\nexport function toggleHidden(element, hidden) {\n  if (!is.element(element)) return;\n\n  let hide = hidden;\n\n  if (!is.boolean(hide)) {\n    hide = !element.hidden;\n  }\n\n  element.hidden = hide;\n}\n\n// Mirror Element.classList.toggle, with IE compatibility for \"force\" argument\nexport function toggleClass(element, className, force) {\n  if (is.nodeList(element)) {\n    return Array.from(element).map(e => toggleClass(e, className, force));\n  }\n\n  if (is.element(element)) {\n    let method = 'toggle';\n    if (typeof force !== 'undefined') {\n      method = force ? 'add' : 'remove';\n    }\n\n    element.classList[method](className);\n    return element.classList.contains(className);\n  }\n\n  return false;\n}\n\n// Has class name\nexport function hasClass(element, className) {\n  return is.element(element) && element.classList.contains(className);\n}\n\n// Element matches selector\nexport function matches(element, selector) {\n  const { prototype } = Element;\n\n  function match() {\n    return Array.from(document.querySelectorAll(selector)).includes(this);\n  }\n\n  const method\n    = prototype.matches\n      || prototype.webkitMatchesSelector\n      || prototype.mozMatchesSelector\n      || prototype.msMatchesSelector\n      || match;\n\n  return method.call(element, selector);\n}\n\n// Closest ancestor element matching selector (also tests element itself)\nexport function closest(element, selector) {\n  const { prototype } = Element;\n\n  // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill\n  function closestElement() {\n    let el = this;\n\n    do {\n      if (matches.matches(el, selector)) return el;\n      el = el.parentElement || el.parentNode;\n    } while (el !== null && el.nodeType === 1);\n    return null;\n  }\n\n  const method = prototype.closest || closestElement;\n\n  return method.call(element, selector);\n}\n\n// Find all elements\nexport function getElements(selector) {\n  return this.elements.container.querySelectorAll(selector);\n}\n\n// Find a single element\nexport function getElement(selector) {\n  return this.elements.container.querySelector(selector);\n}\n\n// Set focus and tab focus class\nexport function setFocus(element = null, focusVisible = false) {\n  if (!is.element(element)) return;\n\n  // Set regular focus\n  element.focus({ preventScroll: true, focusVisible });\n}\n"
  },
  {
    "path": "src/js/utils/events.js",
    "content": "// ==========================================================================\n// Event utils\n// ==========================================================================\n\nimport is from './is';\n\n// Check for passive event listener support\n// https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md\n// https://www.youtube.com/watch?v=NPM6172J22g\nconst supportsPassiveListeners = (() => {\n  // Test via a getter in the options object to see if the passive property is accessed\n  let supported = false;\n  try {\n    const options = Object.defineProperty({}, 'passive', {\n      get() {\n        supported = true;\n        return null;\n      },\n    });\n    window.addEventListener('test', null, options);\n    window.removeEventListener('test', null, options);\n  }\n  catch {}\n\n  return supported;\n})();\n\n// Toggle event listener\nexport function toggleListener(element, event, callback, toggle = false, passive = true, capture = false) {\n  // Bail if no element, event, or callback\n  if (!element || !('addEventListener' in element) || is.empty(event) || !is.function(callback)) {\n    return;\n  }\n\n  // Allow multiple events\n  const events = event.split(' ');\n  // Build options\n  // Default to just the capture boolean for browsers with no passive listener support\n  let options = capture;\n\n  // If passive events listeners are supported\n  if (supportsPassiveListeners) {\n    options = {\n      // Whether the listener can be passive (i.e. default never prevented)\n      passive,\n      // Whether the listener is a capturing listener or not\n      capture,\n    };\n  }\n\n  // If a single node is passed, bind the event listener\n  events.forEach((type) => {\n    if (this && this.eventListeners && toggle) {\n      // Cache event listener\n      this.eventListeners.push({ element, type, callback, options });\n    }\n\n    element[toggle ? 'addEventListener' : 'removeEventListener'](type, callback, options);\n  });\n}\n\n// Bind event handler\nexport function on(element, events = '', callback, passive = true, capture = false) {\n  toggleListener.call(this, element, events, callback, true, passive, capture);\n}\n\n// Unbind event handler\nexport function off(element, events = '', callback, passive = true, capture = false) {\n  toggleListener.call(this, element, events, callback, false, passive, capture);\n}\n\n// Bind once-only event handler\nexport function once(element, events = '', callback, passive = true, capture = false) {\n  const onceCallback = (...args) => {\n    off(element, events, onceCallback, passive, capture);\n    callback.apply(this, args);\n  };\n\n  toggleListener.call(this, element, events, onceCallback, true, passive, capture);\n}\n\n// Trigger event\nexport function triggerEvent(element, type = '', bubbles = false, detail = {}) {\n  // Bail if no element\n  if (!is.element(element) || is.empty(type)) {\n    return;\n  }\n\n  // Create and dispatch the event\n  const event = new CustomEvent(type, {\n    bubbles,\n    detail: { ...detail, plyr: this },\n  });\n\n  // Dispatch the event\n  element.dispatchEvent(event);\n}\n\n// Unbind all cached event listeners\nexport function unbindListeners() {\n  if (this && this.eventListeners) {\n    this.eventListeners.forEach((item) => {\n      const { element, type, callback, options } = item;\n      element.removeEventListener(type, callback, options);\n    });\n\n    this.eventListeners = [];\n  }\n}\n\n// Run method when / if player is ready\nexport function ready() {\n  return new Promise(resolve =>\n    this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve),\n  ).then(() => {});\n}\n"
  },
  {
    "path": "src/js/utils/fetch.js",
    "content": "// ==========================================================================\n// Fetch wrapper\n// Using XHR to avoid issues with older browsers\n// ==========================================================================\n\nexport default function fetch(url, responseType = 'text', withCredentials = false) {\n  return new Promise((resolve, reject) => {\n    try {\n      const request = new XMLHttpRequest();\n\n      // Check for CORS support\n      if (!('withCredentials' in request)) return;\n\n      // Set to true if needed for CORS\n      if (withCredentials) {\n        request.withCredentials = true;\n      }\n\n      request.addEventListener('load', () => {\n        if (responseType === 'text') {\n          try {\n            resolve(JSON.parse(request.responseText));\n          }\n          catch {\n            resolve(request.responseText);\n          }\n        }\n        else {\n          resolve(request.response);\n        }\n      });\n\n      request.addEventListener('error', () => {\n        throw new Error(request.status);\n      });\n\n      request.open('GET', url, true);\n      request.responseType = responseType;\n      request.send();\n    }\n    catch (error) {\n      reject(error);\n    }\n  });\n}\n"
  },
  {
    "path": "src/js/utils/i18n.js",
    "content": "// ==========================================================================\n// Plyr internationalization\n// ==========================================================================\n\nimport is from './is';\nimport { getDeep } from './objects';\nimport { replaceAll } from './strings';\n\n// Skip i18n for abbreviations and brand names\nconst resources = {\n  pip: 'PIP',\n  airplay: 'AirPlay',\n  html5: 'HTML5',\n  vimeo: 'Vimeo',\n  youtube: 'YouTube',\n};\n\nconst i18n = {\n  get(key = '', config = {}) {\n    if (is.empty(key) || is.empty(config)) {\n      return '';\n    }\n\n    let string = getDeep(config.i18n, key);\n\n    if (is.empty(string)) {\n      if (Object.keys(resources).includes(key)) {\n        return resources[key];\n      }\n\n      return '';\n    }\n\n    const replace = {\n      '{seektime}': config.seekTime,\n      '{title}': config.title,\n    };\n\n    Object.entries(replace).forEach(([k, v]) => {\n      string = replaceAll(string, k, v);\n    });\n\n    return string;\n  },\n};\n\nexport default i18n;\n"
  },
  {
    "path": "src/js/utils/is.js",
    "content": "// ==========================================================================\n// Type checking utils\n// ==========================================================================\n\nconst getConstructor = input => (input !== null && typeof input !== 'undefined' ? input.constructor : null);\nconst instanceOf = (input, constructor) => Boolean(input && constructor && input instanceof constructor);\nconst isNullOrUndefined = input => input === null || typeof input === 'undefined';\nconst isObject = input => getConstructor(input) === Object;\nconst isNumber = input => getConstructor(input) === Number && !Number.isNaN(input);\nconst isString = input => getConstructor(input) === String;\nconst isBoolean = input => getConstructor(input) === Boolean;\nconst isFunction = input => typeof input === 'function';\nconst isArray = input => Array.isArray(input);\nconst isWeakMap = input => instanceOf(input, WeakMap);\nconst isNodeList = input => instanceOf(input, NodeList);\nconst isTextNode = input => getConstructor(input) === Text;\nconst isEvent = input => instanceOf(input, Event);\nconst isKeyboardEvent = input => instanceOf(input, KeyboardEvent);\nconst isCue = input => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);\nconst isTrack = input => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind));\nconst isPromise = input => instanceOf(input, Promise) && isFunction(input.then);\n\nfunction isElement(input) {\n  return input !== null\n    && typeof input === 'object'\n    && input.nodeType === 1\n    && typeof input.style === 'object'\n    && typeof input.ownerDocument === 'object';\n}\n\nfunction isEmpty(input) {\n  return isNullOrUndefined(input)\n    || ((isString(input) || isArray(input) || isNodeList(input)) && !input.length)\n    || (isObject(input) && !Object.keys(input).length);\n}\n\nfunction isUrl(input) {\n  // Accept a URL object\n  if (instanceOf(input, window.URL)) {\n    return true;\n  }\n\n  // Must be string from here\n  if (!isString(input)) {\n    return false;\n  }\n\n  // Add the protocol if required\n  let string = input;\n  if (!input.startsWith('http://') || !input.startsWith('https://')) {\n    string = `http://${input}`;\n  }\n\n  try {\n    return !isEmpty(new URL(string).hostname);\n  }\n  catch {\n    return false;\n  }\n}\n\nexport default {\n  nullOrUndefined: isNullOrUndefined,\n  object: isObject,\n  number: isNumber,\n  string: isString,\n  boolean: isBoolean,\n  function: isFunction,\n  array: isArray,\n  weakMap: isWeakMap,\n  nodeList: isNodeList,\n  element: isElement,\n  textNode: isTextNode,\n  event: isEvent,\n  keyboardEvent: isKeyboardEvent,\n  cue: isCue,\n  track: isTrack,\n  promise: isPromise,\n  url: isUrl,\n  empty: isEmpty,\n};\n"
  },
  {
    "path": "src/js/utils/load-image.js",
    "content": "// ==========================================================================\n// Load image avoiding xhr/fetch CORS issues\n// Server status can't be obtained this way unfortunately, so this uses \"naturalWidth\" to determine if the image has loaded\n// By default it checks if it is at least 1px, but you can add a second argument to change this\n// ==========================================================================\n\nexport default function loadImage(src, minWidth = 1) {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n\n    const handler = () => {\n      delete image.onload;\n      delete image.onerror;\n      (image.naturalWidth >= minWidth ? resolve : reject)(image);\n    };\n\n    Object.assign(image, { onload: handler, onerror: handler, src });\n  });\n}\n"
  },
  {
    "path": "src/js/utils/load-script.js",
    "content": "// ==========================================================================\n// Load an external script\n// ==========================================================================\n\nimport loadjs from 'loadjs';\n\nexport default function loadScript(url) {\n  return new Promise((resolve, reject) => {\n    loadjs(url, {\n      success: resolve,\n      error: reject,\n    });\n  });\n}\n"
  },
  {
    "path": "src/js/utils/load-sprite.js",
    "content": "// ==========================================================================\n// Sprite loader\n// ==========================================================================\n\nimport Storage from '../storage';\nimport fetch from './fetch';\nimport is from './is';\n\n// Load an external SVG sprite\nexport default function loadSprite(url, id) {\n  if (!is.string(url)) {\n    return;\n  }\n\n  const prefix = 'cache';\n  const hasId = is.string(id);\n  let isCached = false;\n  const exists = () => document.getElementById(id) !== null;\n\n  const update = (container, data) => {\n    container.innerHTML = data;\n\n    // Check again incase of race condition\n    if (hasId && exists()) {\n      return;\n    }\n\n    // Inject the SVG to the body\n    document.body.insertAdjacentElement('afterbegin', container);\n  };\n\n  // Only load once if ID set\n  if (!hasId || !exists()) {\n    const useStorage = Storage.supported;\n    // Create container\n    const container = document.createElement('div');\n    container.setAttribute('hidden', '');\n\n    if (hasId) {\n      container.setAttribute('id', id);\n    }\n\n    // Check in cache\n    if (useStorage) {\n      const cached = window.localStorage.getItem(`${prefix}-${id}`);\n      isCached = cached !== null;\n\n      if (isCached) {\n        const data = JSON.parse(cached);\n        update(container, data.content);\n      }\n    }\n\n    // Get the sprite\n    fetch(url)\n      .then((result) => {\n        if (is.empty(result)) {\n          return;\n        }\n\n        if (useStorage) {\n          try {\n            window.localStorage.setItem(\n              `${prefix}-${id}`,\n              JSON.stringify({\n                content: result,\n              }),\n            );\n          }\n          catch {}\n        }\n\n        update(container, result);\n      })\n      .catch(() => {});\n  }\n}\n"
  },
  {
    "path": "src/js/utils/numbers.js",
    "content": "/**\n * Returns a number whose value is limited to the given range.\n *\n * Example: limit the output of this computation to between 0 and 255\n * (x * 255).clamp(0, 255)\n *\n * @param {number} input\n * @param {number} min The lower boundary of the output range\n * @param {number} max The upper boundary of the output range\n * @returns A number within the bounds of min and max\n * @type Number\n */\nexport function clamp(input = 0, min = 0, max = 255) {\n  return Math.min(Math.max(input, min), max);\n}\n\nexport default { clamp };\n"
  },
  {
    "path": "src/js/utils/objects.js",
    "content": "// ==========================================================================\n// Object utils\n// ==========================================================================\n\nimport is from './is';\n\n// Clone nested objects\nexport function cloneDeep(object) {\n  return JSON.parse(JSON.stringify(object));\n}\n\n// Get a nested value in an object\nexport function getDeep(object, path) {\n  return path.split('.').reduce((obj, key) => obj && obj[key], object);\n}\n\n// Deep extend destination object with N more objects\nexport function extend(target = {}, ...sources) {\n  if (!sources.length) {\n    return target;\n  }\n\n  const source = sources.shift();\n\n  if (!is.object(source)) {\n    return target;\n  }\n\n  Object.keys(source).forEach((key) => {\n    if (is.object(source[key])) {\n      if (!Object.keys(target).includes(key)) {\n        Object.assign(target, { [key]: {} });\n      }\n\n      extend(target[key], source[key]);\n    }\n    else {\n      Object.assign(target, { [key]: source[key] });\n    }\n  });\n\n  return extend(target, ...sources);\n}\n"
  },
  {
    "path": "src/js/utils/promise.js",
    "content": "import is from './is';\n/**\n * Silence a Promise-like object.\n * This is useful for avoiding non-harmful, but potentially confusing \"uncaught\n * play promise\" rejection error messages.\n * @param  {object} value An object that may or may not be `Promise`-like.\n */\nexport function silencePromise(value) {\n  if (is.promise(value)) {\n    value.then(null, () => {});\n  }\n}\n\nexport default { silencePromise };\n"
  },
  {
    "path": "src/js/utils/strings.js",
    "content": "// ==========================================================================\n// String utils\n// ==========================================================================\n\nimport is from './is';\n\n// Generate a random ID\nexport function generateId(prefix) {\n  return `${prefix}-${Math.floor(Math.random() * 10000)}`;\n}\n\n// Format string\nexport function format(input, ...args) {\n  if (is.empty(input)) return input;\n\n  return input.toString().replace(/\\{(\\d+)\\}/g, (_, i) => args[i].toString());\n}\n\n// Get percentage\nexport function getPercentage(current, max) {\n  if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) {\n    return 0;\n  }\n\n  return ((current / max) * 100).toFixed(2);\n}\n\n// Replace all occurrences of a string in a string\nexport function replaceAll(input = '', find = '', replace = '') {\n  return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\\]/\\\\])/g, '\\\\$1'), 'g'), replace.toString());\n}\n\n// Convert to title case\nexport function toTitleCase(input = '') {\n  return input.toString().replace(/\\w\\S*/g, text => text.charAt(0).toUpperCase() + text.slice(1).toLowerCase());\n}\n\n// Convert string to pascalCase\nexport function toPascalCase(input = '') {\n  let string = input.toString();\n\n  // Convert kebab case\n  string = replaceAll(string, '-', ' ');\n\n  // Convert snake case\n  string = replaceAll(string, '_', ' ');\n\n  // Convert to title case\n  string = toTitleCase(string);\n\n  // Convert to pascal case\n  return replaceAll(string, ' ', '');\n}\n\n// Convert string to pascalCase\nexport function toCamelCase(input = '') {\n  let string = input.toString();\n\n  // Convert to pascal case\n  string = toPascalCase(string);\n\n  // Convert first character to lowercase\n  return string.charAt(0).toLowerCase() + string.slice(1);\n}\n\n// Remove HTML from a string\nexport function stripHTML(source) {\n  const fragment = document.createDocumentFragment();\n  const element = document.createElement('div');\n  fragment.appendChild(element);\n  element.innerHTML = source;\n  return fragment.firstChild.textContent;\n}\n\n// Like outerHTML, but also works for DocumentFragment\nexport function getHTML(element) {\n  const wrapper = document.createElement('div');\n  wrapper.appendChild(element);\n  return wrapper.innerHTML;\n}\n"
  },
  {
    "path": "src/js/utils/style.js",
    "content": "// ==========================================================================\n// Style utils\n// ==========================================================================\n\nimport { closest } from './arrays';\nimport is from './is';\n\n// Check support for a CSS declaration\nexport function supportsCSS(declaration) {\n  if (!window || !window.CSS) {\n    return false;\n  }\n\n  return window.CSS.supports(declaration);\n}\n\n// Standard/common aspect ratios\nconst standardRatios = [\n  [1, 1],\n  [4, 3],\n  [3, 4],\n  [5, 4],\n  [4, 5],\n  [3, 2],\n  [2, 3],\n  [16, 10],\n  [10, 16],\n  [16, 9],\n  [9, 16],\n  [21, 9],\n  [9, 21],\n  [32, 9],\n  [9, 32],\n].reduce((out, [x, y]) => ({ ...out, [x / y]: [x, y] }), {});\n\n// Validate an aspect ratio\nexport function validateAspectRatio(input) {\n  if (!is.array(input) && (!is.string(input) || !input.includes(':'))) {\n    return false;\n  }\n\n  const ratio = is.array(input) ? input : input.split(':');\n\n  return ratio.map(Number).every(is.number);\n}\n\n// Reduce an aspect ratio to it's lowest form\nexport function reduceAspectRatio(ratio) {\n  if (!is.array(ratio) || !ratio.every(is.number)) {\n    return null;\n  }\n\n  const [width, height] = ratio;\n  const getDivider = (w, h) => (h === 0 ? w : getDivider(h, w % h));\n  const divider = getDivider(width, height);\n\n  return [width / divider, height / divider];\n}\n\n// Calculate an aspect ratio\nexport function getAspectRatio(input) {\n  const parse = ratio => (validateAspectRatio(ratio) ? ratio.split(':').map(Number) : null);\n  // Try provided ratio\n  let ratio = parse(input);\n\n  // Get from config\n  if (ratio === null) {\n    ratio = parse(this.config.ratio);\n  }\n\n  // Get from embed\n  if (ratio === null && !is.empty(this.embed) && is.array(this.embed.ratio)) {\n    ({ ratio } = this.embed);\n  }\n\n  // Get from HTML5 video\n  if (ratio === null && this.isHTML5) {\n    const { videoWidth, videoHeight } = this.media;\n    ratio = [videoWidth, videoHeight];\n  }\n\n  return reduceAspectRatio(ratio);\n}\n\n// Set aspect ratio for responsive container\nexport function setAspectRatio(input) {\n  if (!this.isVideo) {\n    return {};\n  }\n\n  const { wrapper } = this.elements;\n  const ratio = getAspectRatio.call(this, input);\n\n  if (!is.array(ratio)) {\n    return {};\n  }\n\n  const [x, y] = reduceAspectRatio(ratio);\n  const useNative = supportsCSS(`aspect-ratio: ${x}/${y}`);\n  const padding = (100 / x) * y;\n\n  if (useNative) {\n    wrapper.style.aspectRatio = `${x}/${y}`;\n  }\n  else {\n    wrapper.style.paddingBottom = `${padding}%`;\n  }\n\n  // For Vimeo we have an extra <div> to hide the standard controls and UI\n  if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {\n    const height = (100 / this.media.offsetWidth) * Number.parseInt(window.getComputedStyle(this.media).paddingBottom, 10);\n    const offset = (height - padding) / (height / 50);\n\n    if (this.fullscreen.active) {\n      wrapper.style.paddingBottom = null;\n    }\n    else {\n      this.media.style.transform = `translateY(-${offset}%)`;\n    }\n  }\n  else if (this.isHTML5) {\n    wrapper.classList.add(this.config.classNames.videoFixedRatio);\n  }\n\n  return { padding, ratio };\n}\n\n// Round an aspect ratio to closest standard ratio\nexport function roundAspectRatio(x, y, tolerance = 0.05) {\n  const ratio = x / y;\n  const closestRatio = closest(Object.keys(standardRatios), ratio);\n\n  // Check match is within tolerance\n  if (Math.abs(closestRatio - ratio) <= tolerance) {\n    return standardRatios[closestRatio];\n  }\n\n  // No match\n  return [x, y];\n}\n\n// Get the size of the viewport\n// https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions\nexport function getViewportSize() {\n  const width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);\n  const height = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);\n  return [width, height];\n}\n"
  },
  {
    "path": "src/js/utils/time.js",
    "content": "// ==========================================================================\n// Time utils\n// ==========================================================================\n\nimport is from './is';\n\n// Time helpers\nexport const getHours = value => Math.trunc((value / 60 / 60) % 60, 10);\nexport const getMinutes = value => Math.trunc((value / 60) % 60, 10);\nexport const getSeconds = value => Math.trunc(value % 60, 10);\n\n// Format time to UI friendly string\nexport function formatTime(time = 0, displayHours = false, inverted = false) {\n  // Bail if the value isn't a number\n  if (!is.number(time)) {\n    return formatTime(undefined, displayHours, inverted);\n  }\n\n  // Format time component to add leading zero\n  const format = value => `0${value}`.slice(-2);\n  // Breakdown to hours, mins, secs\n  let hours = getHours(time);\n  const mins = getMinutes(time);\n  const secs = getSeconds(time);\n\n  // Do we need to display hours?\n  if (displayHours || hours > 0) {\n    hours = `${hours}:`;\n  }\n  else {\n    hours = '';\n  }\n\n  // Render\n  return `${inverted && time > 0 ? '-' : ''}${hours}${format(mins)}:${format(secs)}`;\n}\n"
  },
  {
    "path": "src/js/utils/urls.js",
    "content": "// ==========================================================================\n// URL utils\n// ==========================================================================\n\nimport is from './is';\n\n/**\n * Parse a string to a URL object\n * @param {string} input - the URL to be parsed\n * @param {boolean} safe - failsafe parsing\n */\nexport function parseUrl(input, safe = true) {\n  let url = input;\n\n  if (safe) {\n    const parser = document.createElement('a');\n    parser.href = url;\n    url = parser.href;\n  }\n\n  try {\n    return new URL(url);\n  }\n  catch {\n    return null;\n  }\n}\n\n// Convert object to URLSearchParams\nexport function buildUrlParams(input) {\n  const params = new URLSearchParams();\n\n  if (is.object(input)) {\n    Object.entries(input).forEach(([key, value]) => {\n      params.set(key, value);\n    });\n  }\n\n  return params;\n}\n"
  },
  {
    "path": "src/sass/base.scss",
    "content": "// --------------------------------------------------------------\n// Base styling\n// --------------------------------------------------------------\n\n// Base\n.plyr {\n  @include plyr-font-smoothing($plyr-font-smoothing);\n\n  align-items: center;\n  direction: ltr;\n  display: flex;\n  flex-direction: column;\n  font-family: $plyr-font-family;\n  font-variant-numeric: tabular-nums; // Force monosace-esque number widths\n  font-weight: $plyr-font-weight-regular;\n  line-height: $plyr-line-height;\n  max-width: 100%;\n  min-width: 200px;\n  position: relative;\n  text-shadow: none;\n  transition: box-shadow 0.3s ease;\n  z-index: 0; // Force any border radius\n\n  // Media elements\n  video,\n  audio,\n  iframe {\n    display: block;\n    height: 100%;\n    width: 100%;\n  }\n\n  button {\n    font: inherit;\n    line-height: inherit;\n    width: auto;\n  }\n\n  // Ignore focus\n  &:focus {\n    outline: 0;\n  }\n}\n\n// border-box everything\n// http://paulirish.com/2012/box-sizing-border-box-ftw/\n@if $plyr-border-box {\n  .plyr--full-ui {\n    box-sizing: border-box;\n\n    *,\n    *::after,\n    *::before {\n      box-sizing: inherit;\n    }\n  }\n}\n\n// Fix 300ms delay\n@if $plyr-touch-action {\n  .plyr--full-ui {\n    a,\n    button,\n    input,\n    label {\n      touch-action: manipulation;\n    }\n  }\n}\n"
  },
  {
    "path": "src/sass/components/badges.scss",
    "content": "// --------------------------------------------------------------\n// Badges\n// --------------------------------------------------------------\n\n.plyr__badge {\n  background: $plyr-badge-background;\n  border-radius: $plyr-badge-border-radius;\n  color: $plyr-badge-text-color;\n  font-size: $plyr-font-size-badge;\n  line-height: 1;\n  padding: 3px 4px;\n}\n"
  },
  {
    "path": "src/sass/components/captions.scss",
    "content": "// --------------------------------------------------------------\n// Captions\n// --------------------------------------------------------------\n\n// Hide default captions\n.plyr--full-ui ::-webkit-media-text-track-container {\n  display: none;\n}\n\n.plyr__captions {\n  animation: plyr-fade-in 0.3s ease;\n  bottom: 0;\n  display: none;\n  font-size: $plyr-font-size-captions-small;\n  left: 0;\n  padding: $plyr-control-spacing;\n  position: absolute;\n  text-align: center;\n  transition: transform 0.4s ease-in-out;\n  width: 100%;\n\n  span:empty {\n    display: none;\n  }\n\n  @media (min-width: $plyr-bp-sm) {\n    font-size: $plyr-font-size-captions-base;\n    padding: calc(#{$plyr-control-spacing} * 2);\n  }\n\n  @media (min-width: $plyr-bp-md) {\n    font-size: $plyr-font-size-captions-medium;\n  }\n}\n\n.plyr--captions-active .plyr__captions {\n  display: block;\n}\n\n// If the lower controls are shown and not empty\n.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {\n  transform: translateY(calc(#{$plyr-control-spacing} * -4));\n}\n\n.plyr__caption {\n  background: $plyr-captions-background;\n  border-radius: 4px;\n  box-decoration-break: clone;\n  color: $plyr-captions-text-color;\n  line-height: 185%;\n  padding: 0.2em 0.5em;\n  white-space: pre-wrap;\n\n  // Firefox adds a <div> when using getCueAsHTML()\n  div {\n    display: inline;\n  }\n}\n"
  },
  {
    "path": "src/sass/components/control.scss",
    "content": "// --------------------------------------------------------------\n// Control buttons\n// --------------------------------------------------------------\n\n.plyr__control {\n  background: transparent;\n  border: 0;\n  border-radius: $plyr-control-radius;\n  color: inherit;\n  cursor: pointer;\n  flex-shrink: 0;\n  overflow: visible; // IE11\n  padding: $plyr-control-padding;\n  position: relative;\n  transition: all 0.1s ease-in-out;\n\n  svg {\n    display: block;\n    fill: currentColor;\n    height: $plyr-control-icon-size;\n    pointer-events: none;\n    width: $plyr-control-icon-size;\n  }\n\n  // Default focus\n  &:focus {\n    outline: 0;\n  }\n\n  // Tab focus\n  &:focus-visible {\n    @include plyr-focus-visible;\n  }\n}\n\n// Remove any link styling\na.plyr__control {\n  text-decoration: none;\n\n  &::after,\n  &::before {\n    display: none;\n  }\n}\n\n// Change icons on state change\n.plyr__control:not(.plyr__control--pressed) .icon--pressed,\n.plyr__control.plyr__control--pressed .icon--not-pressed,\n.plyr__control:not(.plyr__control--pressed) .label--pressed,\n.plyr__control.plyr__control--pressed .label--not-pressed {\n  display: none;\n}\n"
  },
  {
    "path": "src/sass/components/controls.scss",
    "content": "// --------------------------------------------------------------\n// Controls\n// --------------------------------------------------------------\n\n// Hide native controls\n.plyr--full-ui ::-webkit-media-controls {\n  display: none;\n}\n\n// Playback controls\n.plyr__controls {\n  align-items: center;\n  display: flex;\n  justify-content: flex-end;\n  text-align: center;\n\n  .plyr__progress__container {\n    flex: 1;\n    min-width: 0; // Fix for Edge issue where content would overflow\n  }\n\n  // Spacing\n  .plyr__controls__item {\n    margin-left: calc(#{$plyr-control-spacing} / 4);\n\n    &:first-child {\n      margin-left: 0;\n      margin-right: auto;\n    }\n\n    &.plyr__progress__container {\n      padding-left: calc(#{$plyr-control-spacing} / 4);\n    }\n\n    &.plyr__time {\n      padding: 0 calc(#{$plyr-control-spacing} / 2);\n    }\n\n    &.plyr__progress__container:first-child,\n    &.plyr__time:first-child,\n    &.plyr__time + .plyr__time {\n      padding-left: 0;\n    }\n  }\n\n  // Hide empty controls\n  &:empty {\n    display: none;\n  }\n}\n\n// Some options are hidden by default\n.plyr [data-plyr='captions'],\n.plyr [data-plyr='pip'],\n.plyr [data-plyr='airplay'],\n.plyr [data-plyr='fullscreen'] {\n  display: none;\n}\n\n.plyr--captions-enabled [data-plyr='captions'],\n.plyr--pip-supported [data-plyr='pip'],\n.plyr--airplay-supported [data-plyr='airplay'],\n.plyr--fullscreen-enabled [data-plyr='fullscreen'] {\n  display: inline-block;\n}\n"
  },
  {
    "path": "src/sass/components/menus.scss",
    "content": "// --------------------------------------------------------------\n// Menus\n// --------------------------------------------------------------\n\n.plyr__menu {\n  display: flex; // Edge fix\n  position: relative;\n\n  // Animate the icon\n  .plyr__control svg {\n    transition: transform 0.3s ease;\n  }\n\n  .plyr__control[aria-expanded='true'] {\n    svg {\n      transform: rotate(90deg);\n    }\n\n    // Hide tooltip\n    .plyr__tooltip {\n      display: none;\n    }\n  }\n\n  // The actual menu container\n  &__container {\n    animation: plyr-popup 0.2s ease;\n    background: $plyr-menu-background;\n    border-radius: $plyr-menu-radius;\n    bottom: 100%;\n    box-shadow: $plyr-menu-shadow;\n    color: $plyr-menu-color;\n    font-size: $plyr-font-size-base;\n    margin-bottom: 10px;\n    position: absolute;\n    right: -3px;\n    text-align: left;\n    white-space: nowrap;\n    z-index: 3;\n\n    > div {\n      overflow: hidden;\n      transition:\n        height 0.35s cubic-bezier(0.4, 0, 0.2, 1),\n        width 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    // Arrow\n    &::after {\n      border: $plyr-menu-arrow-size solid transparent;\n      border-top-color: $plyr-menu-background;\n      content: '';\n      height: 0;\n      position: absolute;\n      right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));\n      top: 100%;\n      width: 0;\n    }\n\n    [role='menu'] {\n      padding: $plyr-control-padding;\n    }\n\n    [role='menuitem'],\n    [role='menuitemradio'] {\n      margin-top: 2px;\n\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n\n    // Options\n    .plyr__control {\n      align-items: center;\n      color: $plyr-menu-color;\n      display: flex;\n      font-size: $plyr-font-size-menu;\n      padding: calc(#{$plyr-control-padding} / 1.5) calc(#{$plyr-control-padding} * 1.5);\n      user-select: none;\n      width: 100%;\n\n      > span {\n        align-items: inherit;\n        display: flex;\n        width: 100%;\n      }\n\n      &::after {\n        border: $plyr-menu-item-arrow-size solid transparent;\n        content: '';\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n      }\n\n      &--forward {\n        padding-right: calc(#{$plyr-control-padding} * 4);\n\n        &::after {\n          border-left-color: $plyr-menu-item-arrow-color;\n          right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});\n        }\n\n        &:focus-visible::after,\n        &:hover::after {\n          border-left-color: currentColor;\n        }\n      }\n\n      &--back {\n        font-weight: $plyr-font-weight-regular;\n        margin: $plyr-control-padding;\n        margin-bottom: calc(#{$plyr-control-padding} / 2);\n        padding-left: calc(#{$plyr-control-padding} * 4);\n        position: relative;\n        width: calc(100% - (#{$plyr-control-padding} * 2));\n\n        &::after {\n          border-right-color: $plyr-menu-item-arrow-color;\n          left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});\n        }\n\n        &::before {\n          background: $plyr-menu-back-border-color;\n          box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;\n          content: '';\n          height: 1px;\n          left: 0;\n          margin-top: calc(#{$plyr-control-padding} / 2);\n          overflow: hidden;\n          position: absolute;\n          right: 0;\n          top: 100%;\n        }\n\n        &:focus-visible::after,\n        &:hover::after {\n          border-right-color: currentColor;\n        }\n      }\n    }\n\n    .plyr__control[role='menuitemradio'] {\n      padding-left: $plyr-control-padding;\n\n      &::before,\n      &::after {\n        border-radius: 100%;\n      }\n\n      &::before {\n        background: rgba(#000, 0.1);\n        content: '';\n        display: block;\n        flex-shrink: 0;\n        height: 16px;\n        margin-right: $plyr-control-spacing;\n        transition: all 0.3s ease;\n        width: 16px;\n      }\n\n      &::after {\n        background: #fff;\n        border: 0;\n        height: 6px;\n        left: 12px;\n        opacity: 0;\n        top: 50%;\n        transform: translateY(-50%) scale(0);\n        transition:\n          transform 0.3s ease,\n          opacity 0.3s ease;\n        width: 6px;\n      }\n\n      &[aria-checked='true'] {\n        &::before {\n          background: $plyr-control-toggle-checked-background;\n        }\n\n        &::after {\n          opacity: 1;\n          transform: translateY(-50%) scale(1);\n        }\n      }\n\n      &:focus-visible::before,\n      &:hover::before {\n        background: rgba($plyr-color-gray-900, 0.1);\n      }\n    }\n\n    // Option value\n    .plyr__menu__value {\n      align-items: center;\n      display: flex;\n      margin-left: auto;\n      margin-right: calc((#{$plyr-control-padding} - 2px) * -1);\n      overflow: hidden;\n      padding-left: calc(#{$plyr-control-padding} * 3.5);\n      pointer-events: none;\n    }\n  }\n}\n"
  },
  {
    "path": "src/sass/components/poster.scss",
    "content": "// --------------------------------------------------------------\n// Faux poster overlay\n// --------------------------------------------------------------\n\n.plyr__poster {\n  background-color: var(--plyr-video-background, $plyr-video-background);\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: contain;\n  height: 100%;\n  left: 0;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  transition: opacity 0.2s ease;\n  width: 100%;\n  z-index: 1;\n}\n\n.plyr--stopped.plyr__poster-enabled .plyr__poster {\n  opacity: 1;\n}\n\n// Allow interaction with YouTube controls while paused\n.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster {\n  display: none;\n}\n"
  },
  {
    "path": "src/sass/components/progress.scss",
    "content": "// --------------------------------------------------------------\n// Playback progress\n// --------------------------------------------------------------\n\n// Offset the range thumb in order to be able to calculate the relative progress (#954)\n$plyr-progress-offset: $plyr-range-thumb-height;\n\n.plyr__progress {\n  left: calc(#{$plyr-progress-offset} * 0.5);\n  margin-right: $plyr-progress-offset;\n  position: relative;\n\n  input[type='range'],\n  &__buffer {\n    margin-left: calc(#{$plyr-progress-offset} * -0.5);\n    margin-right: calc(#{$plyr-progress-offset} * -0.5);\n    width: calc(100% + #{$plyr-progress-offset});\n  }\n\n  input[type='range'] {\n    position: relative;\n    z-index: 2;\n  }\n\n  // Seek tooltip to show time\n  .plyr__tooltip {\n    left: 0;\n    max-width: 120px;\n    overflow-wrap: break-word;\n  }\n}\n\n.plyr__progress__buffer {\n  -webkit-appearance: none; /* stylelint-disable-line */\n  background: transparent;\n  border: 0;\n  border-radius: 100px;\n  height: $plyr-range-track-height;\n  left: 0;\n  margin-top: calc((#{$plyr-range-track-height} / 2) * -1);\n  padding: 0;\n  position: absolute;\n  top: 50%;\n\n  &::-webkit-progress-bar {\n    background: transparent;\n  }\n\n  &::-webkit-progress-value {\n    background: currentColor;\n    border-radius: 100px;\n    min-width: $plyr-range-track-height;\n    transition: width 0.2s ease;\n  }\n\n  // Mozilla\n  &::-moz-progress-bar {\n    background: currentColor;\n    border-radius: 100px;\n    min-width: $plyr-range-track-height;\n    transition: width 0.2s ease;\n  }\n\n  // Microsoft\n  &::-ms-fill {\n    border-radius: 100px;\n    transition: width 0.2s ease;\n  }\n}\n\n// Loading state\n.plyr--loading .plyr__progress__buffer {\n  animation: plyr-progress 1s linear infinite;\n  background-image: linear-gradient(\n    -45deg,\n    $plyr-progress-loading-background 25%,\n    transparent 25%,\n    transparent 50%,\n    $plyr-progress-loading-background 50%,\n    $plyr-progress-loading-background 75%,\n    transparent 75%,\n    transparent\n  );\n  background-repeat: repeat-x;\n  background-size: $plyr-progress-loading-size $plyr-progress-loading-size;\n  color: transparent;\n}\n\n.plyr--video.plyr--loading .plyr__progress__buffer {\n  background-color: $plyr-video-progress-buffered-background;\n}\n\n.plyr--audio.plyr--loading .plyr__progress__buffer {\n  background-color: $plyr-audio-progress-buffered-background;\n}\n\n// Markers\n.plyr__progress__marker {\n  background-color: $plyr-progress-marker-background;\n  border-radius: 1px;\n  height: $plyr-range-track-height;\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: $plyr-progress-marker-width;\n  z-index: 3;\n}\n"
  },
  {
    "path": "src/sass/components/sliders.scss",
    "content": "// --------------------------------------------------------------\n// Slider inputs - <input type=\"range\">\n// --------------------------------------------------------------\n\n.plyr--full-ui input[type='range'] {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: calc(#{$plyr-range-thumb-height} * 2);\n\n  // `color` property is used in JS to populate lower fill for WebKit\n  color: $plyr-range-fill-background;\n  display: block;\n  height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  transition: box-shadow 0.3s ease;\n  width: 100%;\n\n  &::-webkit-slider-runnable-track {\n    @include plyr-range-track;\n\n    background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));\n  }\n\n  &::-webkit-slider-thumb {\n    @include plyr-range-thumb;\n\n    appearance: none;\n    margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);\n  }\n\n  // Mozilla\n  &::-moz-range-track {\n    @include plyr-range-track;\n  }\n\n  &::-moz-range-thumb {\n    @include plyr-range-thumb;\n  }\n\n  &::-moz-range-progress {\n    background: currentColor;\n    border-radius: calc(#{$plyr-range-track-height} / 2);\n    height: $plyr-range-track-height;\n  }\n\n  // Microsoft\n  &::-ms-track {\n    @include plyr-range-track;\n\n    color: transparent;\n  }\n\n  &::-ms-fill-upper {\n    @include plyr-range-track;\n  }\n\n  &::-ms-fill-lower {\n    @include plyr-range-track;\n\n    background: currentColor;\n  }\n\n  &::-ms-thumb {\n    @include plyr-range-thumb;\n\n    // For some reason, Edge uses the -webkit margin above\n    margin-top: 0;\n  }\n\n  &::-ms-tooltip {\n    display: none;\n  }\n\n  // Focus styles\n  &::-moz-focus-outer {\n    border: 0;\n  }\n\n  &:focus {\n    outline: 0;\n  }\n\n  &:focus-visible {\n    &::-webkit-slider-runnable-track {\n      @include plyr-focus-visible;\n    }\n\n    &::-moz-range-track {\n      @include plyr-focus-visible;\n    }\n\n    &::-ms-track {\n      @include plyr-focus-visible;\n    }\n  }\n}\n"
  },
  {
    "path": "src/sass/components/times.scss",
    "content": "// --------------------------------------------------------------\n// Time\n// --------------------------------------------------------------\n\n.plyr__time {\n  font-size: $plyr-font-size-time;\n}\n\n// Media duration hidden on small screens\n.plyr__time + .plyr__time {\n  // Add a slash in before\n  &::before {\n    content: '\\2044';\n    margin-right: $plyr-control-spacing;\n  }\n\n  @media (max-width: ($plyr-bp-md - 1px)) {\n    display: none;\n  }\n}\n"
  },
  {
    "path": "src/sass/components/tooltips.scss",
    "content": "/* stylelint-disable selector-max-compound-selectors */\n// --------------------------------------------------------------\n// Tooltips\n// --------------------------------------------------------------\n\n.plyr__tooltip {\n  background: $plyr-tooltip-background;\n  border-radius: $plyr-tooltip-radius;\n  bottom: 100%;\n  box-shadow: $plyr-tooltip-shadow;\n  color: $plyr-tooltip-color;\n  font-size: $plyr-font-size-small;\n  font-weight: $plyr-font-weight-regular;\n  left: 50%;\n  line-height: 1.3;\n  margin-bottom: calc(#{$plyr-tooltip-padding} * 2);\n  opacity: 0;\n  padding: $plyr-tooltip-padding calc(#{$plyr-tooltip-padding} * 1.5);\n  pointer-events: none;\n  position: absolute;\n  transform: translate(-50%, 10px) scale(0.8);\n  transform-origin: 50% 100%;\n  transition:\n    transform 0.2s 0.1s ease,\n    opacity 0.2s 0.1s ease;\n  white-space: nowrap;\n  z-index: 2;\n\n  // The background triangle\n  &::before {\n    border-left: $plyr-tooltip-arrow-size solid transparent;\n    border-right: $plyr-tooltip-arrow-size solid transparent;\n    border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;\n    bottom: calc(#{$plyr-tooltip-arrow-size} * -1);\n    content: '';\n    height: 0;\n    left: 50%;\n    position: absolute;\n    transform: translateX(-50%);\n    width: 0;\n    z-index: 2;\n  }\n}\n\n// Displaying\n.plyr .plyr__control:hover .plyr__tooltip,\n.plyr .plyr__control:focus-visible .plyr__tooltip,\n.plyr__tooltip--visible {\n  opacity: 1;\n  transform: translate(-50%, 0) scale(1);\n}\n\n.plyr .plyr__control:hover .plyr__tooltip {\n  z-index: 3;\n}\n\n// First tooltip\n.plyr__controls > .plyr__control:first-child .plyr__tooltip,\n.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {\n  left: 0;\n  transform: translate(0, 10px) scale(0.8);\n  transform-origin: 0 100%;\n\n  &::before {\n    left: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});\n  }\n}\n\n// Last tooltip\n.plyr__controls > .plyr__control:last-child .plyr__tooltip {\n  left: auto;\n  right: 0;\n  transform: translate(0, 10px) scale(0.8);\n  transform-origin: 100% 100%;\n\n  &::before {\n    left: auto;\n    right: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});\n    transform: translateX(50%);\n  }\n}\n\n.plyr__controls > .plyr__control:first-child,\n.plyr__controls > .plyr__control:first-child + .plyr__control,\n.plyr__controls > .plyr__control:last-child {\n  &:hover .plyr__tooltip,\n  &:focus-visible .plyr__tooltip,\n  .plyr__tooltip--visible {\n    transform: translate(0, 0) scale(1);\n  }\n}\n"
  },
  {
    "path": "src/sass/components/volume.scss",
    "content": "// --------------------------------------------------------------\n// Volume\n// --------------------------------------------------------------\n\n.plyr__volume {\n  align-items: center;\n  display: flex;\n  position: relative;\n\n  input[type='range'] {\n    margin-left: calc(#{$plyr-control-spacing} / 2);\n    margin-right: calc(#{$plyr-control-spacing} / 2);\n    max-width: 90px;\n    min-width: 60px;\n    position: relative;\n    z-index: 2;\n  }\n}\n"
  },
  {
    "path": "src/sass/lib/animation.scss",
    "content": "// --------------------------------------------------------------\n// Animations\n// --------------------------------------------------------------\n\n@keyframes plyr-progress {\n  to {\n    background-position: $plyr-progress-loading-size 0;\n  }\n}\n\n@keyframes plyr-popup {\n  0% {\n    opacity: 0.5;\n    transform: translateY(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes plyr-fade-in {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n"
  },
  {
    "path": "src/sass/lib/css-vars.scss",
    "content": "// Downloaded from https://github.com/malyw/css-vars (and modified)\n\n@use 'sass:list';\n@use 'sass:map';\n\n// global map to be filled via variables\n$css-vars: ();\n\n// the variable may be set to \"true\" anywhere in the code,\n// so native CSS custom properties will be used instead of the Sass global map\n$css-vars-use-native: false !default;\n\n///\n// Assigns a variable to the global map\n///\n@function css-var-assign($varName: null, $varValue: null) {\n  @return map-merge(\n    $css-vars,\n    (\n      $varName: $varValue,\n    )\n  );\n}\n\n///\n// Emulates var() CSS native function behavior\n// $args[0] {String} \"--\" + variable name\n// [$args[1]] Optional default value if variable is not assigned yet\n// E.G.:\n// color: var(--main-color);\n// background: var(--main-background, green);\n///\n@function var($args...) {\n  // CHECK PARAMS\n  @if length($args) == 0 {\n    @error 'Variable name is expected to be passed to the var() function';\n  }\n\n  @if str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--' {\n    @error \"Variable name is expected to start from '--'\";\n  }\n\n  // PROCESS\n  $var-name: list.nth($args, 1);\n  $var-value: map.get($css-vars, $var-name);\n\n  @if $css-vars-use-native {\n    // CSS variables\n    // Native CSS: don't process function in case of native\n    @return unquote('var(' + $args + ')');\n  } @else {\n    @if not $var-value {\n      // variable is not provided so far\n      @if length($args) == 2 {\n        $var-value: list.nth($args, 2);\n      }\n    }\n\n    // Sass: return value from the map\n    @return $var-value;\n  }\n}\n\n///\n// Sass mixin to provide variables\n// E.G.:\n// @include css-vars((\n//    --color: rebeccapurple,\n//    --height: 68px,\n//    --margin-top: calc(2vh + 20px)\n// ));\n///\n@mixin css-vars($var-map: null) {\n  // CHECK PARAMS\n  @if not $var-map {\n    @error 'Map of variables is expected, instead got: null';\n  }\n\n  @if type_of($var-map) != map {\n    @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';\n  }\n\n  // PROCESS\n  @if $css-vars-use-native {\n    // CSS variables\n    // Native CSS: assign CSS custom properties to the global scope\n    @at-root :root {\n      @each $var-name, $var-value in $var-map {\n        @if type_of($var-value) == string {\n          #{$var-name}: $var-value; // to prevent quotes interpolation\n        } @else {\n          #{$var-name}: #{$var-value};\n        }\n      }\n    }\n  } @else {\n    // Sass or debug\n    // merge variables and values to the global map (provides no output)\n    @each $var-name, $var-value in $var-map {\n      $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable\n    }\n  }\n}\n"
  },
  {
    "path": "src/sass/lib/functions.scss",
    "content": "@function to-percentage($input) {\n  @return $input * 1%;\n}\n"
  },
  {
    "path": "src/sass/lib/mixins.scss",
    "content": "// ==========================================================================\n// Mixins\n// ==========================================================================\n\n// Nicer focus styles\n// ---------------------------------------\n@mixin plyr-focus-visible($color: $plyr-focus-visible-color) {\n  outline: 2px dashed $color;\n  outline-offset: 2px;\n}\n\n// Font smoothing\n// ---------------------------------------\n@mixin plyr-font-smoothing($mode: true) {\n  @if $mode {\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n  }\n}\n\n// <input type=\"range\"> styling\n// ---------------------------------------\n@mixin plyr-range-track() {\n  background: transparent;\n  border: 0;\n  border-radius: calc(#{$plyr-range-track-height} / 2);\n  height: $plyr-range-track-height;\n  transition: box-shadow 0.3s ease;\n  user-select: none;\n}\n\n@mixin plyr-range-thumb() {\n  background: $plyr-range-thumb-background;\n  border: 0;\n  border-radius: 100%;\n  box-shadow: $plyr-range-thumb-shadow;\n  height: $plyr-range-thumb-height;\n  position: relative;\n  transition: all 0.2s ease;\n  width: $plyr-range-thumb-height;\n}\n\n@mixin plyr-range-thumb-active($color) {\n  box-shadow:\n    $plyr-range-thumb-shadow,\n    0 0 0 $plyr-range-thumb-active-shadow-width $color;\n}\n\n// Fullscreen styles\n// ---------------------------------------\n@mixin plyr-fullscreen-active() {\n  background: #000;\n  border-radius: 0 !important;\n  height: 100%;\n  margin: 0;\n  width: 100%;\n\n  video {\n    height: 100%;\n  }\n\n  // Display correct icon\n  .plyr__control .icon--exit-fullscreen {\n    display: block;\n\n    + svg {\n      display: none;\n    }\n  }\n\n  // Hide cursor in fullscreen when controls hidden\n  &.plyr--hide-controls {\n    cursor: none;\n  }\n\n  // Large captions in full screen on larger screens\n  @media (min-width: $plyr-bp-lg) {\n    .plyr__captions {\n      font-size: $plyr-font-size-captions-large;\n    }\n  }\n}\n"
  },
  {
    "path": "src/sass/plugins/ads.scss",
    "content": "// ==========================================================================\n// Advertisements\n// ==========================================================================\n\n.plyr__ads {\n  border-radius: inherit;\n  cursor: pointer;\n  inset: 0;\n  overflow: hidden;\n  position: absolute;\n  z-index: -1; // Hide it by default\n\n  // Make sure the inner container is big enough for the ad creative.\n  > div,\n  > div iframe {\n    height: 100%;\n    position: absolute;\n    width: 100%;\n  }\n\n  // The countdown label\n  &::after {\n    background: $plyr-color-gray-900;\n    border-radius: 2px;\n    bottom: $plyr-control-spacing;\n    color: #fff;\n    content: attr(data-badge-text);\n    font-size: 11px;\n    padding: 2px 6px;\n    pointer-events: none;\n    position: absolute;\n    right: $plyr-control-spacing;\n    z-index: 3;\n  }\n\n  &:empty::after {\n    display: none;\n  }\n}\n\n// Advertisement cue's for the progress bar\n.plyr__cues {\n  background: currentColor;\n  display: block;\n  height: $plyr-range-track-height;\n  left: 0;\n  opacity: 0.8;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 3px;\n  z-index: 3; // Between progress and thumb\n}\n"
  },
  {
    "path": "src/sass/plugins/preview-thumbnails/index.scss",
    "content": "// --------------------------------------------------------------\n// Preview Thumbnails\n// --------------------------------------------------------------\n\n@import './settings';\n\n.plyr__preview-thumb {\n  background-color: $plyr-preview-background;\n  border-radius: $plyr-preview-radius;\n  bottom: 100%;\n  box-shadow: $plyr-preview-shadow;\n  margin-bottom: calc(#{$plyr-preview-padding} * 2);\n  opacity: 0;\n  padding: 3px;\n  pointer-events: none;\n  position: absolute;\n  transform: translate(0, 10px) scale(0.8);\n  transform-origin: 50% 100%;\n  transition:\n    transform 0.2s 0.1s ease,\n    opacity 0.2s 0.1s ease;\n  z-index: 2;\n\n  &--is-shown {\n    opacity: 1;\n    transform: translate(0, 0) scale(1);\n  }\n\n  // The background triangle\n  &::before {\n    border-left: $plyr-preview-arrow-size solid transparent;\n    border-right: $plyr-preview-arrow-size solid transparent;\n    border-top: $plyr-preview-arrow-size solid $plyr-preview-background;\n    bottom: calc(#{$plyr-preview-arrow-size} * -1);\n    content: '';\n    height: 0;\n    left: calc(50% + var(--preview-arrow-offset));\n    position: absolute;\n    transform: translateX(-50%);\n    width: 0;\n    z-index: 2;\n  }\n\n  &__image-container {\n    background: $plyr-preview-image-background;\n    border-radius: calc(#{$plyr-preview-radius} - 1px);\n    overflow: hidden;\n    position: relative;\n    z-index: 0;\n\n    img,\n    &::after {\n      height: 100%;\n      left: 0;\n      position: absolute;\n      top: 0;\n      width: 100%;\n    }\n\n    &::after {\n      border-radius: inherit;\n      box-shadow: inset 0 0 0 1px rgba(#000, 15%);\n      content: '';\n      pointer-events: none;\n    }\n\n    img {\n      // Non sprite images are 100%. Sprites will have their size applied by JavaScript\n      max-height: none;\n      max-width: none;\n    }\n  }\n\n  // Seek time text\n  &__time-container {\n    background: $plyr-preview-time-container-background;\n    border-bottom-left-radius: calc(#{$plyr-preview-radius} - 1px);\n    border-bottom-right-radius: calc(#{$plyr-preview-radius} - 1px);\n    bottom: 0;\n    left: 0;\n    line-height: 1.1;\n    padding: $plyr-preview-time-container-padding;\n    position: absolute;\n    right: 0;\n    z-index: 3;\n\n    span {\n      color: $plyr-preview-time-color;\n      font-size: $plyr-preview-time-font-size;\n    }\n  }\n}\n\n.plyr__preview-scrubbing {\n  filter: blur(1px);\n  height: 100%;\n  inset: 0;\n  margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)\n  opacity: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  transition: opacity 0.3s ease;\n  width: 100%;\n  z-index: 1;\n\n  &--is-shown {\n    opacity: 1;\n  }\n\n  img {\n    height: 100%;\n    left: 0;\n    max-height: none;\n    max-width: none;\n    object-fit: contain;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n}\n"
  },
  {
    "path": "src/sass/plugins/preview-thumbnails/settings.scss",
    "content": "// --------------------------------------------------------------\n// Preview Thumbnails\n// --------------------------------------------------------------\n\n$plyr-preview-padding: $plyr-tooltip-padding !default;\n$plyr-preview-background: $plyr-tooltip-background !default;\n$plyr-preview-radius: $plyr-menu-radius !default;\n$plyr-preview-shadow: $plyr-tooltip-shadow !default;\n$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;\n$plyr-preview-image-background: $plyr-color-gray-200 !default;\n$plyr-preview-time-container-background: var(\n  --plyr-video-controls-background,\n  linear-gradient(rgba(#000, 0), rgba(#000, 0.75))\n) !default;\n$plyr-preview-time-container-padding: 20px 6px 6px !default;\n$plyr-preview-time-color: #fff;\n$plyr-preview-time-font-size: $plyr-font-size-time !default;\n"
  },
  {
    "path": "src/sass/plyr.scss",
    "content": "@charset \"UTF-8\";\n\n// ==========================================================================\n// Plyr styles\n// https://github.com/sampotts/plyr\n// TODO: Review use of BEM classnames\n// ==========================================================================\n\n@import 'lib/css-vars';\n\n$css-vars-use-native: true;\n\n@import 'settings/breakpoints';\n@import 'settings/colors';\n@import 'settings/cosmetics';\n@import 'settings/type';\n@import 'settings/badges';\n@import 'settings/captions';\n@import 'settings/controls';\n@import 'settings/helpers';\n@import 'settings/menus';\n@import 'settings/progress';\n@import 'settings/sliders';\n@import 'settings/tooltips';\n@import 'lib/animation';\n@import 'lib/functions';\n@import 'lib/mixins';\n@import 'base';\n@import 'components/badges';\n@import 'components/captions';\n@import 'components/control';\n@import 'components/controls';\n@import 'components/menus';\n@import 'components/sliders';\n@import 'components/poster';\n@import 'components/times';\n@import 'components/tooltips';\n@import 'components/progress';\n@import 'components/volume';\n@import 'types/audio';\n@import 'types/video';\n@import 'states/fullscreen';\n@import 'plugins/ads';\n@import 'plugins/preview-thumbnails/index';\n@import 'utils/animation';\n@import 'utils/hidden';\n"
  },
  {
    "path": "src/sass/settings/badges.scss",
    "content": "// ==========================================================================\n// Badges\n// ==========================================================================\n\n$plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;\n$plyr-badge-text-color: var(--plyr-badge-text-color, #fff) !default;\n$plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;\n"
  },
  {
    "path": "src/sass/settings/breakpoints.scss",
    "content": "// ==========================================================================\n// Breakpoints\n// NOTE: we can't use CSS variables for breakpoints unfortunately\n// https://www.w3.org/TR/css-variables-1/#using-variables\n// ==========================================================================\n\n$plyr-bp-sm: 480px !default;\n$plyr-bp-md: 768px !default;\n$plyr-bp-lg: 1024px !default;\n"
  },
  {
    "path": "src/sass/settings/captions.scss",
    "content": "// ==========================================================================\n// Captions\n// ==========================================================================\n\n$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;\n$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;\n$plyr-font-size-captions-base: $plyr-font-size-base !default;\n$plyr-font-size-captions-small: $plyr-font-size-small !default;\n$plyr-font-size-captions-medium: $plyr-font-size-large !default;\n$plyr-font-size-captions-large: $plyr-font-size-xlarge !default;\n"
  },
  {
    "path": "src/sass/settings/colors.scss",
    "content": "// ==========================================================================\n// Colors\n// ==========================================================================\n\n$plyr-color-main: var(--plyr-color-main, hsl(198deg 100% 50%)) !default;\n$plyr-video-background: var(--plyr-video-background, rgb(0 0 0 / 100%)) !default;\n\n// Grayscale\n$plyr-color-gray-900: hsl(216deg 15% 16%) !default;\n$plyr-color-gray-800: hsl(216deg 15% 25%) !default;\n$plyr-color-gray-700: hsl(216deg 15% 34%) !default;\n$plyr-color-gray-600: hsl(216deg 15% 43%) !default;\n$plyr-color-gray-500: hsl(216deg 15% 52%) !default;\n$plyr-color-gray-400: hsl(216deg 15% 61%) !default;\n$plyr-color-gray-300: hsl(216deg 15% 70%) !default;\n$plyr-color-gray-200: hsl(216deg 15% 79%) !default;\n$plyr-color-gray-100: hsl(216deg 15% 88%) !default;\n$plyr-color-gray-50: hsl(216deg 15% 97%) !default;\n"
  },
  {
    "path": "src/sass/settings/controls.scss",
    "content": "// ==========================================================================\n// Controls\n// ==========================================================================\n\n$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;\n$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;\n$plyr-control-padding: calc(#{$plyr-control-spacing} * 0.7);\n$plyr-control-padding: var(--plyr-control-padding, $plyr-control-padding) !default;\n$plyr-control-radius: var(--plyr-control-radius, 4px) !default;\n$plyr-control-toggle-checked-background: var(\n  --plyr-control-toggle-checked-background,\n  var(--plyr-color-main, $plyr-color-main)\n) !default;\n$plyr-video-controls-background: var(\n  --plyr-video-controls-background,\n  linear-gradient(rgba(#000, 0), rgba(#000, 0.75))\n) !default;\n$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default;\n$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default;\n$plyr-video-control-background-hover: var(\n  --plyr-video-control-background-hover,\n  var(--plyr-color-main, $plyr-color-main)\n) !default;\n$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default;\n$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default;\n$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default;\n$plyr-audio-control-background-hover: var(\n  --plyr-audio-control-background-hover,\n  var(--plyr-color-main, $plyr-color-main)\n) !default;\n"
  },
  {
    "path": "src/sass/settings/cosmetics.scss",
    "content": "// ==========================================================================\n// Cosmetic\n// ==========================================================================\n\n$plyr-focus-visible-color: var(--plyr-focus-visible-color, var(--plyr-color-main, $plyr-color-main)) !default;\n"
  },
  {
    "path": "src/sass/settings/helpers.scss",
    "content": "// ==========================================================================\n// Enable helpers\n// ==========================================================================\n\n$plyr-border-box: true !default;\n$plyr-touch-action: true !default;\n$plyr-sr-only-important: true !default;\n"
  },
  {
    "path": "src/sass/settings/menus.scss",
    "content": "// ==========================================================================\n// Menus\n// ==========================================================================\n\n$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;\n$plyr-menu-radius: var(--plyr-menu-radius, 8px) !default;\n$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;\n$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;\n$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;\n$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;\n$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;\n$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;\n$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;\n"
  },
  {
    "path": "src/sass/settings/progress.scss",
    "content": "// ==========================================================================\n// Progress\n// ==========================================================================\n\n// Loading\n$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default;\n$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default;\n\n// Markers\n$plyr-progress-marker-background: var(--plyr-progress-marker-background, #fff) !default;\n$plyr-progress-marker-width: var(--plyr-progress-marker-width, 3px) !default;\n\n// Buffered\n$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;\n$plyr-audio-progress-buffered-background: var(\n  --plyr-audio-progress-buffered-background,\n  rgba($plyr-color-gray-200, 0.6)\n) !default;\n"
  },
  {
    "path": "src/sass/settings/sliders.scss",
    "content": "// ==========================================================================\n// Sliders\n// ==========================================================================\n\n// Thumb\n$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;\n$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;\n$plyr-range-thumb-shadow: var(\n  --plyr-range-thumb-shadow,\n  0 1px 1px rgba($plyr-color-gray-900, 0.15),\n  0 0 0 1px rgba($plyr-color-gray-900, 0.2)\n) !default;\n\n// Active state\n$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;\n\n// Track\n$plyr-range-track-height: var(--plyr-range-track-height, 5px) !default;\n\n// Fill\n$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;\n\n// Type specific\n$plyr-video-range-track-background: var(\n  --plyr-video-range-track-background,\n  $plyr-video-progress-buffered-background\n) !default;\n$plyr-video-range-thumb-active-shadow-color: var(\n  --plyr-audio-range-thumb-active-shadow-color,\n  rgba(#fff, 0.5)\n) !default;\n$plyr-audio-range-track-background: var(\n  --plyr-audio-range-track-background,\n  $plyr-audio-progress-buffered-background\n) !default;\n$plyr-audio-range-thumb-active-shadow-color: var(\n  --plyr-audio-range-thumb-active-shadow-color,\n  rgba($plyr-color-gray-900, 0.1)\n) !default;\n"
  },
  {
    "path": "src/sass/settings/tooltips.scss",
    "content": "// ==========================================================================\n// Tooltips\n// ==========================================================================\n\n$plyr-tooltip-background: var(--plyr-tooltip-background, #fff) !default;\n$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;\n$plyr-tooltip-padding: calc(#{$plyr-control-spacing} / 2);\n$plyr-tooltip-padding: var(--plyr-tooltip-padding, $plyr-tooltip-padding) !default;\n$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;\n$plyr-tooltip-radius: var(--plyr-tooltip-radius, 5px) !default;\n$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;\n"
  },
  {
    "path": "src/sass/settings/type.scss",
    "content": "// ==========================================================================\n// Typography\n// ==========================================================================\n\n$plyr-font-family: var(--plyr-font-family, inherit) !default;\n$plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;\n$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;\n$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;\n$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;\n$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;\n$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;\n$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;\n$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;\n$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;\n$plyr-line-height: var(--plyr-line-height, 1.7) !default;\n$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;\n"
  },
  {
    "path": "src/sass/states/fullscreen.scss",
    "content": "// --------------------------------------------------------------\n// Fullscreen\n// --------------------------------------------------------------\n\n.plyr:fullscreen {\n  @include plyr-fullscreen-active;\n}\n\n// Fallback for unsupported browsers\n.plyr--fullscreen-fallback {\n  @include plyr-fullscreen-active;\n  position: fixed;\n  inset: 0;\n  z-index: 10000000;\n}\n"
  },
  {
    "path": "src/sass/types/audio.scss",
    "content": "// --------------------------------------------------------------\n// Audio styles\n// --------------------------------------------------------------\n\n// Container\n.plyr--audio {\n  display: block;\n}\n\n// Controls container\n.plyr--audio .plyr__controls {\n  background: $plyr-audio-controls-background;\n  border-radius: inherit;\n  color: $plyr-audio-control-color;\n  padding: $plyr-control-spacing;\n}\n\n// Control elements\n.plyr--audio .plyr__control {\n  &:focus-visible,\n  &:hover,\n  &[aria-expanded='true'] {\n    background: $plyr-audio-control-background-hover;\n    color: $plyr-audio-control-color-hover;\n  }\n}\n\n// Range inputs\n.plyr--full-ui.plyr--audio input[type='range'] {\n  &::-webkit-slider-runnable-track {\n    background-color: $plyr-audio-range-track-background;\n  }\n\n  &::-moz-range-track {\n    background-color: $plyr-audio-range-track-background;\n  }\n\n  &::-ms-track {\n    background-color: $plyr-audio-range-track-background;\n  }\n\n  // Pressed styles\n  &:active {\n    &::-webkit-slider-thumb {\n      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);\n    }\n\n    &::-moz-range-thumb {\n      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);\n    }\n\n    &::-ms-thumb {\n      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);\n    }\n  }\n}\n\n// Progress\n.plyr--audio .plyr__progress__buffer {\n  color: $plyr-audio-progress-buffered-background;\n}\n"
  },
  {
    "path": "src/sass/types/video.scss",
    "content": "// --------------------------------------------------------------\n// Video styles\n// --------------------------------------------------------------\n\n@use 'sass:math';\n\n// Container\n.plyr--video {\n  overflow: hidden;\n\n  &.plyr--menu-open {\n    overflow: visible;\n  }\n}\n\n.plyr__video-wrapper {\n  background: var(--plyr-video-background, $plyr-video-background);\n  border-radius: inherit;\n  height: 100%;\n  margin: auto;\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n}\n\n// Default to 16:9 ratio but this is set by JavaScript based on config\n$embed-padding: (math.div(100, 16) * 9);\n\n.plyr__video-embed,\n.plyr__video-wrapper--fixed-ratio {\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 0;\n    padding-bottom: to-percentage($embed-padding);\n    position: relative;\n  }\n\n  aspect-ratio: 16 / 9;\n}\n\n.plyr__video-embed iframe,\n.plyr__video-wrapper--fixed-ratio video {\n  border: 0;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n// For Vimeo, if the full custom UI is supported\n.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {\n  $height: 240;\n  $offset: to-percentage(math.div($height - $embed-padding, math.div($height, 50)));\n\n  padding-bottom: to-percentage($height);\n  position: relative;\n  transform: translateY(-$offset);\n}\n\n// Controls container\n.plyr--video .plyr__controls {\n  background: $plyr-video-controls-background;\n  border-bottom-left-radius: inherit;\n  border-bottom-right-radius: inherit;\n  bottom: 0;\n  color: $plyr-video-control-color;\n  left: 0;\n  padding: calc(#{$plyr-control-spacing} / 2);\n  padding-top: calc(#{$plyr-control-spacing} * 2);\n  position: absolute;\n  right: 0;\n  transition:\n    opacity 0.4s ease-in-out,\n    transform 0.4s ease-in-out;\n  z-index: 3;\n\n  @media (min-width: $plyr-bp-sm) {\n    padding: $plyr-control-spacing;\n    padding-top: calc(#{$plyr-control-spacing} * 3.5);\n  }\n}\n\n// Hide controls\n.plyr--video.plyr--hide-controls .plyr__controls {\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(100%);\n}\n\n// Control elements\n.plyr--video .plyr__control {\n  &:focus-visible,\n  &:hover,\n  &[aria-expanded='true'] {\n    background: $plyr-video-control-background-hover;\n    color: $plyr-video-control-color-hover;\n  }\n}\n\n// Large play button (video only)\n.plyr__control--overlaid {\n  background: $plyr-video-control-background-hover;\n  border: 0;\n  border-radius: 100%;\n  color: $plyr-video-control-color;\n  display: none;\n  left: 50%;\n  opacity: 0.9;\n  padding: calc(#{$plyr-control-spacing} * 1.5);\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transition: 0.3s;\n  z-index: 2;\n\n  // Offset icon to make the play button look right\n  svg {\n    left: 2px;\n    position: relative;\n  }\n\n  &:hover,\n  &:focus {\n    opacity: 1;\n  }\n}\n\n.plyr--playing .plyr__control--overlaid {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.plyr--full-ui.plyr--video .plyr__control--overlaid {\n  display: block;\n}\n\n// Video range inputs\n.plyr--full-ui.plyr--video input[type='range'] {\n  &::-webkit-slider-runnable-track {\n    background-color: $plyr-video-range-track-background;\n  }\n\n  &::-moz-range-track {\n    background-color: $plyr-video-range-track-background;\n  }\n\n  &::-ms-track {\n    background-color: $plyr-video-range-track-background;\n  }\n\n  // Pressed styles\n  &:active {\n    &::-webkit-slider-thumb {\n      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);\n    }\n\n    &::-moz-range-thumb {\n      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);\n    }\n\n    &::-ms-thumb {\n      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);\n    }\n  }\n}\n\n// Progress\n.plyr--video .plyr__progress__buffer {\n  color: $plyr-video-progress-buffered-background;\n}\n"
  },
  {
    "path": "src/sass/utils/animation.scss",
    "content": "// --------------------------------------------------------------\n// Animation utils\n// --------------------------------------------------------------\n\n.plyr--no-transition {\n  transition: none !important;\n}\n"
  },
  {
    "path": "src/sass/utils/hidden.scss",
    "content": "// --------------------------------------------------------------\n// Hiding content nicely\n// --------------------------------------------------------------\n\n// Screen reader only elements\n.plyr__sr-only {\n  clip: rect(1px, 1px, 1px, 1px);\n  overflow: hidden;\n\n  // !important is not always needed\n  @if $plyr-sr-only-important {\n    border: 0 !important;\n    height: 1px !important;\n    padding: 0 !important;\n    position: absolute !important;\n    width: 1px !important;\n  } @else {\n    border: 0;\n    height: 1px;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  }\n}\n\n.plyr [hidden] {\n  display: none !important;\n}\n"
  },
  {
    "path": "tasks/build.js",
    "content": "import { readFileSync } from 'node:fs';\nimport path, { join } from 'node:path';\nimport babel from '@rollup/plugin-babel';\nimport commonjs from '@rollup/plugin-commonjs';\nimport resolve from '@rollup/plugin-node-resolve';\nimport autoprefixer from 'autoprefixer';\nimport browserSync from 'browser-sync';\nimport cssnano from 'cssnano';\nimport { deleteAsync } from 'del';\nimport gulp from 'gulp';\nimport rollup from 'gulp-better-rollup';\nimport filter from 'gulp-filter';\nimport header from 'gulp-header';\nimport gulpIf from 'gulp-if';\nimport imagemin from 'gulp-imagemin';\nimport plumber from 'gulp-plumber';\nimport postcss from 'gulp-postcss';\nimport rename from 'gulp-rename';\nimport sass from 'gulp-sass';\nimport size from 'gulp-size';\nimport sourcemaps from 'gulp-sourcemaps';\nimport svgstore from 'gulp-svgstore';\nimport terser from 'gulp-terser';\nimport imageminSvgo from 'imagemin-svgo';\nimport customprops from 'postcss-custom-properties';\nimport * as dartSass from 'sass';\n\nconst jobs = JSON.parse(readFileSync(join(path.resolve(), 'build.json'), 'utf-8'));\n\nconst bs = browserSync.create();\nconst sassCompiler = sass(dartSass);\nconst minSuffix = '.min';\n\n// Paths\nconst root = path.resolve();\nconst paths = {\n  plyr: {\n    src: {\n      sass: path.join(root, 'src/sass/**/*.scss'),\n      js: path.join(root, 'src/js/**/*.js'),\n      sprite: path.join(root, 'src/sprite/*.svg'),\n    },\n    output: path.join(root, 'dist/'),\n  },\n  demo: {\n    src: {\n      sass: path.join(root, 'demo/src/sass/**/*.scss'),\n      js: path.join(root, 'demo/src/js/**/*.js'),\n    },\n    output: path.join(root, 'demo/dist/'),\n    root: path.join(root, 'demo/'),\n  },\n};\n\n// Task lists\nconst tasks = {\n  css: [],\n  js: [],\n  sprite: [],\n};\n\n// Size plugin options\nconst sizeOptions = { showFiles: true, gzip: true };\n\n// Clean task\nexport async function clean() {\n  const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*'));\n  dirs.push(`!${path.join(paths.plyr.output, '**/*.mp4')}`);\n  return await deleteAsync(dirs);\n};\n\n// JavaScript tasks\nObject.entries(jobs.js).forEach(([filename, entry]) => {\n  const { dist, formats, namespace, polyfill, src } = entry;\n\n  formats.forEach((format) => {\n    const name = `js:${filename}:${format}`;\n    const extension = format === 'es' ? 'mjs' : 'js';\n    tasks.js.push(name);\n\n    gulp.task(name, () =>\n      gulp\n        .src(src)\n        .pipe(plumber())\n        .pipe(sourcemaps.init())\n        .pipe(\n          rollup(\n            {\n              plugins: [\n                resolve(),\n                commonjs(),\n                babel({\n                  babelHelpers: 'bundled',\n                  presets: [\n                    [\n                      '@babel/env',\n                      {\n                        useBuiltIns: polyfill ? 'usage' : false,\n                        corejs: polyfill ? 3 : undefined,\n                        bugfixes: true,\n                      },\n                    ],\n                  ],\n                  plugins: [\n                    '@babel/plugin-proposal-class-properties',\n                    '@babel/plugin-transform-nullish-coalescing-operator',\n                    '@babel/plugin-proposal-optional-chaining',\n                  ],\n                  babelrc: false,\n                  exclude: [/\\/core-js\\//],\n                }),\n              ],\n            },\n            {\n              name: namespace,\n              format,\n            },\n          ),\n        )\n        .pipe(gulpIf(() => extension !== 'mjs', header('typeof navigator === \"object\" && ')))\n        .pipe(rename({ extname: `.${extension}` }))\n        .pipe(gulp.dest(dist))\n        .pipe(filter(`**/*.${extension}`))\n        .pipe(terser())\n        .pipe(rename({ suffix: minSuffix }))\n        .pipe(size(sizeOptions))\n        .pipe(sourcemaps.write(''))\n        .pipe(gulp.dest(dist)));\n  });\n});\n\n// CSS tasks\nObject.entries(jobs.css).forEach(([filename, entry]) => {\n  const { dist, src } = entry;\n  const name = `css:${filename}`;\n  tasks.css.push(name);\n\n  gulp.task(name, () =>\n    gulp\n      .src(src)\n      .pipe(plumber())\n      .pipe(sassCompiler())\n      .pipe(\n        postcss([\n          customprops(),\n          autoprefixer(),\n          cssnano({ preset: 'default' }),\n        ]),\n      )\n      .pipe(size(sizeOptions))\n      .pipe(gulp.dest(dist)));\n});\n\n// SVG Sprite tasks\nObject.entries(jobs.sprite).forEach(([filename, entry]) => {\n  const { dist, src } = entry;\n  const name = `sprite:${filename}`;\n  tasks.sprite.push(name);\n\n  gulp.task(name, () =>\n    gulp\n      .src(src)\n      .pipe(plumber())\n      .pipe(\n        imagemin([\n          imageminSvgo({\n            plugins: [\n              {\n                name: 'preset-default',\n                params: {\n                  overrides: {\n                    removeViewBox: false, // Keep viewBox attribute\n                  },\n                },\n              },\n            ],\n          }),\n        ]),\n      )\n      .pipe(svgstore())\n      .pipe(rename({ basename: path.parse(filename).name }))\n      .pipe(size(sizeOptions))\n      .pipe(gulp.dest(dist)));\n});\n\n// Build tasks\nexport const js = gulp.parallel(...tasks.js);\nexport const css = gulp.parallel(...tasks.css);\nexport const sprites = gulp.parallel(...tasks.sprite);\n\n// Watch task\nexport function watch() {\n  gulp.watch(paths.plyr.src.js, js);\n  gulp.watch(paths.plyr.src.sass, css);\n  gulp.watch(paths.plyr.src.sprite, sprites);\n  gulp.watch(paths.demo.src.js, js);\n  gulp.watch(paths.demo.src.sass, css);\n}\n\n// Serve task\nexport function serve() {\n  return bs.init({\n    server: {\n      baseDir: paths.demo.root,\n    },\n    notify: false,\n    watch: true,\n    ghostMode: false,\n  });\n}\n\n// Build distribution\nexport const build = gulp.series(clean, gulp.parallel(js, css, sprites));\n\n// Default task\nexport default gulp.series(build, gulp.parallel(serve, watch));\n"
  },
  {
    "path": "tasks/deploy.js",
    "content": "import { readFileSync } from 'node:fs';\nimport path, { join } from 'node:path';\nimport process from 'node:process';\nimport { fileURLToPath } from 'node:url';\nimport { S3Client } from '@aws-sdk/client-s3';\nimport aws from 'aws-sdk';\nimport { bold, cyan, green } from 'colorette';\nimport log from 'fancy-log';\nimport gitbranch from 'git-branch';\nimport gulp from 'gulp';\nimport open from 'gulp-open';\nimport rename from 'gulp-rename';\nimport replace from 'gulp-replace';\nimport size from 'gulp-size';\n\nimport { publish } from './utils/publish.js';\nimport 'dotenv/config';\n\n// Convert `import.meta.url` to `__filename` and `__dirname`\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst pkg = JSON.parse(readFileSync(join(path.resolve(), 'package.json'), 'utf-8'));\nconst config = JSON.parse(readFileSync(join(path.resolve(), 'deploy.json'), 'utf-8'));\n\n// Info from package\nconst { version } = pkg;\nconst minSuffix = '.min';\n\n// Get AWS config\nconst jobs = Object.fromEntries(Object.entries(config).map(([name, options]) => [name, {\n  ...options,\n  client: options.type === 'r2'\n    ? new S3Client({\n      region: 'auto',\n      credentials: {\n        accessKeyId: process.env.R2_ACCESS_KEY_ID,\n        secretAccessKey: process.env.R2_SECRET_ACCESS_KEY,\n      },\n      endpoint: `https://${process.env.CF_ACCOUNT_ID}.r2.cloudflarestorage.com`,\n    })\n    : new S3Client({\n      region: options.region,\n      credentials: new aws.SharedIniFileCredentials({ profile: 'plyr' }),\n    }),\n}]));\n\n// Paths\nconst root = path.join(__dirname, '..');\nconst paths = {\n  demo: path.join(root, 'demo/'),\n  upload: [\n    path.join(root, `dist/*${minSuffix}.*`),\n    path.join(root, 'dist/*.css'),\n    path.join(root, 'dist/*.svg'),\n    path.join(root, `demo/dist/*${minSuffix}.*`),\n    path.join(root, 'demo/dist/*.css'),\n    path.join(root, 'demo/dist/*.svg'),\n  ],\n};\n\n// Get git branch info\nconst currentBranch = (() => {\n  try {\n    return gitbranch.sync();\n  }\n  catch {\n    return null;\n  }\n})();\n\nconst branch = {\n  current: currentBranch,\n  isMaster: currentBranch === 'master',\n  isBeta: currentBranch === 'beta',\n};\n\nconst maxAge = 31536000; // 1 year\nconst options = {\n  cdn: {\n    headers: {\n      'Cache-Control': `max-age=${maxAge}, immutable`,\n    },\n  },\n  demo: {\n    uploadPath: branch.isBeta ? '/beta' : null,\n    headers: {\n      'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',\n    },\n  },\n};\n\n// Size plugin\nconst sizeOptions = { showFiles: true, gzip: true };\n\nconst regex = '(?:0|[1-9]\\\\d*)\\\\.(?:0|[1-9]\\\\d*)\\\\.(?:0|[1-9]\\\\d*)(?:-[\\\\da-z\\\\-]+(?:\\\\.[\\\\da-z\\\\-]+)*)?(?:\\\\+[\\\\da-z\\\\-]+(?:\\\\.[\\\\da-z\\\\-]+)*)?';\nconst semver = new RegExp(`v${regex}`, 'gi');\nconst localPath = /(..\\/)?dist\\//gi;\nconst versionPath = `https://${jobs.cdn.domain}/${version}/`;\nconst cdnPath = new RegExp(`${jobs.cdn.domain}/${regex}/`, 'gi');\n\nconst renameFile = rename((p) => {\n  p.basename = p.basename.replace(minSuffix, '');\n  p.dirname = p.dirname.replace('.', version);\n});\n\n// Check we're on the correct branch to deploy\nfunction canDeploy() {\n  if (![branch.isMaster, branch.isBeta].some(Boolean)) {\n    console.error(`Must be on an allowed branch to publish! (current: ${branch.current})`);\n    return false;\n  }\n\n  return true;\n}\n\nexport function prepare(done) {\n  if (!canDeploy()) {\n    done();\n    return null;\n  }\n\n  const { domain } = jobs.cdn;\n\n  log(`Updating version in files to ${green(bold(version))}...`);\n\n  // Replace versioned URLs in source\n  const files = ['plyr.js', 'plyr.polyfilled.js', 'config/defaults.js'];\n\n  return gulp\n    .src(\n      files.map(file => path.join(root, `src/js/${file}`)),\n      { base: '.' },\n    )\n    .pipe(replace(semver, `v${version}`))\n    .pipe(replace(cdnPath, `${domain}/${version}/`))\n    .pipe(gulp.dest('./'));\n}\n\nfunction cdn(done) {\n  if (!canDeploy()) {\n    done();\n    return null;\n  }\n\n  const { domain, client, bucket } = jobs.cdn;\n\n  log(`Uploading ${green(bold(pkg.version))} to ${cyan(domain)}...`);\n\n  // Upload to CDN\n  return gulp\n    .src(paths.upload)\n    .pipe(renameFile)\n    .pipe(\n      replace(\n        /sourceMappingURL=([\\w\\-?.]+)/,\n        (_, filename) => `sourceMappingURL=${filename.replace(minSuffix, '')}`,\n      ),\n    )\n    .pipe(size(sizeOptions))\n    .pipe(replace(localPath, versionPath))\n    .pipe(publish(client, bucket, options.cdn.headers));\n}\n\nfunction demo(done) {\n  if (!canDeploy()) {\n    done();\n    return null;\n  }\n\n  const { client, bucket, domain } = jobs.demo;\n  log(`Uploading ${green(bold(pkg.version))} to ${cyan(domain)}...`);\n\n  // Replace versioned files in README.md\n  gulp\n    .src([`${root}/README.md`])\n    .pipe(replace(cdnPath, `${jobs.cdn.domain}/${version}/`))\n    .pipe(gulp.dest(root));\n\n  // Replace local file paths with remote paths in demo HTML\n  const index = `${paths.demo}index.html`;\n  const error = `${paths.demo}error.html`;\n  const pages = [index];\n\n  if (branch.isMaster) {\n    pages.push(error);\n  }\n\n  return gulp\n    .src(pages)\n    .pipe(replace(localPath, versionPath))\n    .pipe(\n      rename((p) => {\n        if (options.demo.uploadPath) {\n          p.dirname += options.demo.uploadPath;\n        }\n      }),\n    )\n    .pipe(publish(client, bucket, options.demo.headers));\n}\n\nfunction preview() {\n  const { domain } = jobs.demo;\n\n  return gulp.src(__filename).pipe(\n    open({\n      uri: `https://${domain}/${branch.isBeta ? 'beta' : ''}`,\n    }),\n  );\n}\n\nexport const deploy = gulp.series(cdn, demo, preview);\n"
  },
  {
    "path": "tasks/utils/publish.js",
    "content": "import { PutObjectCommand } from '@aws-sdk/client-s3';\nimport mime from 'mime';\nimport through from 'through2';\n\nexport function publish(client, bucket, headers = {}) {\n  return through.obj(async function (file, _, callback) {\n    if (!file.isBuffer()) return callback(null, file);\n\n    // Use the relative path as the key\n    const key = file.relative.replace(/\\\\/g, '/'); // Ensure forward slashes for S3 keys\n\n    // Determine the MIME type of the file\n    const contentType = mime.getType(file.path) || 'application/octet-stream';\n\n    try {\n      await client.send(\n        new PutObjectCommand({\n          Bucket: bucket,\n          Key: key,\n          Body: file.contents,\n          ContentType: contentType, // Set the MIME type\n          CacheControl: headers['Cache-Control'], // Use provided Cache-Control header\n        }),\n      );\n\n      console.warn(`Uploaded: ${key} (Content-Type: ${contentType})`);\n      this.push(file);\n      callback();\n    }\n    catch (err) {\n      callback(err);\n    }\n  });\n}\n"
  }
]