Skip to content

Commit

Permalink
expose events
Browse files Browse the repository at this point in the history
  • Loading branch information
Nishanth authored and Nishanth committed Mar 9, 2016
1 parent 83e6b69 commit ee9b544
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 12 deletions.
67 changes: 66 additions & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,74 @@ <h1>Single Stream Example</h1>
duration="1077"
sd_src="https://player.vimeo.com/external/104624360.sd.mp4?s=a7a41026f4c356cc46de876e3e6072af&amp;download=1">
</video-stream>
</video-player>

<script>
//var videoPlayerEvents = ["play","pause","fullscreen","subtitlesChanged","speedChanged","volumeChanged","qualityChanged","progressChanged","resize"];
//with default settings
var videoPlayerEvents = {play: '' , pause: '', fullscreen: '', subtitlesChanged: '', speedChanged: '', volumeChanged: '', qualityChanged: '', progressChanged: '', resize: ''};
// to test tracking data
function listenPersistor() {
var bodyObj = document.querySelector("body");
for (var key in videoPlayerEvents) {
bodyObj.addEventListener(key, toPersist);
}
// initSetting();
}
function toPersist(event) {
//track here
console.log("Persist :: " + event.type +": Details => " + event.detail);
//debugger;
// bake_cookie(event.type, event.detail);
}


</video-player>
/* function initSetting(){
}
}
}
function toPersist(event) {
//track here
console.log("Persist :: " + event.type +": Details => " + event.detail);
//debugger;
// bake_cookie(event.type, event.detail);
}
/* function initSetting(){
debugger;
//look for cookie else keep your own default settings as first cookie
for (var key in videoPlayerEvents) {
var cookie_var = read_cookie(key);
if(cookie_var){
videoPlayerEvents[key] = cookie_var;
}
//set the setting
}
}*/

/**
* Cookie Functions
*/
/*
function bake_cookie(name, value) {
debugger;
var cookie = [name, '=', JSON.stringify(value), '; domain=.', window.location.host.toString(), '; path=/;'].join('');
document.cookie = cookie;
}
function read_cookie(name) {
var result = document.cookie.match(new RegExp(name + '=([^;]+)'));
result && (result = JSON.parse(result[1]));
return result;
}
function delete_cookie(name) {
document.cookie = [name, '=; expires=Thu, 01-Jan-1970 00:00:01 GMT; path=/; domain=.', window.location.host.toString()].join('');
}
*/
window.onload = listenPersistor;
</script>

</body>
</html>
59 changes: 49 additions & 10 deletions video-controlbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@

<td class="cc button">
<iron-icon id="subtitlesButton" icon="av:closed-caption" class="control" on-click="showSubtitlesOptions" hidden$="{{!showSubtitlesButton}}"></iron-icon>
<ul class="video-dropdown-menu" style="list-style: none; cursor: pointer; cursor: hand; padding-left: 1%; padding-right: 2%; width: 5px; bottom: 41px; left: 81.6%; display: none;"></ul>
<ul class="video-dropdown-menu" style="list-style: none; cursor: pointer; cursor: hand; padding-left: 1%; padding-right: 2%; width: 5px; bottom: 36px; left: 81.6%; display: none;"></ul>
</td>

<iron-icon id="volumeButton" icon="av:volume-up" class="control" on-click="toggleMute"></iron-icon>
Expand All @@ -172,6 +172,7 @@

