├── .all-contributorsrc
├── .deepsource.toml
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .github
├── ISSUE_TEMPLATE
│ ├── bug_report.md
│ └── feature_request.md
├── dependabot.yml
├── release-drafter.yml
├── starrycake.yml
└── workflows
│ ├── codesee-arch-diagram.yml
│ ├── nodejs.yml
│ └── release-drafter.yml
├── .gitignore
├── .gitpod.yml
├── .husky
├── pre-commit
└── pre-push
├── .lintstagedrc.json
├── .npmignore
├── .prettierignore
├── .prettierrc
├── .remarkignore
├── .swcrc
├── .typo-ci.yml
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── SECURITY.md
├── babel.config.js
├── dist
├── LICENSE
├── README.md
├── esm
│ ├── index.d.ts
│ ├── index.js
│ └── index.mjs
├── index.d.ts
├── index.js
├── package.json
├── plyr.css
├── system
│ ├── index.development.js
│ └── index.production.js
└── umd
│ ├── index.development.js
│ └── index.production.js
├── example
├── nextjs
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── next.config.js
│ ├── package.json
│ ├── pages
│ │ ├── _app.js
│ │ ├── api
│ │ │ └── hello.js
│ │ └── index.js
│ ├── public
│ │ ├── favicon.ico
│ │ └── vercel.svg
│ ├── src
│ │ ├── contents.json
│ │ └── video-list.jsx
│ ├── styles
│ │ └── globals.css
│ └── yarn.lock
└── react
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src
│ ├── audio-player
│ │ └── custom-audio-player.tsx
│ ├── hls-player
│ │ └── custom-hls-player.tsx
│ ├── index.css
│ ├── main.tsx
│ ├── video-list
│ │ ├── contents.json
│ │ └── video-list.tsx
│ └── vite-env.d.ts
│ ├── tsconfig.json
│ ├── vite.config.ts
│ └── yarn.lock
├── jest.config.ts
├── package-lock.json
├── package.json
├── rollup.config.js
├── sonar-project.properties
├── sourcelevel.yml
├── src
├── index.tsx
└── types.d.ts
├── tests
└── Plyr.test.tsx
└── tsconfig.json
/.all-contributorsrc:
--------------------------------------------------------------------------------
1 | {
2 | "projectName": "plyr-react",
3 | "projectOwner": "chintan9",
4 | "repoType": "github",
5 | "repoHost": "https://github.com",
6 | "files": [
7 | "README.md"
8 | ],
9 | "imageSize": 100,
10 | "commit": true,
11 | "commitConvention": "none",
12 | "contributors": [
13 | {
14 | "login": "iwatakeshi",
15 | "name": "Takeshi",
16 | "avatar_url": "https://avatars3.githubusercontent.com/u/1505448?v=4",
17 | "profile": "http://www.iwatakeshi.com",
18 | "contributions": [
19 | "ideas",
20 | "question",
21 | "translation",
22 | "userTesting",
23 | "example"
24 | ]
25 | },
26 | {
27 | "login": "mnervik",
28 | "name": "mnervik",
29 | "avatar_url": "https://avatars1.githubusercontent.com/u/15329600?v=4",
30 | "profile": "https://github.com/mnervik",
31 | "contributions": [
32 | "test",
33 | "userTesting"
34 | ]
35 | },
36 | {
37 | "login": "amirHossein-Ebrahimi",
38 | "name": "Amir.H Ebrahimi",
39 | "avatar_url": "https://avatars0.githubusercontent.com/u/23579958?v=4&s=100",
40 | "profile": "https://ahimico.github.io/",
41 | "contributions": [
42 | "infra",
43 | "doc",
44 | "tool",
45 | "maintenance",
46 | "review",
47 | "question",
48 | "code",
49 | "test"
50 | ]
51 | }
52 | ],
53 | "contributorsPerLine": 7,
54 | "skipCi": true
55 | }
56 |
--------------------------------------------------------------------------------
/.deepsource.toml:
--------------------------------------------------------------------------------
1 | version = 1
2 |
3 | test_patterns = ["*/test/**"]
4 |
5 | exclude_patterns = [".*/**"]
6 |
7 | [[analyzers]]
8 | name = "javascript"
9 | enabled = true
10 |
11 | [analyzers.meta]
12 | environment = [
13 | "nodejs",
14 | "jest"
15 | ]
16 | plugins = ["react"]
17 | style_guide = "airbnb"
18 | dialect = "typescript"
19 |
20 | [[transformers]]
21 | name = "prettier"
22 | enabled = true
23 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | charset = utf-8
7 | trim_trailing_whitespace = false
8 | insert_final_newline = false
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | .git
2 | .npmrc
3 | .yarnrc
4 | build
5 | dist
6 | node_modules
7 | coverage
8 | config
9 | styleguide
10 | example
11 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "@typescript-eslint/parser",
3 | "parserOptions": {
4 | "ecmaVersion": 2018,
5 | "sourceType": "module",
6 | "ecmaFeatures": {
7 | "jsx": true
8 | }
9 | },
10 | "env": {
11 | "browser": true,
12 | "shared-node-browser": true,
13 | "node": true,
14 | "es6": true
15 | },
16 | "extends": [
17 | "plugin:react/recommended",
18 | "plugin:@typescript-eslint/recommended",
19 | "plugin:prettier/recommended",
20 | "eslint:recommended",
21 | "prettier",
22 | "plugin:prettier/recommended",
23 | "plugin:react-hooks/recommended",
24 | "plugin:import/errors",
25 | "plugin:import/warnings"
26 | ],
27 | "plugins": [
28 | "@typescript-eslint",
29 | "react",
30 | "prettier",
31 | "react-hooks",
32 | "import",
33 | "jest"
34 | ],
35 | "rules": {
36 | "eqeqeq": "error",
37 | "no-var": "error",
38 | "prefer-const": "error",
39 | "curly": ["warn", "multi-line", "consistent"],
40 | "no-console": "off",
41 | "import/no-unresolved": [
42 | "warn",
43 | {
44 | "commonjs": true,
45 | "amd": true
46 | }
47 | ],
48 | "import/export": "error",
49 | "@typescript-eslint/no-duplicate-imports": ["error"],
50 | "@typescript-eslint/explicit-module-boundary-types": "off",
51 | "@typescript-eslint/no-unused-vars": [
52 | "warn",
53 | {
54 | "argsIgnorePattern": "^_",
55 | "varsIgnorePattern": "^_"
56 | }
57 | ],
58 | "@typescript-eslint/no-use-before-define": "off",
59 | "@typescript-eslint/no-empty-function": "off",
60 | "@typescript-eslint/no-empty-interface": "off",
61 | "@typescript-eslint/no-explicit-any": "off",
62 | "jest/consistent-test-it": [
63 | "error",
64 | {
65 | "fn": "it",
66 | "withinDescribe": "it"
67 | }
68 | ],
69 | "import/order": [
70 | "error",
71 | {
72 | "alphabetize": {
73 | "order": "asc",
74 | "caseInsensitive": true
75 | },
76 | "groups": [
77 | "builtin",
78 | "external",
79 | "internal",
80 | "parent",
81 | "sibling",
82 | "index",
83 | "object"
84 | ],
85 | "newlines-between": "never",
86 | "pathGroups": [
87 | {
88 | "pattern": "react",
89 | "group": "builtin",
90 | "position": "before"
91 | }
92 | ],
93 | "pathGroupsExcludedImportTypes": ["builtin"]
94 | }
95 | ],
96 | "react/jsx-uses-react": "off",
97 | "react/react-in-jsx-scope": "off",
98 | "sort-imports": [
99 | "error",
100 | {
101 | "ignoreDeclarationSort": true
102 | }
103 | ]
104 | },
105 | "settings": {
106 | "react": {
107 | "version": "detect"
108 | },
109 | "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
110 | "import/parsers": {
111 | "@typescript-eslint/parser": [".js", ".jsx", ".ts", ".tsx"]
112 | }
113 | },
114 | "globals": {
115 | "__DEV__": true
116 | },
117 | "overrides": [
118 | {
119 | "files": ["src"],
120 | "parserOptions": {
121 | "project": "./tsconfig.json"
122 | }
123 | },
124 | {
125 | "files": ["tests/**/*.tsx"],
126 | "env": {
127 | "jest/globals": true
128 | }
129 | },
130 | {
131 | "files": ["./*.js"],
132 | "rules": {
133 | "@typescript-eslint/no-var-requires": "off"
134 | }
135 | }
136 | ]
137 | }
138 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: ""
5 | labels: ""
6 | assignees: ""
7 | ---
8 |
9 | **Describe the bug**
10 | A clear and concise description of what the bug is.
11 |
12 | **To Reproduce**
13 | Steps to reproduce the behavior:
14 |
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 |
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 |
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 |
26 | **Desktop (please complete the following information):**
27 |
28 | - OS: [e.g. iOS]
29 | - Browser [e.g. chrome, safari]
30 | - Version [e.g. 22]
31 |
32 | **Smartphone (please complete the following information):**
33 |
34 | - Device: [e.g. iPhone6]
35 | - OS: [e.g. iOS8.1]
36 | - Browser [e.g. stock browser, safari]
37 | - Version [e.g. 22]
38 |
39 | **Additional context**
40 | Add any other context about the problem here.
41 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for this project
4 | title: ""
5 | labels: ""
6 | assignees: ""
7 | ---
8 |
9 | **Is your feature request related to a problem? Please describe.**
10 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
11 |
12 | **Describe the solution you'd like**
13 | A clear and concise description of what you want to happen.
14 |
15 | **Describe alternatives you've considered**
16 | A clear and concise description of any alternative solutions or features you've considered.
17 |
18 | **Additional context**
19 | Add any other context or screenshots about the feature request here.
20 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: npm
4 | directory: "/"
5 | schedule:
6 | interval: weekly
7 | time: "09:00"
8 | open-pull-requests-limit: 10
9 |
--------------------------------------------------------------------------------
/.github/release-drafter.yml:
--------------------------------------------------------------------------------
1 | template: |
2 | ## What’s Changed
3 |
4 | $CHANGES
5 |
--------------------------------------------------------------------------------
/.github/starrycake.yml:
--------------------------------------------------------------------------------
1 | ## MASTER APPLICATION CONFIG
2 | starrycake:
3 | # if false, application's every feature won't work
4 | moduleSwitch: true
5 |
6 | ## ASSIGNER
7 | assigner:
8 | # if false, ASSIGNER module won't work
9 | moduleSwitch: true
10 | # assign on new issue?
11 | assignOnNewIssue: true
12 | # assign on new pull request?
13 | assignOnNewPullRequest: true
14 | # review on new pull request?
15 | reviewOnNewPullRequest: true
16 |
17 | ## DELETE-MERGED-BRANCH
18 | deletebranch:
19 | # if false, DELETE-MERGED-BRANCH module won't work
20 | moduleSwitch: true
21 | # list of branches that should not be automatically deleted after a merge. Wildcards supported.
22 | exclude:
23 | - dev-*
24 | # whether or not a branch should be deleted if PR is closed without merging
25 | delete_closed_pr: true
26 |
27 | ## REMINDER
28 | reminder:
29 | # if false, REMINDER module won't work
30 | moduleSwitch: true
31 |
32 | ## RESPONDER
33 | responder:
34 | # if false, RESPONDER module won't work
35 | moduleSwitch: true
36 | # respond on new issue?
37 | respondOnNewIssue: true
38 | # respond on new pull request?
39 | respondOnNewPullRequest: true
40 | # respond on my new issue?
41 | respondOnMyIssue: false
42 | # respond on my new pull request?
43 | respondOnMyPullRequest: false
44 | # issue respond message string
45 | issueRespond: Thanks for opening this issue!
46 | # pull request respond message string
47 | pullRequestRespond: Thanks for opening this pull request!
48 |
49 | ## STALE
50 | stale:
51 | # if false, STALE module won't work
52 | moduleSwitch: true
53 | # Number of days of inactivity before an Issue or Pull Request becomes stale
54 | daysUntilStale: 60
55 | # Number of days of inactivity before a stale Issue or Pull Request is closed. If disabled, issues still need to be closed manually, but will remain marked as stale.
56 | daysUntilClose: 7
57 | # Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable
58 | exemptLabels:
59 | - pinned
60 | - security
61 | # Label to use when marking as stale
62 | staleLabel: wontfix
63 | # Comment to post when marking as stale. Set to `false` to disable
64 | markComment: >
65 | This issue has been marked as stale. It will be closed if no further activity occurs.
66 | # Comment to post when closing a stale Issue or Pull Request. Set to `false` to disable
67 | closeComment: false
68 |
69 | ## TO-DO
70 | todo:
71 | # if false, TO-DO module won't work
72 | moduleSwitch: true
73 | # If `true`, it'll assign whoever pushed the code. If a string, it'll assign that user by username. `false` to not assign anyone.
74 | autoAssign: true
75 | # The keyword(s) to use to generate issue titles
76 | keyword: ["@todo", "TODO"]
77 | # If this is in the line right after the main keyword, it will become the generated issue body.
78 | bodyKeyword: ["@body", "BODY"]
79 | # The number of lines of code to show, starting from the keyword.
80 | blobLines: 5
81 | # Should the keyword be case sensitive?
82 | caseSensitive: false
83 | # If true, add the `todo` label. If false, don't add any label.You can also give it a label name or an array of label names.
84 | label: true
85 | # If an issue already exists and is closed, reopen it. If set to false, no new issue will be created.
86 | reopenClosed: true
87 | # Exclude certain files and/or directories. Should be a valid regular expression.
88 | exclude: null
89 |
90 | ## TRIAGE-NEW-ISSUES
91 | triage:
92 | # if false, TRIAGE-NEW-ISSUES module won't work
93 | moduleSwitch: true
94 | # the label name triage module uses
95 | triageLabel: triage
96 |
97 | ## UNFURL
98 | unfurl:
99 | # if false, UNFURL module won't work
100 | moduleSwitch: true
101 |
--------------------------------------------------------------------------------
/.github/workflows/codesee-arch-diagram.yml:
--------------------------------------------------------------------------------
1 | # This workflow was added by CodeSee. Learn more at https://codesee.io/
2 | # This is v2.0 of this workflow file
3 | on:
4 | push:
5 | branches:
6 | - master
7 | pull_request_target:
8 | types: [opened, synchronize, reopened]
9 |
10 | name: CodeSee
11 |
12 | permissions: read-all
13 |
14 | jobs:
15 | codesee:
16 | runs-on: ubuntu-latest
17 | continue-on-error: true
18 | name: Analyze the repo with CodeSee
19 | steps:
20 | - uses: Codesee-io/codesee-action@v2
21 | with:
22 | codesee-token: ${{ secrets.CODESEE_ARCH_DIAG_API_TOKEN }}
23 |
--------------------------------------------------------------------------------
/.github/workflows/nodejs.yml:
--------------------------------------------------------------------------------
1 | name: Node CI
2 |
3 | on: [push]
4 |
5 | jobs:
6 | build:
7 | runs-on: ${{ matrix.os }}
8 | strategy:
9 | matrix:
10 | os: [ubuntu-latest, macos-latest, windows-latest]
11 | node-version: [20.x, 22.x, 24.x]
12 |
13 | steps:
14 | - uses: actions/checkout@v3
15 | - name: Use Node.js ${{ matrix.node-version }}
16 | uses: actions/setup-node@v3
17 | with:
18 | node-version: ${{ matrix.node-version }}
19 | - name: npm install, build, and test
20 | run: |
21 | npm install -g npm@9
22 | npm ci
23 | npm run build --if-present
24 | npm run test
25 | env:
26 | CI: true
27 |
--------------------------------------------------------------------------------
/.github/workflows/release-drafter.yml:
--------------------------------------------------------------------------------
1 | name: Release Drafter
2 |
3 | on:
4 | push:
5 | # branches to consider in the event; optional, defaults to all
6 | branches:
7 | - master
8 | tags:
9 | - "*"
10 |
11 | jobs:
12 | update_release_draft:
13 | runs-on: ubuntu-latest
14 | steps:
15 | # Drafts your next Release notes as Pull Requests are merged into "master"
16 | - name: Release Drafter
17 | uses: release-drafter/release-drafter@v5.6.1
18 |
19 | env:
20 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
21 |
22 | - name: ChangeCast
23 | uses: palmerhq/changecast@v1.0.0
24 |
25 | - name: Changelog Generator
26 | uses: heinrichreimer/github-changelog-generator-action@v2.1.1
27 | with:
28 | token: ${{ secrets.GITHUB_TOKEN }}
29 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | # See https://help.github.com/ignore-files/ for more about ignoring files.
3 |
4 | # dependencies
5 |
6 | # builds
7 | build
8 | .rpt2_cache
9 |
10 | # misc
11 | .DS_Store
12 | .env.local
13 | .env.development.local
14 | .env.test.local
15 | .env.production.local
16 |
17 | # Snowpack dependency directory (https://snowpack.dev/)
18 | web_modules/
19 | .parcel-cache
20 | out
21 |
22 | # yarn v2
23 | .yarn/cache
24 | .yarn/unplugged
25 | .yarn/build-state.yml
26 | .yarn/install-state.gz
27 | .pnp.*
28 |
29 | # Created by https://www.toptal.com/developers/gitignore/api/react,node
30 |
31 | # Edit at https://www.toptal.com/developers/gitignore?templates=react,node
32 |
33 | ### Node ###
34 |
35 | # Logs
36 | logs
37 | *.log
38 | npm-debug.log*
39 | yarn-debug.log*
40 | yarn-error.log*
41 | lerna-debug.log*
42 |
43 | # Diagnostic reports (https://nodejs.org/api/report.html)
44 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
45 |
46 | # Runtime data
47 | pids
48 | *.pid
49 | *.seed
50 | *.pid.lock
51 |
52 | # Directory for instrumented libs generated by jscoverage/JSCover
53 | lib-cov
54 |
55 | # Coverage directory used by tools like istanbul
56 | coverage
57 | *.lcov
58 |
59 | # nyc test coverage
60 | .nyc_output
61 |
62 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
63 | .grunt
64 |
65 | # Bower dependency directory (https://bower.io/)
66 | bower_components
67 |
68 | # node-waf configuration
69 | .lock-wscript
70 |
71 | # Compiled binary addons (https://nodejs.org/api/addons.html)
72 | build/Release
73 |
74 | # Dependency directories
75 | node_modules/
76 | jspm_packages/
77 |
78 | # TypeScript v1 declaration files
79 | typings/
80 |
81 | # TypeScript cache
82 | *.tsbuildinfo
83 |
84 | # Optional npm cache directory
85 | .npm
86 |
87 | # Optional eslint cache
88 | .eslintcache
89 |
90 | # Microbundle cache
91 | .rpt2_cache/
92 | .rts2_cache_cjs/
93 | .rts2_cache_es/
94 | .rts2_cache_umd/
95 |
96 | # Optional REPL history
97 | .node_repl_history
98 |
99 | # Output of 'npm pack'
100 | *.tgz
101 |
102 | # Yarn Integrity file
103 | .yarn-integrity
104 |
105 | # dotenv environment variables file
106 | .env
107 | .env.test
108 |
109 | # parcel-bundler cache (https://parceljs.org/)
110 | .cache
111 |
112 | # Next.js build output
113 | .next
114 |
115 | # Nuxt.js build / generate output
116 | .nuxt
117 |
118 | # Gatsby files
119 | .cache/
120 |
121 | # Comment in the public line in if your project uses Gatsby and not Next.js
122 |
123 | # https://nextjs.org/blog/next-9-1#public-directory-support
124 |
125 | # public
126 |
127 | # vuepress build output
128 | .vuepress/dist
129 |
130 | # Serverless directories
131 | .serverless/
132 |
133 | # FuseBox cache
134 | .fusebox/
135 |
136 | # DynamoDB Local files
137 | .dynamodb/
138 |
139 | # TernJS port file
140 | .tern-port
141 |
142 | # Stores VSCode versions used for testing VSCode extensions
143 | .vscode-test
144 |
145 | ### react ###
146 |
147 | .DS_*
148 | **/*.backup.*
149 | **/*.back.*
150 | node_modules
151 | *.sublime*
152 | psd
153 | thumb
154 | sketch
155 |
156 | # End of https://www.toptal.com/developers/gitignore/api/react,node
--------------------------------------------------------------------------------
/.gitpod.yml:
--------------------------------------------------------------------------------
1 | tasks:
2 | - init: npm install && npm run build
3 | command: npm run start
4 |
--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 |
4 | npx lint-staged
5 |
--------------------------------------------------------------------------------
/.husky/pre-push:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 |
4 | npm run eslint && npm run build && npm test
5 |
--------------------------------------------------------------------------------
/.lintstagedrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "package.json": "sort-package-json",
3 | "*": "prettier --write --ignore-unknown",
4 | "*.{ts,tsx}": ["eslint --fix", "prettier --write"]
5 | }
6 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .*.swp
2 | ._*
3 | .DS_Store
4 | .git
5 | .gitlab-ci*
6 | .hg
7 | .npmrc
8 | .lock-wscript
9 | .svn
10 | .wafpickle-*
11 | .travis.yml
12 | .editorconfig
13 | .eslint*
14 | .yarnrc
15 |
16 | config.gypi
17 | CVS
18 | npm-debug.log
19 |
20 | yarn-debug.log*
21 | yarn-error.log*
22 | default.config
23 | rollup.config.js
24 |
25 |
26 | docker*
27 | Docker*
28 |
29 | coverage
30 | config
31 | demo
32 | public
33 | src
34 | scripts
35 | styleguide*
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | **/.git
2 | **/.svn
3 | **/.hg
4 | **/node_modules
5 | **/dist
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "semi": true,
3 | "singleQuote": false,
4 | "tabWidth": 2,
5 | "trailingComma": "es5",
6 | "printWidth": 80,
7 | "quoteProps": "as-needed",
8 | "jsxSingleQuote": false,
9 | "bracketSpacing": true,
10 | "bracketSameLine": true,
11 | "arrowParens": "always",
12 | "endOfLine": "lf",
13 | "overrides": [
14 | {
15 | "files": "README.md",
16 | "options": {
17 | "semi": false
18 | }
19 | }
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/.remarkignore:
--------------------------------------------------------------------------------
1 | .github
2 | .CHANGELOG.md
--------------------------------------------------------------------------------
/.swcrc:
--------------------------------------------------------------------------------
1 | {
2 | "jsc": {
3 | "target": "es5",
4 | "parser": {
5 | "syntax": "typescript",
6 | "tsx": true
7 | },
8 | "transform": {
9 | "react": {
10 | "runtime": "automatic",
11 | "pragma": "React.createElement",
12 | "pragmaFrag": "React.Fragment",
13 | "throwIfNamespace": true,
14 | "useBuiltins": true
15 | }
16 | }
17 | },
18 | "sourceMaps": true
19 | }
20 |
--------------------------------------------------------------------------------
/.typo-ci.yml:
--------------------------------------------------------------------------------
1 | dictionaries:
2 | - en
3 | - en_GB
4 |
5 | # Any files/folders we should ignore?
6 | excluded_files:
7 | - "vendor/**/*"
8 | - "node_modules/**/*"
9 | - "*.key"
10 | - "*.enc"
11 | - "*.min.css"
12 | - "*.css.map"
13 | - "*.min.js"
14 | - "*.js.map"
15 | - "*.mk"
16 | - "package-lock.json"
17 | - "yarn.lock"
18 | - "Gemfile.lock"
19 | - ".typo-ci.yml"
20 | - "/docz"
21 |
22 | # Any typos we should ignore?
23 | excluded_words:
24 | - typoci
25 | - Plyr
26 | - npmrc
27 | - plyr
28 | - esw
29 | - seektime
30 | - iwatakeshi
31 | - svgr
32 | - plugin-proposal-nullish-coalescing-operator
33 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | ## [v.5.0.2](https://github.com/chintan9/plyr-react/tree/v5.0.2) (2022-05-25)
4 |
5 | - Fix build issues.
6 |
7 | ## [v.5.0.0](https://github.com/chintan9/plyr-react/tree/v5.0.0) (2022-05-25)
8 |
9 | - Add UMD and SystemJS builds for CDN.
10 | > So you can use it in single spa for example.
11 |
12 | ```html
13 |
23 | ```
24 |
25 | - The path for an import of css styles has been changed.
26 |
27 | ```diff
28 | - import "plyr-react/dist/plyr.css"
29 | + import "plyr-react/plyr.css"
30 | ```
31 |
32 | - Optimize the core buld process and reduced the build time up to 10 seconds
33 | - Remove redundant stuff from the released plyr-react's package.json so there will be no underised side efffect
34 |
35 | ## [v4.0.0](https://github.com/chintan9/plyr-react/tree/v4.0.0) (2022-05-02)
36 |
37 | - Implement `usePlyr` Hook and make the customization more easier
38 | - Integrate custom `useHLS` Hook make the seamless HLS integration possible.
39 |
40 | ## [v3.0.5](https://github.com/chintan9/plyr-react/tree/v3.0.5) (2020-10-07)
41 |
42 | [Full Changelog](https://github.com/chintan9/plyr-react/compare/v3.0.4...v3.0.5)
43 |
44 | **Closed issues:**
45 |
46 | - Using ref-property [\#339](https://github.com/chintan9/plyr-react/issues/339)
47 |
48 | **Merged pull requests:**
49 |
50 | - Update release-drafter.yml [\#374](https://github.com/chintan9/plyr-react/pull/374) ([chintan9](https://github.com/chintan9))
51 | - Add changelog [\#373](https://github.com/chintan9/plyr-react/pull/373) ([chintan9](https://github.com/chintan9))
52 | - Update release-drafter.yml [\#372](https://github.com/chintan9/plyr-react/pull/372) ([chintan9](https://github.com/chintan9))
53 | - Create Build.yml [\#371](https://github.com/chintan9/plyr-react/pull/371) ([chintan9](https://github.com/chintan9))
54 | - Fix forward ref again [\#370](https://github.com/chintan9/plyr-react/pull/370) ([iwatakeshi](https://github.com/iwatakeshi))
55 | - Replace memo with forwardRef [\#355](https://github.com/chintan9/plyr-react/pull/355) ([iwatakeshi](https://github.com/iwatakeshi))
56 |
57 | ## [v3.0.4](https://github.com/chintan9/plyr-react/tree/v3.0.4) (2020-10-05)
58 |
59 | [Full Changelog](https://github.com/chintan9/plyr-react/compare/v3.0.3...v3.0.4)
60 |
61 | **Merged pull requests:**
62 |
63 | - Bump jest from 26.1.0 to 26.4.2 [\#365](https://github.com/chintan9/plyr-react/pull/365) ([dependabot[bot]](https://github.com/apps/dependabot))
64 |
65 | ## [v3.0.3](https://github.com/chintan9/plyr-react/tree/v3.0.3) (2020-10-02)
66 |
67 | [Full Changelog](https://github.com/chintan9/plyr-react/compare/v3.0.2...v3.0.3)
68 |
69 | ## [v3.0.2](https://github.com/chintan9/plyr-react/tree/v3.0.2) (2020-10-01)
70 |
71 | [Full Changelog](https://github.com/chintan9/plyr-react/compare/v3.0.1...v3.0.2)
72 |
73 | **Merged pull requests:**
74 |
75 | - docs: add iamshouvikmitra as a contributor [\#351](https://github.com/chintan9/plyr-react/pull/351) ([allcontributors[bot]](https://github.com/apps/allcontributors))
76 | - docs: add mnervik as a contributor [\#350](https://github.com/chintan9/plyr-react/pull/350) ([allcontributors[bot]](https://github.com/apps/allcontributors))
77 | - docs: add iwatakeshi as a contributor [\#343](https://github.com/chintan9/plyr-react/pull/343) ([allcontributors[bot]](https://github.com/apps/allcontributors))
78 | - docs: add iamshouvikmitra as a contributor [\#341](https://github.com/chintan9/plyr-react/pull/341) ([allcontributors[bot]](https://github.com/apps/allcontributors))
79 | - add all-contributors [\#340](https://github.com/chintan9/plyr-react/pull/340) ([chintan9](https://github.com/chintan9))
80 | - Create stale.yml [\#338](https://github.com/chintan9/plyr-react/pull/338) ([chintan9](https://github.com/chintan9))
81 | - Create greetings.yml [\#337](https://github.com/chintan9/plyr-react/pull/337) ([chintan9](https://github.com/chintan9))
82 |
83 | ## [v3.0.1](https://github.com/chintan9/plyr-react/tree/v3.0.1) (2020-09-30)
84 |
85 | [Full Changelog](https://github.com/chintan9/plyr-react/compare/v3.0.0...v3.0.1)
86 |
87 | **Closed issues:**
88 |
89 | - Convert to Typescript to aid intellisence and provide type support [\#308](https://github.com/chintan9/plyr-react/issues/308)
90 | - Convert project to TypeScript [\#261](https://github.com/chintan9/plyr-react/issues/261)
91 | - Typescript support [\#201](https://github.com/chintan9/plyr-react/issues/201)
92 |
93 | **Merged pull requests:**
94 |
95 | - add typings [\#334](https://github.com/chintan9/plyr-react/pull/334) ([chintan9](https://github.com/chintan9))
96 |
97 | ## [v3.0.0](https://github.com/chintan9/plyr-react/tree/v3.0.0) (2020-09-25)
98 |
99 | [Full Changelog](https://github.com/chintan9/plyr-react/compare/v2.2.0...v3.0.0)
100 |
101 | **Security fixes:**
102 |
103 | - \[Security\] Bump http-proxy from 1.18.0 to 1.18.1 [\#305](https://github.com/chintan9/plyr-react/pull/305) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
104 | - \[Security\] Bump markdown-to-jsx from 6.11.0 to 6.11.4 [\#304](https://github.com/chintan9/plyr-react/pull/304) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
105 | - \[Security\] Bump elliptic from 6.5.2 to 6.5.3 [\#276](https://github.com/chintan9/plyr-react/pull/276) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
106 | - \[Security\] Bump lodash from 4.17.15 to 4.17.19 [\#268](https://github.com/chintan9/plyr-react/pull/268) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
107 | - \[Security\] Bump websocket-extensions from 0.1.3 to 0.1.4 [\#236](https://github.com/chintan9/plyr-react/pull/236) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
108 | - \[Security\] Bump acorn from 6.4.0 to 6.4.1 [\#166](https://github.com/chintan9/plyr-react/pull/166) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
109 |
110 | **Closed issues:**
111 |
112 | - Could you add API to re-render the component if passing new props like `sources` to component? [\#215](https://github.com/chintan9/plyr-react/issues/215)
113 | - React Player Project [\#212](https://github.com/chintan9/plyr-react/issues/212)
114 | - Unsafe attempt to load URLDomains, protocols and ports must match. [\#183](https://github.com/chintan9/plyr-react/issues/183)
115 | - Add npm package install instructions on README [\#136](https://github.com/chintan9/plyr-react/issues/136)
116 | - How to run the methods like play, pause, etc.? [\#128](https://github.com/chintan9/plyr-react/issues/128)
117 |
118 | **Merged pull requests:**
119 |
120 | - Bump eslint-plugin-react-hooks from 4.0.8 to 4.1.2 [\#332](https://github.com/chintan9/plyr-react/pull/332) ([dependabot[bot]](https://github.com/apps/dependabot))
121 | - Bump @babel/plugin-proposal-object-rest-spread from 7.10.4 to 7.11.0 [\#322](https://github.com/chintan9/plyr-react/pull/322) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
122 | - Bump babel-jest from 26.1.0 to 26.3.0 [\#320](https://github.com/chintan9/plyr-react/pull/320) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
123 | - Bump lodash from 4.17.19 to 4.17.20 [\#319](https://github.com/chintan9/plyr-react/pull/319) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
124 | - Create Dependabot config file [\#318](https://github.com/chintan9/plyr-react/pull/318) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
125 | - Bump jest-watch-typeahead from 0.6.0 to 0.6.1 [\#316](https://github.com/chintan9/plyr-react/pull/316) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
126 | - Ready for V3 [\#314](https://github.com/chintan9/plyr-react/pull/314) ([chintan9](https://github.com/chintan9))
127 | - Bump @babel/plugin-proposal-optional-chaining from 7.8.3 to 7.11.0 [\#283](https://github.com/chintan9/plyr-react/pull/283) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
128 | - Changes to Plyr and the Build Pipeline [\#281](https://github.com/chintan9/plyr-react/pull/281) ([iwatakeshi](https://github.com/iwatakeshi))
129 | - V3 ts [\#267](https://github.com/chintan9/plyr-react/pull/267) ([chintan9](https://github.com/chintan9))
130 | - V3 master to v3-ts [\#264](https://github.com/chintan9/plyr-react/pull/264) ([chintan9](https://github.com/chintan9))
131 | - V3 ts [\#263](https://github.com/chintan9/plyr-react/pull/263) ([chintan9](https://github.com/chintan9))
132 | - \[PR\] Convert project to TypeScript [\#262](https://github.com/chintan9/plyr-react/pull/262) ([iwatakeshi](https://github.com/iwatakeshi))
133 | - Try to move TS by iwatakeshi \#258 [\#260](https://github.com/chintan9/plyr-react/pull/260) ([chintan9](https://github.com/chintan9))
134 | - Bump @babel/plugin-proposal-object-rest-spread from 7.8.3 to 7.10.4 [\#252](https://github.com/chintan9/plyr-react/pull/252) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
135 | - Bump react-dom from 16.13.0 to 16.13.1 [\#209](https://github.com/chintan9/plyr-react/pull/209) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
136 | - Bump eslint-config-airbnb from 18.0.1 to 18.1.0 [\#206](https://github.com/chintan9/plyr-react/pull/206) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
137 | - Bump @testing-library/jest-dom from 5.1.1 to 5.5.0 [\#205](https://github.com/chintan9/plyr-react/pull/205) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
138 | - Bump style-loader from 1.1.3 to 1.2.1 [\#204](https://github.com/chintan9/plyr-react/pull/204) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
139 | - Bump babel-loader from 8.0.6 to 8.1.0 [\#203](https://github.com/chintan9/plyr-react/pull/203) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
140 | - Bump eslint-plugin-react-hooks from 2.5.0 to 3.0.0 [\#182](https://github.com/chintan9/plyr-react/pull/182) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
141 | - Bump babel-preset-react-app from 9.1.1 to 9.1.2 [\#178](https://github.com/chintan9/plyr-react/pull/178) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
142 | - Bump react from 16.13.0 to 16.13.1 [\#174](https://github.com/chintan9/plyr-react/pull/174) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
143 | - add youtube example [\#169](https://github.com/chintan9/plyr-react/pull/169) ([chintan9](https://github.com/chintan9))
144 | - Bump @testing-library/dom from 6.15.0 to 7.0.4 [\#168](https://github.com/chintan9/plyr-react/pull/168) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
145 | - Bump qawolf from 0.9.3 to 0.12.0 [\#163](https://github.com/chintan9/plyr-react/pull/163) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
146 | - Bump rollup-plugin-terser from 5.2.0 to 5.3.0 [\#159](https://github.com/chintan9/plyr-react/pull/159) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
147 | - Bump eslint-plugin-react from 7.18.3 to 7.19.0 [\#158](https://github.com/chintan9/plyr-react/pull/158) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
148 | - Bump rollup from 1.32.0 to 1.32.1 [\#156](https://github.com/chintan9/plyr-react/pull/156) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
149 | - Bump rollup-plugin-babel from 4.3.3 to 4.4.0 [\#155](https://github.com/chintan9/plyr-react/pull/155) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
150 | - Bump cross-env from 7.0.1 to 7.0.2 [\#153](https://github.com/chintan9/plyr-react/pull/153) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
151 | - Bump eslint-plugin-jest from 23.8.1 to 23.8.2 [\#152](https://github.com/chintan9/plyr-react/pull/152) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
152 | - Bump @babel/core from 7.8.4 to 7.8.7 [\#151](https://github.com/chintan9/plyr-react/pull/151) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
153 | - Bump @testing-library/dom from 6.12.2 to 6.15.0 [\#150](https://github.com/chintan9/plyr-react/pull/150) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
154 | - Bump @testing-library/react from 9.4.1 to 9.5.0 [\#149](https://github.com/chintan9/plyr-react/pull/149) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
155 | - Bump cross-env from 7.0.0 to 7.0.1 [\#148](https://github.com/chintan9/plyr-react/pull/148) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
156 | - Bump rollup-plugin-postcss from 2.1.1 to 2.2.0 [\#147](https://github.com/chintan9/plyr-react/pull/147) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
157 | - Bump eslint-plugin-jest from 23.8.0 to 23.8.1 [\#146](https://github.com/chintan9/plyr-react/pull/146) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
158 | - Bump webpack from 4.41.6 to 4.42.0 [\#145](https://github.com/chintan9/plyr-react/pull/145) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
159 | - Bump typescript from 3.8.2 to 3.8.3 [\#144](https://github.com/chintan9/plyr-react/pull/144) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
160 | - Bump rollup from 1.31.1 to 1.32.0 [\#143](https://github.com/chintan9/plyr-react/pull/143) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
161 | - Bump react-test-renderer from 16.12.0 to 16.13.0 [\#141](https://github.com/chintan9/plyr-react/pull/141) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
162 | - Bump eslint-plugin-react-hooks from 2.4.0 to 2.5.0 [\#140](https://github.com/chintan9/plyr-react/pull/140) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
163 | - Bump react-dom from 16.12.0 to 16.13.0 [\#139](https://github.com/chintan9/plyr-react/pull/139) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
164 | - Bump react from 16.12.0 to 16.13.0 [\#138](https://github.com/chintan9/plyr-react/pull/138) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
165 | - Bump babel-eslint from 10.0.3 to 10.1.0 [\#137](https://github.com/chintan9/plyr-react/pull/137) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
166 | - Bump qawolf from 0.9.2 to 0.9.3 [\#135](https://github.com/chintan9/plyr-react/pull/135) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
167 | - Bump @svgr/rollup from 5.1.0 to 5.2.0 [\#134](https://github.com/chintan9/plyr-react/pull/134) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
168 | - Bump rollup-plugin-postcss from 2.0.6 to 2.1.1 [\#133](https://github.com/chintan9/plyr-react/pull/133) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
169 | - Bump @testing-library/react from 9.4.0 to 9.4.1 [\#132](https://github.com/chintan9/plyr-react/pull/132) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
170 | - Bump eslint-plugin-jest from 23.7.0 to 23.8.0 [\#131](https://github.com/chintan9/plyr-react/pull/131) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
171 | - Add cross env and fix test [\#129](https://github.com/chintan9/plyr-react/pull/129) ([chintan9](https://github.com/chintan9))
172 |
173 | ## [v2.2.0](https://github.com/chintan9/plyr-react/tree/v2.2.0) (2020-01-18)
174 |
175 | [Full Changelog](https://github.com/chintan9/plyr-react/compare/v2.0.1...v2.2.0)
176 |
177 | **Closed issues:**
178 |
179 | - Update Docs [\#65](https://github.com/chintan9/plyr-react/issues/65)
180 | - Dependabot couldn't find a package.json for this project [\#56](https://github.com/chintan9/plyr-react/issues/56)
181 |
182 | **Merged pull requests:**
183 |
184 | - Restyle Add Gitpod config [\#72](https://github.com/chintan9/plyr-react/pull/72) ([restyled-io[bot]](https://github.com/apps/restyled-io))
185 | - Add Gitpod config [\#71](https://github.com/chintan9/plyr-react/pull/71) ([chintan9](https://github.com/chintan9))
186 | - Restyle Update README.md [\#70](https://github.com/chintan9/plyr-react/pull/70) ([restyled-io[bot]](https://github.com/apps/restyled-io))
187 | - Update README.md [\#69](https://github.com/chintan9/plyr-react/pull/69) ([chintan9](https://github.com/chintan9))
188 | - Docs [\#67](https://github.com/chintan9/plyr-react/pull/67) ([chintan9](https://github.com/chintan9))
189 | - Docs [\#66](https://github.com/chintan9/plyr-react/pull/66) ([chintan9](https://github.com/chintan9))
190 | - Restyle Docs [\#64](https://github.com/chintan9/plyr-react/pull/64) ([restyled-io[bot]](https://github.com/apps/restyled-io))
191 | - Docs [\#63](https://github.com/chintan9/plyr-react/pull/63) ([chintan9](https://github.com/chintan9))
192 | - Bump @testing-library/user-event from 7.2.1 to 8.0.3 [\#62](https://github.com/chintan9/plyr-react/pull/62) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
193 | - Bump @rollup/plugin-node-resolve from 6.1.0 to 7.0.0 [\#61](https://github.com/chintan9/plyr-react/pull/61) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
194 | - Bump @testing-library/jest-dom from 4.2.4 to 5.0.0 [\#60](https://github.com/chintan9/plyr-react/pull/60) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
195 | - Bump @svgr/rollup from 4.3.3 to 5.0.1 [\#59](https://github.com/chintan9/plyr-react/pull/59) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
196 | - Rollup [\#58](https://github.com/chintan9/plyr-react/pull/58) ([chintan9](https://github.com/chintan9))
197 |
198 | ## [v2.0.1](https://github.com/chintan9/plyr-react/tree/v2.0.1) (2020-01-17)
199 |
200 | [Full Changelog](https://github.com/chintan9/plyr-react/compare/v2.0.0...v2.0.1)
201 |
202 | ## [v2.0.0](https://github.com/chintan9/plyr-react/tree/v2.0.0) (2020-01-16)
203 |
204 | [Full Changelog](https://github.com/chintan9/plyr-react/compare/e15ea3f2b31dfbb052f625527243bb5975431d00...v2.0.0)
205 |
206 | **Merged pull requests:**
207 |
208 | - Bundle with webpack [\#55](https://github.com/chintan9/plyr-react/pull/55) ([chintan9](https://github.com/chintan9))
209 | - make thing nice [\#53](https://github.com/chintan9/plyr-react/pull/53) ([chintan9](https://github.com/chintan9))
210 | - update [\#51](https://github.com/chintan9/plyr-react/pull/51) ([chintan9](https://github.com/chintan9))
211 | - Add Gitpod config [\#47](https://github.com/chintan9/plyr-react/pull/47) ([chintan9](https://github.com/chintan9))
212 | - Rewrite [\#23](https://github.com/chintan9/plyr-react/pull/23) ([chintan9](https://github.com/chintan9))
213 | - Rewrite [\#21](https://github.com/chintan9/plyr-react/pull/21) ([chintan9](https://github.com/chintan9))
214 | - Update dependency rollup to v1.27.10 [\#20](https://github.com/chintan9/plyr-react/pull/20) ([renovate[bot]](https://github.com/apps/renovate))
215 | - Update dependency rollup-plugin-postcss to v2 [\#18](https://github.com/chintan9/plyr-react/pull/18) ([renovate[bot]](https://github.com/apps/renovate))
216 | - Update dependency rollup to v1 [\#14](https://github.com/chintan9/plyr-react/pull/14) ([renovate[bot]](https://github.com/apps/renovate))
217 | - Update dependency gh-pages to v2 [\#12](https://github.com/chintan9/plyr-react/pull/12) ([renovate[bot]](https://github.com/apps/renovate))
218 | - Update dependency eslint-plugin-standard to v4 [\#11](https://github.com/chintan9/plyr-react/pull/11) ([renovate[bot]](https://github.com/apps/renovate))
219 | - Update dependency eslint-plugin-node to v10 [\#10](https://github.com/chintan9/plyr-react/pull/10) ([renovate[bot]](https://github.com/apps/renovate))
220 | - Update dependency eslint-config-standard-react to v9 [\#9](https://github.com/chintan9/plyr-react/pull/9) ([renovate[bot]](https://github.com/apps/renovate))
221 | - Update dependency eslint-config-standard to v14 [\#8](https://github.com/chintan9/plyr-react/pull/8) ([renovate[bot]](https://github.com/apps/renovate))
222 | - Update dependency eslint to v6 [\#7](https://github.com/chintan9/plyr-react/pull/7) ([renovate[bot]](https://github.com/apps/renovate))
223 | - Update dependency cross-env to v6 [\#6](https://github.com/chintan9/plyr-react/pull/6) ([renovate[bot]](https://github.com/apps/renovate))
224 | - Update dependency babel-eslint to v10 [\#5](https://github.com/chintan9/plyr-react/pull/5) ([renovate[bot]](https://github.com/apps/renovate))
225 | - Update dependency @svgr/rollup to v4 [\#4](https://github.com/chintan9/plyr-react/pull/4) ([renovate[bot]](https://github.com/apps/renovate))
226 | - Update dependency rollup to v0.68.2 [\#3](https://github.com/chintan9/plyr-react/pull/3) ([renovate[bot]](https://github.com/apps/renovate))
227 | - Pin dependencies [\#2](https://github.com/chintan9/plyr-react/pull/2) ([renovate[bot]](https://github.com/apps/renovate))
228 | - Configure Renovate [\#1](https://github.com/chintan9/plyr-react/pull/1) ([renovate[bot]](https://github.com/apps/renovate))
229 |
230 | \* _This Changelog was automatically generated by [github_changelog_generator](https://github.com/github-changelog-generator/github-changelog-generator)_
231 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, sex characteristics, gender identity and
9 | expression, level of experience, education, socio-economic status, nationality,
10 | personal appearance, race, religion, or sexual identity and orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | - Using welcoming and inclusive language
18 | - Being respectful of differing viewpoints and experiences
19 | - Gracefully accepting constructive criticism
20 | - Focusing on what is best for the community
21 | - Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | - The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | - Trolling, insulting/derogatory comments, and personal or political attacks
28 | - Public or private harassment
29 | - Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | - Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or reject
41 | comments, commits, code, wiki edits, issues, and other contributions that are
42 | not aligned to this Code of Conduct, or to ban temporarily or permanently any
43 | contributor for other behaviors that they deem inappropriate, threatening,
44 | offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at chintan9@aol.in. All complaints will
59 | be reviewed and investigated and will result in a response that is deemed
60 | necessary and appropriate to the circumstances. The project team is obligated to
61 | maintain confidentiality with regard to the reporter of an incident. Further
62 | details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ## Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
71 | version 1.4, available at
72 | https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
73 |
74 | [homepage]: https://www.contributor-covenant.org
75 |
76 | For answers to common questions about this code of conduct, see
77 | https://www.contributor-covenant.org/faq
78 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | When contributing to this repository, please first discuss the change you wish
4 | to make via issue, email, or any other method with the owners of this repository
5 | before making a change.
6 |
7 | Please note we have a code of conduct, please follow it in all your interactions
8 | with the project.
9 |
10 | ## Pull Request Process
11 |
12 | 1. Ensure any install or build dependencies are removed before the end of the
13 | layer when doing a build.
14 | 2. Update the README.md with details of changes to the interface, this includes
15 | new environment variables, exposed ports, useful file locations and container
16 | parameters.
17 | 3. Increase the version numbers in any examples files and the README.md to the
18 | new version that this Pull Request would represent. The versioning scheme we
19 | use is [SemVer](http://semver.org/).
20 | 4. You may merge the Pull Request in once you have the sign-off of two other
21 | developers, or if you do not have permission to do that, you may request the
22 | second reviewer to merge it for you.
23 |
24 | ## Code of Conduct
25 |
26 | ### Our Pledge
27 |
28 | In the interest of fostering an open and welcoming environment, we as
29 | contributors and maintainers pledge to making participation in our project and
30 | our community a harassment-free experience for everyone, regardless of age, body
31 | size, disability, ethnicity, gender identity and expression, level of
32 | experience, nationality, personal appearance, race, religion, or sexual identity
33 | and orientation.
34 |
35 | ### Our Standards
36 |
37 | Examples of behavior that contributes to creating a positive environment
38 | include:
39 |
40 | - Using welcoming and inclusive language
41 | - Being respectful of differing viewpoints and experiences
42 | - Gracefully accepting constructive criticism
43 | - Focusing on what is best for the community
44 | - Showing empathy towards other community members
45 |
46 | Examples of unacceptable behavior by participants include:
47 |
48 | - The use of sexualized language or imagery and unwelcome sexual attention or
49 | advances
50 | - Trolling, insulting/derogatory comments, and personal or political attacks
51 | - Public or private harassment
52 | - Publishing others' private information, such as a physical or electronic
53 | address, without explicit permission
54 | - Other conduct which could reasonably be considered inappropriate in a
55 | professional setting
56 |
57 | ### Our Responsibilities
58 |
59 | Project maintainers are responsible for clarifying the standards of acceptable
60 | behavior and are expected to take appropriate and fair corrective action in
61 | response to any instances of unacceptable behavior.
62 |
63 | Project maintainers have the right and responsibility to remove, edit, or reject
64 | comments, commits, code, wiki edits, issues, and other contributions that are
65 | not aligned to this Code of Conduct, or to ban temporarily or permanently any
66 | contributor for other behaviors that they deem inappropriate, threatening,
67 | offensive, or harmful.
68 |
69 | ### Scope
70 |
71 | This Code of Conduct applies both within project spaces and in public spaces
72 | when an individual is representing the project or its community. Examples of
73 | representing a project or community include using an official project e-mail
74 | address, posting via an official social media account, or acting as an appointed
75 | representative at an online or offline event. Representation of a project may be
76 | further defined and clarified by project maintainers.
77 |
78 | ### Enforcement
79 |
80 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
81 | reported by contacting the project team at [INSERT EMAIL ADDRESS]. All
82 | complaints will be reviewed and investigated and will result in a response that
83 | is deemed necessary and appropriate to the circumstances. The project team is
84 | obligated to maintain confidentiality with regard to the reporter of an
85 | incident. Further details of specific enforcement policies may be posted
86 | separately.
87 |
88 | Project maintainers who do not follow or enforce the Code of Conduct in good
89 | faith may face temporary or permanent repercussions as determined by other
90 | members of the project's leadership.
91 |
92 | ### Attribution
93 |
94 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
95 | version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
96 |
97 | [homepage]: http://contributor-covenant.org
98 | [version]: http://contributor-covenant.org/version/1/4/
99 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Chintan Prajapati
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
Plyr React
2 |
3 |
4 |
5 | A responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo.
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | You can see a live demo [here](https://githubbox.com/chintan9/plyr-react/tree/master/example/react).
24 |
25 | > Make sure to select the version for the plyr-react in the dependencies.
26 |
27 | ## Installation
28 |
29 | ```bash
30 | # NPM
31 | npm install plyr-react
32 |
33 | # Yarn
34 | yarn add plyr-react
35 | ```
36 |
37 | ## Usage
38 |
39 | ### Ready to use ` ` component
40 |
41 | The simplest form of react integration with the plyr is to use the ` ` component, it is best for the static
42 | videos.
43 |
44 | ```tsx
45 | import Plyr from "plyr-react"
46 | import "plyr-react/plyr.css"
47 |
48 | const plyrProps = {
49 | source: undefined, // https://github.com/sampotts/plyr#the-source-setter
50 | options: undefined, // https://github.com/sampotts/plyr#options
51 | // Direct props for inner video tag (mdn.io/video)
52 | }
53 |
54 | function MyPlyrVideo() {
55 | return
56 | }
57 | ```
58 |
59 |
60 | Old version 4 plyr-react
61 | - The path for an import of css styles has been changed in version 5, if you are using the version 4, apply following change in the above code
62 |
63 | ```diff
64 | - import "plyr-react/plyr.css"
65 | + import "plyr-react/dist/plyr.css"
66 | ```
67 |
68 |
69 |
70 | ### Ready to use `usePlyr` hook
71 |
72 | If you need the full control over all if possible integration one can imagine, usePlyr is your hook. Here is a simple
73 | and exact Plyr component made with the `usePlyr` hook. Are curios about how it works follow
74 | this [thread](https://github.com/chintan9/plyr-react/issues/732#issuecomment-1029714462) and
75 | this [proposal](https://github.com/chintan9/plyr-react/issues/678#issue-1043113412).
76 |
77 | ```jsx
78 | const Plyr = React.forwardRef((props, ref) => {
79 | const { source, options = null, ...rest } = props
80 | const raptorRef = usePlyr(ref, {
81 | source,
82 | options,
83 | })
84 | return
85 | })
86 | ```
87 |
88 | ### Accessing the plyr instance using refs
89 |
90 | ```tsx
91 | // Function base component
92 | const MyComponent = () => {
93 | const ref = useRef()
94 |
95 | useEffect(() => {
96 | console.log("internal plyr instance:", ref.current.plyr)
97 | })
98 |
99 | return
100 | }
101 |
102 | // Class base component
103 | class MyComponent extends Component {
104 | constructor(props) {
105 | super(props)
106 | this.player = createRef()
107 | }
108 |
109 | componentDidMount() {
110 | console.log("internal plyr instance", this.player.current.plyr)
111 | }
112 |
113 | render() {
114 | return (this.player.current = player)} />
115 | }
116 | }
117 | ```
118 |
119 | ## API:
120 |
121 | Currently the exported APIs contains a latest instance of plyr.
122 | In other words, the passing ref will have access to the player in the structure shown below.
123 |
124 | ```jsx
125 | return
126 |
127 | // ref can get access to latest plyr instance with `ref.current.plyr`
128 | ref = { current: { plyr } }
129 |
130 | // so you can make your player fullscreen 🎉
131 | ref.current.plyr.fullscreen.enter()
132 | ```
133 |
134 | ## Example
135 |
136 | > You can fork these examples
137 |
138 | **Javascript
139 | example:**
140 |
141 |
142 |
143 | **Typescript
144 | example:**
145 |
146 |
147 |
148 | **Basic HLS
149 | integration**
150 | Codesandbox
151 |
152 |
153 | > Check out the examples directory for the useHls integration guide.
154 |
155 | ```jsx
156 |
163 | ```
164 |
165 | **Demo:** https://react-fpmwns.stackblitz.io
166 |
167 | ## Nightly version of plyr-react:
168 |
169 |
170 |
171 |
172 |
173 | ## Contribute
174 |
175 | We are open to all new contribution, feel free to
176 | read [CONTRIBUTING](https://github.com/chintan9/plyr-react/blob/master/CONTRIBUTING.md)
177 | and [CODE OF CONDUCT](https://github.com/chintan9/plyr-react/blob/master/CODE_OF_CONDUCT.md) section, make new issue to
178 | discuss about the problem
179 | [](https://gitter.im/plyr-react/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge), and improve/fix/enhance the source code with your PRs. There is a ready to code Gitpod, you
180 | can jump into it
181 | from
182 |
183 | ## Support
184 |
185 | If you like the project and want to support my work, give star ⭐ or fork it.
186 | [](https://openbase.com/js/plyr-react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
187 |
188 | ## Thanks
189 |
190 | - [@realamirhe](https://github.com/realamirhe) For provide help for integrate to react-aptor.
191 | - [@iwatakeshi](https://github.com/iwatakeshi) For provide help for convert to typescript.
192 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 | # Security Policy
2 |
3 | ## Supported Versions
4 |
5 | Use this section to tell people about which versions of your project are
6 | currently being supported with security updates.
7 |
8 | | Version | Supported |
9 | | ------- | ------------------ |
10 | | 5.1.x | :white_check_mark: |
11 | | 5.0.x | :x: |
12 | | 4.0.x | :x: |
13 | | < 4.0 | :x: |
14 |
15 | ## Reporting a Vulnerability
16 |
17 | Use this section to tell people how to report a vulnerability.
18 |
19 | Tell them where to go, how often they can expect to get an update on a
20 | reported vulnerability, what to expect if the vulnerability is accepted or
21 | declined, etc.
22 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = (api, targets) => {
2 | // https://babeljs.io/docs/en/config-files#config-function-api
3 | const isTestEnv = api.env("test");
4 | return {
5 | babelrc: false,
6 | ignore: ["./node_modules"],
7 | presets: [
8 | ["@babel/preset-react", { runtime: "automatic" }],
9 | "@babel/preset-typescript",
10 | [
11 | "@babel/preset-env",
12 | {
13 | loose: true,
14 | modules: isTestEnv ? "commonjs" : false,
15 | targets: isTestEnv ? { node: "current" } : targets,
16 | },
17 | ],
18 | ],
19 | plugins: [
20 | ["@babel/plugin-transform-react-jsx", { runtime: "automatic" }],
21 | ["@babel/plugin-transform-typescript", { isTSX: true }],
22 | ],
23 | };
24 | };
25 |
--------------------------------------------------------------------------------
/dist/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Chintan Prajapati
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/dist/README.md:
--------------------------------------------------------------------------------
1 | Plyr React
2 |
3 |
4 |
5 | A responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo.
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | You can see a live demo [here](https://githubbox.com/chintan9/plyr-react/tree/master/example/react).
30 |
31 | > Make sure to select the version for the plyr-react in the dependencies.
32 |
33 | ## Installation
34 |
35 | ```bash
36 | # NPM
37 | npm install plyr-react
38 |
39 | # Yarn
40 | yarn add plyr-react
41 | ```
42 |
43 | ## Usage
44 |
45 | ### Ready to use ` ` component
46 |
47 | The simplest form of react integration with the plyr is to use the ` ` component, it is best for the static
48 | videos.
49 |
50 | ```tsx
51 | import Plyr from "plyr-react"
52 | import "plyr-react/plyr.css"
53 |
54 | const plyrProps = {
55 | source: undefined, // https://github.com/sampotts/plyr#the-source-setter
56 | options: undefined, // https://github.com/sampotts/plyr#options
57 | // Direct props for inner video tag (mdn.io/video)
58 | }
59 |
60 | function MyPlyrVideo() {
61 | return
62 | }
63 | ```
64 |
65 |
66 | Old version 4 plyr-react
67 | - The path for an import of css styles has been changed in version 5, if you are using the version 4, apply following change in the above code
68 |
69 | ```diff
70 | - import "plyr-react/plyr.css"
71 | + import "plyr-react/dist/plyr.css"
72 | ```
73 |
74 |
75 |
76 | ### Ready to use `usePlyr` hook
77 |
78 | If you need the full control over all if possible integration one can imagine, usePlyr is your hook. Here is a simple
79 | and exact Plyr component made with the `usePlyr` hook. Are curios about how it works follow
80 | this [thread](https://github.com/chintan9/plyr-react/issues/732#issuecomment-1029714462) and
81 | this [proposal](https://github.com/chintan9/plyr-react/issues/678#issue-1043113412).
82 |
83 | ```jsx
84 | const Plyr = React.forwardRef((props, ref) => {
85 | const { source, options = null, ...rest } = props
86 | const raptorRef = usePlyr(ref, {
87 | source,
88 | options,
89 | })
90 | return
91 | })
92 | ```
93 |
94 | ### Accessing the plyr instance using refs
95 |
96 | ```tsx
97 | // Function base component
98 | const MyComponent = () => {
99 | const ref = useRef()
100 |
101 | useEffect(() => {
102 | console.log("internal plyr instance:", ref.current.plyr)
103 | })
104 |
105 | return
106 | }
107 |
108 | // Class base component
109 | class MyComponent extends Component {
110 | constructor(props) {
111 | super(props)
112 | this.player = createRef()
113 | }
114 |
115 | componentDidMount() {
116 | console.log("internal plyr instance", this.player.current.plyr)
117 | }
118 |
119 | render() {
120 | return (this.player.current = player)} />
121 | }
122 | }
123 | ```
124 |
125 | ## API:
126 |
127 | Currently the exported APIs contains a latest instance of plyr.
128 | In other words, the passing ref will have access to the player in the structure shown below.
129 |
130 | ```jsx
131 | return
132 |
133 | // ref can get access to latest plyr instance with `ref.current.plyr`
134 | ref = { current: { plyr } }
135 |
136 | // so you can make your player fullscreen 🎉
137 | ref.current.plyr.fullscreen.enter()
138 | ```
139 |
140 | ## Example
141 |
142 | > You can fork these examples
143 |
144 | **Javascript
145 | example:**
146 |
147 |
148 |
149 | **Typescript
150 | example:**
151 |
152 |
153 |
154 | **Basic HLS
155 | integration**
156 | Codesandbox
157 |
158 |
159 | > Check out the examples directory for the useHls integration guide.
160 |
161 | ```jsx
162 |
169 | ```
170 |
171 | **Demo:** https://react-fpmwns.stackblitz.io
172 |
173 | ## Nightly version of plyr-react:
174 |
175 |
176 |
177 |
178 |
179 | ## Contribute
180 |
181 | We are open to all new contribution, feel free to
182 | read [CONTRIBUTING](https://github.com/chintan9/plyr-react/blob/master/CONTRIBUTING.md)
183 | and [CODE OF CONDUCT](https://github.com/chintan9/plyr-react/blob/master/CODE_OF_CONDUCT.md) section, make new issue to
184 | discuss about the problem
185 | [](https://gitter.im/plyr-react/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge), and improve/fix/enhance the source code with your PRs. There is a ready to code Gitpod, you
186 | can jump into it
187 | from
188 |
189 | ## Support
190 |
191 | If you like the project and want to support my work, give star ⭐ or fork it.
192 | [](https://openbase.com/js/plyr-react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
193 |
194 | ## Thanks
195 |
196 | - [@realamirhe](https://github.com/realamirhe) For provide help for integrate to react-aptor.
197 | - [@iwatakeshi](https://github.com/iwatakeshi) For provide help for convert to typescript.
198 |
--------------------------------------------------------------------------------
/dist/esm/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import type { DependencyList, DetailedHTMLProps, Ref, VideoHTMLAttributes } from "react";
3 | import PlyrJS, { Options, SourceInfo } from "plyr";
4 | export type PlyrInstance = PlyrJS;
5 | export type PlyrOptions = Options;
6 | export type PlyrSource = SourceInfo;
7 | type PlyrConfigurationProps = {
8 | source: PlyrSource | null;
9 | options?: PlyrOptions | null;
10 | };
11 | type ReactVideoProps = DetailedHTMLProps, HTMLVideoElement>;
12 | export type PlyrProps = Omit & PlyrConfigurationProps;
13 | export interface APITypes {
14 | plyr: PlyrInstance;
15 | }
16 | /**
17 | * It creates a React hook that returns a ref to a video element that is initialized with Plyr
18 | * @param ref - Ref
19 | * @param {PlyrConfigurationProps} params - PlyrConfigurationProps,
20 | * @param {DependencyList | null} [deps=null] - DependencyList | null = null
21 | * @returns A function that returns a React component.
22 | */
23 | export declare function usePlyr(ref: Ref, params: PlyrConfigurationProps, deps?: DependencyList | null): React.RefObject;
24 | declare const Plyr: React.ForwardRefExoticComponent & PlyrConfigurationProps & React.RefAttributes>;
25 | export default Plyr;
26 |
--------------------------------------------------------------------------------
/dist/esm/index.js:
--------------------------------------------------------------------------------
1 | import { jsx } from 'react/jsx-runtime';
2 | import * as React from 'react';
3 | import PlyrJS from 'plyr';
4 | import PropTypes from 'prop-types';
5 | import useAptor from 'react-aptor';
6 |
7 | const instantiate = (_, params) => {
8 | const plyr = new PlyrJS(".plyr-react", params.options || {});
9 | if (params.source)
10 | plyr.source = params.source;
11 | return plyr;
12 | };
13 | const destroy = (plyr) => {
14 | if (plyr)
15 | plyr.destroy();
16 | };
17 | const noop = () => {
18 | };
19 | const getAPI = (plyr) => {
20 | if (!plyr) {
21 | return () => new Proxy({ plyr: { source: null } }, {
22 | get: (target, prop) => {
23 | if (prop === "plyr") {
24 | return target[prop];
25 | }
26 | return noop;
27 | }
28 | });
29 | }
30 | return () => ({
31 | /**
32 | * Plyr instance with all of its functionality
33 | */
34 | plyr
35 | });
36 | };
37 | function usePlyr(ref, params, deps = null) {
38 | return useAptor(
39 | ref,
40 | {
41 | instantiate,
42 | getAPI,
43 | destroy,
44 | params
45 | },
46 | deps || [params.options, params.source]
47 | );
48 | }
49 | const Plyr = React.forwardRef((props, ref) => {
50 | const { source, options = null, ...rest } = props;
51 | const raptorRef = usePlyr(ref, {
52 | source,
53 | options
54 | });
55 | return /* @__PURE__ */ jsx("video", { ref: raptorRef, className: "plyr-react plyr", ...rest });
56 | });
57 | if ((import.meta.env && import.meta.env.MODE) !== "production") {
58 | Plyr.displayName = "Plyr";
59 | Plyr.defaultProps = {
60 | options: {
61 | controls: [
62 | "rewind",
63 | "play",
64 | "fast-forward",
65 | "progress",
66 | "current-time",
67 | "duration",
68 | "mute",
69 | "volume",
70 | "settings",
71 | "fullscreen"
72 | ],
73 | i18n: {
74 | restart: "Restart",
75 | rewind: "Rewind {seektime}s",
76 | play: "Play",
77 | pause: "Pause",
78 | fastForward: "Forward {seektime}s",
79 | seek: "Seek",
80 | seekLabel: "{currentTime} of {duration}",
81 | played: "Played",
82 | buffered: "Buffered",
83 | currentTime: "Current time",
84 | duration: "Duration",
85 | volume: "Volume",
86 | mute: "Mute",
87 | unmute: "Unmute",
88 | enableCaptions: "Enable captions",
89 | disableCaptions: "Disable captions",
90 | download: "Download",
91 | enterFullscreen: "Enter fullscreen",
92 | exitFullscreen: "Exit fullscreen",
93 | frameTitle: "Player for {title}",
94 | captions: "Captions",
95 | settings: "Settings",
96 | menuBack: "Go back to previous menu",
97 | speed: "Speed",
98 | normal: "Normal",
99 | quality: "Quality",
100 | loop: "Loop"
101 | }
102 | },
103 | source: {
104 | type: "video",
105 | sources: [
106 | {
107 | src: "https://cdn.plyr.io/static/blank.mp4",
108 | type: "video/mp4",
109 | size: 720
110 | },
111 | {
112 | src: "https://cdn.plyr.io/static/blank.mp4",
113 | type: "video/mp4",
114 | size: 1080
115 | }
116 | ]
117 | }
118 | };
119 | Plyr.propTypes = {
120 | options: PropTypes.object,
121 | source: PropTypes.any
122 | };
123 | }
124 |
125 | export { Plyr as default, usePlyr };
126 |
--------------------------------------------------------------------------------
/dist/esm/index.mjs:
--------------------------------------------------------------------------------
1 | import { jsx } from 'react/jsx-runtime';
2 | import * as React from 'react';
3 | import PlyrJS from 'plyr';
4 | import PropTypes from 'prop-types';
5 | import useAptor from 'react-aptor';
6 |
7 | const instantiate = (_, params) => {
8 | const plyr = new PlyrJS(".plyr-react", params.options || {});
9 | if (params.source)
10 | plyr.source = params.source;
11 | return plyr;
12 | };
13 | const destroy = (plyr) => {
14 | if (plyr)
15 | plyr.destroy();
16 | };
17 | const noop = () => {
18 | };
19 | const getAPI = (plyr) => {
20 | if (!plyr) {
21 | return () => new Proxy({ plyr: { source: null } }, {
22 | get: (target, prop) => {
23 | if (prop === "plyr") {
24 | return target[prop];
25 | }
26 | return noop;
27 | }
28 | });
29 | }
30 | return () => ({
31 | /**
32 | * Plyr instance with all of its functionality
33 | */
34 | plyr
35 | });
36 | };
37 | function usePlyr(ref, params, deps = null) {
38 | return useAptor(
39 | ref,
40 | {
41 | instantiate,
42 | getAPI,
43 | destroy,
44 | params
45 | },
46 | deps || [params.options, params.source]
47 | );
48 | }
49 | const Plyr = React.forwardRef((props, ref) => {
50 | const { source, options = null, ...rest } = props;
51 | const raptorRef = usePlyr(ref, {
52 | source,
53 | options
54 | });
55 | return /* @__PURE__ */ jsx("video", { ref: raptorRef, className: "plyr-react plyr", ...rest });
56 | });
57 | if ((import.meta.env && import.meta.env.MODE) !== "production") {
58 | Plyr.displayName = "Plyr";
59 | Plyr.defaultProps = {
60 | options: {
61 | controls: [
62 | "rewind",
63 | "play",
64 | "fast-forward",
65 | "progress",
66 | "current-time",
67 | "duration",
68 | "mute",
69 | "volume",
70 | "settings",
71 | "fullscreen"
72 | ],
73 | i18n: {
74 | restart: "Restart",
75 | rewind: "Rewind {seektime}s",
76 | play: "Play",
77 | pause: "Pause",
78 | fastForward: "Forward {seektime}s",
79 | seek: "Seek",
80 | seekLabel: "{currentTime} of {duration}",
81 | played: "Played",
82 | buffered: "Buffered",
83 | currentTime: "Current time",
84 | duration: "Duration",
85 | volume: "Volume",
86 | mute: "Mute",
87 | unmute: "Unmute",
88 | enableCaptions: "Enable captions",
89 | disableCaptions: "Disable captions",
90 | download: "Download",
91 | enterFullscreen: "Enter fullscreen",
92 | exitFullscreen: "Exit fullscreen",
93 | frameTitle: "Player for {title}",
94 | captions: "Captions",
95 | settings: "Settings",
96 | menuBack: "Go back to previous menu",
97 | speed: "Speed",
98 | normal: "Normal",
99 | quality: "Quality",
100 | loop: "Loop"
101 | }
102 | },
103 | source: {
104 | type: "video",
105 | sources: [
106 | {
107 | src: "https://cdn.plyr.io/static/blank.mp4",
108 | type: "video/mp4",
109 | size: 720
110 | },
111 | {
112 | src: "https://cdn.plyr.io/static/blank.mp4",
113 | type: "video/mp4",
114 | size: 1080
115 | }
116 | ]
117 | }
118 | };
119 | Plyr.propTypes = {
120 | options: PropTypes.object,
121 | source: PropTypes.any
122 | };
123 | }
124 |
125 | export { Plyr as default, usePlyr };
126 |
--------------------------------------------------------------------------------
/dist/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import type { DependencyList, DetailedHTMLProps, Ref, VideoHTMLAttributes } from "react";
3 | import PlyrJS, { Options, SourceInfo } from "plyr";
4 | export type PlyrInstance = PlyrJS;
5 | export type PlyrOptions = Options;
6 | export type PlyrSource = SourceInfo;
7 | type PlyrConfigurationProps = {
8 | source: PlyrSource | null;
9 | options?: PlyrOptions | null;
10 | };
11 | type ReactVideoProps = DetailedHTMLProps, HTMLVideoElement>;
12 | export type PlyrProps = Omit & PlyrConfigurationProps;
13 | export interface APITypes {
14 | plyr: PlyrInstance;
15 | }
16 | /**
17 | * It creates a React hook that returns a ref to a video element that is initialized with Plyr
18 | * @param ref - Ref
19 | * @param {PlyrConfigurationProps} params - PlyrConfigurationProps,
20 | * @param {DependencyList | null} [deps=null] - DependencyList | null = null
21 | * @returns A function that returns a React component.
22 | */
23 | export declare function usePlyr(ref: Ref, params: PlyrConfigurationProps, deps?: DependencyList | null): React.RefObject;
24 | declare const Plyr: React.ForwardRefExoticComponent & PlyrConfigurationProps & React.RefAttributes>;
25 | export default Plyr;
26 |
--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, '__esModule', { value: true });
4 |
5 | var React = require('react');
6 | var PlyrJS = require('plyr');
7 | var PropTypes = require('prop-types');
8 | var useAptor = require('react-aptor');
9 | var jsxRuntime = require('react/jsx-runtime');
10 |
11 | function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12 |
13 | function _interopNamespace(e) {
14 | if (e && e.__esModule) return e;
15 | var n = Object.create(null);
16 | if (e) {
17 | Object.keys(e).forEach(function (k) {
18 | if (k !== 'default') {
19 | var d = Object.getOwnPropertyDescriptor(e, k);
20 | Object.defineProperty(n, k, d.get ? d : {
21 | enumerable: true,
22 | get: function () { return e[k]; }
23 | });
24 | }
25 | });
26 | }
27 | n["default"] = e;
28 | return Object.freeze(n);
29 | }
30 |
31 | var React__namespace = /*#__PURE__*/_interopNamespace(React);
32 | var PlyrJS__default = /*#__PURE__*/_interopDefaultLegacy(PlyrJS);
33 | var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
34 | var useAptor__default = /*#__PURE__*/_interopDefaultLegacy(useAptor);
35 |
36 | function _extends() {
37 | _extends = Object.assign ? Object.assign.bind() : function (target) {
38 | for (var i = 1; i < arguments.length; i++) {
39 | var source = arguments[i];
40 | for (var key in source) {
41 | if (Object.prototype.hasOwnProperty.call(source, key)) {
42 | target[key] = source[key];
43 | }
44 | }
45 | }
46 | return target;
47 | };
48 | return _extends.apply(this, arguments);
49 | }
50 | function _objectWithoutPropertiesLoose(source, excluded) {
51 | if (source == null) return {};
52 | var target = {};
53 | var sourceKeys = Object.keys(source);
54 | var key, i;
55 | for (i = 0; i < sourceKeys.length; i++) {
56 | key = sourceKeys[i];
57 | if (excluded.indexOf(key) >= 0) continue;
58 | target[key] = source[key];
59 | }
60 | return target;
61 | }
62 |
63 | var _excluded = ["source", "options"];
64 | var instantiate = function instantiate(_, params) {
65 | var plyr = new PlyrJS__default["default"](".plyr-react", params.options || {});
66 | if (params.source) plyr.source = params.source;
67 | return plyr;
68 | };
69 | var destroy = function destroy(plyr) {
70 | if (plyr) plyr.destroy();
71 | };
72 | var noop = function noop() {};
73 | var getAPI = function getAPI(plyr) {
74 | if (!plyr) {
75 | return function () {
76 | return new Proxy({
77 | plyr: {
78 | source: null
79 | }
80 | }, {
81 | get: function get(target, prop) {
82 | if (prop === "plyr") {
83 | return target[prop];
84 | }
85 | return noop;
86 | }
87 | });
88 | };
89 | }
90 | return function () {
91 | return {
92 | plyr: plyr
93 | };
94 | };
95 | };
96 | function usePlyr(ref, params, deps) {
97 | if (deps === void 0) {
98 | deps = null;
99 | }
100 | return useAptor__default["default"](ref, {
101 | instantiate: instantiate,
102 | getAPI: getAPI,
103 | destroy: destroy,
104 | params: params
105 | }, deps || [params.options, params.source]);
106 | }
107 | var Plyr = React__namespace.forwardRef(function (props, ref) {
108 | var source = props.source,
109 | _props$options = props.options,
110 | options = _props$options === void 0 ? null : _props$options,
111 | rest = _objectWithoutPropertiesLoose(props, _excluded);
112 | var raptorRef = usePlyr(ref, {
113 | source: source,
114 | options: options
115 | });
116 | return jsxRuntime.jsx("video", _extends({
117 | ref: raptorRef,
118 | className: "plyr-react plyr"
119 | }, rest));
120 | });
121 | if (process.env.NODE_ENV !== "production") {
122 | Plyr.displayName = "Plyr";
123 | Plyr.defaultProps = {
124 | options: {
125 | controls: ["rewind", "play", "fast-forward", "progress", "current-time", "duration", "mute", "volume", "settings", "fullscreen"],
126 | i18n: {
127 | restart: "Restart",
128 | rewind: "Rewind {seektime}s",
129 | play: "Play",
130 | pause: "Pause",
131 | fastForward: "Forward {seektime}s",
132 | seek: "Seek",
133 | seekLabel: "{currentTime} of {duration}",
134 | played: "Played",
135 | buffered: "Buffered",
136 | currentTime: "Current time",
137 | duration: "Duration",
138 | volume: "Volume",
139 | mute: "Mute",
140 | unmute: "Unmute",
141 | enableCaptions: "Enable captions",
142 | disableCaptions: "Disable captions",
143 | download: "Download",
144 | enterFullscreen: "Enter fullscreen",
145 | exitFullscreen: "Exit fullscreen",
146 | frameTitle: "Player for {title}",
147 | captions: "Captions",
148 | settings: "Settings",
149 | menuBack: "Go back to previous menu",
150 | speed: "Speed",
151 | normal: "Normal",
152 | quality: "Quality",
153 | loop: "Loop"
154 | }
155 | },
156 | source: {
157 | type: "video",
158 | sources: [{
159 | src: "https://cdn.plyr.io/static/blank.mp4",
160 | type: "video/mp4",
161 | size: 720
162 | }, {
163 | src: "https://cdn.plyr.io/static/blank.mp4",
164 | type: "video/mp4",
165 | size: 1080
166 | }]
167 | }
168 | };
169 | Plyr.propTypes = {
170 | options: PropTypes__default["default"].object,
171 | source: PropTypes__default["default"].any
172 | };
173 | }
174 |
175 | exports["default"] = Plyr;
176 | exports.usePlyr = usePlyr;
177 |
--------------------------------------------------------------------------------
/dist/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "plyr-react",
3 | "version": "5.3.0",
4 | "private": false,
5 | "description": "A simple HTML5, YouTube and Vimeo player for react using plyr",
6 | "keywords": [
7 | "react",
8 | "plyr",
9 | "video",
10 | "vimeo",
11 | "youtube",
12 | "accessibility",
13 | "javascript",
14 | "player",
15 | "media"
16 | ],
17 | "homepage": "https://chintan9.github.io/plyr-react/",
18 | "repository": {
19 | "type": "git",
20 | "url": "git@github.com:chintan9/plyr-react.git"
21 | },
22 | "license": "MIT",
23 | "author": "Chintan Prajapati",
24 | "sideEffects": false,
25 | "exports": {
26 | "./package.json": "./package.json",
27 | "./plyr.css": "./plyr.css",
28 | ".": {
29 | "types": "./index.d.ts",
30 | "module": "./esm/index.js",
31 | "import": "./esm/index.mjs",
32 | "default": "./index.js"
33 | }
34 | },
35 | "main": "./index.js",
36 | "types": "./index.d.ts",
37 | "files": [
38 | "**"
39 | ],
40 | "dependencies": {
41 | "plyr": "^3.7.7",
42 | "react-aptor": "^2.0.0"
43 | },
44 | "peerDependencies": {
45 | "plyr": "^3.7.7",
46 | "react": ">=16.8"
47 | },
48 | "peerDependenciesMeta": {
49 | "plyr": {
50 | "optional": false
51 | },
52 | "react": {
53 | "optional": true
54 | }
55 | },
56 | "engines": {
57 | "node": ">=16"
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/dist/plyr.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";@keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{0%{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;align-items:center;direction:ltr;display:flex;flex-direction:column;font-family:inherit;font-family:var(--plyr-font-family,inherit);font-variant-numeric:tabular-nums;font-weight:400;font-weight:var(--plyr-font-weight-regular,400);line-height:1.7;line-height:var(--plyr-line-height,1.7);max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease;z-index:0}.plyr audio,.plyr iframe,.plyr video{display:block;height:100%;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui :after,.plyr--full-ui :before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4a5464;background:var(--plyr-badge-background,#4a5464);border-radius:2px;border-radius:var(--plyr-badge-border-radius,2px);color:#fff;color:var(--plyr-badge-text-color,#fff);font-size:9px;font-size:var(--plyr-font-size-badge,9px);line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;display:none;font-size:13px;font-size:var(--plyr-font-size-small,13px);left:0;padding:10px;padding:var(--plyr-control-spacing,10px);position:absolute;text-align:center;transition:transform .4s ease-in-out;width:100%}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:15px;font-size:var(--plyr-font-size-base,15px);padding:20px;padding:calc(var(--plyr-control-spacing, 10px)*2)}}@media (min-width:768px){.plyr__captions{font-size:18px;font-size:var(--plyr-font-size-large,18px)}}.plyr--captions-active .plyr__captions{display:block}.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions{transform:translateY(-40px);transform:translateY(calc(var(--plyr-control-spacing, 10px)*-4))}.plyr__caption{background:#000c;background:var(--plyr-captions-background,#000c);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#fff;color:var(--plyr-captions-text-color,#fff);line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__caption div{display:inline}.plyr__control{background:#0000;border:0;border-radius:3px;border-radius:var(--plyr-control-radius,3px);color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7);position:relative;transition:all .3s ease}.plyr__control svg{fill:currentColor;display:block;height:18px;height:var(--plyr-control-icon-size,18px);pointer-events:none;width:18px;width:var(--plyr-control-icon-size,18px)}.plyr__control:focus{outline:0}.plyr__control:focus-visible{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}a.plyr__control{text-decoration:none}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed,a.plyr__control:after,a.plyr__control:before{display:none}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__progress__container{flex:1;min-width:0}.plyr__controls .plyr__controls__item{margin-left:2.5px;margin-left:calc(var(--plyr-control-spacing, 10px)/4)}.plyr__controls .plyr__controls__item:first-child{margin-left:0;margin-right:auto}.plyr__controls .plyr__controls__item.plyr__progress__container{padding-left:2.5px;padding-left:calc(var(--plyr-control-spacing, 10px)/4)}.plyr__controls .plyr__controls__item.plyr__time{padding:0 5px;padding:0 calc(var(--plyr-control-spacing, 10px)/2)}.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child{padding-left:0}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip],.plyr__controls:empty{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:#ffffffe6;background:var(--plyr-menu-background,#ffffffe6);border-radius:4px;border-radius:var(--plyr-menu-radius,4px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-menu-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-menu-color,#4a5464);font-size:15px;font-size:var(--plyr-font-size-base,15px);margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container:after{border:4px solid #0000;border-top-color:#ffffffe6;border:var(--plyr-menu-arrow-size,4px) solid #0000;border-top-color:var(--plyr-menu-background,#ffffffe6);content:"";height:0;position:absolute;right:14px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7 - var(--plyr-menu-arrow-size, 4px)/2);top:100%;width:0}.plyr__menu__container [role=menu]{padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7)}.plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio]{margin-top:2px}.plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#4a5464;color:var(--plyr-menu-color,#4a5464);display:flex;font-size:13px;font-size:var(--plyr-font-size-menu,var(--plyr-font-size-small,13px));padding:4.66667px 10.5px;padding:calc(var(--plyr-control-spacing, 10px)*.7/1.5) calc(var(--plyr-control-spacing, 10px)*.7*1.5);-webkit-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control>span{align-items:inherit;display:flex;width:100%}.plyr__menu__container .plyr__control:after{border:4px solid #0000;border:var(--plyr-menu-item-arrow-size,4px) solid #0000;content:"";position:absolute;top:50%;transform:translateY(-50%)}.plyr__menu__container .plyr__control--forward{padding-right:28px;padding-right:calc(var(--plyr-control-spacing, 10px)*.7*4)}.plyr__menu__container .plyr__control--forward:after{border-left-color:#728197;border-left-color:var(--plyr-menu-arrow-color,#728197);right:6.5px;right:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}.plyr__menu__container .plyr__control--forward:focus-visible:after,.plyr__menu__container .plyr__control--forward:hover:after{border-left-color:initial}.plyr__menu__container .plyr__control--back{font-weight:400;font-weight:var(--plyr-font-weight-regular,400);margin:7px;margin:calc(var(--plyr-control-spacing, 10px)*.7);margin-bottom:3.5px;margin-bottom:calc(var(--plyr-control-spacing, 10px)*.7/2);padding-left:28px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*4);position:relative;width:calc(100% - 14px);width:calc(100% - var(--plyr-control-spacing, 10px)*.7*2)}.plyr__menu__container .plyr__control--back:after{border-right-color:#728197;border-right-color:var(--plyr-menu-arrow-color,#728197);left:6.5px;left:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}.plyr__menu__container .plyr__control--back:before{background:#dcdfe5;background:var(--plyr-menu-back-border-color,#dcdfe5);box-shadow:0 1px 0 #fff;box-shadow:0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff);content:"";height:1px;left:0;margin-top:3.5px;margin-top:calc(var(--plyr-control-spacing, 10px)*.7/2);overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back:focus-visible:after,.plyr__menu__container .plyr__control--back:hover:after{border-right-color:initial}.plyr__menu__container .plyr__control[role=menuitemradio]{padding-left:7px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7)}.plyr__menu__container .plyr__control[role=menuitemradio]:after,.plyr__menu__container .plyr__control[role=menuitemradio]:before{border-radius:100%}.plyr__menu__container .plyr__control[role=menuitemradio]:before{background:#0000001a;content:"";display:block;flex-shrink:0;height:16px;margin-right:10px;margin-right:var(--plyr-control-spacing,10px);transition:all .3s ease;width:16px}.plyr__menu__container .plyr__control[role=menuitemradio]:after{background:#fff;border:0;height:6px;left:12px;opacity:0;top:50%;transform:translateY(-50%) scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:#00b2ff;background:var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)))}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after{opacity:1;transform:translateY(-50%) scale(1)}.plyr__menu__container .plyr__control[role=menuitemradio]:focus-visible:before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before{background:#23282f1a}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-5px;margin-right:calc(var(--plyr-control-spacing, 10px)*.7*-1 - -2px);overflow:hidden;padding-left:24.5px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*3.5);pointer-events:none}.plyr--full-ui input[type=range]{-webkit-appearance:none;appearance:none;background:#0000;border:0;border-radius:26px;border-radius:calc(var(--plyr-range-thumb-height, 13px)*2);color:#00b2ff;color:var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));display:block;height:19px;height:calc(var(--plyr-range-thumb-active-shadow-width, 3px)*2 + var(--plyr-range-thumb-height, 13px));margin:0;min-width:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:#0000;background-image:linear-gradient(90deg,currentColor 0,#0000 0);background-image:linear-gradient(to right,currentColor var(--value,0),#0000 var(--value,0));border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-webkit-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-webkit-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:-4px;margin-top:calc((var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px))/2*-1);position:relative;-webkit-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)}.plyr--full-ui input[type=range]::-ms-track{color:#0000}.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:#0000;background:currentColor;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:0;position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr--full-ui input[type=range]:focus-visible::-ms-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none}.plyr__time{font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}.plyr__time+.plyr__time:before{content:"⁄";margin-right:10px;margin-right:var(--plyr-control-spacing,10px)}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr__tooltip{background:#ffffffe6;background:var(--plyr-tooltip-background,#ffffffe6);border-radius:5px;border-radius:var(--plyr-tooltip-radius,5px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-tooltip-color,#4a5464);font-size:13px;font-size:var(--plyr-font-size-small,13px);font-weight:400;font-weight:var(--plyr-font-weight-regular,400);left:50%;line-height:1.3;margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:5px 7.5px;padding:calc(var(--plyr-control-spacing, 10px)/2) calc(var(--plyr-control-spacing, 10px)/2*1.5);pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;white-space:nowrap;z-index:2}.plyr__tooltip:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #ffffffe6;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#ffffffe6);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control:focus-visible .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translateY(10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip:before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip:before{left:16px;left:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7)}.plyr__controls>.plyr__control:last-child .plyr__tooltip{left:auto;right:0;transform:translateY(10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip:before{left:auto;right:16px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7);transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0) scale(1)}.plyr__progress{left:6.5px;left:calc(var(--plyr-range-thumb-height, 13px)*.5);margin-right:13px;margin-right:var(--plyr-range-thumb-height,13px);position:relative}.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-6.5px;margin-left:calc(var(--plyr-range-thumb-height, 13px)*-.5);margin-right:-6.5px;margin-right:calc(var(--plyr-range-thumb-height, 13px)*-.5);width:calc(100% + 13px);width:calc(100% + var(--plyr-range-thumb-height, 13px))}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{left:0;max-width:120px;overflow-wrap:break-word}.plyr__progress__buffer{-webkit-appearance:none;background:#0000;border:0;border-radius:100px;height:5px;height:var(--plyr-range-track-height,5px);left:0;margin-top:-2.5px;margin-top:calc((var(--plyr-range-track-height, 5px)/2)*-1);padding:0;position:absolute;top:50%}.plyr__progress__buffer::-webkit-progress-bar{background:#0000}.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease}.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000}.plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)}.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}.plyr__progress__marker{background-color:#fff;background-color:var(--plyr-progress-marker-background,#fff);border-radius:1px;height:5px;height:var(--plyr-range-track-height,5px);position:absolute;top:50%;transform:translate(-50%,-50%);width:3px;width:var(--plyr-progress-marker-width,3px);z-index:3}.plyr__volume{align-items:center;display:flex;position:relative}.plyr__volume input[type=range]{margin-left:5px;margin-left:calc(var(--plyr-control-spacing, 10px)/2);margin-right:5px;margin-right:calc(var(--plyr-control-spacing, 10px)/2);max-width:90px;min-width:60px;position:relative;z-index:2}.plyr--audio{display:block}.plyr--audio .plyr__controls{background:#fff;background:var(--plyr-audio-controls-background,#fff);border-radius:inherit;color:#4a5464;color:var(--plyr-audio-control-color,#4a5464);padding:10px;padding:var(--plyr-control-spacing,10px)}.plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}.plyr--video{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));height:100%;margin:auto;overflow:hidden;position:relative;width:100%}.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{aspect-ratio:16/9}@supports not (aspect-ratio:16/9){.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{height:0;padding-bottom:56.25%;position:relative}}.plyr__video-embed iframe,.plyr__video-wrapper--fixed-ratio video{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}.plyr--video .plyr__controls{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;color:var(--plyr-video-control-color,#fff);left:0;padding:5px;padding:calc(var(--plyr-control-spacing, 10px)/2);padding-top:20px;padding-top:calc(var(--plyr-control-spacing, 10px)*2);position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:3}@media (min-width:480px){.plyr--video .plyr__controls{padding:10px;padding:var(--plyr-control-spacing,10px);padding-top:35px;padding-top:calc(var(--plyr-control-spacing, 10px)*3.5)}}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr--video .plyr__control:focus-visible,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-video-control-color-hover,#fff)}.plyr__control--overlaid{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));border:0;border-radius:100%;color:#fff;color:var(--plyr-video-control-color,#fff);display:none;left:50%;opacity:.9;padding:15px;padding:calc(var(--plyr-control-spacing, 10px)*1.5);position:absolute;top:50%;transform:translate(-50%,-50%);transition:.3s;z-index:2}.plyr__control--overlaid svg{left:2px;position:relative}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{opacity:1}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen video{height:100%}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:fullscreen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;bottom:0;height:100%;left:0;margin:0;position:fixed;right:0;top:0;width:100%;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr__ads{border-radius:inherit;bottom:0;cursor:pointer;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads:after{background:#23282f;border-radius:2px;bottom:10px;bottom:var(--plyr-control-spacing,10px);color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;right:var(--plyr-control-spacing,10px);z-index:3}.plyr__ads:empty:after{display:none}.plyr__cues{background:currentColor;display:block;height:5px;height:var(--plyr-range-track-height,5px);left:0;opacity:.8;position:absolute;top:50%;transform:translateY(-50%);width:3px;z-index:3}.plyr__preview-thumb{background-color:#ffffffe6;background-color:var(--plyr-tooltip-background,#ffffffe6);border-radius:5px;border-radius:var(--plyr-tooltip-radius,5px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:3px;pointer-events:none;position:absolute;transform:translateY(10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;z-index:2}.plyr__preview-thumb--is-shown{opacity:1;transform:translate(0) scale(1)}.plyr__preview-thumb:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #ffffffe6;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#ffffffe6);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:calc(50% + var(--preview-arrow-offset));position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr__preview-thumb__image-container{background:#c1c8d1;border-radius:4px;border-radius:calc(var(--plyr-tooltip-radius, 5px) - 1px);overflow:hidden;position:relative;z-index:0}.plyr__preview-thumb__image-container img,.plyr__preview-thumb__image-container:after{height:100%;left:0;position:absolute;top:0;width:100%}.plyr__preview-thumb__image-container:after{border-radius:inherit;box-shadow:inset 0 0 0 1px #00000026;content:"";pointer-events:none}.plyr__preview-thumb__image-container img{max-height:none;max-width:none}.plyr__preview-thumb__time-container{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:4px;border-bottom-left-radius:calc(var(--plyr-tooltip-radius, 5px) - 1px);border-bottom-right-radius:4px;border-bottom-right-radius:calc(var(--plyr-tooltip-radius, 5px) - 1px);bottom:0;left:0;line-height:1.1;padding:20px 6px 6px;position:absolute;right:0;z-index:3}.plyr__preview-thumb__time-container span{color:#fff;font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}.plyr__preview-scrubbing{bottom:0;filter:blur(1px);height:100%;left:0;margin:auto;opacity:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .3s ease;width:100%;z-index:1}.plyr__preview-scrubbing--is-shown{opacity:1}.plyr__preview-scrubbing img{height:100%;left:0;max-height:none;max-width:none;object-fit:contain;position:absolute;top:0;width:100%}.plyr--no-transition{transition:none!important}.plyr__sr-only{clip:rect(1px,1px,1px,1px);border:0!important;height:1px!important;overflow:hidden;padding:0!important;position:absolute!important;width:1px!important}.plyr [hidden]{display:none!important}
--------------------------------------------------------------------------------
/dist/system/index.development.js:
--------------------------------------------------------------------------------
1 | System.register(['react/jsx-runtime', 'react', 'plyr', 'prop-types', 'react-aptor'], (function (exports) {
2 | 'use strict';
3 | var jsx, React, PlyrJS, PropTypes, useAptor;
4 | return {
5 | setters: [function (module) {
6 | jsx = module.jsx;
7 | }, function (module) {
8 | React = module;
9 | }, function (module) {
10 | PlyrJS = module["default"];
11 | }, function (module) {
12 | PropTypes = module["default"];
13 | }, function (module) {
14 | useAptor = module["default"];
15 | }],
16 | execute: (function () {
17 |
18 | exports('usePlyr', usePlyr);
19 |
20 | const instantiate = (_, params) => {
21 | const plyr = new PlyrJS(".plyr-react", params.options || {});
22 | if (params.source)
23 | plyr.source = params.source;
24 | return plyr;
25 | };
26 | const destroy = (plyr) => {
27 | if (plyr)
28 | plyr.destroy();
29 | };
30 | const noop = () => {
31 | };
32 | const getAPI = (plyr) => {
33 | if (!plyr) {
34 | return () => new Proxy({ plyr: { source: null } }, {
35 | get: (target, prop) => {
36 | if (prop === "plyr") {
37 | return target[prop];
38 | }
39 | return noop;
40 | }
41 | });
42 | }
43 | return () => ({
44 | /**
45 | * Plyr instance with all of its functionality
46 | */
47 | plyr
48 | });
49 | };
50 | function usePlyr(ref, params, deps = null) {
51 | return useAptor(
52 | ref,
53 | {
54 | instantiate,
55 | getAPI,
56 | destroy,
57 | params
58 | },
59 | deps || [params.options, params.source]
60 | );
61 | }
62 | const Plyr = exports('default', React.forwardRef((props, ref) => {
63 | const { source, options = null, ...rest } = props;
64 | const raptorRef = usePlyr(ref, {
65 | source,
66 | options
67 | });
68 | return /* @__PURE__ */ jsx("video", { ref: raptorRef, className: "plyr-react plyr", ...rest });
69 | }));
70 | {
71 | Plyr.displayName = "Plyr";
72 | Plyr.defaultProps = {
73 | options: {
74 | controls: [
75 | "rewind",
76 | "play",
77 | "fast-forward",
78 | "progress",
79 | "current-time",
80 | "duration",
81 | "mute",
82 | "volume",
83 | "settings",
84 | "fullscreen"
85 | ],
86 | i18n: {
87 | restart: "Restart",
88 | rewind: "Rewind {seektime}s",
89 | play: "Play",
90 | pause: "Pause",
91 | fastForward: "Forward {seektime}s",
92 | seek: "Seek",
93 | seekLabel: "{currentTime} of {duration}",
94 | played: "Played",
95 | buffered: "Buffered",
96 | currentTime: "Current time",
97 | duration: "Duration",
98 | volume: "Volume",
99 | mute: "Mute",
100 | unmute: "Unmute",
101 | enableCaptions: "Enable captions",
102 | disableCaptions: "Disable captions",
103 | download: "Download",
104 | enterFullscreen: "Enter fullscreen",
105 | exitFullscreen: "Exit fullscreen",
106 | frameTitle: "Player for {title}",
107 | captions: "Captions",
108 | settings: "Settings",
109 | menuBack: "Go back to previous menu",
110 | speed: "Speed",
111 | normal: "Normal",
112 | quality: "Quality",
113 | loop: "Loop"
114 | }
115 | },
116 | source: {
117 | type: "video",
118 | sources: [
119 | {
120 | src: "https://cdn.plyr.io/static/blank.mp4",
121 | type: "video/mp4",
122 | size: 720
123 | },
124 | {
125 | src: "https://cdn.plyr.io/static/blank.mp4",
126 | type: "video/mp4",
127 | size: 1080
128 | }
129 | ]
130 | }
131 | };
132 | Plyr.propTypes = {
133 | options: PropTypes.object,
134 | source: PropTypes.any
135 | };
136 | }
137 |
138 | })
139 | };
140 | }));
141 |
--------------------------------------------------------------------------------
/dist/system/index.production.js:
--------------------------------------------------------------------------------
1 | System.register(["react/jsx-runtime","react","plyr","prop-types","react-aptor"],function(o){"use strict";var s,u,c,l;return{setters:[function(e){s=e.jsx},function(e){u=e},function(e){c=e.default},function(){},function(e){l=e.default}],execute:function(){o("usePlyr",i);const e=(r,t)=>{const n=new c(".plyr-react",t.options||{});return t.source&&(n.source=t.source),n},a=r=>{r&&r.destroy()},p=()=>{},y=r=>r?()=>({plyr:r}):()=>new Proxy({plyr:{source:null}},{get:(t,n)=>n==="plyr"?t[n]:p});function i(r,t,n=null){return l(r,{instantiate:e,getAPI:y,destroy:a,params:t},n||[t.options,t.source])}const m=o("default",u.forwardRef((r,t)=>{const{source:n,options:f=null,...d}=r,P=i(t,{source:n,options:f});return s("video",{ref:P,className:"plyr-react plyr",...d})}))}}});
2 |
--------------------------------------------------------------------------------
/dist/umd/index.development.js:
--------------------------------------------------------------------------------
1 | (function (global, factory) {
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('plyr'), require('prop-types'), require('react-aptor'), require('react/jsx-runtime')) :
3 | typeof define === 'function' && define.amd ? define(['exports', 'react', 'plyr', 'prop-types', 'react-aptor', 'react/jsx-runtime'], factory) :
4 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["plyr-react"] = {}, global.React, global.PlyrJS, global.PropTypes, global.useAptor, global.jsxRuntime));
5 | })(this, (function (exports, React, PlyrJS, PropTypes, useAptor, jsxRuntime) { 'use strict';
6 |
7 | function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8 |
9 | function _interopNamespace(e) {
10 | if (e && e.__esModule) return e;
11 | var n = Object.create(null);
12 | if (e) {
13 | Object.keys(e).forEach(function (k) {
14 | if (k !== 'default') {
15 | var d = Object.getOwnPropertyDescriptor(e, k);
16 | Object.defineProperty(n, k, d.get ? d : {
17 | enumerable: true,
18 | get: function () { return e[k]; }
19 | });
20 | }
21 | });
22 | }
23 | n["default"] = e;
24 | return Object.freeze(n);
25 | }
26 |
27 | var React__namespace = /*#__PURE__*/_interopNamespace(React);
28 | var PlyrJS__default = /*#__PURE__*/_interopDefaultLegacy(PlyrJS);
29 | var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
30 | var useAptor__default = /*#__PURE__*/_interopDefaultLegacy(useAptor);
31 |
32 | function _extends() {
33 | _extends = Object.assign ? Object.assign.bind() : function (target) {
34 | for (var i = 1; i < arguments.length; i++) {
35 | var source = arguments[i];
36 | for (var key in source) {
37 | if (Object.prototype.hasOwnProperty.call(source, key)) {
38 | target[key] = source[key];
39 | }
40 | }
41 | }
42 | return target;
43 | };
44 | return _extends.apply(this, arguments);
45 | }
46 | function _objectWithoutPropertiesLoose(source, excluded) {
47 | if (source == null) return {};
48 | var target = {};
49 | var sourceKeys = Object.keys(source);
50 | var key, i;
51 | for (i = 0; i < sourceKeys.length; i++) {
52 | key = sourceKeys[i];
53 | if (excluded.indexOf(key) >= 0) continue;
54 | target[key] = source[key];
55 | }
56 | return target;
57 | }
58 |
59 | var _excluded = ["source", "options"];
60 | var instantiate = function instantiate(_, params) {
61 | var plyr = new PlyrJS__default["default"](".plyr-react", params.options || {});
62 | if (params.source) plyr.source = params.source;
63 | return plyr;
64 | };
65 | var destroy = function destroy(plyr) {
66 | if (plyr) plyr.destroy();
67 | };
68 | var noop = function noop() {};
69 | var getAPI = function getAPI(plyr) {
70 | if (!plyr) {
71 | return function () {
72 | return new Proxy({
73 | plyr: {
74 | source: null
75 | }
76 | }, {
77 | get: function get(target, prop) {
78 | if (prop === "plyr") {
79 | return target[prop];
80 | }
81 | return noop;
82 | }
83 | });
84 | };
85 | }
86 | return function () {
87 | return {
88 | plyr: plyr
89 | };
90 | };
91 | };
92 | function usePlyr(ref, params, deps) {
93 | if (deps === void 0) {
94 | deps = null;
95 | }
96 | return useAptor__default["default"](ref, {
97 | instantiate: instantiate,
98 | getAPI: getAPI,
99 | destroy: destroy,
100 | params: params
101 | }, deps || [params.options, params.source]);
102 | }
103 | var Plyr = React__namespace.forwardRef(function (props, ref) {
104 | var source = props.source,
105 | _props$options = props.options,
106 | options = _props$options === void 0 ? null : _props$options,
107 | rest = _objectWithoutPropertiesLoose(props, _excluded);
108 | var raptorRef = usePlyr(ref, {
109 | source: source,
110 | options: options
111 | });
112 | return jsxRuntime.jsx("video", _extends({
113 | ref: raptorRef,
114 | className: "plyr-react plyr"
115 | }, rest));
116 | });
117 | {
118 | Plyr.displayName = "Plyr";
119 | Plyr.defaultProps = {
120 | options: {
121 | controls: ["rewind", "play", "fast-forward", "progress", "current-time", "duration", "mute", "volume", "settings", "fullscreen"],
122 | i18n: {
123 | restart: "Restart",
124 | rewind: "Rewind {seektime}s",
125 | play: "Play",
126 | pause: "Pause",
127 | fastForward: "Forward {seektime}s",
128 | seek: "Seek",
129 | seekLabel: "{currentTime} of {duration}",
130 | played: "Played",
131 | buffered: "Buffered",
132 | currentTime: "Current time",
133 | duration: "Duration",
134 | volume: "Volume",
135 | mute: "Mute",
136 | unmute: "Unmute",
137 | enableCaptions: "Enable captions",
138 | disableCaptions: "Disable captions",
139 | download: "Download",
140 | enterFullscreen: "Enter fullscreen",
141 | exitFullscreen: "Exit fullscreen",
142 | frameTitle: "Player for {title}",
143 | captions: "Captions",
144 | settings: "Settings",
145 | menuBack: "Go back to previous menu",
146 | speed: "Speed",
147 | normal: "Normal",
148 | quality: "Quality",
149 | loop: "Loop"
150 | }
151 | },
152 | source: {
153 | type: "video",
154 | sources: [{
155 | src: "https://cdn.plyr.io/static/blank.mp4",
156 | type: "video/mp4",
157 | size: 720
158 | }, {
159 | src: "https://cdn.plyr.io/static/blank.mp4",
160 | type: "video/mp4",
161 | size: 1080
162 | }]
163 | }
164 | };
165 | Plyr.propTypes = {
166 | options: PropTypes__default["default"].object,
167 | source: PropTypes__default["default"].any
168 | };
169 | }
170 |
171 | exports["default"] = Plyr;
172 | exports.usePlyr = usePlyr;
173 |
174 | Object.defineProperty(exports, '__esModule', { value: true });
175 |
176 | }));
177 |
--------------------------------------------------------------------------------
/dist/umd/index.production.js:
--------------------------------------------------------------------------------
1 | !function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("plyr"),require("prop-types"),require("react-aptor"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","plyr","prop-types","react-aptor","react/jsx-runtime"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self)["plyr-react"]={},e.React,e.PlyrJS,e.PropTypes,e.useAptor,e.jsxRuntime)}(this,(function(e,r,t,n,o,u){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var f=c(r),a=i(t),s=i(o);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var r=1;r=0||(o[t]=e[t]);return o}(e,p),c=v(r,{source:t,options:o});return u.jsx("video",l({ref:c,className:"plyr-react plyr"},i))}));e.default=O,e.usePlyr=v,Object.defineProperty(e,"__esModule",{value:!0})}));
2 |
--------------------------------------------------------------------------------
/example/nextjs/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/example/nextjs/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
--------------------------------------------------------------------------------
/example/nextjs/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | ```
12 |
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 |
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 |
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 |
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
--------------------------------------------------------------------------------
/example/nextjs/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | };
5 |
6 | module.exports = nextConfig;
7 |
--------------------------------------------------------------------------------
/example/nextjs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nextjs",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "build": "next build",
7 | "dev": "next dev",
8 | "lint": "next lint",
9 | "start": "next start"
10 | },
11 | "dependencies": {
12 | "next": "12.1.6",
13 | "plyr-react": "next",
14 | "react": "18.1.0",
15 | "react-dom": "18.1.0"
16 | },
17 | "devDependencies": {
18 | "eslint": "8.16.0",
19 | "eslint-config-next": "12.1.6"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/example/nextjs/pages/_app.js:
--------------------------------------------------------------------------------
1 | import "../styles/globals.css";
2 |
3 | /**
4 | * This is a functional component in JavaScript that returns a component with its props.
5 | * @returns The function `MyApp` is returning the `Component` with the `pageProps` passed as props.
6 | */
7 | function MyApp({ Component, pageProps }) {
8 | return ;
9 | }
10 |
11 | export default MyApp;
12 |
--------------------------------------------------------------------------------
/example/nextjs/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 |
3 | export default function handler(req, res) {
4 | res.status(200).json({ name: "John Doe" });
5 | }
6 |
--------------------------------------------------------------------------------
/example/nextjs/pages/index.js:
--------------------------------------------------------------------------------
1 | import dynamic from "next/dynamic";
2 |
3 | const VideoList = dynamic(() => import("../src/video-list"), { ssr: false });
4 |
5 | /**
6 | * The function returns a component that displays a heading and a list of videos.
7 | * @returns The `Home` component is being returned, which contains a `div` element with a heading
8 | * "Video List" and a `VideoList` component.
9 | */
10 | export default function Home() {
11 | return (
12 |
13 |
Video List
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/example/nextjs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chintan9/plyr-react/f73671a9d7ce7c1b94714ec15d929802e23aade3/example/nextjs/public/favicon.ico
--------------------------------------------------------------------------------
/example/nextjs/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
3 |
4 |
--------------------------------------------------------------------------------
/example/nextjs/src/contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "videos": [
3 | {
4 | "id": "bTqVqk7FSmY",
5 | "source": "youtube"
6 | },
7 | {
8 | "id": "-4hhAscrQ2A",
9 | "source": "youtube"
10 | },
11 | {
12 | "id": "Go8nTmfrQd8",
13 | "source": "youtube"
14 | }
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/example/nextjs/src/video-list.jsx:
--------------------------------------------------------------------------------
1 | import Plyr from "plyr-react";
2 | import "plyr-react/dist/plyr.css";
3 | import contents from "./contents.json";
4 |
5 | /**
6 | * This code exports a React component called `VideoList` that renders a list of videos using the Plyr
7 | video player.
8 | * @returns Plyr instance
9 | */
10 | export default function VideoList() {
11 | return (
12 |
13 | {contents.videos.map((video) => (
14 |
15 |
21 |
22 | ))}
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/example/nextjs/styles/globals.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | padding: 0;
4 | margin: 0;
5 | font-family:
6 | -apple-system,
7 | BlinkMacSystemFont,
8 | Segoe UI,
9 | Roboto,
10 | Oxygen,
11 | Ubuntu,
12 | Cantarell,
13 | Fira Sans,
14 | Droid Sans,
15 | Helvetica Neue,
16 | sans-serif;
17 | }
18 |
19 | a {
20 | color: inherit;
21 | text-decoration: none;
22 | }
23 |
24 | * {
25 | box-sizing: border-box;
26 | }
27 |
28 | /* Video list global styles */
29 | .video-list {
30 | display: flex;
31 | flex-direction: column;
32 | padding: 0;
33 | }
34 |
35 | .video-item {
36 | list-style: none;
37 | margin: 1em;
38 | border-radius: 16px;
39 | overflow: hidden;
40 | }
41 |
--------------------------------------------------------------------------------
/example/react/README.md:
--------------------------------------------------------------------------------
1 | ## Installation & Testing
2 |
3 | ```sh
4 | # go to root directory
5 | cd plyr-react
6 |
7 | # install and build packages
8 | npm install
9 |
10 | # go to example page directory
11 | # Note, please use yarn because we are actually linking to the package in the parent directory.
12 | yarn install
13 |
14 | # start a development server to test the package working
15 | yarn dev
16 | ```
17 |
--------------------------------------------------------------------------------
/example/react/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/example/react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "build": "tsc && vite build",
6 | "dev": "vite",
7 | "preview": "vite preview"
8 | },
9 | "dependencies": {
10 | "hls.js": "^1.1.5",
11 | "plyr-react": "next",
12 | "react": "^17.0.2",
13 | "react-dom": "^17.0.2"
14 | },
15 | "devDependencies": {
16 | "@types/react": "^17.0.33",
17 | "@types/react-dom": "^17.0.10",
18 | "@vitejs/plugin-react": "^1.0.7",
19 | "typescript": "^4.4.4",
20 | "vite": "^2.9.16"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/example/react/src/audio-player/custom-audio-player.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { APITypes, PlyrInstance, PlyrProps, usePlyr } from "plyr-react";
3 | import "plyr-react/dist/plyr.css";
4 |
5 | const videoOptions = undefined;
6 |
7 | /* This object is used as the source for the `CustomPlyrInstance` component. */
8 | const videoSource = {
9 | type: "audio" as const,
10 | sources: [
11 | {
12 | type: "audio/wav",
13 | src: "https://dl.songsara.net/FRE/2022/1/Roa%20-%20Tiny%20Love%20(2021)%20SONGSARA.NET.mp3",
14 | },
15 | ],
16 | };
17 |
18 | /* This code defines a custom React component called `CustomPlyrInstance` that uses the
19 | `React.forwardRef` function to forward a ref to a child component. The component takes in two props:
20 | `source` and `options`, which are used to configure the Plyr instance. */
21 | const CustomPlyrInstance = React.forwardRef(
22 | (props, ref) => {
23 | const { source, options = null } = props;
24 | const raptorRef = usePlyr(ref, { options, source });
25 |
26 | // Do all api access here, it is guaranteed to be called with the latest plyr instance
27 | React.useEffect(() => {
28 | /**
29 | * Fool react for using forward ref as normal ref
30 | * NOTE: in a case you don't need the forward mechanism and handle everything via props
31 | * you can create the ref inside the component by yourself
32 | */
33 | const { current } = ref as React.MutableRefObject;
34 | if (current.plyr.source === null) return;
35 |
36 | /* This code is accessing the Plyr instance API and adding event listeners to it. */
37 | const api = current as { plyr: PlyrInstance };
38 | api.plyr.on("ready", () => console.log("I'm ready"));
39 | api.plyr.on("canplay", () => {
40 | // NOTE: browser may pause you from doing so: https://goo.gl/xX8pDD
41 | api.plyr.play();
42 | console.log("duration of audio is", api.plyr.duration);
43 | });
44 | api.plyr.on("ended", () => console.log("I'm Ended"));
45 | });
46 |
47 | return (
48 | }
50 | className="plyr-react plyr"
51 | />
52 | );
53 | }
54 | );
55 |
56 | /* This code defines a functional component called `PlyrComponent` that renders a `CustomPlyrInstance`
57 | component with a `ref` and `source` and `options` props. The`source` and `options` props are used to
58 | configure the Plyr instance. The component is wrapped in a `div` with a class name of "wrapper". */
59 | const PlyrComponent = () => {
60 | const ref = React.useRef(null);
61 |
62 | return (
63 |
64 | {videoSource && (
65 |
70 | )}
71 |
72 | );
73 | };
74 |
75 | export default PlyrComponent;
76 |
--------------------------------------------------------------------------------
/example/react/src/hls-player/custom-hls-player.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { APITypes, PlyrProps, usePlyr } from "plyr-react";
3 | import "plyr-react/dist/plyr.css";
4 | import Hls from "hls.js";
5 | import { Options } from "plyr";
6 |
7 | const videoOptions = null;
8 | const videoSource = null;
9 | const hlsSource = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";
10 |
11 | /**
12 | * This is a custom hook in TypeScript React that loads and attaches an HLS video source to a Plyr
13 | * player, and sets the quality options for the player.
14 | * @param {string} src - The source URL of the video that will be played.
15 | * @param {Options | null} options - `options` is an object that contains optional configuration
16 | * options for the Plyr player. It can include properties such as `autoplay`, `controls`, `loop`,
17 | * `muted`, `seekTime`, `volume`, and more. This parameter is optional and can be `null`.
18 | * @returns The `useHls` function returns an object with a single property `options`, which is of type
19 | * `Options | null`. The `options` object contains information about the video quality and any other
20 | * custom event listeners that may have been added.
21 | */
22 | const useHls = (src: string, options: Options | null) => {
23 | const hls = React.useRef(new Hls());
24 | const hasQuality = React.useRef(false);
25 | const [plyrOptions, setPlyrOptions] = React.useState(options);
26 |
27 | React.useEffect(() => {
28 | hasQuality.current = false;
29 | }, [options]);
30 |
31 | React.useEffect(() => {
32 | hls.current.loadSource(src);
33 | // NOTE: although it is more reactive to use the ref, but it seems that plyr wants to use the old as lazy process
34 | hls.current.attachMedia(document.querySelector(".plyr-react")!);
35 | /**
36 | * You can all your custom event listener here
37 | * For this example we iterate over the qualities and pass them to plyr player
38 | * ref.current.plyr.play() ❌
39 | * console.log.bind(console, 'MANIFEST_PARSED') ✅
40 | * NOTE: you can only start play the audio here
41 | * Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
42 | */
43 | hls.current.on(Hls.Events.MANIFEST_PARSED, () => {
44 | if (hasQuality.current) return; // early quit if already set
45 |
46 | const levels = hls.current.levels;
47 | const quality: Options["quality"] = {
48 | default: levels[levels.length - 1].height,
49 | options: levels.map((level) => level.height),
50 | forced: true,
51 | /* `onChange` is a callback function that gets triggered when the user changes the quality of
52 | the video. It takes in a `newQuality` parameter which is the new quality selected by the
53 | user. */
54 | onChange: (newQuality: number) => {
55 | console.log("changes", newQuality);
56 | levels.forEach((level, levelIndex) => {
57 | if (level.height === newQuality) {
58 | hls.current.currentLevel = levelIndex;
59 | }
60 | });
61 | },
62 | };
63 | setPlyrOptions({ ...plyrOptions, quality });
64 | hasQuality.current = true;
65 | });
66 | });
67 |
68 | return { options: plyrOptions };
69 | };
70 |
71 | /** `CustomPlyrInstance` is a custom React component that renders a video player using the Plyr library
72 | and supports HLS video streaming. It is created using the `React.forwardRef` function, which allows
73 | the component to receive a `ref` to the player instance as a prop. */
74 | const CustomPlyrInstance = React.forwardRef<
75 | APITypes,
76 | PlyrProps & { hlsSource: string }
77 | >((props, ref) => {
78 | const { source, options = null, hlsSource } = props;
79 | const raptorRef = usePlyr(ref, {
80 | ...useHls(hlsSource, options),
81 | source,
82 | }) as React.MutableRefObject;
83 | return ;
84 | });
85 |
86 | /** The `PlyrComponent` is a functional component that renders a video player using the Plyr library and
87 | supports HLS video streaming. If it is supported, it renders the `CustomPlyrInstance` component passing in the `ref`,
88 | `source`, `options`, and `hlsSource` props. If HLS is not supported, it renders a message saying so. */
89 | const PlyrComponent = () => {
90 | const ref = React.useRef(null);
91 | const supported = Hls.isSupported();
92 |
93 | return (
94 |
95 | {supported ? (
96 | /** `` is a custom React component that renders a video player using the
97 | Plyr library and supports HLS video streaming. It takes in several props: */
98 |
104 | ) : (
105 | "HLS is not supported in your browser"
106 | )}
107 |
108 | );
109 | };
110 |
111 | export default PlyrComponent;
112 |
--------------------------------------------------------------------------------
/example/react/src/index.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | height: 100%;
4 | }
5 |
6 | body {
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | text-align: center;
11 | }
12 |
13 | .wrapper {
14 | width: 500px;
15 | }
16 |
17 | /* Video list global styles */
18 | .video-list {
19 | height: 100%;
20 | width: 50vw;
21 | display: flex;
22 | flex-direction: column;
23 | padding: 0;
24 | }
25 |
26 | .video-item {
27 | list-style: none;
28 | margin: 1em;
29 | border-radius: 16px;
30 | overflow: hidden;
31 | }
32 |
--------------------------------------------------------------------------------
/example/react/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./index.css";
4 | // import App from './audio-player/custom-audio-player'
5 | // import App from "./hls-player/custom-hls-player";
6 | import App from "./video-list/video-list";
7 |
8 | ReactDOM.render(
9 |
10 |
11 | ,
12 | document.getElementById("root")
13 | );
14 |
--------------------------------------------------------------------------------
/example/react/src/video-list/contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "videos": [
3 | {
4 | "id": "bTqVqk7FSmY",
5 | "source": "youtube"
6 | },
7 | {
8 | "id": "-4hhAscrQ2A",
9 | "source": "youtube"
10 | },
11 | {
12 | "id": "265284284",
13 | "source": "vimeo"
14 | }
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/example/react/src/video-list/video-list.tsx:
--------------------------------------------------------------------------------
1 | import Plyr from "plyr-react";
2 | import "plyr-react/dist/plyr.css";
3 | import contents from "./contents.json";
4 |
5 | /**
6 | * This code exports a React component called `VideoList` that renders a list of videos using the Plyr
7 | video player.
8 | * @returns Plyr instance
9 | */
10 | export default function VideoList() {
11 | return (
12 |
13 | {contents.videos.map((video) => (
14 |
15 |
22 |
23 | ))}
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/example/react/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/example/react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": false,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "module": "ESNext",
13 | "moduleResolution": "Node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/example/react/vite.config.ts:
--------------------------------------------------------------------------------
1 | import react from "@vitejs/plugin-react";
2 | import { defineConfig } from "vite";
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | });
8 |
--------------------------------------------------------------------------------
/example/react/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 |
4 |
5 | "@ampproject/remapping@^2.1.0":
6 | version "2.1.2"
7 | resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.1.2.tgz#4edca94973ded9630d20101cd8559cedb8d8bd34"
8 | integrity sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==
9 | dependencies:
10 | "@jridgewell/trace-mapping" "^0.3.0"
11 |
12 | "@babel/code-frame@^7.16.7":
13 | version "7.16.7"
14 | resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
15 | integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
16 | dependencies:
17 | "@babel/highlight" "^7.16.7"
18 |
19 | "@babel/code-frame@^7.22.13":
20 | version "7.22.13"
21 | resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
22 | integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
23 | dependencies:
24 | "@babel/highlight" "^7.22.13"
25 | chalk "^2.4.2"
26 |
27 | "@babel/compat-data@^7.17.7":
28 | version "7.17.7"
29 | resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
30 | integrity sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==
31 |
32 | "@babel/core@^7.16.12":
33 | version "7.17.8"
34 | resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.8.tgz#3dac27c190ebc3a4381110d46c80e77efe172e1a"
35 | integrity sha512-OdQDV/7cRBtJHLSOBqqbYNkOcydOgnX59TZx4puf41fzcVtN3e/4yqY8lMQsK+5X2lJtAdmA+6OHqsj1hBJ4IQ==
36 | dependencies:
37 | "@ampproject/remapping" "^2.1.0"
38 | "@babel/code-frame" "^7.16.7"
39 | "@babel/generator" "^7.17.7"
40 | "@babel/helper-compilation-targets" "^7.17.7"
41 | "@babel/helper-module-transforms" "^7.17.7"
42 | "@babel/helpers" "^7.17.8"
43 | "@babel/parser" "^7.17.8"
44 | "@babel/template" "^7.16.7"
45 | "@babel/traverse" "^7.17.3"
46 | "@babel/types" "^7.17.0"
47 | convert-source-map "^1.7.0"
48 | debug "^4.1.0"
49 | gensync "^1.0.0-beta.2"
50 | json5 "^2.1.2"
51 | semver "^6.3.0"
52 |
53 | "@babel/generator@^7.17.7":
54 | version "7.17.7"
55 | resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.7.tgz#8da2599beb4a86194a3b24df6c085931d9ee45ad"
56 | integrity sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==
57 | dependencies:
58 | "@babel/types" "^7.17.0"
59 | jsesc "^2.5.1"
60 | source-map "^0.5.0"
61 |
62 | "@babel/generator@^7.23.0":
63 | version "7.23.0"
64 | resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420"
65 | integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==
66 | dependencies:
67 | "@babel/types" "^7.23.0"
68 | "@jridgewell/gen-mapping" "^0.3.2"
69 | "@jridgewell/trace-mapping" "^0.3.17"
70 | jsesc "^2.5.1"
71 |
72 | "@babel/helper-annotate-as-pure@^7.16.7":
73 | version "7.16.7"
74 | resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
75 | integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
76 | dependencies:
77 | "@babel/types" "^7.16.7"
78 |
79 | "@babel/helper-compilation-targets@^7.17.7":
80 | version "7.17.7"
81 | resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz#a3c2924f5e5f0379b356d4cfb313d1414dc30e46"
82 | integrity sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==
83 | dependencies:
84 | "@babel/compat-data" "^7.17.7"
85 | "@babel/helper-validator-option" "^7.16.7"
86 | browserslist "^4.17.5"
87 | semver "^6.3.0"
88 |
89 | "@babel/helper-environment-visitor@^7.16.7":
90 | version "7.16.7"
91 | resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
92 | integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
93 | dependencies:
94 | "@babel/types" "^7.16.7"
95 |
96 | "@babel/helper-environment-visitor@^7.22.20":
97 | version "7.22.20"
98 | resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
99 | integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
100 |
101 | "@babel/helper-function-name@^7.23.0":
102 | version "7.23.0"
103 | resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
104 | integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
105 | dependencies:
106 | "@babel/template" "^7.22.15"
107 | "@babel/types" "^7.23.0"
108 |
109 | "@babel/helper-hoist-variables@^7.22.5":
110 | version "7.22.5"
111 | resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
112 | integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
113 | dependencies:
114 | "@babel/types" "^7.22.5"
115 |
116 | "@babel/helper-module-imports@^7.16.7":
117 | version "7.16.7"
118 | resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
119 | integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
120 | dependencies:
121 | "@babel/types" "^7.16.7"
122 |
123 | "@babel/helper-module-transforms@^7.17.7":
124 | version "7.17.7"
125 | resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz#3943c7f777139e7954a5355c815263741a9c1cbd"
126 | integrity sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==
127 | dependencies:
128 | "@babel/helper-environment-visitor" "^7.16.7"
129 | "@babel/helper-module-imports" "^7.16.7"
130 | "@babel/helper-simple-access" "^7.17.7"
131 | "@babel/helper-split-export-declaration" "^7.16.7"
132 | "@babel/helper-validator-identifier" "^7.16.7"
133 | "@babel/template" "^7.16.7"
134 | "@babel/traverse" "^7.17.3"
135 | "@babel/types" "^7.17.0"
136 |
137 | "@babel/helper-plugin-utils@^7.16.7":
138 | version "7.16.7"
139 | resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
140 | integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
141 |
142 | "@babel/helper-simple-access@^7.17.7":
143 | version "7.17.7"
144 | resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz#aaa473de92b7987c6dfa7ce9a7d9674724823367"
145 | integrity sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==
146 | dependencies:
147 | "@babel/types" "^7.17.0"
148 |
149 | "@babel/helper-split-export-declaration@^7.16.7":
150 | version "7.16.7"
151 | resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
152 | integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
153 | dependencies:
154 | "@babel/types" "^7.16.7"
155 |
156 | "@babel/helper-split-export-declaration@^7.22.6":
157 | version "7.22.6"
158 | resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
159 | integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
160 | dependencies:
161 | "@babel/types" "^7.22.5"
162 |
163 | "@babel/helper-string-parser@^7.22.5":
164 | version "7.22.5"
165 | resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
166 | integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
167 |
168 | "@babel/helper-validator-identifier@^7.16.7":
169 | version "7.16.7"
170 | resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
171 | integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
172 |
173 | "@babel/helper-validator-identifier@^7.22.20":
174 | version "7.22.20"
175 | resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
176 | integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
177 |
178 | "@babel/helper-validator-option@^7.16.7":
179 | version "7.16.7"
180 | resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
181 | integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
182 |
183 | "@babel/helpers@^7.17.8":
184 | version "7.17.8"
185 | resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.8.tgz#288450be8c6ac7e4e44df37bcc53d345e07bc106"
186 | integrity sha512-QcL86FGxpfSJwGtAvv4iG93UL6bmqBdmoVY0CMCU2g+oD2ezQse3PT5Pa+jiD6LJndBQi0EDlpzOWNlLuhz5gw==
187 | dependencies:
188 | "@babel/template" "^7.16.7"
189 | "@babel/traverse" "^7.17.3"
190 | "@babel/types" "^7.17.0"
191 |
192 | "@babel/highlight@^7.16.7":
193 | version "7.16.10"
194 | resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
195 | integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
196 | dependencies:
197 | "@babel/helper-validator-identifier" "^7.16.7"
198 | chalk "^2.0.0"
199 | js-tokens "^4.0.0"
200 |
201 | "@babel/highlight@^7.22.13":
202 | version "7.22.20"
203 | resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
204 | integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
205 | dependencies:
206 | "@babel/helper-validator-identifier" "^7.22.20"
207 | chalk "^2.4.2"
208 | js-tokens "^4.0.0"
209 |
210 | "@babel/parser@^7.16.7", "@babel/parser@^7.17.8":
211 | version "7.17.8"
212 | resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.8.tgz#2817fb9d885dd8132ea0f8eb615a6388cca1c240"
213 | integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==
214 |
215 | "@babel/parser@^7.22.15", "@babel/parser@^7.23.0":
216 | version "7.23.0"
217 | resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
218 | integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
219 |
220 | "@babel/plugin-syntax-jsx@^7.16.7":
221 | version "7.16.7"
222 | resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
223 | integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
224 | dependencies:
225 | "@babel/helper-plugin-utils" "^7.16.7"
226 |
227 | "@babel/plugin-transform-react-jsx-development@^7.16.7":
228 | version "7.16.7"
229 | resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz#43a00724a3ed2557ed3f276a01a929e6686ac7b8"
230 | integrity sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==
231 | dependencies:
232 | "@babel/plugin-transform-react-jsx" "^7.16.7"
233 |
234 | "@babel/plugin-transform-react-jsx-self@^7.16.7":
235 | version "7.16.7"
236 | resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.16.7.tgz#f432ad0cba14c4a1faf44f0076c69e42a4d4479e"
237 | integrity sha512-oe5VuWs7J9ilH3BCCApGoYjHoSO48vkjX2CbA5bFVhIuO2HKxA3vyF7rleA4o6/4rTDbk6r8hBW7Ul8E+UZrpA==
238 | dependencies:
239 | "@babel/helper-plugin-utils" "^7.16.7"
240 |
241 | "@babel/plugin-transform-react-jsx-source@^7.16.7":
242 | version "7.16.7"
243 | resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.16.7.tgz#1879c3f23629d287cc6186a6c683154509ec70c0"
244 | integrity sha512-rONFiQz9vgbsnaMtQlZCjIRwhJvlrPET8TabIUK2hzlXw9B9s2Ieaxte1SCOOXMbWRHodbKixNf3BLcWVOQ8Bw==
245 | dependencies:
246 | "@babel/helper-plugin-utils" "^7.16.7"
247 |
248 | "@babel/plugin-transform-react-jsx@^7.16.7":
249 | version "7.17.3"
250 | resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.17.3.tgz#eac1565da176ccb1a715dae0b4609858808008c1"
251 | integrity sha512-9tjBm4O07f7mzKSIlEmPdiE6ub7kfIe6Cd+w+oQebpATfTQMAgW+YOuWxogbKVTulA+MEO7byMeIUtQ1z+z+ZQ==
252 | dependencies:
253 | "@babel/helper-annotate-as-pure" "^7.16.7"
254 | "@babel/helper-module-imports" "^7.16.7"
255 | "@babel/helper-plugin-utils" "^7.16.7"
256 | "@babel/plugin-syntax-jsx" "^7.16.7"
257 | "@babel/types" "^7.17.0"
258 |
259 | "@babel/template@^7.16.7":
260 | version "7.16.7"
261 | resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
262 | integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
263 | dependencies:
264 | "@babel/code-frame" "^7.16.7"
265 | "@babel/parser" "^7.16.7"
266 | "@babel/types" "^7.16.7"
267 |
268 | "@babel/template@^7.22.15":
269 | version "7.22.15"
270 | resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
271 | integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
272 | dependencies:
273 | "@babel/code-frame" "^7.22.13"
274 | "@babel/parser" "^7.22.15"
275 | "@babel/types" "^7.22.15"
276 |
277 | "@babel/traverse@^7.17.3":
278 | version "7.23.2"
279 | resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8"
280 | integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==
281 | dependencies:
282 | "@babel/code-frame" "^7.22.13"
283 | "@babel/generator" "^7.23.0"
284 | "@babel/helper-environment-visitor" "^7.22.20"
285 | "@babel/helper-function-name" "^7.23.0"
286 | "@babel/helper-hoist-variables" "^7.22.5"
287 | "@babel/helper-split-export-declaration" "^7.22.6"
288 | "@babel/parser" "^7.23.0"
289 | "@babel/types" "^7.23.0"
290 | debug "^4.1.0"
291 | globals "^11.1.0"
292 |
293 | "@babel/types@^7.16.7", "@babel/types@^7.17.0":
294 | version "7.17.0"
295 | resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
296 | integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
297 | dependencies:
298 | "@babel/helper-validator-identifier" "^7.16.7"
299 | to-fast-properties "^2.0.0"
300 |
301 | "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0":
302 | version "7.23.0"
303 | resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb"
304 | integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==
305 | dependencies:
306 | "@babel/helper-string-parser" "^7.22.5"
307 | "@babel/helper-validator-identifier" "^7.22.20"
308 | to-fast-properties "^2.0.0"
309 |
310 | "@esbuild/linux-loong64@0.14.54":
311 | version "0.14.54"
312 | resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz#de2a4be678bd4d0d1ffbb86e6de779cde5999028"
313 | integrity sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==
314 |
315 | "@jridgewell/gen-mapping@^0.3.2":
316 | version "0.3.3"
317 | resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
318 | integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
319 | dependencies:
320 | "@jridgewell/set-array" "^1.0.1"
321 | "@jridgewell/sourcemap-codec" "^1.4.10"
322 | "@jridgewell/trace-mapping" "^0.3.9"
323 |
324 | "@jridgewell/resolve-uri@^3.0.3":
325 | version "3.0.5"
326 | resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c"
327 | integrity sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==
328 |
329 | "@jridgewell/resolve-uri@^3.1.0":
330 | version "3.1.1"
331 | resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721"
332 | integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==
333 |
334 | "@jridgewell/set-array@^1.0.1":
335 | version "1.1.2"
336 | resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
337 | integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
338 |
339 | "@jridgewell/sourcemap-codec@^1.4.10":
340 | version "1.4.11"
341 | resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
342 | integrity sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==
343 |
344 | "@jridgewell/sourcemap-codec@^1.4.14":
345 | version "1.4.15"
346 | resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
347 | integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
348 |
349 | "@jridgewell/trace-mapping@^0.3.0":
350 | version "0.3.4"
351 | resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz#f6a0832dffd5b8a6aaa633b7d9f8e8e94c83a0c3"
352 | integrity sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==
353 | dependencies:
354 | "@jridgewell/resolve-uri" "^3.0.3"
355 | "@jridgewell/sourcemap-codec" "^1.4.10"
356 |
357 | "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
358 | version "0.3.20"
359 | resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz#72e45707cf240fa6b081d0366f8265b0cd10197f"
360 | integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==
361 | dependencies:
362 | "@jridgewell/resolve-uri" "^3.1.0"
363 | "@jridgewell/sourcemap-codec" "^1.4.14"
364 |
365 | "@rollup/pluginutils@^4.1.2":
366 | version "4.2.0"
367 | resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.0.tgz#a14bbd058fdbba0a5647143b16ed0d86fb60bd08"
368 | integrity sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA==
369 | dependencies:
370 | estree-walker "^2.0.1"
371 | picomatch "^2.2.2"
372 |
373 | "@types/prop-types@*":
374 | version "15.7.4"
375 | resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
376 | integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
377 |
378 | "@types/react-dom@^17.0.10":
379 | version "17.0.14"
380 | resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.14.tgz#c8f917156b652ddf807711f5becbd2ab018dea9f"
381 | integrity sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==
382 | dependencies:
383 | "@types/react" "*"
384 |
385 | "@types/react@*", "@types/react@^17.0.33":
386 | version "17.0.41"
387 | resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.41.tgz#6e179590d276394de1e357b3f89d05d7d3da8b85"
388 | integrity sha512-chYZ9ogWUodyC7VUTRBfblysKLjnohhFY9bGLwvnUFFy48+vB9DikmB3lW0qTFmBcKSzmdglcvkHK71IioOlDA==
389 | dependencies:
390 | "@types/prop-types" "*"
391 | "@types/scheduler" "*"
392 | csstype "^3.0.2"
393 |
394 | "@types/scheduler@*":
395 | version "0.16.2"
396 | resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
397 | integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
398 |
399 | "@vitejs/plugin-react@^1.0.7":
400 | version "1.2.0"
401 | resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-1.2.0.tgz#4cfb4c0475e93885e56d66ff15e12ef4c34b0af0"
402 | integrity sha512-Rywwt0IXXg6yQ0hv3cMT3mtdDcGIw31mGaa+MMMAT651LhoXLF2yFy4LrakiTs7UKs7RPBo9eNgaS8pgl2A6Qw==
403 | dependencies:
404 | "@babel/core" "^7.16.12"
405 | "@babel/plugin-transform-react-jsx" "^7.16.7"
406 | "@babel/plugin-transform-react-jsx-development" "^7.16.7"
407 | "@babel/plugin-transform-react-jsx-self" "^7.16.7"
408 | "@babel/plugin-transform-react-jsx-source" "^7.16.7"
409 | "@rollup/pluginutils" "^4.1.2"
410 | react-refresh "^0.11.0"
411 | resolve "^1.22.0"
412 |
413 | ansi-styles@^3.2.1:
414 | version "3.2.1"
415 | resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
416 | integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
417 | dependencies:
418 | color-convert "^1.9.0"
419 |
420 | browserslist@^4.17.5:
421 | version "4.20.2"
422 | resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.2.tgz#567b41508757ecd904dab4d1c646c612cd3d4f88"
423 | integrity sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==
424 | dependencies:
425 | caniuse-lite "^1.0.30001317"
426 | electron-to-chromium "^1.4.84"
427 | escalade "^3.1.1"
428 | node-releases "^2.0.2"
429 | picocolors "^1.0.0"
430 |
431 | caniuse-lite@^1.0.30001317:
432 | version "1.0.30001319"
433 | resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001319.tgz#eb4da4eb3ecdd409f7ba1907820061d56096e88f"
434 | integrity sha512-xjlIAFHucBRSMUo1kb5D4LYgcN1M45qdKP++lhqowDpwJwGkpIRTt5qQqnhxjj1vHcI7nrJxWhCC1ATrCEBTcw==
435 |
436 | chalk@^2.0.0, chalk@^2.4.2:
437 | version "2.4.2"
438 | resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
439 | integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
440 | dependencies:
441 | ansi-styles "^3.2.1"
442 | escape-string-regexp "^1.0.5"
443 | supports-color "^5.3.0"
444 |
445 | color-convert@^1.9.0:
446 | version "1.9.3"
447 | resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
448 | integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
449 | dependencies:
450 | color-name "1.1.3"
451 |
452 | color-name@1.1.3:
453 | version "1.1.3"
454 | resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
455 | integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
456 |
457 | convert-source-map@^1.7.0:
458 | version "1.8.0"
459 | resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
460 | integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
461 | dependencies:
462 | safe-buffer "~5.1.1"
463 |
464 | core-js@^3.22.0:
465 | version "3.22.7"
466 | resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.22.7.tgz#8d6c37f630f6139b8732d10f2c114c3f1d00024f"
467 | integrity sha512-Jt8SReuDKVNZnZEzyEQT5eK6T2RRCXkfTq7Lo09kpm+fHjgGewSbNjV+Wt4yZMhPDdzz2x1ulI5z/w4nxpBseg==
468 |
469 | csstype@^3.0.2:
470 | version "3.0.11"
471 | resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
472 | integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
473 |
474 | custom-event-polyfill@^1.0.7:
475 | version "1.0.7"
476 | resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
477 | integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
478 |
479 | debug@^4.1.0:
480 | version "4.3.4"
481 | resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
482 | integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
483 | dependencies:
484 | ms "2.1.2"
485 |
486 | electron-to-chromium@^1.4.84:
487 | version "1.4.89"
488 | resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.89.tgz#33c06592812a17a7131873f4596579084ce33ff8"
489 | integrity sha512-z1Axg0Fu54fse8wN4fd+GAINdU5mJmLtcl6bqIcYyzNVGONcfHAeeJi88KYMQVKalhXlYuVPzKkFIU5VD0raUw==
490 |
491 | esbuild-android-64@0.14.54:
492 | version "0.14.54"
493 | resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz#505f41832884313bbaffb27704b8bcaa2d8616be"
494 | integrity sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==
495 |
496 | esbuild-android-arm64@0.14.54:
497 | version "0.14.54"
498 | resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz#8ce69d7caba49646e009968fe5754a21a9871771"
499 | integrity sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==
500 |
501 | esbuild-darwin-64@0.14.54:
502 | version "0.14.54"
503 | resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz#24ba67b9a8cb890a3c08d9018f887cc221cdda25"
504 | integrity sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==
505 |
506 | esbuild-darwin-arm64@0.14.54:
507 | version "0.14.54"
508 | resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz#3f7cdb78888ee05e488d250a2bdaab1fa671bf73"
509 | integrity sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==
510 |
511 | esbuild-freebsd-64@0.14.54:
512 | version "0.14.54"
513 | resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz#09250f997a56ed4650f3e1979c905ffc40bbe94d"
514 | integrity sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==
515 |
516 | esbuild-freebsd-arm64@0.14.54:
517 | version "0.14.54"
518 | resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz#bafb46ed04fc5f97cbdb016d86947a79579f8e48"
519 | integrity sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==
520 |
521 | esbuild-linux-32@0.14.54:
522 | version "0.14.54"
523 | resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz#e2a8c4a8efdc355405325033fcebeb941f781fe5"
524 | integrity sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==
525 |
526 | esbuild-linux-64@0.14.54:
527 | version "0.14.54"
528 | resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz#de5fdba1c95666cf72369f52b40b03be71226652"
529 | integrity sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==
530 |
531 | esbuild-linux-arm64@0.14.54:
532 | version "0.14.54"
533 | resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz#dae4cd42ae9787468b6a5c158da4c84e83b0ce8b"
534 | integrity sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==
535 |
536 | esbuild-linux-arm@0.14.54:
537 | version "0.14.54"
538 | resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz#a2c1dff6d0f21dbe8fc6998a122675533ddfcd59"
539 | integrity sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==
540 |
541 | esbuild-linux-mips64le@0.14.54:
542 | version "0.14.54"
543 | resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz#d9918e9e4cb972f8d6dae8e8655bf9ee131eda34"
544 | integrity sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==
545 |
546 | esbuild-linux-ppc64le@0.14.54:
547 | version "0.14.54"
548 | resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz#3f9a0f6d41073fb1a640680845c7de52995f137e"
549 | integrity sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==
550 |
551 | esbuild-linux-riscv64@0.14.54:
552 | version "0.14.54"
553 | resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz#618853c028178a61837bc799d2013d4695e451c8"
554 | integrity sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==
555 |
556 | esbuild-linux-s390x@0.14.54:
557 | version "0.14.54"
558 | resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz#d1885c4c5a76bbb5a0fe182e2c8c60eb9e29f2a6"
559 | integrity sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==
560 |
561 | esbuild-netbsd-64@0.14.54:
562 | version "0.14.54"
563 | resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz#69ae917a2ff241b7df1dbf22baf04bd330349e81"
564 | integrity sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==
565 |
566 | esbuild-openbsd-64@0.14.54:
567 | version "0.14.54"
568 | resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz#db4c8495287a350a6790de22edea247a57c5d47b"
569 | integrity sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==
570 |
571 | esbuild-sunos-64@0.14.54:
572 | version "0.14.54"
573 | resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz#54287ee3da73d3844b721c21bc80c1dc7e1bf7da"
574 | integrity sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==
575 |
576 | esbuild-windows-32@0.14.54:
577 | version "0.14.54"
578 | resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz#f8aaf9a5667630b40f0fb3aa37bf01bbd340ce31"
579 | integrity sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==
580 |
581 | esbuild-windows-64@0.14.54:
582 | version "0.14.54"
583 | resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz#bf54b51bd3e9b0f1886ffdb224a4176031ea0af4"
584 | integrity sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==
585 |
586 | esbuild-windows-arm64@0.14.54:
587 | version "0.14.54"
588 | resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz#937d15675a15e4b0e4fafdbaa3a01a776a2be982"
589 | integrity sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==
590 |
591 | esbuild@^0.14.27:
592 | version "0.14.54"
593 | resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.54.tgz#8b44dcf2b0f1a66fc22459943dccf477535e9aa2"
594 | integrity sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==
595 | optionalDependencies:
596 | "@esbuild/linux-loong64" "0.14.54"
597 | esbuild-android-64 "0.14.54"
598 | esbuild-android-arm64 "0.14.54"
599 | esbuild-darwin-64 "0.14.54"
600 | esbuild-darwin-arm64 "0.14.54"
601 | esbuild-freebsd-64 "0.14.54"
602 | esbuild-freebsd-arm64 "0.14.54"
603 | esbuild-linux-32 "0.14.54"
604 | esbuild-linux-64 "0.14.54"
605 | esbuild-linux-arm "0.14.54"
606 | esbuild-linux-arm64 "0.14.54"
607 | esbuild-linux-mips64le "0.14.54"
608 | esbuild-linux-ppc64le "0.14.54"
609 | esbuild-linux-riscv64 "0.14.54"
610 | esbuild-linux-s390x "0.14.54"
611 | esbuild-netbsd-64 "0.14.54"
612 | esbuild-openbsd-64 "0.14.54"
613 | esbuild-sunos-64 "0.14.54"
614 | esbuild-windows-32 "0.14.54"
615 | esbuild-windows-64 "0.14.54"
616 | esbuild-windows-arm64 "0.14.54"
617 |
618 | escalade@^3.1.1:
619 | version "3.1.1"
620 | resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
621 | integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
622 |
623 | escape-string-regexp@^1.0.5:
624 | version "1.0.5"
625 | resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
626 | integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
627 |
628 | estree-walker@^2.0.1:
629 | version "2.0.2"
630 | resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
631 | integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
632 |
633 | fsevents@~2.3.2:
634 | version "2.3.2"
635 | resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
636 | integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
637 |
638 | function-bind@^1.1.1:
639 | version "1.1.1"
640 | resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
641 | integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
642 |
643 | gensync@^1.0.0-beta.2:
644 | version "1.0.0-beta.2"
645 | resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
646 | integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
647 |
648 | globals@^11.1.0:
649 | version "11.12.0"
650 | resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
651 | integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
652 |
653 | has-flag@^3.0.0:
654 | version "3.0.0"
655 | resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
656 | integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
657 |
658 | has@^1.0.3:
659 | version "1.0.3"
660 | resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
661 | integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
662 | dependencies:
663 | function-bind "^1.1.1"
664 |
665 | hls.js@^1.1.5:
666 | version "1.1.5"
667 | resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.1.5.tgz#923a8a8cfdf09542578696d47c8ae435da981ffd"
668 | integrity sha512-mQX5TSNtJEzGo5HPpvcQgCu+BWoKDQM6YYtg/KbgWkmVAcqOCvSTi0SuqG2ZJLXxIzdnFcKU2z7Mrw/YQWhPOA==
669 |
670 | is-core-module@^2.8.1:
671 | version "2.8.1"
672 | resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
673 | integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
674 | dependencies:
675 | has "^1.0.3"
676 |
677 | "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
678 | version "4.0.0"
679 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
680 | integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
681 |
682 | jsesc@^2.5.1:
683 | version "2.5.2"
684 | resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
685 | integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
686 |
687 | json5@^2.1.2:
688 | version "2.2.3"
689 | resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
690 | integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
691 |
692 | loadjs@^4.2.0:
693 | version "4.2.0"
694 | resolved "https://registry.yarnpkg.com/loadjs/-/loadjs-4.2.0.tgz#2a0336376397a6a43edf98c9ec3229ddd5abb6f6"
695 | integrity sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==
696 |
697 | loose-envify@^1.1.0:
698 | version "1.4.0"
699 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
700 | integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
701 | dependencies:
702 | js-tokens "^3.0.0 || ^4.0.0"
703 |
704 | ms@2.1.2:
705 | version "2.1.2"
706 | resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
707 | integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
708 |
709 | nanoid@^3.3.6:
710 | version "3.3.6"
711 | resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
712 | integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
713 |
714 | node-releases@^2.0.2:
715 | version "2.0.2"
716 | resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.2.tgz#7139fe71e2f4f11b47d4d2986aaf8c48699e0c01"
717 | integrity sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==
718 |
719 | object-assign@^4.1.1:
720 | version "4.1.1"
721 | resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
722 | integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
723 |
724 | path-parse@^1.0.7:
725 | version "1.0.7"
726 | resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
727 | integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
728 |
729 | picocolors@^1.0.0:
730 | version "1.0.0"
731 | resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
732 | integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
733 |
734 | picomatch@^2.2.2:
735 | version "2.3.1"
736 | resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
737 | integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
738 |
739 | plyr-react@next:
740 | version "4.0.0-alpha.5"
741 | resolved "https://registry.yarnpkg.com/plyr-react/-/plyr-react-4.0.0-alpha.5.tgz#c187ac75a4e9e0c9ccf69054a202a8bf83e57bac"
742 | integrity sha512-B5aaLcbOXKOTtacK/XFFoJI5AplI01Sh86trvNWIaazcz60g8syFBrYft3hI0RI6ZU++0Al475MEKreySNjXfg==
743 | dependencies:
744 | plyr "^3.7.2"
745 | react-aptor "^1.3.1"
746 |
747 | plyr@^3.7.2:
748 | version "3.7.2"
749 | resolved "https://registry.yarnpkg.com/plyr/-/plyr-3.7.2.tgz#183d2397e7401a577700c8319fe133692b4aff54"
750 | integrity sha512-I0ZC/OI4oJ0iWG9s2rrnO0YFO6aLyrPiQBq9kum0FqITYljwTPBbYL3TZZu8UJQJUq7tUWN18Q7ACwNCkGKABQ==
751 | dependencies:
752 | core-js "^3.22.0"
753 | custom-event-polyfill "^1.0.7"
754 | loadjs "^4.2.0"
755 | rangetouch "^2.0.1"
756 | url-polyfill "^1.1.12"
757 |
758 | postcss@^8.4.13:
759 | version "8.4.31"
760 | resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
761 | integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
762 | dependencies:
763 | nanoid "^3.3.6"
764 | picocolors "^1.0.0"
765 | source-map-js "^1.0.2"
766 |
767 | rangetouch@^2.0.1:
768 | version "2.0.1"
769 | resolved "https://registry.yarnpkg.com/rangetouch/-/rangetouch-2.0.1.tgz#c01105110fd3afca2adcb1a580692837d883cb70"
770 | integrity sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==
771 |
772 | react-aptor@^1.3.1:
773 | version "1.3.1"
774 | resolved "https://registry.yarnpkg.com/react-aptor/-/react-aptor-1.3.1.tgz#7da2d88137994b4999b7e01c24d686341546be18"
775 | integrity sha512-M2pVBhxhkmZg7iuBS09ENKsMlQg7VrYHBLcYXbzc99LL31UHB0OgmsCko8kErLgzScb/QrShosqb4uSkXIxFfg==
776 |
777 | react-dom@^17.0.2:
778 | version "17.0.2"
779 | resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
780 | integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
781 | dependencies:
782 | loose-envify "^1.1.0"
783 | object-assign "^4.1.1"
784 | scheduler "^0.20.2"
785 |
786 | react-refresh@^0.11.0:
787 | version "0.11.0"
788 | resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
789 | integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
790 |
791 | react@^17.0.2:
792 | version "17.0.2"
793 | resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
794 | integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
795 | dependencies:
796 | loose-envify "^1.1.0"
797 | object-assign "^4.1.1"
798 |
799 | resolve@^1.22.0:
800 | version "1.22.0"
801 | resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
802 | integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
803 | dependencies:
804 | is-core-module "^2.8.1"
805 | path-parse "^1.0.7"
806 | supports-preserve-symlinks-flag "^1.0.0"
807 |
808 | "rollup@>=2.59.0 <2.78.0":
809 | version "2.77.3"
810 | resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.77.3.tgz#8f00418d3a2740036e15deb653bed1a90ee0cc12"
811 | integrity sha512-/qxNTG7FbmefJWoeeYJFbHehJ2HNWnjkAFRKzWN/45eNBBF/r8lo992CwcJXEzyVxs5FmfId+vTSTQDb+bxA+g==
812 | optionalDependencies:
813 | fsevents "~2.3.2"
814 |
815 | safe-buffer@~5.1.1:
816 | version "5.1.2"
817 | resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
818 | integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
819 |
820 | scheduler@^0.20.2:
821 | version "0.20.2"
822 | resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
823 | integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
824 | dependencies:
825 | loose-envify "^1.1.0"
826 | object-assign "^4.1.1"
827 |
828 | semver@^6.3.0:
829 | version "6.3.1"
830 | resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
831 | integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
832 |
833 | source-map-js@^1.0.2:
834 | version "1.0.2"
835 | resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
836 | integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
837 |
838 | source-map@^0.5.0:
839 | version "0.5.7"
840 | resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
841 | integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
842 |
843 | supports-color@^5.3.0:
844 | version "5.5.0"
845 | resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
846 | integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
847 | dependencies:
848 | has-flag "^3.0.0"
849 |
850 | supports-preserve-symlinks-flag@^1.0.0:
851 | version "1.0.0"
852 | resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
853 | integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
854 |
855 | to-fast-properties@^2.0.0:
856 | version "2.0.0"
857 | resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
858 | integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
859 |
860 | typescript@^4.4.4:
861 | version "4.6.2"
862 | resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4"
863 | integrity sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==
864 |
865 | url-polyfill@^1.1.12:
866 | version "1.1.12"
867 | resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.12.tgz#6cdaa17f6b022841b3aec0bf8dbd87ac0cd33331"
868 | integrity sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==
869 |
870 | vite@^2.9.16:
871 | version "2.9.16"
872 | resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.16.tgz#daf7ba50f5cc37a7bf51b118ba06bc36e97898e9"
873 | integrity sha512-X+6q8KPyeuBvTQV8AVSnKDvXoBMnTx8zxh54sOwmmuOdxkjMmEJXH2UEchA+vTMps1xw9vL64uwJOWryULg7nA==
874 | dependencies:
875 | esbuild "^0.14.27"
876 | postcss "^8.4.13"
877 | resolve "^1.22.0"
878 | rollup ">=2.59.0 <2.78.0"
879 | optionalDependencies:
880 | fsevents "~2.3.2"
881 |
--------------------------------------------------------------------------------
/jest.config.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * For a detailed explanation regarding each configuration property and type check, visit:
3 | * https://jestjs.io/docs/configuration
4 | */
5 |
6 | // eslint-disable-next-line import/no-anonymous-default-export
7 | export default {
8 | rootDir: ".",
9 | testEnvironment: "jsdom",
10 | transform: { "^.+\\.(t|j)sx?$": ["@swc/jest"] },
11 | modulePathIgnorePatterns: ["dist"],
12 | testRegex: "test.(ts|tsx)$",
13 | coverageDirectory: "./coverage/",
14 | collectCoverage: true,
15 | coverageReporters: ["json", "html", "text", "text-summary"],
16 | collectCoverageFrom: ["src/**/*.{ts,tsx}", "tests/**/*.{ts,tsx}"],
17 | globals: {
18 | __DEV__: true,
19 | },
20 | };
21 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "plyr-react",
3 | "version": "5.3.0",
4 | "description": "A simple HTML5, YouTube and Vimeo player for react using plyr",
5 | "keywords": [
6 | "react",
7 | "plyr",
8 | "video",
9 | "vimeo",
10 | "youtube",
11 | "accessibility",
12 | "javascript",
13 | "player",
14 | "media"
15 | ],
16 | "homepage": "https://chintan9.github.io/plyr-react/",
17 | "repository": {
18 | "type": "git",
19 | "url": "git@github.com:chintan9/plyr-react.git"
20 | },
21 | "license": "MIT",
22 | "author": "Chintan Prajapati",
23 | "sideEffects": false,
24 | "exports": {
25 | "./package.json": "./package.json",
26 | "./plyr.css": "./plyr.css",
27 | ".": {
28 | "types": "./index.d.ts",
29 | "module": "./esm/index.js",
30 | "import": "./esm/index.mjs",
31 | "default": "./index.js"
32 | }
33 | },
34 | "main": "./index.js",
35 | "types": "./index.d.ts",
36 | "files": [
37 | "**"
38 | ],
39 | "scripts": {
40 | "pretest": "tsc --noEmit",
41 | "test": "jest",
42 | "test:ci": "jest",
43 | "test:coverage": "jest --coverage --forceExit --colors",
44 | "test:coverage:watch": "jest --watch",
45 | "test:dev": "jest --watch --no-coverage",
46 | "lint": "esw --ext .tsx --ext .ts --color",
47 | "lint:fix": "npm run lint --fix",
48 | "eslint": "eslint --fix '*.{js,json}' '{src,tests}/**/*.{ts,tsx}'",
49 | "eslint:ci": "eslint '*.{js,json}' '{src,tests}/**/*.{ts,tsx}'",
50 | "prebuild": "shx rm -rf dist",
51 | "build": "rollup -c",
52 | "postbuild": "npm run copy",
53 | "precopy": "shx cp -r dist/src/* dist/esm && shx cp -r dist/src/* dist && shx rm -rf dist/src && shx rm -rf dist/{src,tests}",
54 | "copy": "concurrently -m 8 'npm:copy:*'",
55 | "copy:package-json": "shx cp package.json dist && json -I -f dist/package.json -e 'this.private=false; this.devDependencies=undefined; this.scripts=undefined; this.publishConfig=undefined'",
56 | "copy:static-content": "shx cp README.md LICENSE dist",
57 | "prepare": "npm run build && husky install",
58 | "prerelease": "npm run build",
59 | "release": "npm publish",
60 | "predeploy": "npm run prepare",
61 | "deploy": "gh-pages -d"
62 | },
63 | "dependencies": {
64 | "plyr": "^3.7.7",
65 | "react-aptor": "^2.0.0"
66 | },
67 | "devDependencies": {
68 | "@babel/core": "^7.21.3",
69 | "@babel/plugin-proposal-class-properties": "^7.18.6",
70 | "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
71 | "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
72 | "@babel/plugin-proposal-optional-chaining": "^7.21.0",
73 | "@babel/plugin-syntax-dynamic-import": "^7.8.3",
74 | "@babel/preset-env": "^7.20.2",
75 | "@babel/preset-react": "^7.18.6",
76 | "@babel/preset-typescript": "^7.21.0",
77 | "@rollup/plugin-babel": "^5.3.1",
78 | "@rollup/plugin-commonjs": "^22.0.2",
79 | "@rollup/plugin-node-resolve": "^13.3.0",
80 | "@rollup/plugin-replace": "^4.0.0",
81 | "@rollup/plugin-typescript": "^8.5.0",
82 | "@rollup/plugin-url": "^7.0.0",
83 | "@svgr/rollup": "^6.5.1",
84 | "@swc/core": "^1.3.42",
85 | "@swc/jest": "^0.2.24",
86 | "@testing-library/dom": "^8.20.0",
87 | "@testing-library/jest-dom": "^5.16.5",
88 | "@testing-library/react": "^12.1.5",
89 | "@testing-library/user-event": "^14.4.3",
90 | "@types/enzyme": "^3.10.12",
91 | "@types/jest": "^27.5.2",
92 | "@types/mocha": "^9.1.1",
93 | "@types/prop-types": "^15.7.5",
94 | "@types/react": "^18.0.28",
95 | "@types/react-dom": "^18.0.11",
96 | "@typescript-eslint/eslint-plugin": "^5.56.0",
97 | "@typescript-eslint/parser": "^5.56.0",
98 | "all-contributors-cli": "^6.24.0",
99 | "babel-core": "^6.26.3",
100 | "babel-eslint": "^10.1.0",
101 | "babel-jest": "^29.7.0",
102 | "babel-loader": "^8.3.0",
103 | "babel-plugin-named-asset-import": "^0.3.8",
104 | "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
105 | "babel-preset-react-app": "^10.0.1",
106 | "concurrently": "^8.2.1",
107 | "cross-env": "^7.0.3",
108 | "css-loader": "^6.7.3",
109 | "dts-bundle-generator": "^7.2.0",
110 | "esbuild": "^0.17.12",
111 | "eslint": "^8.36.0",
112 | "eslint-config-airbnb": "^19.0.4",
113 | "eslint-config-prettier": "^8.8.0",
114 | "eslint-plugin-flowtype": "^8.0.3",
115 | "eslint-plugin-import": "^2.27.5",
116 | "eslint-plugin-jest": "^26.9.0",
117 | "eslint-plugin-jsx-a11y": "^6.7.1",
118 | "eslint-plugin-prettier": "^4.2.1",
119 | "eslint-plugin-react": "^7.32.2",
120 | "eslint-plugin-react-hooks": "^4.6.0",
121 | "eslint-watch": "^8.0.0",
122 | "gh-pages": "^4.0.0",
123 | "glob": "^8.1.0",
124 | "husky": "^8.0.3",
125 | "jasmine-expect": "^5.0.0",
126 | "jest": "^27.5.1",
127 | "jest-environment-jsdom": "^27.5.1",
128 | "jest-pnp-resolver": "^1.2.3",
129 | "jest-resolve": "^28.1.3",
130 | "jest-watch-typeahead": "^2.2.2",
131 | "json": "^11.0.0",
132 | "lint-staged": "^12.5.0",
133 | "npm-run-all": "^4.1.5",
134 | "prettier": "^2.8.6",
135 | "prop-types": "^15.8.1",
136 | "react": "^17.0.2",
137 | "react-app-polyfill": "^3.0.0",
138 | "react-docgen-typescript": "^2.2.2",
139 | "react-dom": "^17.0.2",
140 | "react-error-overlay": "^6.0.11",
141 | "react-test-renderer": "^17.0.2",
142 | "rollup": "^2.79.1",
143 | "rollup-plugin-copy": "^3.4.0",
144 | "rollup-plugin-esbuild": "^4.10.3",
145 | "rollup-plugin-peer-deps-external": "^2.2.4",
146 | "rollup-plugin-terser": "^7.0.2",
147 | "sass": "^1.59.3",
148 | "sass-loader": "^12.6.0",
149 | "shx": "^0.3.4",
150 | "sort-package-json": "^1.57.0",
151 | "style-loader": "^3.3.2",
152 | "ts-node": "^10.9.1",
153 | "typescript": "^5.0.4",
154 | "webpack": "^5.76.2"
155 | },
156 | "peerDependencies": {
157 | "plyr": "^3.7.7",
158 | "react": ">=16.8"
159 | },
160 | "peerDependenciesMeta": {
161 | "plyr": {
162 | "optional": false
163 | },
164 | "react": {
165 | "optional": true
166 | }
167 | },
168 | "engines": {
169 | "node": ">=16"
170 | },
171 | "publishConfig": {
172 | "access": "public"
173 | }
174 | }
175 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import path from "path";
2 | import babelPlugin from "@rollup/plugin-babel";
3 | import resolve from "@rollup/plugin-node-resolve";
4 | import replace from "@rollup/plugin-replace";
5 | import typescript from "@rollup/plugin-typescript";
6 | import copy from "rollup-plugin-copy";
7 | import esbuild from "rollup-plugin-esbuild";
8 | import { terser } from "rollup-plugin-terser";
9 | const createBabelConfig = require("./babel.config");
10 |
11 | const extensions = [".ts", ".tsx"];
12 | const { root } = path.parse(process.cwd());
13 |
14 | const external = (id) => !id.startsWith(".") && !id.startsWith(root);
15 | const getBabelOptions = (targets) => ({
16 | ...createBabelConfig({ env: (env) => env === "build" }, targets),
17 | extensions,
18 | comments: false,
19 | babelHelpers: "bundled",
20 | });
21 |
22 | const getEsbuild = (target, env = "development") => {
23 | return esbuild({
24 | minify: env === "production",
25 | target,
26 | tsconfig: path.resolve("./tsconfig.json"),
27 | });
28 | };
29 |
30 | const createDeclarationConfig = (input, outDir) => ({
31 | input,
32 | output: { dir: outDir },
33 | external,
34 | plugins: [
35 | typescript({ declaration: true, emitDeclarationOnly: true, outDir }),
36 | copy({
37 | flatten: true,
38 | copyOnce: true,
39 | targets: [{ src: "node_modules/plyr/dist/plyr.css", dest: "dist" }],
40 | }),
41 | ],
42 | });
43 |
44 | const createESMConfig = (input, output) => ({
45 | input,
46 | output: [
47 | { file: `${output}.js`, format: "esm" },
48 | { file: `${output}.mjs`, format: "esm" },
49 | ],
50 | external,
51 | plugins: [
52 | resolve({ extensions }),
53 | replace({
54 | __DEV__: '(import.meta.env&&import.meta.env.MODE)!=="production"',
55 | preventAssignment: true,
56 | }),
57 | getEsbuild("node12"),
58 | ],
59 | });
60 |
61 | const createCommonJSConfig = (input, output) => ({
62 | input,
63 | output: { file: `${output}.js`, format: "cjs", exports: "named" },
64 | external,
65 | plugins: [
66 | resolve({ extensions }),
67 | replace({
68 | __DEV__: 'process.env.NODE_ENV!=="production"',
69 | preventAssignment: true,
70 | }),
71 | babelPlugin(getBabelOptions({ ie: 11 })),
72 | ],
73 | });
74 |
75 | function createUMDConfig(input, output, env) {
76 | return {
77 | input,
78 | output: {
79 | file: `${output}.${env}.js`,
80 | format: "umd",
81 | exports: "named",
82 | name: "plyr-react",
83 | globals: {
84 | react: "React",
85 | plyr: "PlyrJS",
86 | "react-aptor": "useAptor",
87 | "react/jsx-runtime": "jsxRuntime", // added for UMD build
88 | "prop-types": "PropTypes",
89 | },
90 | },
91 | external,
92 | plugins: [
93 | resolve({ extensions }),
94 | replace({
95 | __DEV__: env !== "production" ? "true" : "false",
96 | preventAssignment: true,
97 | }),
98 | babelPlugin(getBabelOptions({ ie: 11 })),
99 | ...(env === "production" ? [terser()] : []),
100 | ],
101 | };
102 | }
103 |
104 | function createSystemConfig(input, output, env) {
105 | return {
106 | input,
107 | output: {
108 | file: `${output}.${env}.js`,
109 | format: "system",
110 | exports: "named",
111 | },
112 | external,
113 | plugins: [
114 | resolve({ extensions }),
115 | replace({
116 | __DEV__: env !== "production" ? "true" : "false",
117 | preventAssignment: true,
118 | }),
119 | getEsbuild("node12", env),
120 | ],
121 | };
122 | }
123 |
124 | // eslint-disable-next-line import/no-anonymous-default-export
125 | export default function () {
126 | const c = "index";
127 | return [
128 | ...(c === "index" ? [createDeclarationConfig(`src/${c}.tsx`, "dist")] : []),
129 | createCommonJSConfig(`src/${c}.tsx`, `dist/${c}`),
130 | createESMConfig(`src/${c}.tsx`, `dist/esm/${c}`),
131 | createUMDConfig(`src/${c}.tsx`, `dist/umd/${c}`, "development"),
132 | createUMDConfig(`src/${c}.tsx`, `dist/umd/${c}`, "production"),
133 | createSystemConfig(`src/${c}.tsx`, `dist/system/${c}`, "development"),
134 | createSystemConfig(`src/${c}.tsx`, `dist/system/${c}`, "production"),
135 | ];
136 | }
137 |
--------------------------------------------------------------------------------
/sonar-project.properties:
--------------------------------------------------------------------------------
1 | sonar.projectKey=chintan9_plyr-react
2 | sonar.organization=chintan9
3 |
4 | # This is the name and version displayed in the SonarCloud UI.
5 | #sonar.projectName=plyr-react
6 | #sonar.projectVersion=1.0
7 |
8 | # Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows.
9 | #sonar.sources=.
10 |
11 | # Encoding of the source code. Default is default system encoding
12 | #sonar.sourceEncoding=UTF-8
13 |
--------------------------------------------------------------------------------
/sourcelevel.yml:
--------------------------------------------------------------------------------
1 | # This configuration was used SourceLevel to review the chintan9/plyr-react repository
2 | # on d58f0fdc7fcb4061a1350f614711b9384076c605.
3 | # You can make this the default configuration for future reviews by moving this
4 | # file to your repository as `.sourcelevel.yml` and pushing it to GitHub, and tweak
5 | # it as you wish - To know more on how to change this file to better review your
6 | # repository you can go to https://docs.sourcelevel.io/configuration and see the configuration
7 | # details.
8 | ---
9 | styleguide: sourcelevel/linters
10 | engines:
11 | fixme:
12 | enabled: true
13 | eslint:
14 | enabled: true
15 | csslint:
16 | enabled: true
17 | remark-lint:
18 | enabled: true
19 | exclude_paths:
20 | - config
21 | - test
22 | - dist
23 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import type {
3 | DependencyList,
4 | DetailedHTMLProps,
5 | MutableRefObject,
6 | Ref,
7 | VideoHTMLAttributes,
8 | } from "react";
9 | import PlyrJS, { Options, SourceInfo } from "plyr";
10 | import PropTypes from "prop-types";
11 | import useAptor, { Destroy, GetAPI, Instantiate } from "react-aptor";
12 |
13 | export type PlyrInstance = PlyrJS;
14 | export type PlyrOptions = Options;
15 | export type PlyrSource = SourceInfo;
16 | type PlyrConfigurationProps = {
17 | source: PlyrSource | null;
18 | options?: PlyrOptions | null;
19 | };
20 |
21 | type ReactVideoProps = DetailedHTMLProps<
22 | VideoHTMLAttributes,
23 | HTMLVideoElement
24 | >;
25 | export type PlyrProps = Omit & PlyrConfigurationProps;
26 |
27 | export interface APITypes {
28 | plyr: PlyrInstance;
29 | }
30 |
31 | /**
32 | * It creates a new PlyrJS instance, and if a source is provided, it sets the source of the PlyrJS
33 | * instance to the source provided
34 | * @param node - The latest element of the DOM node which has plyr in it.
35 | * @param params - The plyr params that are passed to the component
36 | * @returns An instance of PlyrJS.
37 | */
38 | /* REACT-APTOR */
39 | const instantiate: Instantiate<
40 | PlyrJS,
41 | HTMLVideoElement,
42 | PlyrConfigurationProps
43 | > = (_, params) => {
44 | // The node update of ref in react life cycle seems to have issue, used class selector instead
45 | const plyr = new PlyrJS(".plyr-react", params?.options ?? {});
46 | if (params?.source) plyr.source = params?.source;
47 | return plyr;
48 | };
49 |
50 | /**
51 | * It destroys the PlyrJS instance.
52 | * @param {PlyrJS | null} plyr - PlyrJS | null
53 | */
54 | const destroy: Destroy = (
55 | plyr: PlyrJS | null
56 | ) => {
57 | if (plyr) plyr.destroy();
58 | };
59 |
60 | // eslint-disable-next-line @typescript-eslint/no-empty-function
61 | const noop = () => {};
62 |
63 | /**
64 | * It returns an object with a `plyr` property that contains the Plyr instance
65 | * @param {PlyrJS | null} plyr - PlyrJS | null
66 | * @returns A function that returns an object with a single property, plyr.
67 | */
68 | const getAPI: GetAPI = (
69 | plyr: PlyrJS | null
70 | ) => {
71 | if (!plyr) {
72 | return () =>
73 | new Proxy({ plyr: { source: null } } as unknown as APITypes, {
74 | get: (target, prop) => {
75 | if (prop === "plyr") {
76 | return target[prop];
77 | }
78 | return noop;
79 | },
80 | });
81 | }
82 |
83 | return () => ({
84 | /**
85 | * Plyr instance with all of its functionality
86 | */
87 | plyr,
88 | });
89 | };
90 |
91 | /**
92 | * It creates a React hook that returns a ref to a video element that is initialized with Plyr
93 | * @param ref - Ref
94 | * @param {PlyrConfigurationProps} params - PlyrConfigurationProps,
95 | * @param {DependencyList | null} [deps=null] - DependencyList | null = null
96 | * @returns A function that returns a React component.
97 | */
98 | export function usePlyr(
99 | ref: Ref,
100 | params: PlyrConfigurationProps,
101 | deps: DependencyList | null = null
102 | ) {
103 | return useAptor(
104 | ref,
105 | {
106 | instantiate,
107 | getAPI,
108 | destroy,
109 | params,
110 | },
111 | deps ?? [params.options, params.source]
112 | );
113 | }
114 |
115 | /* Creating a React component that is initialized with Plyr. */
116 | const Plyr = React.forwardRef((props, ref) => {
117 | const { source, options = null, ...rest } = props;
118 | const raptorRef = usePlyr(ref, {
119 | source,
120 | options,
121 | }) as MutableRefObject;
122 | return ;
123 | });
124 |
125 | /* Setting the default props and prop types for the component. */
126 | if (__DEV__) {
127 | // eslint-disable-next-line @typescript-eslint/no-var-requires
128 | Plyr.displayName = "Plyr";
129 |
130 | Plyr.defaultProps = {
131 | options: {
132 | controls: [
133 | "rewind",
134 | "play",
135 | "fast-forward",
136 | "progress",
137 | "current-time",
138 | "duration",
139 | "mute",
140 | "volume",
141 | "settings",
142 | "fullscreen",
143 | ],
144 | i18n: {
145 | restart: "Restart",
146 | rewind: "Rewind {seektime}s",
147 | play: "Play",
148 | pause: "Pause",
149 | fastForward: "Forward {seektime}s",
150 | seek: "Seek",
151 | seekLabel: "{currentTime} of {duration}",
152 | played: "Played",
153 | buffered: "Buffered",
154 | currentTime: "Current time",
155 | duration: "Duration",
156 | volume: "Volume",
157 | mute: "Mute",
158 | unmute: "Unmute",
159 | enableCaptions: "Enable captions",
160 | disableCaptions: "Disable captions",
161 | download: "Download",
162 | enterFullscreen: "Enter fullscreen",
163 | exitFullscreen: "Exit fullscreen",
164 | frameTitle: "Player for {title}",
165 | captions: "Captions",
166 | settings: "Settings",
167 | menuBack: "Go back to previous menu",
168 | speed: "Speed",
169 | normal: "Normal",
170 | quality: "Quality",
171 | loop: "Loop",
172 | },
173 | },
174 | source: {
175 | type: "video",
176 | sources: [
177 | {
178 | src: "https://cdn.plyr.io/static/blank.mp4",
179 | type: "video/mp4",
180 | size: 720,
181 | },
182 | {
183 | src: "https://cdn.plyr.io/static/blank.mp4",
184 | type: "video/mp4",
185 | size: 1080,
186 | },
187 | ],
188 | },
189 | };
190 |
191 | Plyr.propTypes = {
192 | options: PropTypes.object,
193 | source: PropTypes.any,
194 | };
195 | }
196 |
197 | export default Plyr;
198 |
--------------------------------------------------------------------------------
/src/types.d.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-var
2 | declare var __DEV__: boolean;
3 |
--------------------------------------------------------------------------------
/tests/Plyr.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { render } from "@testing-library/react";
3 | import Plyr, { PlyrInstance } from "../src/index";
4 |
5 | // https://github.com/jsdom/jsdom/issues/2541#issuecomment-788761237
6 | jest.mock("plyr");
7 | jest.mock("plyr", () => {
8 | return jest
9 | .fn()
10 | .mockImplementation(() => ({ destroy: jest.fn(), playing: false }));
11 | });
12 |
13 | const SOURCE = null;
14 | describe(" ", () => {
15 | it("should render", () => {
16 | const { container } = render( );
17 | expect(container.querySelector("video")).toBeDefined();
18 | });
19 |
20 | it("should render and set a forward ref", () => {
21 | const setRef = jest.fn();
22 | const { container } = render( );
23 |
24 | expect(container.querySelector("video")).toBeDefined();
25 | expect(setRef).toHaveBeenCalled();
26 | });
27 |
28 | it("should render and have a plyr instance in ref.current", () => {
29 | const ref = React.createRef<{ plyr: PlyrInstance }>();
30 | const { container } = render( );
31 |
32 | expect(container.querySelector("video")).toBeDefined();
33 | expect(ref.current).toBeDefined();
34 | expect(ref.current?.plyr).toBeDefined();
35 | });
36 |
37 | it("should render and have a plyr instance in ref.current when using a ref callback", () => {
38 | const ref = React.createRef<{ plyr: PlyrInstance }>();
39 | const { container } = render(
40 | {
42 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
43 | // @ts-ignore [Note: Current type is readonly]
44 | ref.current = player;
45 | }}
46 | source={SOURCE}
47 | />
48 | );
49 |
50 | expect(container.querySelector("video")).toBeDefined();
51 | expect(ref.current).toBeDefined();
52 | expect(ref.current?.plyr).toBeDefined();
53 | });
54 |
55 | it("should render and keep a plyr instance after a rerender", () => {
56 | const ref = React.createRef<{ plyr: PlyrInstance }>();
57 | const { container, rerender } = render( );
58 |
59 | expect(container.querySelector("video")).toBeDefined();
60 | expect(ref.current).toBeDefined();
61 | expect(ref.current?.plyr).toBeDefined();
62 |
63 | rerender( );
64 | expect(container.querySelector("video")).toBeDefined();
65 | expect(ref.current).toBeDefined();
66 | expect(ref.current?.plyr).toBeDefined();
67 | expect((ref.current?.plyr as PlyrInstance).playing).toBe(false);
68 | });
69 | });
70 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "declaration": true,
5 | "esModuleInterop": true,
6 | "exactOptionalPropertyTypes": true,
7 | "importHelpers": true,
8 | "jsx": "react-jsx",
9 | "lib": ["es2018", "dom", "scripthost", "es2015.proxy"],
10 | "moduleResolution": "node",
11 | "noFallthroughCasesInSwitch": true,
12 | "noImplicitAny": false,
13 | "noImplicitReturns": true,
14 | "noUncheckedIndexedAccess": true,
15 | "noUnusedLocals": true,
16 | "noUnusedParameters": true,
17 | "pretty": true,
18 | "sourceMap": false,
19 | "strict": true,
20 | "target": "esnext",
21 | "allowJs": true,
22 | "outDir": "dist",
23 | "rootDir": ".",
24 | "isolatedModules": true,
25 | "allowSyntheticDefaultImports": true,
26 | "skipLibCheck": true,
27 | "forceConsistentCasingInFileNames": true
28 | },
29 | "include": ["src", "tests"],
30 | "exclude": ["node_modules"]
31 | }
32 |
--------------------------------------------------------------------------------