Hidden Video Player Application with Electron (Part 3)

pckurdu (64)in #utopian-io • 8 years ago

Repository

What Will I Learn?

You will learn how to use the ui-router.
You will learn how to use the parameter with routing.
You will learn the concept of $stateParams.
You will learn readFileSync() function.
You will learn how to split a string.
You will learn find() function.
You will learn how to use the service with angular.
You will learn how to use the html 5 video tag.
You will learn to use ng-src and ng-show with angular.

Requirements

basic electronjs knowledge
Atom Editor

Difficulty

Intermediate

Tutorial Contents

We will list our videos that we have uploaded in this article and play the clicked video.

When you click the listed video names, we will find the video by routing. We will use the angular-ui router for routing.

We need to redirect the video lists using parameters. That is, we will use angular-ui router operations as parameters.

This is it will give you a better learning.

I will create the script.js file and write the angular code here to perform the routing operations.

In script.js

var app=angular.module('myApp',['ui.router']);

I created an angular application and added the ui-router module. Now we can do routing with app.config().

We can define the page to be routing and the controller with the state object.

app.config(function($stateProvider) {
    $stateProvider
    .state("videoplayer", {
        url:'/videoplayer',
        templateUrl : "video.html",
        controller:"videoCtrl"
    });
    
});

I set the video.html page as the page to be routed. I did not use it as a parameter because we did not define our list.

Let's add one controller for index.html page and read the data in names file in this controller.

To be able to read the file, the file system must be installed. I will install the file system and define the path to the file to be read as a variable.

let fs = require('fs');
let filename = 'D:\\electron\\hiddenVideoPlayer-part3\\bats\\names'

Create a controller for the index.html page named myCtrl and read your file.

app.controller('myCtrl',function($scope){
    let videos=[];
    let data = fs.readFileSync(filename, 'utf8').split('\n');
    
    for (let index = 0; index < data.length-1; index++) {
        let [ path, name ] = data[index].split(',')
        console.log(data[index])
        var video={
            no:index,
            path:path,
            name:name
        }

        videos.push(video);
        
    }

    $scope.data=videos;
    
})

Create an array called videos. We will store the video object in this array.

In the file we separated the names and path fields of the videos with a comma. We will create an index in addition to these in the video object.

We will use this index as a parameter in the routing process.

With the readFileSync() function we read our file and write a string \n in the data name.

I will go back to this data array length and separate each data by comma character.

The previous phrase from the comma indicates the path of the video and the next phrase after the comma is the name of the video.

We split it into a given video object and add the video objects to the videos array.

Finally, to use it on the index.html page, we pass the videos array to the $scope.data object.

Open the index.html page and perform the encoding that will bring the list to the screen.

<body>
   <body ng-app="myApp" ng-controller="myCtrl">
   
    <div class="row">
        <div class="col-md-3">
            <ul class="list-group" id="ulList">
                <li class='list-group-item' ng-repeat="d in data">
                    <a href='#/videoplayer>{{d.name}}</a>
                </li>
            </ul>
        </div>
        <div class="col-md-9">
            <div ui-view></div>
        </div>
    </div>
</body>

I'm using ng-repeat to return the object we created with $scope.data in the list, and I'm printing the name variable of the object in array.

I will get ui-view and video.html page.

We uploaded one video, the following image appears when we run the application.

Let's add another video and see how it looks.

Let's examine the console screen. Here we printed out the data in the names file.

Delete the videos we uploaded from the hidden folder and clean the names file. If the video has not yet uploaded, the user will be alerted to the video upload.

If the array is empty for these operations, create a message to upload the video.

  if(data==""){
        var video={
            no:0,
            path:"",
            name:"Please Add a Video"
        }

        videos.push(video);
    }

Now, we can start playing the video operation by clicking on the video names.

An array in myCtrl has been defined. We need to write a service in order to place the array in videoCtrl.

I will create two functions in this service. One of the functions will take an array for the service and the other will transfer the array to the outside.

app.service('transporterService', function() {
    var List = [];
  
    this.addList = function(newList) {
        List.push(newList);
    };
    this.getList = function(){
        return List;
    };
  });

Using the addList() function in the service, we pass the array of videos to the service.

We must first define this service for myCtrl.

app.controller('myCtrl',function($scope,transporterService){
…

transporterService.addList(videos);
}

Then we will use the getList() function of this service in videoCtrl.

In order to use parameters in videoCtrl, we will first set the state object according to the parameter.

The final state of the state object in app.config() is below.

.state("videoplayer", {
        url:'/videoplayer/:p',
        templateUrl : "video.html",
        controller:"videoCtrl"
    });

We must use this parameter on the index.html page.

<li class='list-group-item' ng-repeat="d in data">
      <a href='#/videoplayer/{{d.no}}'>{{d.name}}</a>
</li>

I will use the no property in array as a parameter. In videoCtrl I will find the video according to this number and run it by way of it.

app.controller('videoCtrl',function($scope,$stateParams,transporterService){
   
    $scope.myVar=true;
    $scope.no=$stateParams.p;
    $scope.List=transporterService.getList();
    
    $scope.List2 = $scope.List[0].find(i => i.no == $scope.no);

    if($scope.List2.path==""){
        $scope.myVar=false;
    }
})

With $stateParams we can catch the parameter. The parameter we get shows us the no property in the array.

Using the find() function, we can find the path to the video according to the no.

We are transferring the video properties to the $scope.List2 object to use on the video.html page.
video.html page

<div>
    <video width="600" height="500" controls="controls" ng-show="myVar">

            <source ng-src={{List2.path}} type="video/mp4">
                
                Your browser does not support the video tag.
            
    </video>
</div>

On this page I will use the <video> tag to play the videos.

We will use the angularin ng-src property to fetch the video path in List2. So the video on that road can be played.

With ng-show feature we will not see this video tag if the path is empty. We set myVar variable in the script file.

The app will look like this when it first opens.

When two videos are uploaded, it will be as follows.

When you click on any name, the video will be opened in the same location.

When we click on another video, it is routing to the other video without a wait.

Curriculum

Hidden Video Player Application with Electron (Part 2)

Hidden Video Player Application with Electron (Part 1)

Proof of Work Done

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

#tutorials #electron #modules #project

8 years ago in #utopian-io by pckurdu (64)

$37.45

Sort:

Trending

[-]

portugalcoin (72) 8 years ago

Thank you for your contribution.

Nice work on the explanations of your code, although adding a bit more comments to the code can be helpful as well.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]