feat: audio, video and pdf reader (#953)

Co-authored-by: Kjartan Óli Ágústsson <[email protected]>

Author: ghost-in-the-machine-86

src/assets/css/filesystem.css

@@ -262,3 +262,27 @@ div#fs_space_bar > progress::-webkit-progress-value {
     bottom: .7vh;
     transition: width .5s cubic-bezier(0.4, 0, 1, 1);
 }
+
+.pdf_container {
+    text-align: center;
+    background: var(--color_light_black);
+    color: rgb(var(--color_r), var(--color_g), var(--color_b));
+    border: 0.15vh solid rgb(var(--color_r), var(--color_g), var(--color_b));
+    padding: 0.4vh 0.2vh;
+    font-size: 1.4vh;
+    resize: none;
+    overflow: auto;
+    width: 50vw;
+    height: 50vh;
+}
+
+.pdf_options button {
+    width: 40px;
+    height: 40px;
+    padding: 5px;
+}
+
+.pdf_options span {
+    margin-left: 1.5vh;
+    font-size: 24px;
+}

src/assets/css/media_player.css

@@ -0,0 +1,97 @@
+.media_container[data-fullscreen=true] .media {
+    height: 95%;
+    width: 100%;
+    max-width: none;
+    max-height: none;
+}
+
+.media_controls {
+    border: 2px solid rgb(var(--color_r), var(--color_g), var(--color_b));
+    background: var(--color_light_black);
+}
+
+.media_controls>div {
+    text-align: center;
+    display: inline-block;
+    vertical-align: middle;
+    padding-left: 0.1em;
+    padding-right: 0.1em;
+}
+
+.media_controls .media_button {
+    font-size: 1.5em;
+    height: 1em;
+    width: 1em;
+}
+
+.media_controls .media_button:hover {
+    cursor: pointer;
+    background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
+}
+
+.media_controls .media_time {
+    margin-right: 2vw;
+    width: 4vw;
+}
+
+.media_controls .volume_icon {
+    font-size: 1.5em;
+    height: 1em;
+    width: 1em;
+}
+
+.media_controls .volume {
+    height: 2vh;
+    z-index: 100;
+    width: 5vw;
+    cursor: pointer;
+}
+
+.media_controls .volume_bkg {
+    position: absolute;
+    border-style: solid;
+    border-width: 0 0 2vh 5vw;
+    border-color: transparent transparent rgba(var(--color_r), var(--color_g), var(--color_b), 0.7) transparent;
+}
+
+.media_controls .volume_bar {
+    position: absolute;
+    clip: rect(0px, 5vw, 2vh, 0px);
+    width: 5vw;
+    border-style: solid;
+    border-width: 0 0 2vh 5vw;
+    border-color: transparent transparent rgb(var(--color_r), var(--color_g), var(--color_b)) transparent;
+}
+
+.fs {
+    float: right;
+}
+
+.media_controls .progress_container {
+    min-width: 20vw;
+}
+
+.media_controls .progress {
+    display: block;
+    cursor: pointer;
+    width: 100%;
+    background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
+    height: 5px;
+}
+
+.media_controls .progress_bar {
+    width: 0%;
+    height: 100%;
+    display: block;
+    background-color: rgb(var(--color_r), var(--color_g), var(--color_b));
+}
+
+.fullscreen_hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s 2s, opacity 2s linear;
+}
+
+.volume_icon:hover {
+    cursor: pointer;
+}

src/assets/icons/file-icons.json

