sTeam-web-interface

sTeam web interface, part of sTeam is a collaboration platform so there was the need to support media. In any collaboration platform support for basic/diverse MIME types is necessary. In angular ngVideo and ngAudio are two good packages that are helpful in building audio and video players for any angular application. So let us see how to go ahead with things while implementing media players.
Controllers and the template :

• sTeam-web-UI/newUI/audio-player // the audio controller and template
• sTeam-web-UI/newUI/video-player // the video controller and template

Using ngAudio

angular.module('steam', [ 'ngAudio' ])
.value("songRemember",{})
.controller('sTeamaudioResource', function($scope, ngAudio) {
$scope.audios = [
ngAudio.load('audio/test.mp3'),
]
})
.controller('sTeamaudioPlayer', ['$scope', 'ngAudio', 'songRemember', function($scope, ngAudio,
songRemember) {
var url = 'test.mp3';
if (songRemember[url]) {
$scope.audio = songRemember[url];
} else {
$scope.audio = ngAudio.load(url);
$scope.audio.volume = 0.8;
songRemember[url] = $scope.audio;
}
}]);


• First create a controller for storing the resources.Store the items in an array or an object. Note the point storing the images in an Array or an Object depends on your use case, but make sure that you are calling the resources correctly.
• Now create another controller which handles the control of the audio player.This controller should be responsible for handling the URI’s of the media.
• In the second controller which we create we must add some config to give support to controls in the front end, things like progress of the media, volume, name of the media etc. These are essentially important for the front end. So each resource loaded to the audio player must have all the above listed controls and information.

Below is the screenshot of the audio player

Using ngVideo

angular.module('steam', [ 'ngVideo' ])
.controller('sTeamvideoPlayer', ['$scope', '$timeout', 'video', function($scope, $timeout, video) {
$scope.interface = {};
$scope.playlistopen = false;
$scope.videos = {
test1: "test1.mp4",
test2: "test2.mp4"
};
$scope.$on('$videoReady', function videoReady() {
$scope.interface.options.setAutoplay(true);
});
$scope.playVideo = function playVideo(sourceUrl) {
video.addSource('mp4', sourceUrl, true);
}
$scope.getVideoName = function getVideoName(videoModel) {
switch (videoModel.src) {
case ($scope.videos.test1): return "test1";
case ($scope.videos.test2): return "test2";
default: return "Unknown Video";
}
}
video.addSource('mp4', $scope.videos.test1);
video.addSource('mp4', $scope.videos.test2);
}]);

• Developing the video player is quite the same as developing the audio player but this involves some extra configurations that are ought to be considered. Things like autoplay, giving the scope for playing the video on full screen etc. If keenly looked these are just additional configuration which you are trying to add in order to make your video player more efficient.
• Firstly we must have the $on($videoReady) event written in order to autoplay the list of videos in the default playlist
• Moving on, there are couple of controls which are to be given to the video player. Using the method getVideoName we can bind the video source to the title/name of the video.
• The video service provider must be used for adding the video Sources, and it must be noted that the mp4 can be altered in order to play mp3 files or video files of different format. Before using other video format, make a note of checking the list of video files supported by ngVideo.

Below is the screenshot of the video player

Thats it folks,
Happy Hacking !!

The recent developments with the sTeam web interface, involved me writing drag and drop directives for giving scope to drag/move movements in the workarea and the workspace. The concept here is providing user with the feasibility to arrange rooms/documents swiftly and easily.

The idea behind it :
So, in sTeam-web-UI the concept of rooms/documents is implemented using the workareaCtrl. After creating a document/room the created objects appear in the workarea. So in the future, the items in the work area can be sorted and searched for; But adding the scope for drag movements to the web interface makes the the UI/UX to be commendable.

Implementation strategy :
Firstly we need to create directives in angular that can support the actions which when triggered in the front end must result in relative change. So in order to link those actions we must write directives which properly catch the emitted events.

• dragObj // The drag directive
• dropObj // The drop directive

The drag Objective
The way around for implementing the drag objective is to get the element which is selected for the drag option and then emit the event in order to complete the drag action. So we have to go the traditional way for working our way around with this.

// get the element first
angular.element(element).attr("isDraggable": true)
var id = angular.element(element).attr("id")
if(!id) {
id = uuid.create()
angular.element(element).attr("id", id)
}

Now we emit the events.

// emit events
element.bind("startDrag", function (send) {
data.originalEvent.dataTransfer.setData('text', id);
console.log("Starting to drag")
$rootScope.emit("STEAM-DRAG-STRT")
});
element.bind("stopDrag", function (send) {
console.log('Stopping to drag')
$rootScope.emit("STEAM-DRAG-STOP")
});

If we observe the element capturing part, we are just taking the id’s of the elements which are in the DOM and then we bind the respective element with an action, be it startDrag or stopDrag the idea here is to store the id of the element and bind respective action/event to it.

The drop Objective
Before we understand how the drop directive is written there has to be some clarity given on how should we go ahead in writing the directive. The drag and drop directives which when implemented should be carefully monitered since the entire process is interlinked. So the elements must be properly caught and the respective events must be properly binded. While testing we should check if the events are emitting proper actions to the elements or not.

$rootScope.$on("STEAM-DRAG-STRT", function () {
var domelm = document.getElementById(id);
angular.element(domelm).addClass("drag-target");
});
$rootScope.$on("STEAM-DRAG-STOP", function () {
var domelm = document.getElementById(id);
angular.element(domelm).removeClass("drag-target");
angular.element(domelm).removeClass("drag-over");
});

There are alternatives to replicate this mechanism in jQuery and also plain Javascript. But the efficacy of the implementation comes to play only when the DOM can be played with easily.

Thats it folks,
Happy Hacking !!