Update Pages

BOOK-BLOG · Mar 21, 2020 · 159985e · 159985e
1 parent 258bc76
commit 159985e
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 2 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -23,8 +23,8 @@ <h1 class="title">videoPlayer.js</h1>
     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
         integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
         </script>
-    <script src="../dist/videoPlayer.js"></script>
-    <link rel="stylesheet" href="../dist/videoPlayer.css">
+    <script src="videoPlayer.js"></script>
+    <link rel="stylesheet" href="videoPlayer.css">
     <script>
         videoPlayer.init();
     </script>

diff --git a/docs/videoPlayer.css b/docs/videoPlayer.css
@@ -0,0 +1,57 @@
+#videoPlayerVideoMask {
+    background-color: #ffffff80;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    transition: all 0.5s;
+}
+
+.darkmode--activated #videoPlayerVideoMask {
+    background-color: #00000080;
+}
+
+#videoPlayerVideoMask[dlmodes="light"] {
+    background-color: #ffffff80;
+}
+
+#videoPlayerVideoMask[dlmodes="dark"] {
+    background-color: #00000080;
+}
+
+#videoPlayerVideoMask[active="false"] {
+    backdrop-filter: blur(0);
+    pointer-events: none;
+    opacity: 0;
+}
+
+#videoPlayerVideoMask[active="true"] {
+    backdrop-filter: blur(8px);
+    pointer-events: initial;
+    opacity: 1;
+}
+
+#videoPlayerVideo {
+    border-radius: 4px;
+    box-shadow: 0px 0px 64px #00000080;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 95%;
+    max-height: 95%;
+    transition: all 0.5s;
+}
+
+#videoPlayerVideo[show="false"] {
+    opacity: 0;
+    pointer-events: none;
+    transform: translate(-50%, -50%) scale(0.8);
+}
+
+#videoPlayerVideo[show="true"] {
+    opacity: 1;
+    pointer-events: initial;
+    transform: translate(-50%, -50%) scale(1);
+}
diff --git a/docs/videoPlayer.js b/docs/videoPlayer.js
@@ -0,0 +1,64 @@
+
+function videoPlayerInit() {
+    $("body").append("<div id=\"videoPlayerVideoMask\" active=\"false\"><video src=\"\" controls=\"controls\" autoplay=\"autoplay\" id=\"videoPlayerVideo\" show=\"false\"></video></div>");
+    $("#videoPlayerVideoMask").click(function () {
+        videoPlayerExit();
+    });
+    $("*").scrollTop(0);
+    console.log("Video Player Initialized.");
+}
+
+function videoPlayerPlay(videoSource) {
+    $("#videoPlayerVideo").bind("click", function () {
+        event.stopPropagation();
+    })
+    $("#videoPlayerVideo").attr("src", videoSource);
+    $("#videoPlayerVideo").attr("show", "true");
+    $("#videoPlayerVideoMask").attr("active", "true");
+}
+
+function videoPlayerExit() {
+    $("#videoPlayerVideo").attr("show", "false");
+    $("#videoPlayerVideoMask").attr("active", "false");
+    setTimeout(function () {
+        $("#videoPlayerVideo").attr("src", "");
+    }, 500)
+}
+
+var videoPlayer = {
+    init: function () {
+        $("body").append("<div id=\"videoPlayerVideoMask\" active=\"false\"><video src=\"\" controls=\"controls\" autoplay=\"autoplay\" id=\"videoPlayerVideo\" show=\"false\"></video></div>");
+        $("#videoPlayerVideoMask").click(function () {
+            videoPlayerExit();
+        });
+        $("*").scrollTop(0);
+        console.log("Video Player Initialized.");
+    },
+    play: function (videoSource) {
+        $("#videoPlayerVideo").bind("click", function () {
+            event.stopPropagation();
+        })
+        $("#videoPlayerVideo").attr("src", videoSource);
+        $("#videoPlayerVideo").attr("show", "true");
+        $("#videoPlayerVideoMask").attr("active", "true");
+    },
+    set: function (dlModes) {
+        switch (dlModes) {
+            case "dark":
+                $("#videoPlayerVideoMask").attr("dlmodes", "dark");
+                break;
+            case "light":
+                $("#videoPlayerVideoMask").attr("dlmodes", "light");
+                break;
+            default:
+                break;
+        }
+    },
+    exit: function () {
+        $("#videoPlayerVideo").attr("show", "false");
+        $("#videoPlayerVideoMask").attr("active", "false");
+        setTimeout(function () {
+            $("#videoPlayerVideo").attr("src", "");
+        }, 500)
+    }
+}