Inline player (#1138)

2025-12-21 17:34:25 +04:00 · 2022-06-09 21:10:55 +02:00
parent 5de51df878
commit a0530b50d8
11 changed files with 189 additions and 5 deletions
--- 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",
--- 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": {
--- 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
--- a/src/pages/_data/inline-players.yml
+++ 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
--- 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"
  }
 }
--- 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
--- a/src/pages/_docs/inline-player.md
+++ 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 %}
--- a/src/pages/_includes/ui/inline-player.html
+++ b/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 %}
--- a/src/pages/inline-player.html
+++ b/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>
--- 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";
--- a/src/scss/vendor/_plyr.scss
+++ b/src/scss/vendor/_plyr.scss
@@ -0,0 +1,3 @@
+body {
+  --plyr-color-main: #{$primary};
+}