@@ -6284,6 +6284,16 @@
         "height": 512,
         "svg": "<path d=\"M292.5714417,384h-73.142868v-73.1428528h73.142868V384z M365.7142944,321.5925598l-41.9274292-41.9508667c-3.3085938-3.3091431-7.8800354-5.3559875-12.929718-5.3559875H201.1428528c-10.0994263,0-18.2857056,8.1862793-18.2857056,18.2857361v109.7142639c0,4.7594299,1.8188629,9.0942688,4.7977142,12.3468628l42.5194244,42.5102844h-65.6028595c-10.0994263,0-18.2857056-8.1862793-18.2857056-18.2857056V256c0-10.0994415,8.1862793-18.2857208,18.2857056-18.2857208h182.857132c10.0994568,0,18.2857361,8.1862793,18.2857361,18.2857208V321.5925598z M475.4285583,384l-36.5714111-36.5714417l0.0468445-73.1908264l36.5245667-36.5245972V384z M274.2444458,96.3504028c-24.3259277,14.0241699-24.3259277,49.2750244,0.000061,63.2991943C298.5704346,173.6737671,329.1430054,156.0484009,329.1430054,128S298.5704346,82.3261719,274.2444458,96.3504028z M475.4285889,201.1428223l-73.1428833,73.1428833v-36.5714111c0-17.5-12.2943115-32.1199951-28.7142944-35.7160034c17.8331909-19.5103149,28.7142944-45.4822998,28.7142944-73.9971313c0-60.5942993-49.1205444-109.7154541-109.7142944-109.7154541c-57.7845459,0-105.1348267,44.6731567-109.3999634,101.3674316c-19.447998-17.5422974-45.2045898-28.2246094-73.4571533-28.2246094C49.1211548,91.4285278,0,140.5496826,0,201.1439819c0,60.5925903,49.1211548,109.7131348,109.7142944,109.7131348H73.1428833V384h36.5714111v73.1428223c0,20.1983032,16.3731689,36.5714722,36.5714111,36.5714722h219.4285889c20.1982422,0,36.5714111-16.3731689,36.5714111-36.5714722v-36.5714111l73.1428833,73.1428833H512V201.1428223H475.4285889z M146.2849731,201.1430054c0-28.0484009-30.1351929-44.8863525-54.8984985-31.6496582c-27.3225098,14.6047363-25.53302,65.3989868,18.3278198,68.2209473V274.28479C29.0150757,271.7099609,12.666687,172,73.0599365,137.84375c48.8818359-27.645752,109.7970581,7.2024536,109.7970581,63.2992554H146.2849731z M255.9179688,191.2991943c-48.6519165-28.0483398-48.6519775-98.5500488,0-126.5984497C304.5698853,36.6524048,365.7150269,71.9031982,365.7150269,128C365.7150269,184.0967407,304.5698853,219.3475952,255.9179688,191.2991943z\"/>"
     },
+    "audio": {
+        "width": 24,
+        "height": 24,
+        "svg": "<path d=\"M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z\"/>"
+    },
+    "icon-file-pdf": {
+        "width": 24,
+        "height": 24,
+        "svg": "<path d=\"M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z\"/>"
+    },
     "virtualbox-alt": {
         "width": 512,
         "height": 512,
@@ -7623,5 +7633,60 @@
         "width": 24,
         "height": 24,
         "svg": "<path d=\"M 11.9975,13.9987C 10.8938,13.9987 10,13.1 10,11.9975C 10,10.8938 10.8938,10 11.9975,10C 13.105,10 13.9987,10.8938 13.9987,11.9975C 13.9987,13.1 13.105,13.9987 11.9975,13.9987 Z M 11.9975,3.99875C 7.5825,3.99875 3.99875,7.5775 3.99875,11.9975C 3.99875,16.4162 7.5825,20 11.9975,20C 16.4163,20 20,16.4162 20,11.9975C 20,7.5775 16.4163,3.99875 11.9975,3.99875 Z\"/>"
+    },
+    "zoomIn": {
+        "width": 24,
+        "height": 24,
+        "svg": "<path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z\"/>"
+    },
+    "zoomOut": {
+        "width": 24,
+        "height": 24,
+        "svg": "<path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z\"/>"
+    },
+    "arrowBack": {
+        "width": 24,
+        "height": 24,
+        "svg": "<path d=\"M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z\"/>"
+    },
+    "arrowNext": {
+        "width": 24,
+        "height": 24,
+        "svg": "<path d=\"M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z\"/>"
+    },
+    "playArrow": {
+        "width": 24,
+        "height": 24,
+        "svg": "<path d=\"M8 5v14l11-7z\"/>"
+    },
+    "pause": {
+        "width": 24,
+        "height": 24,
+        "svg": "<path d=\"M6 19h4V5H6v14zm8-14v14h4V5h-4z\"/>"
+    },
+    "fullscreen": {
+        "width": 24,
+        "height": 24,
+        "svg": "<path d=\"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\"/>"
+    },
+    "fullscreenExit": {
+        "width": 24,
+        "height": 24,
+        "svg": "<path d=\"M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z\"/>"
+    },
+    "volumeUp": {
+        "width": 24,
+        "height": 24,
+        "svg": "<path d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"/>"
+    },
+    "volumeDown": {
+        "width": 24,
+        "height": 24,
+        "svg": "<path d=\"M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z\"/>"
+    },
+    "volumeMute": {
+        "width": 24,
+        "height": 24,
+        "svg": "<path d=\"M7 9v6h4l5 5V4l-5 5H7z\"/>"
     }
 }

src/assets/misc/file-icons-match.js

