Repository

Electron GitHub Address

https://github.com/electron/electron

My GitHub Address

https://github.com/pckurdu

This Project GitHub Address

https://github.com/pckurdu/hidden-video-player-application-with-electron-part-2

What Will I Learn?

• You will learn to use the menu modul in the electron.
• You will learn to use the dialog modul in the electron.
• You will learn to use the file system in the electron.
• You will learn how to carry file with the bat file.
• You will learn how to reinstall the electron application.
• You will learn appendFile() and split() functions.

Requirements

• basic electronjs knowledge
• Atom Editor

Difficulty

• Basic

Tutorial Contents

In the previous tutorial, we created secret files to store videos that would be used in practice.

In this tutorial, I will show you how to move video files to this hidden file in the application.

To perform these operations:
-I will place a video upload button in the application and I will do this using the electron menu module.
-When clicking on the button, I will just select the videos in the specific extension from the computer. I will do this using the electron dialog module.
-I will save the path and name information of the uploaded video files for later use in a file. I will use an electron file system for this.

so you will learn how to use menu modules, dialog modules and file systems in the electron in this tutorial.

Let's continue to develop our code.

Using The Menu Module

We use the menu module to create menus on the electron.

When we run the electron application, the application works with some default menus. When we use the menu module, these menues disappear, and the menus that we create replace those menues.

When we want to create our own menus in our application, we first have to place the Menu module under the electron.

Let's write the Menu module next to app and browserWindow.

const {app,BrowserWindow,Menu}=require('electron')

We have to create one template that houses in the menus so we can place our buttons in the template.

const template = [
    {
        label:"Upload Video",//button name
        click () {
            //events to upload video when button is clicked
        }
    }
]

Using the label property, we can set the text on the menu.

With the click() function, we can set the events that will occur when the menu button is clicked.

We need to create a menu using the menu module we created template. The buildFromTemplate() function is used to do this.

Then we should set this menu as the application menu of the application. We do this using the setApplicationMenu() function.

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

So we created the menu. If we want to add a new menu, all we need to do is add a new object in the template according to the json format.

Using The dialog Module

When the menu is clicked openShowDialog should open and display the videos on the computer.

To use openShowDialog, we first need to add a dialog module.

const {app,BrowserWindow,Menu,dialog}=require('electron')

When you click on the menu, open a dialog window and select the ones with the extensions you have set.

dialog.showOpenDialog(
        { filters: [
           { name: 'video', extensions: ['mp4','webM','ogg'] }
           ]},function (fileNames) {
                    
            }); 

We use the filter feature to select the extensions we have specified.

Html5 <video> tag only running .mp4 .ogg and .webM extensions as they are filter.

The field with function(fileNames) is the value returned by the dialog window. The dialog window will callback the path property of the selected video.

The dialog window that opens when you click on the menu is as follows.

Move Video Files

I will create one .bat file to perform the migration.

We need to move the path of the selected file with dialog window to the hidden file we created.

Create move.txt in the bats folder. Set move.txt file to copy the files.

Code:
cls
@ECHO OFF
set arg1=%1
copy %arg1% D:\electron\hiddenVideoPlayer-part2\bats\ElectronFiles

We can copy the file contained in the path entered as a parameter to our confidential file.

Now convert this move.txt file to a move.bat file and use it in the application.

const bat=exec('cmd /c move.bat '+'"'+fileNames[0]+'"',{cwd:"D:\\electron\\hiddenVideoPlayer-part2\\bats"},function(){
            
       });

We sent fileNames[0] to the .bat file. I got the first selection because there could be more than one choice in the dialog window.

Using The File System

With fileNames[0] we now know the location and name of the video.

Let's create a file named names under the bat folder and print the name and path of the videos to this file.

We need to install the file system to perform these operations.

const fs = require('fs')

I'll create one variable for convenience, and I'll write the path to the names file this variable.

let filename = 'D:\\electron\\hiddenVideoPlayer-part2\\bats\\names'

With the split() function I can break a string variable into certain characters. Break fileNames[0] by \\ character to find the name of the file.

The last data in the file path contains the name of the file. Since the ElectronFiles file has been moved inside, the sixth index now gives the name of the file.

let[a,s,d,f,r,name]=fileNames[0].split('\\');

With the appendFile() function we can write in the file.

I will write file path and file name separated by commas in names file.

fs.appendFile(filename, "D:\\electron\\hiddenVideoPlayer-part2\\bats\\ElectronDosyalar\\"+name + ','+name+'\n')

So that now we have hidden the path and name of the chosen file.
I choose the file

Names file content



Finally click on the menu and select the video and then re-upload the application so that the selected video appears on the screen.

win.reload()

Since we did not bring it to the screen, there will be no change on the screen.

Curriculum

https://steemit.com/utopian-io/@pckurdu/hidden-video-player-application-with-electron-part-1

Proof of Work Done

https://github.com/pckurdu/hidden-video-player-application-with-electron-part-2