From 97ee3af463e49522abcc5c0619ddab1b03f0f425 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Mon, 23 Oct 2023 04:44:49 +0000
Subject: [PATCH] feat: add basic media player block

---
 blocks/.npmrc                          |  4 ++
 blocks/block-media-player/component.js | 73 ++++++++++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 blocks/.npmrc
 create mode 100644 blocks/block-media-player/component.js

diff --git a/blocks/.npmrc b/blocks/.npmrc
new file mode 100644
index 00000000..870e47c7
--- /dev/null
+++ b/blocks/.npmrc
@@ -0,0 +1,4 @@
+audit = false
+fund = false
+save-exact = true
+save-prefix = ""
diff --git a/blocks/block-media-player/component.js b/blocks/block-media-player/component.js
new file mode 100644
index 00000000..cff1cb13
--- /dev/null
+++ b/blocks/block-media-player/component.js
@@ -0,0 +1,73 @@
+import { LitElement, html, css } from 'lit'
+
+/**
+ * Block Media Player
+ */
+export class BlockMediaPlayerElement extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      .container {
+        overflow: hidden;
+        border-radius: 5px;
+        position: relative;
+      }
+    `
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Source URL
+       * @type {string}
+       */
+      src: { type: String },
+
+      // Internal Properties
+      // _loading: { state: true }
+    }
+  }
+
+  constructor() {
+    super()
+  }
+
+  async connectedCallback() {
+    super.connectedCallback()
+  }
+
+  // get _video() {
+  //   return this.renderRoot?.querySelector('.video-display') ?? null
+  // }
+
+  // _playPause () {
+  //   if (this._video.paused) {
+  //     this._video.play()
+  //   } else {
+  //     this._video.pause()
+  //   }
+  // }
+
+  // _fullScreen () {
+  //   if (this._video.requestFullscreen) {
+  //     this._video.requestFullscreen()
+  //   } else if (this._video.webkitRequestFullscreen) {
+  //     this._video.webkitRequestFullscreen()
+  //   }
+  // }
+
+  render() {
+    return html`
+      <div class="container">
+        <video class="video-display" controls>
+          <source src="${this.src}" type="video/mp4">
+        </video>
+      </div>
+    `
+  }
+}
+
+window.customElements.define('block-media-player', BlockMediaPlayerElement)