@cloudnest/redxplyr 1.0.0

package/dist/redxplyr.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="plyr-airplay" viewBox="0 0 18 18"><path d="M16 1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3v-2H3V3h12v8h-2v2h3a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1"/><path d="M4 17h10l-5-6z"/></symbol><symbol id="plyr-captions-off" viewBox="0 0 18 18"><path fill-opacity=".5" fill-rule="evenodd" d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3s.5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7s1.65 3.69 3.63 3.69m7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7s1.65 3.69 3.63 3.69"/></symbol><symbol id="plyr-captions-on" viewBox="0 0 18 18"><path fill-rule="evenodd" d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3s.5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7s1.65 3.69 3.63 3.69m7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7s1.65 3.69 3.63 3.69"/></symbol><symbol id="plyr-download" viewBox="0 0 18 18"><path d="M9 13c.3 0 .5-.1.7-.3L15.4 7 14 5.6l-4 4V1H8v8.6l-4-4L2.6 7l5.7 5.7c.2.2.4.3.7.3m-7 2h14v2H2z"/></symbol><symbol id="plyr-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="plyr-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="plyr-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171 0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="plyr-logo-vimeo" viewBox="0 0 18 18"><path d="M17 5.3c-.1 1.6-1.2 3.7-3.3 6.4-2.2 2.8-4 4.2-5.5 4.2-.9 0-1.7-.9-2.4-2.6C5 10.9 4.4 6 3 6c-.1 0-.5.3-1.2.8l-.8-1c.8-.7 3.5-3.4 4.7-3.5S7.7 3 8 4.8c.3 2 .8 6.1 1.8 6.1.9 0 2.5-3.4 2.6-4 .1-.9-.3-1.9-2.3-1.1.8-2.6 2.3-3.8 4.5-3.8q2.55.15 2.4 3.3"/></symbol><symbol id="plyr-logo-youtube" viewBox="0 0 18 18"><path d="M16.8 5.8c-.2-1.3-.8-2.2-2.2-2.4C12.4 3 9 3 9 3s-3.4 0-5.6.4C2 3.6 1.3 4.5 1.2 5.8 1 7.1 1 9 1 9s0 1.9.2 3.2.8 2.2 2.2 2.4C5.6 15 9 15 9 15s3.4 0 5.6-.4c1.4-.3 2-1.1 2.2-2.4S17 9 17 9s0-1.9-.2-3.2M7 12V6l5 3z"/></symbol><symbol id="plyr-muted" viewBox="0 0 18 18"><path d="m12.4 12.5 2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601z"/></symbol><symbol id="plyr-pause" viewBox="0 0 18 18"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1m6 0c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1z"/></symbol><symbol id="plyr-pip" viewBox="0 0 18 18"><path d="M13.293 3.293 7.022 9.564l1.414 1.414 6.271-6.271L17 7V1h-6z"/><path d="M13 15H3V5h5V3H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-6h-2z"/></symbol><symbol id="plyr-play" viewBox="0 0 18 18"><path d="M15.562 8.1 3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8"/></symbol><symbol id="plyr-restart" viewBox="0 0 18 18"><path d="m9.7 1.2.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5s-2.6-.5-3.5-1.5c-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9z"/></symbol><symbol id="plyr-rewind" viewBox="0 0 18 18"><path d="M10.125 1 0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="plyr-settings" viewBox="0 0 18 18"><path d="M16.135 7.784a2 2 0 0 1-1.23-2.969c.322-.536.225-.998-.094-1.316l-.31-.31c-.318-.318-.78-.415-1.316-.094a2 2 0 0 1-2.969-1.23C10.065 1.258 9.669 1 9.219 1h-.438c-.45 0-.845.258-.997.865a2 2 0 0 1-2.969 1.23c-.536-.322-.999-.225-1.317.093l-.31.31c-.318.318-.415.781-.093 1.317a2 2 0 0 1-1.23 2.969C1.26 7.935 1 8.33 1 8.781v.438c0 .45.258.845.865.997a2 2 0 0 1 1.23 2.969c-.322.536-.225.998.094 1.316l.31.31c.319.319.782.415 1.316.094a2 2 0 0 1 2.969 1.23c.151.607.547.865.997.865h.438c.45 0 .845-.258.997-.865a2 2 0 0 1 2.969-1.23c.535.321.997.225 1.316-.094l.31-.31c.318-.318.415-.781.094-1.316a2 2 0 0 1 1.23-2.969c.607-.151.865-.547.865-.997v-.438c0-.451-.26-.846-.865-.997M9 12a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/></symbol><symbol id="plyr-volume" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4C15.4 5.9 16 7.4 16 9s-.6 3.1-1.8 4.3c-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7"/><path d="M11.282 5.282a.91.91 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.91.91 0 0 0 0 1.316c.145.145.636.262 1.018.156a.7.7 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9q.001-.255-.011-.51c-.053-.992-.319-2.005-1.522-3.208a.91.91 0 0 0-1.316 0m-7.495.726H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601z"/></symbol></svg>

