Skip to content
Permalink
Browse files

implemented volume control in ui

  • Loading branch information...
jankammerath committed Apr 4, 2018
1 parent ed35668 commit 8f7a22d9d7123de0a669ab8afefdcdb2bc772734
Showing with 110 additions and 1 deletion.
  1. +5 −0 app/app.html
  2. +42 −0 app/css/style.css
  3. +0 −1 app/img/audio.svg
  4. +9 −0 app/js/app.js
  5. +54 −0 app/js/player.js
  6. BIN bin/iptvx
@@ -27,6 +27,11 @@
<body>
<!-- special components -->
<div id="status" class="loading"></div>
<div id="volume" class="volumenormal">
<div id="volumebar">
<div id="volumelevel"></div>
</div>
</div>

<!-- channel list component -->
<div id="list" class="component"></div>
@@ -193,6 +193,48 @@ body{
text-overflow: ellipsis;
}

/* volume information styles */
#volume{
position:fixed;
width:80px;
height:80px;
background-color:#0e0d40;
color:#ffffff;
opacity:0.8;
border-radius: 5px;
background-size: 64px 64px;
background-repeat: no-repeat;
background-position: 8px 4px;
z-index:1;
display:none;
}

.volumenormal{
background-image:url('/app/img/speaker.svg');
}

.volumemute{
background-image:url('/app/img/mute.svg');
}

#volumebar{
position: absolute;
bottom: 5px;
width: 70px;
height: 5px;
background-color: #fff3;
left: 5px;
border-radius: 5px;
overflow:hidden;
}

#volumelevel{
height: 100%;
width: 50%;
background-color: #ffffff;
border-radius: 5px;
}

/* channel list styles */
#list{
width:230px;
@@ -2,6 +2,5 @@
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><path fill="#ffffff" d="M524.5,806.3c-1,0-2.1-0.1-3.1-0.3c-9.9-1.5-17.3-10.1-17.3-20.2V324.1l-123.8,322c-3.5,9.2-13.2,14.5-22.8,12.8c-9.7-1.8-16.7-10.2-16.7-20.1V441.8l-30.6,63.1c-3.4,7-10.5,11.5-18.4,11.5H30.4c-11.3,0-20.4-9.2-20.4-20.4c0-11.3,9.1-20.4,20.4-20.4H279l63.8-131.4c4.2-8.6,13.6-13.1,23-11c9.3,2.1,15.8,10.4,15.8,19.9v175.9l123.9-322c3.5-9.2,13.1-14.6,22.8-12.8c9.7,1.8,16.7,10.2,16.7,20.1V654l123.5-388.9c3-9.6,12.7-15.5,22.6-14c10,1.5,17.3,10.1,17.3,20.2V634l124.7-249.3c4.2-8.5,13.7-12.9,23-10.7c9.2,2.2,15.7,10.4,15.7,19.9v89.8h98c11.3,0,20.4,9.2,20.4,20.4c0,11.3-9.1,20.4-20.4,20.4H851.2c-11.3,0-20.4-9.2-20.4-20.4v-23.8L706.1,729.6c-4.2,8.5-13.7,12.9-23,10.7c-9.2-2.2-15.7-10.4-15.7-19.9V403.1L544,792C541.2,800.6,533.3,806.3,524.5,806.3z"/></g>
</svg>
@@ -115,6 +115,15 @@ var app = {
}
}
}else{
/* check if this is a volume adjustment */
if(keyCode == 33){ /* PAGE_UP is volume up */
/* switch the volume up */
player.adjustVolume(10);
}if(keyCode == 34){ /* PAGE_DOWN is volume down */
/* switch the volume down */
player.adjustVolume(-10);
}

/* check if any element is active
and let it handle the key */
for(var c=0; c<app.componentList.length; c++){
@@ -17,6 +17,9 @@
*/

var player = {
/* volume fadeout timeout */
volumeTimeout: null,

/*
Initialise the player and check its status
*/
@@ -37,6 +40,12 @@ var player = {
-$("#status").outerHeight()/2)+"px");
$("#status").css("left",(($(window).width()/2)
-$("#status").outerWidth()/2)+"px");

/* adjust the volume indicator */
$("#volume").css("top",(($(window).height()/2)
-$("#volume").outerHeight()/2)+"px");
$("#volume").css("left",(($(window).width()/2)
-$("#volume").outerWidth()/2)+"px");
},

/*
@@ -169,6 +178,51 @@ var player = {
player.execute("switch-channel "+channelId);
},

/*
Adjusts the volume level of the current playback
@param adjustmentLevel percentage value of adjustment between -100 and 100
*/
adjustVolume: function(adjustmentLevel){
/* calculate new volume level */
var newVolumeValue = player.getVolume()+adjustmentLevel;

/* make sure volume does not exceed limits */
if(newVolumeValue > 150){newVolumeValue = 150;}
if(newVolumeValue < 0){newVolumeValue = 0;}

/* request player to switch to new volume */
player.execute("set-volume "+newVolumeValue);

/* change appearance based on volume level */
$("#volume").removeClass();
if(newVolumeValue == 0){
/* this is mute */
$("#volume").addClass("volumemute");
}else{
/* this is normal */
$("#volume").addClass("volumenormal");
}

/* update the volume information */
clearTimeout(player.volumeTimeout);
$("#volume").fadeIn();
$("#volumelevel").css("width",((newVolumeValue/150)*100)+"%");
player.volumeTimeout = setTimeout(function(){
$("#volume").fadeOut();
},2000);
},

/*
Returns the current volume value in percent
*/
getVolume: function(){
if(typeof(iptvx) == 'object'){
return iptvx.volume;
}

return 0;
},

/*
Executes a player command
*/
BIN -142 KB (43%) bin/iptvx
Binary file not shown.

0 comments on commit 8f7a22d

Please sign in to comment.
You can’t perform that action at this time.