Inline player (#1138)

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",

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": {

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

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

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"
   }
 }

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

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 %}

src/pages/_includes/ui/inline-player.html

@@ -0,0 +1,19 @@
+{% assign id = include.id %}
+
+{% if id and include.embed-id %}
+<div id="player-{{ id }}" data-plyr-provider="{{ include.type | default: 'youtube' }}" data-plyr-embed-id="{{ include.embed-id }}"></div>
+
+{% capture_global scripts %}
+<script>
+  // @formatter:off
+  document.addEventListener("DOMContentLoaded", function () {
+    {% if jekyll.environment == 'development' %}
+    window.tabler_player = window.tabler_player || {};
+    {% endif %}
+    window.Plyr && ({% if jekyll.environment == 'development' %}window.tabler_player["player-{{ id }}"] = {% endif %}new Plyr('#player-{{ id }}'));
+  });
+  // @formatter:on
+</script>
+{% endcapture_global %}
+
+{% endif %}

src/pages/inline-player.html

@@ -0,0 +1,21 @@
+---
+title: Inline Player
+page-header: Inline Player
+menu: base.plyr
+libs: plyr
+---
+
+<div class="row row-cards">
+	{% for provider in site.data.inline-players %}
+
+	<div class="col-lg-6">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">{{ provider.title }}</h3>
+
+				{% include ui/inline-player.html id=provider.id type=provider.type embed-id=provider.embed-id %}
+			</div>
+		</div>
+	</div>
+	{% endfor %}
+</div>

src/scss/tabler-vendors.scss

@@ -5,3 +5,4 @@
 @import "vendor/tom-select";
 @import "vendor/apexcharts";
 @import "vendor/jsvectormap";
+@import "vendor/plyr";

src/scss/vendor/_plyr.scss

@@ -0,0 +1,3 @@
+body {
+  --plyr-color-main: #{$primary};
+}