package/eslint.config.mjs

@@ -0,0 +1,39 @@
+import antfu from '@antfu/eslint-config';
+import { FlatCompat } from '@eslint/eslintrc';
+
+import globals from 'globals';
+
+const compat = new FlatCompat({ baseDirectory: import.meta.dirname });
+
+export default antfu({
+  formatters: {
+    css: true,
+    html: true,
+    markdown: 'prettier',
+    svg: 'prettier',
+  },
+  stylistic: {
+    semi: true,
+    spacedComment: true,
+    indent: 2,
+    quotes: 'single',
+  },
+  ignores: ['node_modules', 'dist', 'demo/v1/redxplyr*', '**/demo/v1/redxplyr*', 'src/js/plyr.d.ts'],
+  languageOptions: {
+    globals: {
+      ...globals.browser,
+      Hls: 'readonly',
+      jQuery: 'readonly',
+      Plyr: 'readonly',
+    },
+  },
+}, ...compat.config({
+  rules: {
+    'antfu/if-newline': 'off',
+  },
+}, {
+  files: ['**/*.md'],
+  rules: {
+    'style/max-len': 'off',
+  },
+}));

package/gulpfile.js

@@ -0,0 +1,8 @@
+// ==========================================================================
+// Gulp build script
+// ==========================================================================
+
+export { default } from './tasks/build.js';
+
+export * from './tasks/build.js';
+export * from './tasks/deploy.js';