Polymer({

is: 'video-controlbar',
properties: {
isPlaying: {
type: Boolean,
Expand Down Expand Up @@ -237,7 +238,16 @@
thumbnails: [],

attached: function() {
this.currentSubLang='';
//this.updateIcon();
},

//Called from video-player element
initSubtitles: function(){
//this.currentSubLang='';
if (this.currentSubLang) {
this.showSubtitles=true;
this.changeSubtitles();
}
this.showSubtitlesMenu=false;
this.showSubtitlesChanged();
this.timeoutTime=3000; //timeout time for subtitles dropdown
Expand Down Expand Up @@ -293,6 +303,9 @@
if (this.volume > 30) icon = 'av:volume-down';
if (this.volume > 70) icon = 'av:volume-up';
this.$.volumeButton.icon = icon;
this.fire('volumeChanged', {
newValue: this.volume
});
},

isFullscreenChanged: function() {
Expand All @@ -319,6 +332,12 @@

togglePlayPause: function() {
this.isPlaying = !this.isPlaying;
if (this.isPlaying) {
this.fire("play", {newValue: this.isPlaying});
} else {
this.fire("pause", {newValue: !this.isPlaying});
}

},

toggleSpeed: function() {
Expand All @@ -330,6 +349,9 @@
};

this.speed = nextSpeed[this.speed] || 1.0;
this.fire('speedChanged', {
newValue: this.speed
});
},

toggleMute: function() {
Expand All @@ -343,6 +365,9 @@

toggleQuality: function() {
this.isHD = !this.isHD;
this.fire('qualityChanged', {
newValue: this.isHD
});
},

computeQuality: function(isHD) {
Expand Down Expand Up @@ -389,24 +414,38 @@
changeSubtitles: function(event) {
console.log('controlbar changeSubtitles');
document.querySelector("video-controlbar").dropClicked = true;
var dataSrcLang = event.target.parentElement.getAttribute("data-srclang");
if(event) {
var dataSrcLang = event.target.parentElement.getAttribute("data-srclang");
}
var vidConElement = document.querySelector("video-controlbar");
if(dataSrcLang) {
if (this.parentElement.parentElement.currentSubLang===dataSrcLang) {
this.parentElement.parentElement.showSubtitles=!this.parentElement.parentElement.showSubtitles;
this.parentElement.parentElement.currentSubLang='';
if (vidConElement.currentSubLang===dataSrcLang) {
vidConElement.showSubtitles=!vidConElement.showSubtitles;
vidConElement.currentSubLang='';
event.target.style.color = 'rgba(255, 255, 255, 0.3)';
vidConElement.fire('subtitlesChanged', {
newValue: vidConElement.currentSubLang
});
}
else {
if (this.parentElement.parentElement.currentSubLang) {
var obj = "[data-srclang=" + this.parentElement.parentElement.currentSubLang + "]";
if (vidConElement.currentSubLang) {
var obj = "[data-srclang=" + vidConElement.currentSubLang + "]";
(document.querySelector(obj).children[0]).style.color = 'rgba(255, 255, 255, 0.3)';
}
else { //initial
this.parentElement.parentElement.showSubtitles=!this.parentElement.parentElement.showSubtitles;
vidConElement.showSubtitles=!vidConElement.showSubtitles;
}
event.target.style.color = 'rgba(255, 255, 255, 1.0)';

this.parentElement.parentElement.currentSubLang=dataSrcLang;
vidConElement.currentSubLang=dataSrcLang;
vidConElement.fire('subtitlesChanged', {
newValue: vidConElement.currentSubLang
});
}
} else {
if (vidConElement.currentSubLang){
var obj = "[data-srclang=" + vidConElement.currentSubLang + "]";
(document.querySelector(obj).children[0]).style.color = 'rgba(255, 255, 255, 1.0)';
}
}
},
Expand Down
12 changes: 11 additions & 1 deletion video-player.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -381,7 +381,13 @@
this.videoStreamList[1].resize(this.videoStreamList.length);
}
console.log('****' + this.videoStreamList[0].style.width);
this.$.resizer.style.left = this.videoStreamList[0].style.width;
this.$.resizer.style.left = this.videoStreamList[0].style.width;

this.fire("resize", {
newWidth: this.videoStreamList[0].style.width,
newRatio: this.videoStreamList[0].ratio
});

},

endDragging: function(detail) {
Expand Down Expand Up @@ -442,6 +448,7 @@
document.webkitExitFullscreen();
}
}
this.fire("fullscreen", {newValue: this.isFullscreen});
},

handleFullscreenChanged: function(e) {
Expand All @@ -462,6 +469,9 @@

progressNavigation: function (e) {
this.progress = Math.floor(e.detail.newValueInSeconds) ;
this.fire('progressChanged', {
newValue: this.progress
});
}

})
Expand Down

0 comments on commit ee9b544

Please sign in to comment.