diff --git a/package-lock.json b/package-lock.json index 136837d8c..66e53c700 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,6 +47,7 @@ "jsvectormap": "^1.4.5", "litepicker": "^2.0.12", "nouislider": "^15.6.0", + "plyr": "^3.7.2", "postcss": "^8.4.13", "release-it": "^15.0.0", "rollup": "^2.72.1", @@ -77,6 +78,7 @@ "list.js": "^2.3.1", "litepicker": "^2.0.12", "nouislider": "^15.6.0", + "plyr": "^3.7.2", "tom-select": "^2.0.1" }, "peerDependenciesMeta": { @@ -110,6 +112,9 @@ "nouislider": { "optional": true }, + "plyr": { + "optional": true + }, "tom-select": { "optional": true } @@ -4266,6 +4271,17 @@ "is-plain-object": "^5.0.0" } }, + "node_modules/core-js": { + "version": "3.22.8", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.8.tgz", + "integrity": "sha512-UoGQ/cfzGYIuiq6Z7vWL1HfkE9U9IZ4Ub+0XSiJTCzvbZzgPA69oDF2f+lgJ6dFFLEdjW5O6svvoKzXX23xFkA==", + "dev": true, + "hasInstallScript": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, "node_modules/core-js-compat": { "version": "3.22.4", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.22.4.tgz", @@ -4631,6 +4647,12 @@ "integrity": "sha1-QICG1AlVDCYxFVYZ6fp7ytw7mRs=", "dev": true }, + "node_modules/custom-event-polyfill": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz", + "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==", + "dev": true + }, "node_modules/d": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", @@ -9616,6 +9638,12 @@ "node": ">=0.10.0" } }, + "node_modules/loadjs": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.2.0.tgz", + "integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==", + "dev": true + }, "node_modules/localtunnel": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/localtunnel/-/localtunnel-2.0.2.tgz", @@ -11788,6 +11816,19 @@ "node": ">=6" } }, + "node_modules/plyr": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.7.2.tgz", + "integrity": "sha512-I0ZC/OI4oJ0iWG9s2rrnO0YFO6aLyrPiQBq9kum0FqITYljwTPBbYL3TZZu8UJQJUq7tUWN18Q7ACwNCkGKABQ==", + "dev": true, + "dependencies": { + "core-js": "^3.22.0", + "custom-event-polyfill": "^1.0.7", + "loadjs": "^4.2.0", + "rangetouch": "^2.0.1", + "url-polyfill": "^1.1.12" + } + }, "node_modules/portscanner": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.1.1.tgz", @@ -12306,6 +12347,12 @@ "node": ">= 0.6" } }, + "node_modules/rangetouch": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz", + "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==", + "dev": true + }, "node_modules/raw-body": { "version": "2.4.3", "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.3.tgz", @@ -15476,6 +15523,12 @@ "node": ">=4" } }, + "node_modules/url-polyfill": { + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.12.tgz", + "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==", + "dev": true + }, "node_modules/use": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", @@ -19323,6 +19376,12 @@ "is-plain-object": "^5.0.0" } }, + "core-js": { + "version": "3.22.8", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.8.tgz", + "integrity": "sha512-UoGQ/cfzGYIuiq6Z7vWL1HfkE9U9IZ4Ub+0XSiJTCzvbZzgPA69oDF2f+lgJ6dFFLEdjW5O6svvoKzXX23xFkA==", + "dev": true + }, "core-js-compat": { "version": "3.22.4", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.22.4.tgz", @@ -19624,6 +19683,12 @@ "integrity": "sha1-QICG1AlVDCYxFVYZ6fp7ytw7mRs=", "dev": true }, + "custom-event-polyfill": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz", + "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==", + "dev": true + }, "d": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", @@ -23536,6 +23601,12 @@ } } }, + "loadjs": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.2.0.tgz", + "integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==", + "dev": true + }, "localtunnel": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/localtunnel/-/localtunnel-2.0.2.tgz", @@ -25207,6 +25278,19 @@ "irregular-plurals": "^2.0.0" } }, + "plyr": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.7.2.tgz", + "integrity": "sha512-I0ZC/OI4oJ0iWG9s2rrnO0YFO6aLyrPiQBq9kum0FqITYljwTPBbYL3TZZu8UJQJUq7tUWN18Q7ACwNCkGKABQ==", + "dev": true, + "requires": { + "core-js": "^3.22.0", + "custom-event-polyfill": "^1.0.7", + "loadjs": "^4.2.0", + "rangetouch": "^2.0.1", + "url-polyfill": "^1.1.12" + } + }, "portscanner": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.1.1.tgz", @@ -25593,6 +25677,12 @@ "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", "dev": true }, + "rangetouch": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz", + "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==", + "dev": true + }, "raw-body": { "version": "2.4.3", "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.3.tgz", @@ -28103,6 +28193,12 @@ "prepend-http": "^2.0.0" } }, + "url-polyfill": { + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.12.tgz", + "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==", + "dev": true + }, "use": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", diff --git a/package.json b/package.json index d5af9cd0a..16c7cd2a4 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,8 @@ "vinyl-buffer": "^1.0.1", "vinyl-source-stream": "^2.0.0", "yaml": "^2.0.1", - "yargs": "^17.4.1" + "yargs": "^17.4.1", + "plyr": "^3.7.2" }, "dependencies": { "@popperjs/core": "^2.11.5", @@ -113,11 +114,12 @@ "countup.js": "^2.1.0", "flatpickr": "^4.6.13", "imask": "^6.4.2", - "list.js": "^2.3.1", "jsvectormap": "^1.4.5", + "list.js": "^2.3.1", "litepicker": "^2.0.12", "nouislider": "^15.6.0", - "tom-select": "^2.0.1" + "tom-select": "^2.0.1", + "plyr": "^3.7.2" }, "peerDependenciesMeta": { "apexcharts": { @@ -152,6 +154,9 @@ }, "jsvectormap": { "optional": true + }, + "plyr": { + "optional": true } }, "resolutions": { diff --git a/src/pages/_data/docs.yml b/src/pages/_data/docs.yml index 91d4ec1b9..ce2e34ef9 100644 --- a/src/pages/_data/docs.yml +++ b/src/pages/_data/docs.yml @@ -184,6 +184,9 @@ plugins: charts: title: Charts url: docs/charts.html + plyr: + title: Inline player + url: docs/inline-player.html changelog: title: Changelog diff --git a/src/pages/_data/inline-players.yml b/src/pages/_data/inline-players.yml new file mode 100644 index 000000000..2e9a272ed --- /dev/null +++ b/src/pages/_data/inline-players.yml @@ -0,0 +1,9 @@ +- title: Youtube Player + type: youtube + id: youtube + embed-id: bTqVqk7FSmY + +- title: Vimeo Player + type: vimeo + id: charlotte + embed-id: 707012696 \ No newline at end of file diff --git a/src/pages/_data/libs.json b/src/pages/_data/libs.json index a981408b0..4aa4784b3 100644 --- a/src/pages/_data/libs.json +++ b/src/pages/_data/libs.json @@ -18,9 +18,11 @@ "tom-select": "tom-select/dist/js/tom-select.base.min.js", "jsvectormap": "jsvectormap/dist/js/jsvectormap.min.js", "jsvectormap-world": "jsvectormap/dist/maps/world.js", - "jsvectormap-world-merc": "jsvectormap/dist/maps/world-merc.js" + "jsvectormap-world-merc": "jsvectormap/dist/maps/world-merc.js", + "plyr": "plyr/dist/plyr.min.js" }, "css": { - "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" + "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css", + "plyr": "plyr/dist/plyr.css" } } diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml index 0cadebe01..3af00edca 100644 --- a/src/pages/_data/menu.yml +++ b/src/pages/_data/menu.yml @@ -96,6 +96,10 @@ base: markdown: title: Markdown url: markdown.html + plyr: + title: Inline player + badge: New + url: inline-player.html authentication: title: Authentication diff --git a/src/pages/_docs/inline-player.md b/src/pages/_docs/inline-player.md new file mode 100644 index 000000000..6186c028c --- /dev/null +++ b/src/pages/_docs/inline-player.md @@ -0,0 +1,21 @@ +--- +title: Inline player +menu: docs.plugins.plyr +libs: plyr +description: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers. +--- + +## Sample demo + +{% capture code %} +{% include ui/inline-player.html id="youtube" embed-id="dQw4w9WgXcQ" %} +{% endcapture %} +{% include example.html code=code %} + + +## Vimeo file + +{% capture code %} +{% include ui/inline-player.html id="vimeo" type="vimeo" embed-id="515937365" %} +{% endcapture %} +{% include example.html code=code %} \ No newline at end of file diff --git a/src/pages/_includes/ui/inline-player.html b/src/pages/_includes/ui/inline-player.html new file mode 100644 index 000000000..1eacd384d --- /dev/null +++ b/src/pages/_includes/ui/inline-player.html @@ -0,0 +1,19 @@ +{% assign id = include.id %} + +{% if id and include.embed-id %} +
+ +{% capture_global scripts %} + +{% endcapture_global %} + +{% endif %} \ No newline at end of file diff --git a/src/pages/inline-player.html b/src/pages/inline-player.html new file mode 100644 index 000000000..13295c8a7 --- /dev/null +++ b/src/pages/inline-player.html @@ -0,0 +1,21 @@ +--- +title: Inline Player +page-header: Inline Player +menu: base.plyr +libs: plyr +--- + +
+ {% for provider in site.data.inline-players %} + +
+
+
+

{{ provider.title }}

+ + {% include ui/inline-player.html id=provider.id type=provider.type embed-id=provider.embed-id %} +
+
+
+ {% endfor %} +
\ No newline at end of file diff --git a/src/scss/tabler-vendors.scss b/src/scss/tabler-vendors.scss index 461b21a14..91d54a076 100644 --- a/src/scss/tabler-vendors.scss +++ b/src/scss/tabler-vendors.scss @@ -5,3 +5,4 @@ @import "vendor/tom-select"; @import "vendor/apexcharts"; @import "vendor/jsvectormap"; +@import "vendor/plyr"; \ No newline at end of file diff --git a/src/scss/vendor/_plyr.scss b/src/scss/vendor/_plyr.scss new file mode 100644 index 000000000..bbd4d06a9 --- /dev/null +++ b/src/scss/vendor/_plyr.scss @@ -0,0 +1,3 @@ +body { + --plyr-color-main: #{$primary}; +} \ No newline at end of file