package/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "@cloudnest/redxplyr",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "A polished, accessible and customizable HTML5, YouTube, Vimeo and HLS media player",
+  "author": "xgauravyaduvanshii <xgauravyaduvanshii@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://redxplyr.flyingdarkdev.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xgauravyaduvanshii/redxplyr.git"
+  },
+  "bugs": {
+    "url": "https://github.com/xgauravyaduvanshii/redxplyr/issues"
+  },
+  "keywords": [
+    "HTML5 Video",
+    "HTML5 Audio",
+    "Media Player",
+    "DASH",
+    "Shaka",
+    "WordPress",
+    "HLS"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/js/plyr.d.ts",
+      "import": "./dist/redxplyr.mjs",
+      "require": "./dist/redxplyr.js",
+      "browser": "./dist/redxplyr.min.js",
+      "default": "./dist/redxplyr.js"
+    },
+    "./dist/redxplyr.css": "./dist/redxplyr.css",
+    "./css": "./dist/redxplyr.css",
+    "./redxplyr.scss": "./src/sass/plyr.scss",
+    "./plyr.scss": "./src/sass/plyr.scss"
+  },
+  "sass": "./src/sass/plyr.scss",
+  "style": "./dist/redxplyr.css",
+  "browserslist": "> 1%",
+  "scripts": {
+    "build": "gulp build",
+    "lint": "stylelint **/*.scss && eslint src demo && pnpm remark",
+    "lint:fix": "stylelint **/*.scss --fix && eslint src demo --fix",
+    "remark": "remark -f --use 'validate-links=repository:\"xgauravyaduvanshii/redxplyr\"' '{,!(node_modules),.?**/}*.md'",
+    "deploy": "pnpm run lint && gulp prepare && gulp build && gulp deploy",
+    "spellcheck": "cspell \"**/*.{js,md,scss,json}\" --no-must-find-files",
+    "start": "gulp"
+  },
+  "dependencies": {
+    "core-js": "^3.45.1",
+    "custom-event-polyfill": "^1.0.7",
+    "loadjs": "^4.3.0",
+    "rangetouch": "^2.0.1",
+    "url-polyfill": "^1.1.13"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^5.2.1",
+    "@aws-sdk/client-s3": "^3.876.0",
+    "@babel/core": "^7.28.3",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1",
+    "@babel/preset-env": "^7.28.3",
+    "@eslint/eslintrc": "^3.3.1",
+    "@prettier/plugin-xml": "^3.4.2",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "autoprefixer": "^10.4.21",
+    "aws-sdk": "^2.1692.0",
+    "babel-eslint": "^10.1.0",
+    "browser-sync": "^3.0.4",
+    "colorette": "2.0.20",
+    "cspell": "^9.2.0",
+    "cssnano": "^7.1.1",
+    "del": "^8.0.0",
+    "dotenv": "^17.2.1",
+    "eslint": "^9.34.0",
+    "eslint-plugin-format": "^1.0.1",
+    "fancy-log": "^2.0.0",
+    "git-branch": "^2.0.1",
+    "globals": "^16.3.0",
+    "gulp": "^5.0.1",
+    "gulp-better-rollup": "^4.0.1",
+    "gulp-filter": "^9.0.1",
+    "gulp-header": "^2.0.9",
+    "gulp-if": "^3.0.0",
+    "gulp-imagemin": "^9.1.0",
+    "gulp-open": "^3.0.1",
+    "gulp-plumber": "^1.2.1",
+    "gulp-postcss": "^10.0.0",
+    "gulp-rename": "^2.1.0",
+    "gulp-replace": "^1.1.4",
+    "gulp-sass": "^6.0.1",
+    "gulp-size": "^5.0.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "gulp-svgstore": "^9.0.0",
+    "gulp-terser": "^2.1.0",
+    "imagemin-svgo": "^11.0.1",
+    "mime": "^4.0.7",
+    "postcss": "^8.5.6",
+    "postcss-custom-properties": "^14.0.6",
+    "postcss-scss": "^4.0.9",
+    "remark-cli": "^12.0.1",
+    "remark-validate-links": "^13.1.0",
+    "rollup": "^4.48.1",
+    "sass": "^1.91.0",
+    "stylelint": "^16.23.1",
+    "stylelint-config-sass-guidelines": "^12.1.0",
+    "stylelint-selector-bem-pattern": "^4.0.1",
+    "through2": "^4.0.2"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,8 @@
+allowBuilds:
+  '@parcel/watcher': true
+  aws-sdk: true
+  core-js: true
+  es5-ext: true
+  gifsicle: true
+  mozjpeg: true
+  optipng-bin: true

package/src/js/captions.js

@@ -0,0 +1,411 @@
+// ==========================================================================
+// Plyr Captions
+// TODO: Create as class
+// ==========================================================================
+
+import controls from './controls';
+import support from './support';
+import { dedupe } from './utils/arrays';
+import browser from './utils/browser';
+import {
+  createElement,
+  emptyElement,
+  getAttributesFromSelector,
+  insertAfter,
+  removeElement,
+  toggleClass,
+} from './utils/elements';
+import { on, triggerEvent } from './utils/events';
+import fetch from './utils/fetch';
+import i18n from './utils/i18n';
+import is from './utils/is';
+import { getHTML } from './utils/strings';
+import { parseUrl } from './utils/urls';
+
+const captions = {
+  // Setup captions
+  setup() {
+    // Requires UI support
+    if (!this.supported.ui) {
+      return;
+    }
+
+    // Only Vimeo and HTML5 video supported at this point
+    if (!this.isVideo || this.isYouTube || (this.isHTML5 && !support.textTracks)) {
+      // Clear menu and hide
+      if (
+        is.array(this.config.controls)
+        && this.config.controls.includes('settings')
+        && this.config.settings.includes('captions')
+      ) {
+        controls.setCaptionsMenu.call(this);
+      }
+
+      return;
+    }
+
+    // Inject the container
+    if (!is.element(this.elements.captions)) {
+      this.elements.captions = createElement('div', getAttributesFromSelector(this.config.selectors.captions));
+      this.elements.captions.setAttribute('dir', 'auto');
+
+      insertAfter(this.elements.captions, this.elements.wrapper);
+    }
+
+    // Fix IE captions if CORS is used
+    // Fetch captions and inject as blobs instead (data URIs not supported!)
+    if (browser.isIE && window.URL) {
+      const elements = this.media.querySelectorAll('track');
+
+      Array.from(elements).forEach((track) => {
+        const src = track.getAttribute('src');
+        const url = parseUrl(src);
+
+        if (
+          url !== null
+          && url.hostname !== window.location.href.hostname
+          && ['http:', 'https:'].includes(url.protocol)
+        ) {
+          fetch(src, 'blob')
+            .then((blob) => {
+              track.setAttribute('src', window.URL.createObjectURL(blob));
+            })
+            .catch(() => {
+              removeElement(track);
+            });
+        }
+      });
+    }
+
+    // Get and set initial data
+    // The "preferred" options are not realized unless / until the wanted language has a match
+    // * languages: Array of user's browser languages.
+    // * language:  The language preferred by user settings or config
+    // * active:    The state preferred by user settings or config
+    // * toggled:   The real captions state
+
+    const browserLanguages = navigator.languages || [navigator.language || navigator.userLanguage || 'en'];
+    const languages = dedupe(browserLanguages.map(language => language.split('-')[0]));
+    let language = (this.storage.get('language') || this.captions.language || this.config.captions.language || 'auto').toLowerCase();
+
+    // Use first browser language when language is 'auto'
+    if (language === 'auto') {
+      [language] = languages;
+    }
+
+    let active = this.storage.get('captions') || this.captions.active;
+    if (!is.boolean(active)) {
+      ({ active } = this.config.captions);
+    }
+
+    Object.assign(this.captions, {
+      toggled: false,
+      active,
+      language,
+      languages,
+    });
+
+    // Watch changes to textTracks and update captions menu
+    if (this.isHTML5) {
+      const trackEvents = this.config.captions.update ? 'addtrack removetrack' : 'removetrack';
+      on.call(this, this.media.textTracks, trackEvents, captions.update.bind(this));
+    }
+
+    // Update available languages in list next tick (the event must not be triggered before the listeners)
+    setTimeout(captions.update.bind(this), 0);
+  },
+
+  // Update available language options in settings based on tracks
+  update() {
+    const tracks = captions.getTracks.call(this, true);
+    // Get the wanted language
+    const { active, language, meta, currentTrackNode } = this.captions;
+    const languageExists = Boolean(tracks.find(track => track.language === language));
+
+    // Handle tracks (add event listener and "pseudo"-default)
+    if (this.isHTML5 && this.isVideo) {
+      tracks
+        .filter(track => !meta.get(track))
+        .forEach((track) => {
+          this.debug.log('Track added', track);
+
+          // Attempt to store if the original dom element was "default"
+          meta.set(track, {
+            default: track.mode === 'showing',
+          });
+
+          // Turn off native caption rendering to avoid double captions
+          // Note: mode='hidden' forces a track to download. To ensure every track
+          // isn't downloaded at once, only 'showing' tracks should be reassigned
+
+          if (track.mode === 'showing') {
+            track.mode = 'hidden';
+          }
+
+          // Add event listener for cue changes
+          on.call(this, track, 'cuechange', () => captions.updateCues.call(this));
+        });
+    }
+
+    // Update language first time it matches, or if the previous matching track was removed
+    if ((languageExists && this.language !== language) || !tracks.includes(currentTrackNode)) {
+      captions.setLanguage.call(this, language);
+      captions.toggle.call(this, active && languageExists);
+    }
+
+    // Enable or disable captions based on track length
+    if (this.elements) {
+      toggleClass(this.elements.container, this.config.classNames.captions.enabled, !is.empty(tracks));
+    }
+
+    // Update available languages in list
+    if (
+      is.array(this.config.controls)
+      && this.config.controls.includes('settings')
+      && this.config.settings.includes('captions')
+    ) {
+      controls.setCaptionsMenu.call(this);
+    }
+  },
+
+  // Toggle captions display
+  // Used internally for the toggleCaptions method, with the passive option forced to false
+  toggle(input, passive = true) {
+    // If there's no full support
+    if (!this.supported.ui) {
+      return;
+    }
+
+    const { toggled } = this.captions; // Current state
+    const activeClass = this.config.classNames.captions.active;
+    // Get the next state
+    // If the method is called without parameter, toggle based on current value
+    const active = is.nullOrUndefined(input) ? !toggled : input;
+
+    // Update state and trigger event
+    if (active !== toggled) {
+      // When passive, don't override user preferences
+      if (!passive) {
+        this.captions.active = active;
+        this.storage.set({ captions: active });
+      }
+
+      // Force language if the call isn't passive and there is no matching language to toggle to
+      if (!this.language && active && !passive) {
+        const tracks = captions.getTracks.call(this);
+        const track = captions.findTrack.call(this, [this.captions.language, ...this.captions.languages], true);
+
+        // Override user preferences to avoid switching languages if a matching track is added
+        this.captions.language = track.language;
+
+        // Set caption, but don't store in localStorage as user preference
+        captions.set.call(this, tracks.indexOf(track));
+        return;
+      }
+
+      // Toggle button if it's enabled
+      if (this.elements.buttons.captions) {
+        this.elements.buttons.captions.pressed = active;
+      }
+
+      // Add class hook
+      toggleClass(this.elements.container, activeClass, active);
+
+      this.captions.toggled = active;
+
+      // Update settings menu
+      controls.updateSetting.call(this, 'captions');
+
+      // Trigger event (not used internally)
+      triggerEvent.call(this, this.media, active ? 'captionsenabled' : 'captionsdisabled');
+    }
+
+    // Wait for the call stack to clear before setting mode='hidden'
+    // on the active track - forcing the browser to download it
+    setTimeout(() => {
+      if (active && this.captions.toggled) {
+        this.captions.currentTrackNode.mode = 'hidden';
+      }
+    });
+  },
+
+  // Set captions by track index
+  // Used internally for the currentTrack setter with the passive option forced to false
+  set(index, passive = true) {
+    const tracks = captions.getTracks.call(this);
+
+    // Disable captions if setting to -1
+    if (index === -1) {
+      captions.toggle.call(this, false, passive);
+      return;
+    }
+
+    if (!is.number(index)) {
+      this.debug.warn('Invalid caption argument', index);
+      return;
+    }
+
+    if (!(index in tracks)) {
+      this.debug.warn('Track not found', index);
+      return;
+    }
+
+    if (this.captions.currentTrack !== index) {
+      this.captions.currentTrack = index;
+      const track = tracks[index];
+      const { language } = track || {};
+
+      // Store reference to node for invalidation on remove
+      this.captions.currentTrackNode = track;
+
+      // Update settings menu
+      controls.updateSetting.call(this, 'captions');
+
+      // When passive, don't override user preferences
+      if (!passive) {
+        this.captions.language = language;
+        this.storage.set({ language });
+      }
+
+      // Handle Vimeo captions
+      if (this.isVimeo) {
+        // Enable text track but don't render captions within the player
+        // Since we handle that ourselves
+        this.embed.enableTextTrack(language, null, false);
+      }
+
+      // Trigger event
+      triggerEvent.call(this, this.media, 'languagechange');
+    }
+
+    // Show captions
+    captions.toggle.call(this, true, passive);
+
+    if (this.isHTML5 && this.isVideo) {
+      // If we change the active track while a cue is already displayed we need to update it
+      captions.updateCues.call(this);
+    }
+  },
+
+  // Set captions by language
+  // Used internally for the language setter with the passive option forced to false
+  setLanguage(input, passive = true) {
+    if (!is.string(input)) {
+      this.debug.warn('Invalid language argument', input);
+      return;
+    }
+    // Normalize
+    const language = input.toLowerCase();
+    this.captions.language = language;
+
+    // Set currentTrack
+    const tracks = captions.getTracks.call(this);
+    const track = captions.findTrack.call(this, [language]);
+    captions.set.call(this, tracks.indexOf(track), passive);
+  },
+
+  // Get current valid caption tracks
+  // If update is false it will also ignore tracks without metadata
+  // This is used to "freeze" the language options when captions.update is false
+  getTracks(update = false) {
+    // Handle media or textTracks missing or null
+    const tracks = Array.from((this.media || {}).textTracks || []);
+    // For HTML5, use cache instead of current tracks when it exists (if captions.update is false)
+    // Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata)
+    return tracks
+      .filter(track => !this.isHTML5 || update || this.captions.meta.has(track))
+      .filter(track => ['captions', 'subtitles'].includes(track.kind));
+  },
+
+  // Match tracks based on languages and get the first
+  findTrack(languages, force = false) {
+    const tracks = captions.getTracks.call(this);
+    const sortIsDefault = track => Number((this.captions.meta.get(track) || {}).default);
+    const sorted = Array.from(tracks).sort((a, b) => sortIsDefault(b) - sortIsDefault(a));
+    let track;
+
+    languages.every((language) => {
+      track = sorted.find(t => t.language === language);
+      return !track; // Break iteration if there is a match
+    });
+
+    // If no match is found but is required, get first
+    return track || (force ? sorted[0] : undefined);
+  },
+
+  // Get the current track
+  getCurrentTrack() {
+    return captions.getTracks.call(this)[this.currentTrack];
+  },
+
+  // Get UI label for track
+  getLabel(track) {
+    let currentTrack = track;
+
+    if (!is.track(currentTrack) && support.textTracks && this.captions.toggled) {
+      currentTrack = captions.getCurrentTrack.call(this);
+    }
+
+    if (is.track(currentTrack)) {
+      if (!is.empty(currentTrack.label)) {
+        return currentTrack.label;
+      }
+
+      if (!is.empty(currentTrack.language)) {
+        return track.language.toUpperCase();
+      }
+
+      return i18n.get('enabled', this.config);
+    }
+
+    return i18n.get('disabled', this.config);
+  },
+
+  // Update captions using current track's active cues
+  // Also optional array argument in case there isn't any track (ex: vimeo)
+  updateCues(input) {
+    // Requires UI
+    if (!this.supported.ui) {
+      return;
+    }
+
+    if (!is.element(this.elements.captions)) {
+      this.debug.warn('No captions element to render to');
+      return;
+    }
+
+    // Only accept array or empty input
+    if (!is.nullOrUndefined(input) && !Array.isArray(input)) {
+      this.debug.warn('updateCues: Invalid input', input);
+      return;
+    }
+
+    let cues = input;
+
+    // Get cues from track
+    if (!cues) {
+      const track = captions.getCurrentTrack.call(this);
+
+      cues = Array.from((track || {}).activeCues || [])
+        .map(cue => cue.getCueAsHTML())
+        .map(getHTML);
+    }
+
+    // Set new caption text
+    const content = cues.map(cueText => cueText.trim()).join('\n');
+    const changed = content !== this.elements.captions.innerHTML;
+
+    if (changed) {
+      // Empty the container and create a new child element
+      emptyElement(this.elements.captions);
+      const caption = createElement('span', getAttributesFromSelector(this.config.selectors.caption));
+      caption.innerHTML = content;
+      this.elements.captions.appendChild(caption);
+
+      // Trigger event
+      triggerEvent.call(this, this.media, 'cuechange');
+    }
+  },
+};
+
+export default captions;