@@ -203,6 +203,7 @@ function matchIcon(filename) {
     if (/\.s3m$/i.test(filename)) { return "audio"; }
     if (/\.sndh$/i.test(filename)) { return "audio"; }
     if (/\.wma$/i.test(filename)) { return "audio"; }
+    if (/\.(ogg)$/i.test(filename)) { return "audio"; }
     if (/\.aug$/i.test(filename)) { return "augeas"; }
     if (/^aurelia\.json$/i.test(filename)) { return "aurelia"; }
     if (/\.ahk$/i.test(filename)) { return "ahk"; }
@@ -2177,7 +2178,7 @@ function matchIcon(filename) {
     if (/\.webm$/i.test(filename)) { return "video"; }
     if (/\.mpe?g$/i.test(filename)) { return "video"; }
     if (/\.(asf|wmv)$/i.test(filename)) { return "video"; }
-    if (/\.(ogm|og[gv])$/i.test(filename)) { return "video"; }
+    if (/\.(ogm|ogv)$/i.test(filename)) { return "video"; }
     if (/\.(vim|[gn]?vimrc)$/i.test(filename)) { return "vim"; }
     if (/^[.gn_]?vim(rc|info)$/i.test(filename)) { return "vim"; }
     if (/\.vmb$/i.test(filename)) { return "vim"; }

src/classes/docReader.class.js

@@ -0,0 +1,96 @@
+class DocReader {
+    constructor(opts) {
+        pdfjsLib.GlobalWorkerOptions.workerSrc = './node_modules/pdfjs-dist/build/pdf.worker.js';
+        const modalElementId = "modal_" + opts.modalId;
+        const path = opts.path;
+        const scale = 1;
+        const canvas = document.getElementById(modalElementId).querySelector(".pdf_canvas");
+        const context = canvas.getContext('2d');
+        const loadingTask = pdfjsLib.getDocument(path);
+        let pdfDoc = null,
+            pageNum = 1,
+            pageRendering = false,
+            pageNumPending = null,
+            zoom = 100
+
+        this.renderPage = (num) => {
+            pageRendering = true;
+            loadingTask.promise.then(function (pdf) {
+                pdfDoc.getPage(num).then(function (page) {
+                    const viewport = page.getViewport({ scale: scale });
+                    canvas.height = viewport.height;
+                    canvas.width = viewport.width;
+
+                    const renderContext = {
+                        canvasContext: context,
+                        viewport: viewport,
+                    };
+                    const renderTask = page.render(renderContext);
+                    renderTask.promise.then(function () {
+                        pageRendering = false;
+                        if (pageNumPending !== null) {
+                            renderPage(pageNumPending);
+                            pageNumPending = null;
+                        }
+                    });
+                });
+            });
+            document.getElementById(modalElementId).querySelector(".page_num").textContent = num;
+        }
+
+        this.queueRenderPage = (num) => {
+            if (pageRendering) {
+                pageNumPending = num;
+            } else {
+                this.renderPage(num);
+            }
+        }
+
+        this.onPrevPage = () => {
+            if (pageNum <= 1) {
+                return;
+            }
+            pageNum--;
+            this.queueRenderPage(pageNum);
+        }
+
+        this.onNextPage = () => {
+            if (pageNum >= pdfDoc.numPages) {
+                return;
+            }
+            pageNum++;
+            this.queueRenderPage(pageNum);
+        }
+
+        this.zoomIn = () => {
+            if (zoom >= 200) {
+                return;
+            }
+            zoom = zoom + 10;
+            canvas.style.zoom = zoom + "%";
+        }
+
+        this.zoomOut = () => {
+            if (zoom <= 50) {
+                return;
+            }
+            zoom = zoom - 10;
+            canvas.style.zoom = zoom + "%";
+        }
+
+        document.getElementById(modalElementId).querySelector(".previous_page").addEventListener('click', this.onPrevPage);
+        document.getElementById(modalElementId).querySelector(".next_page").addEventListener('click', this.onNextPage);
+        document.getElementById(modalElementId).querySelector(".zoom_in").addEventListener('click', this.zoomIn);
+        document.getElementById(modalElementId).querySelector(".zoom_out").addEventListener('click', this.zoomOut);
+
+        pdfjsLib.getDocument(path).promise.then((pdfDoc_) => {
+            pdfDoc = pdfDoc_;
+            document.getElementById(modalElementId).querySelector(".page_count").textContent = pdfDoc.numPages;
+            this.renderPage(pageNum);
+        });
+    }
+}
+
+module.exports = {
+    DocReader
+};