Version 2.0.2

marksamfd · web-flow · commit 207d1474f8a0 · 2024-07-24T11:38:19.000+03:00
# Bug Fixes - File closed successfully but folders are not deleted #26 by implementing custom protocol video:// with media stream buffering - text is now on the top of the videos - fixed problem on opening new project multiple listeners are registered - dialog is show to show the file is saving - presenter view is now in focus in slideshow mode
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "choirslides",
   "productName": "ChoirSlides",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A software designed to create lyric slideshows. This software allows users to combine lyrics with background videos, resulting in a visually engaging slideshow that synchronizes the lyrics with the video footage.",
   "main": "./.webpack/main",
   "scripts": {
diff --git a/src/index.js b/src/index.js
@@ -7,6 +7,8 @@ import {createPresentationView, createShowCreatorView, createPresenterView} from
 import WorkingFile from './workingFile'
 import log from 'electron-log/main';
 
+let VidFilestream;
+
 
 if (app.isPackaged) {
     log.initialize({spyRendererConsole: true});
@@ -27,13 +29,105 @@ if (require('electron-squirrel-startup')) {
     app.quit();
 }
 
+protocol.registerSchemesAsPrivileged([
+    {
+        scheme: "media",
+        privileges: {
+            // secure: true,
+            bypassCSP: true,
+            stream: true,
+        },
+    },
+])
 
 app.disableHardwareAcceleration()
 
+function parseRangeRequests(text, size) {
+    const token = text.split("=");
+    if (token.length !== 2 || token[0] !== "bytes") {
+        return [];
+    }
+
+    return token[1]
+        .split(",")
+        .map((v) => parseRange(v, size))
+        .filter(([start, end]) => !isNaN(start) && !isNaN(end) && start <= end);
+}
+
+const NAN_ARRAY = [NaN, NaN];
+
+function parseRange(text, size) {
+    const token = text.split("-");
+    if (token.length !== 2) {
+        return NAN_ARRAY;
+    }
+
+    const startText = token[0].trim();
+    const endText = token[1].trim();
+
+    if (startText === "") {
+        if (endText === "") {
+            return NAN_ARRAY;
+        } else {
+            let start = size - Number(endText);
+            if (start < 0) {
+                start = 0;
+            }
+
+            return [start, size - 1];
+        }
+    } else {
+        if (endText === "") {
+            return [Number(startText), size - 1];
+        } else {
+            let end = Number(endText);
+            if (end >= size) {
+                end = size - 1;
+            }
+
+            return [Number(startText), end];
+        }
+    }
+}
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on('ready', () => {
+    protocol.handle("media", (request) => {
+        // https://github.com/electron/electron/issues/38749#issuecomment-1681531939
+        const fp = path.join(currentProject.basePath, decodeURIComponent(request.url.slice('media://'.length)))
+        const stats = fs.statSync(fp);
+
+        // console.log(fp, stats)
+        const headers = new Headers();
+        headers.set("Accept-Ranges", "bytes");
+        headers.set("Content-Type", "video/mp4");
+
+        let status = 200;
+        const rangeText = request.headers.get("range");
+
+        if (rangeText) {
+            const ranges = parseRangeRequests(rangeText, stats.size);
+
+            const [start, end] = ranges[0];
+            // console.log(rangeText, stats.size, start, end);
+            headers.set("Content-Length", `${end - start + 1}`);
+            headers.set("Content-Range", `bytes ${start}-${end}/${stats.size}`);
+            status = 206;
+            VidFilestream = fs.createReadStream(fp, {start, end});
+        } else {
+            headers.set("Content-Length", `${stats.size}`);
+            VidFilestream = fs.createReadStream(fp);
+
+        }
+
+        return new Response(VidFilestream, {
+            headers,
+            status,
+        });
+    })
+
     showCreatorView = createShowCreatorView()
     showCreatorView.on('close', (e) => {
         if (currentProject.isOpened) {
@@ -47,7 +141,10 @@ app.on('ready', () => {
             if (choice === 1) {
                 e.preventDefault()
             } else {
-
+                if (currentProject.isOpened) {
+                    VidFilestream?.destroy()
+                    currentProject.closeProject()
+                }
             }
         }
     })
@@ -57,8 +154,7 @@ app.on('ready', () => {
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
 app.on('window-all-closed', () => {
-    /*if (currentProject.isOpened)
-        currentProject.closeProject()*/
+
     if (process.platform !== 'darwin') {
         app.quit();
     }
@@ -93,9 +189,11 @@ ipcMain.handle("file-opened", async (e, data) => {
     let mainWindow = BrowserWindow.getFocusedWindow().getParentWindow();
     BrowserWindow.getFocusedWindow().destroy()
 
-    /*if (currentProject.isOpened) {
+    if (currentProject.isOpened) {
+        VidFilestream?.destroy()
+        mainWindow.webContents.send("slideshow:destroy")
         currentProject.closeProject()
-    }*/
+    }
 
     currentProject = new WorkingFile(data)
 
@@ -104,14 +202,19 @@ ipcMain.handle("file-opened", async (e, data) => {
     } else {
         currentProject.openProject()
     }
-    console.log(currentProject.toObject())
-    mainWindow.setTitle(`ChoirSlide • ${currentProject.projectName}`)
+    mainWindow.setTitle(`ChoirSlide - ${currentProject.projectName}`)
     mainWindow.webContents.send("file-params", currentProject.toObject());
 })
 
 ipcMain.handle("file-save", (e, content) => {
+    dialog.showMessageBox(BrowserWindow.fromId(e.frameId), {
+        title: "File Save",
+        message: "File Is Saving",
+        type: "info",
+    })
+
     currentProject.saveProject(content).then(() => {
-        dialog.showMessageBoxSync({
+        dialog.showMessageBox(BrowserWindow.fromId(e.frameId), {
             title: "File Save",
             message: "File Saved Successfully",
             type: "info"
@@ -207,6 +310,7 @@ ipcMain.handle("slideshow:start", (e, content) => {
                 presentationView.webContents.send("main:presentation", {type: "init", data})
             })
             showCreatorView.destroy()
+            presenterView.focus()
         } else {
             dialog.showMessageBoxSync(showCreatorView, {
                 type: 'error',
diff --git a/src/renderer/ShowCreateView/js/fileOpen.js b/src/renderer/ShowCreateView/js/fileOpen.js
@@ -10,7 +10,7 @@ window.file.onFileParams(function (fileParams) {
     let slides = presentation.map(e => new Slide(e))
     let slidePreviewCanv = document.getElementById("currentSlideThumbCanvas");
     console.log(slidePreviewCanv)
-    comm.toPresentation({type: "init", data: JSON.stringify(fileParams)})
+    // comm.toPresentation({type: "init", data: JSON.stringify(fileParams)})
     present = new ShowCreator({
         container: "currentSlideThumbCanvas",
         sidebarSlidesContainer: document.getElementById("sidebarSlidesContainer"),
@@ -23,15 +23,6 @@ window.file.onFileParams(function (fileParams) {
         mode: fileParams.mode,
         sepBy: fileParams.sepBy
     })
-    hotkeys('delete,ctrl+s', function (event, handler) {
-        switch (handler.key) {
-            case 'delete':
-                present.removeSlide()
-                break;
-            case 'ctrl+s':
-                file.save(present.saveShow())
-        }
-    })
 
     // window.onbeforeunload = (e) => {
     //     e.preventDefault()
@@ -41,15 +32,24 @@ window.file.onFileParams(function (fileParams) {
 
 
 })
+hotkeys('delete,ctrl+s', function (event, handler) {
+    switch (handler.key) {
+        case 'delete':
+            present?.removeSlide()
+            break;
+        case 'ctrl+s':
+            file.save(present.saveShow())
+    }
+})
 
-comm.onSlideshowInitialized(() => {
+window.comm.onSlideshowInitialized(() => {
     comm.startSlideshow(present.saveShow())
 })
 
-comm.onSlideshowDestroy(() => {
-    present.destroyShow()
-})
-window.onbeforeunload = () => {
-    console.log("Destroying show")
+window.comm.onSlideshowDestroy(() => {
     present?.destroyCreator()
-}
+})
+// window.onbeforeunload = () => {
+//     console.log("Destroying show")
+//     present?.destroyCreator()
+// }
diff --git a/src/renderer/js/Classes/ShowClass.js b/src/renderer/js/Classes/ShowClass.js
@@ -28,8 +28,8 @@ class Show extends ShowPresentationBase {
      */
     _createBackground(slide) {
         let VideoObj = document.createElement('video');
-        // VideoObj.src = `media-loader://${encodeURIComponent(`${this.#basePath}/${slide.videoFile}`)}`
-        VideoObj.src = `${this._basePath}/${slide.videoFileName}.${slide.videoFileFormat}`
+        VideoObj.src =  "media://" + encodeURIComponent(slide.videoFileName + "." + slide.videoFileFormat)
+        // VideoObj.src = `${this._basePath}/${slide.videoFileName}.${slide.videoFileFormat}`
         VideoObj.muted = true
         VideoObj.loop = true
         VideoObj.preload = "auto"
diff --git a/src/renderer/js/Classes/ShowCreatorClass.js b/src/renderer/js/Classes/ShowCreatorClass.js
@@ -32,14 +32,14 @@ class ShowCreator extends Konva.Stage {
     #basePath;
     #sideBarSlidesContainer;
     #addSlideBtn;
-    #addVidBtn;
     #baseLayer;
     #background;
     #slideTextEditor;
     #slideTextInput;
     #videoObj;
     #anim;
     #filePicker;
+    #controller;
 
     #slidesRadioSelector() {
         return document.querySelectorAll(`#${this.#sideBarSlidesContainer.id} input`)
@@ -100,6 +100,7 @@ class ShowCreator extends Konva.Stage {
     }
 
     #changeSlideText(e) {
+
         // change slide text values and sidebar
         this.#slides[this.#currentSlide].text = e.target.value;
         this.#sideBarSlidesContainer.children[this.#currentSlide].querySelector("span").innerText = e.target.value
@@ -109,6 +110,7 @@ class ShowCreator extends Konva.Stage {
         /**
          * https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation
          */
+
         this.#currentSlide = this.#findSelectedSlidePos()
         this.#slideTextInput.value = this.#slides[this.#currentSlide].text
         this.#videoObj.src = "file://" + this.#basePath + "/" + this.#slides[this.#currentSlide].videoFileName + "." + this.#slides[this.#currentSlide].videoFileFormat
@@ -121,7 +123,7 @@ class ShowCreator extends Konva.Stage {
         let filePicker = document.createElement("input");
         filePicker.type = "file";
         filePicker.accept = "video/*";
-        filePicker.addEventListener("change", this.#onVideoFilePicked.bind(this));
+        filePicker.addEventListener("change", this.#onVideoFilePicked.bind(this), {signal: this.#controller.signal});
         return filePicker
     }
 
@@ -137,6 +139,7 @@ class ShowCreator extends Konva.Stage {
     }
 
     async #onVideoFilePicked(e) {
+
         let filePicker = e.target
         console.log(filePicker.files.item(0))
         let file = filePicker.files.item(0)
@@ -157,7 +160,8 @@ class ShowCreator extends Konva.Stage {
     #setCanvasToVideo(/** Slide*/slide = this.#slides[this.#currentSlide]) {
         if (slide.videoFileName !== undefined) {
             this.container().style.background = "transparent"
-            this.#videoObj.src = "file://" + this.#basePath + "/" + slide.videoFileName + "." + slide.videoFileFormat
+            // this.#videoObj.src = "file://" + this.#basePath + "/" + slide.videoFileName + "." + slide.videoFileFormat
+            this.#videoObj.src = "media://" + encodeURIComponent(slide.videoFileName + "." + slide.videoFileFormat)
             console.log(this.#videoObj)
             this.#background.setAttrs({
                 image: this.#videoObj,
@@ -196,14 +200,15 @@ class ShowCreator extends Konva.Stage {
         this.#sideBarSlidesContainer = props.sidebarSlidesContainer
         this.#slideTextEditor = props.slideTextEditor
         this.#slideTextInput = this.#slideTextEditor.querySelector(`textarea`);
+        this.#addSlideBtn = document.querySelector(`#slideAdd`);
+
+        this.#controller = new AbortController();
 
-        while (this.#sideBarSlidesContainer.firstChild && this.#sideBarSlidesContainer.removeChild(this.#sideBarSlidesContainer.firstChild)) ;
 
         this.#basePath = props.basePath
         this.#slides = props.slides
 
         console.log(this.#slides)
-        this.#addSlideBtn = document.querySelector(`#slideAdd`);
 
         this.#videoObj = document.createElement("video");
         this.#videoObj.autoplay = true;
@@ -217,11 +222,12 @@ class ShowCreator extends Konva.Stage {
         this.#baseLayer = new Konva.Layer({});
         this.add(this.#baseLayer)
 
+
         this.#addSlideBtn.addEventListener("click", () => {
             this.addNewSlide()
-        })
-        this.#sideBarSlidesContainer.addEventListener("change", this.#onSlideClick.bind(this))
-        this.#slideTextInput.addEventListener("input", this.#changeSlideText.bind(this))
+        }, {signal: this.#controller.signal})
+        this.#sideBarSlidesContainer.addEventListener("change", this.#onSlideClick.bind(this), {signal: this.#controller.signal})
+        this.#slideTextInput.addEventListener("input", this.#changeSlideText.bind(this), {signal: this.#controller.signal})
 
         this.#anim = new Konva.Animation(function () {
             // do nothing, animation just need to update the layer
@@ -256,11 +262,9 @@ class ShowCreator extends Konva.Stage {
         // mapping slides must be at end
         this.#slides.forEach(slide => this.addNewSlide(slide))
 
-
         if (this.#slides.length === 0) {
             this.addNewSlide()
         }
-
     }
 
 
@@ -316,10 +320,13 @@ class ShowCreator extends Konva.Stage {
         return JSON.stringify(this.#slides)
     }
 
-    destroyShow() {
+    destroyCreator() {
         this.#videoObj.pause()
         this.#videoObj.src = ''
         this.#videoObj.load()
+        while (this.#sideBarSlidesContainer.firstChild && this.#sideBarSlidesContainer.removeChild(this.#sideBarSlidesContainer.firstChild)) ;
+        this.#controller.abort()
+        this.destroy()
     }
 }
 
diff --git a/src/renderer/js/Classes/ShowPresentationBaseClass.js b/src/renderer/js/Classes/ShowPresentationBaseClass.js
@@ -4,7 +4,7 @@ class ShowPresentationBase extends Konva.Stage {
     #w;
     #h;
     #textToHeightRatio = 0.125
-    #textToSpacingRatio = .75
+    #textToSpacingRatio = .15
     _basePath;
     #simpleText;
     #background;
@@ -110,7 +110,8 @@ class ShowPresentationBase extends Konva.Stage {
         });
 
         this.#textBG = new Konva.Rect({
-            x: this.#w / 2 - this.#simpleText.getTextWidth() / 2 - this.#padding / 2,
+            // x: this.#w / 2 - this.#simpleText.getTextWidth() / 2 - this.#padding / 2,
+            x: this.#simpleText.getClientRect().x - this.#padding / 2,
             y: this.#simpleText.getClientRect().y - this.#padding / 2,
             height: this.#simpleText.getClientRect().height + this.#padding,
             width: this.#simpleText.getTextWidth() + this.#padding,
diff --git a/src/workingFile.js b/src/workingFile.js

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "choirslides",`
`3`	`3`	`"productName": "ChoirSlides",`
`4`		`- "version": "2.0.1",`
	`4`	`+ "version": "2.0.2",`
`5`	`5`	`"description": "A software designed to create lyric slideshows. This software allows users to combine lyrics with background videos, resulting in a visually engaging slideshow that synchronizes the lyrics with the video footage.",`
`6`	`6`	`"main": "./.webpack/main",`
`7`	`7`	`"scripts": {`