1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

add stats for nerds to video player

This commit is contained in:
Luke Pulverenti 2017-06-25 13:49:44 -04:00
parent b95bd4407c
commit e1363fc80a
18 changed files with 33 additions and 25 deletions

View file

@ -1 +1 @@
.countIndicator,.indicator{-webkit-border-radius:500px;font-weight:500}.itemProgressBar{background:rgba(0,0,0,.5);position:relative;height:.35em}.itemProgressBarForeground{position:absolute;top:0;left:0;bottom:0;background-color:#52B54B}.indicator{border-radius:500px;display:-webkit-flex;display:-webkit-box;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;width:2em;height:2em}.countIndicator,.iconIndicator{background:rgba(82,181,75,1);display:-webkit-flex;display:-webkit-box;-webkit-box-align:center}.timerIndicator{color:#CB272A}.timerIndicator-inactive{color:#888}.indicator+.indicator{margin-left:.25em}.indicatorIcon{width:auto;height:auto;font-size:1.6em}.countIndicator{border-radius:500px;display:flex;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#fff}.iconIndicator,.videoIndicator{-webkit-border-radius:500px;color:#fff}.iconIndicator{border-radius:500px;display:flex;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.videoIndicator{background:#444;border-radius:500px;display:-webkit-flex;display:-webkit-box;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.syncIndicator{color:#fff;-webkit-border-radius:500px;border-radius:500px}.emptySyncIndicator{background:#ccc;color:#333}.fullSyncIndicator{background:rgba(82,181,75,1)}
.countIndicator,.indicator{-webkit-border-radius:500px;font-weight:500}.itemProgressBar{background:rgba(0,0,0,.5);position:relative;height:.35em}.itemProgressBarForeground{position:absolute;top:0;left:0;bottom:0;background-color:#52B54B}.itemProgressBarForeground-recording{background-color:#CB272A}.indicator{border-radius:500px;display:-webkit-flex;display:-webkit-box;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;width:2em;height:2em}.countIndicator,.playedIndicator{background:rgba(82,181,75,1);display:-webkit-flex;display:-webkit-box;-webkit-box-align:center;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)}.timerIndicator{color:#CB272A}.timerIndicator-inactive{color:#888}.indicator+.indicator{margin-left:.25em}.indicatorIcon{width:auto;height:auto;font-size:1.6em}.countIndicator{border-radius:500px;display:flex;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#fff;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)}.playedIndicator,.videoIndicator{-webkit-border-radius:500px;color:#fff}.playedIndicator{border-radius:500px;display:flex;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)}.videoIndicator{background:#444;border-radius:500px;display:-webkit-flex;display:-webkit-box;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)}.syncIndicator{color:#fff;-webkit-border-radius:500px;border-radius:500px}.emptySyncIndicator{background:#ccc;color:#333}.fullSyncIndicator{background:rgba(82,181,75,1)}

View file

@ -1 +1 @@
define(["datetime","itemHelper","css!./indicators.css","material-icons"],function(datetime,itemHelper){"use strict";function enableProgressIndicator(item){return"Video"===item.MediaType&&"TvChannel"!==item.Type||("AudioBook"===item.Type||"AudioPodcast"===item.Type)}function getProgressHtml(pct,options){var containerClass="itemProgressBar";return options&&options.containerClass&&(containerClass+=" "+options.containerClass),'<div class="'+containerClass+'"><div class="itemProgressBarForeground" style="width:'+pct+'%;"></div></div>'}function getAutoTimeProgressHtml(pct,options,start,end){var containerClass="itemProgressBar";return options&&options.containerClass&&(containerClass+=" "+options.containerClass),'<div is="emby-progressbar" data-automode="time" data-starttime="'+start+'" data-endtime="'+end+'" class="'+containerClass+'"><div class="itemProgressBarForeground" style="width:'+pct+'%;"></div></div>'}function getProgressBarHtml(item,options){var pct;if(enableProgressIndicator(item)){if("Recording"===item.Type&&item.CompletionPercentage)return getProgressHtml(item.CompletionPercentage,options);var userData=options?options.userData||item.UserData:item.UserData;if(userData&&(pct=userData.PlayedPercentage,pct&&pct<100))return getProgressHtml(pct,options)}if("Program"===item.Type&&item.StartDate&&item.EndDate){var startDate=0,endDate=1;try{startDate=datetime.parseISO8601Date(item.StartDate).getTime()}catch(err){}try{endDate=datetime.parseISO8601Date(item.EndDate).getTime()}catch(err){}var now=(new Date).getTime(),total=endDate-startDate;if(pct=100*((now-startDate)/total),pct>0&&pct<100)return getAutoTimeProgressHtml(pct,options,startDate,endDate)}return""}function enablePlayedIndicator(item){return itemHelper.canMarkPlayed(item)}function getPlayedIndicator(item){if(enablePlayedIndicator(item)){var userData=item.UserData||{};if(userData.UnplayedItemCount)return'<div class="countIndicator indicator">'+userData.UnplayedItemCount+"</div>";if(userData.PlayedPercentage&&userData.PlayedPercentage>=100||userData.Played)return'<div class="playedIndicator iconIndicator indicator"><i class="md-icon indicatorIcon">&#xE5CA;</i></div>'}return""}function getCountIndicatorHtml(count){return'<div class="countIndicator indicator">'+count+"</div>"}function getChildCountIndicatorHtml(item,options){var minCount=0;return options&&(minCount=options.minCount||minCount),item.ChildCount&&item.ChildCount>minCount?getCountIndicatorHtml(item.ChildCount):""}function getTimerIndicator(item){var status;if("SeriesTimer"===item.Type)return'<i class="md-icon timerIndicator indicatorIcon">&#xE062;</i>';if(item.TimerId||item.SeriesTimerId)status=item.Status||"Cancelled";else{if("Timer"!==item.Type)return"";status=item.Status}return item.SeriesTimerId?"Cancelled"!==status?'<i class="md-icon timerIndicator indicatorIcon">&#xE062;</i>':'<i class="md-icon timerIndicator timerIndicator-inactive indicatorIcon">&#xE062;</i>':'<i class="md-icon timerIndicator indicatorIcon">&#xE061;</i>'}function getSyncIndicator(item){return 100===item.SyncPercent?'<div class="syncIndicator indicator fullSyncIndicator"><i class="md-icon indicatorIcon">&#xE2C4;</i></div>':null!=item.SyncPercent?'<div class="syncIndicator indicator emptySyncIndicator"><i class="md-icon indicatorIcon">&#xE2C4;</i></div>':""}function getVideoIndicator(item){return"Video"===item.MediaType?'<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">&#xE04B;</i></div>':""}function onAutoTimeProgress(){var start=parseInt(this.getAttribute("data-starttime")),end=parseInt(this.getAttribute("data-endtime")),now=(new Date).getTime(),total=end-start,pct=100*((now-start)/total);pct=Math.min(100,pct),pct=Math.max(0,pct);var itemProgressBarForeground=this.querySelector(".itemProgressBarForeground");itemProgressBarForeground.style.width=pct+"%"}var ProgressBarPrototype=Object.create(HTMLDivElement.prototype);return ProgressBarPrototype.attachedCallback=function(){this.timeInterval&&clearInterval(this.timeInterval),"time"===this.getAttribute("data-automode")&&(this.timeInterval=setInterval(onAutoTimeProgress.bind(this),6e4))},ProgressBarPrototype.detachedCallback=function(){this.timeInterval&&(clearInterval(this.timeInterval),this.timeInterval=null)},document.registerElement("emby-progressbar",{prototype:ProgressBarPrototype,extends:"div"}),{getProgressBarHtml:getProgressBarHtml,getPlayedIndicatorHtml:getPlayedIndicator,getChildCountIndicatorHtml:getChildCountIndicatorHtml,enableProgressIndicator:enableProgressIndicator,getTimerIndicator:getTimerIndicator,enablePlayedIndicator:enablePlayedIndicator,getSyncIndicator:getSyncIndicator,getVideoIndicator:getVideoIndicator}});
define(["datetime","itemHelper","css!./indicators.css","material-icons"],function(datetime,itemHelper){"use strict";function enableProgressIndicator(item){return"Video"===item.MediaType&&"TvChannel"!==item.Type||("AudioBook"===item.Type||"AudioPodcast"===item.Type)}function getProgressHtml(pct,options){var containerClass="itemProgressBar";return options&&options.containerClass&&(containerClass+=" "+options.containerClass),'<div class="'+containerClass+'"><div class="itemProgressBarForeground" style="width:'+pct+'%;"></div></div>'}function getAutoTimeProgressHtml(pct,options,isRecording,start,end){var containerClass="itemProgressBar";options&&options.containerClass&&(containerClass+=" "+options.containerClass);var foregroundClass="itemProgressBarForeground";return isRecording&&(foregroundClass+=" itemProgressBarForeground-recording"),'<div is="emby-progressbar" data-automode="time" data-starttime="'+start+'" data-endtime="'+end+'" class="'+containerClass+'"><div class="'+foregroundClass+'" style="width:'+pct+'%;"></div></div>'}function getProgressBarHtml(item,options){var pct;if(enableProgressIndicator(item)&&"Recording"!==item.Type){var userData=options?options.userData||item.UserData:item.UserData;if(userData&&(pct=userData.PlayedPercentage,pct&&pct<100))return getProgressHtml(pct,options)}if(("Program"===item.Type||"Timer"===item.Type||"Recording"===item.Type)&&item.StartDate&&item.EndDate){var startDate=0,endDate=1;try{startDate=datetime.parseISO8601Date(item.StartDate).getTime()}catch(err){}try{endDate=datetime.parseISO8601Date(item.EndDate).getTime()}catch(err){}var now=(new Date).getTime(),total=endDate-startDate;if(pct=100*((now-startDate)/total),pct>0&&pct<100){var isRecording="Timer"===item.Type||"Recording"===item.Type||item.TimerId;return getAutoTimeProgressHtml(pct,options,isRecording,startDate,endDate)}}return""}function enablePlayedIndicator(item){return itemHelper.canMarkPlayed(item)}function getPlayedIndicator(item){if(enablePlayedIndicator(item)){var userData=item.UserData||{};if(userData.UnplayedItemCount)return'<div class="countIndicator indicator">'+userData.UnplayedItemCount+"</div>";if(userData.PlayedPercentage&&userData.PlayedPercentage>=100||userData.Played)return'<div class="playedIndicator indicator"><i class="md-icon indicatorIcon">&#xE5CA;</i></div>'}return""}function getCountIndicatorHtml(count){return'<div class="countIndicator indicator">'+count+"</div>"}function getChildCountIndicatorHtml(item,options){var minCount=0;return options&&(minCount=options.minCount||minCount),item.ChildCount&&item.ChildCount>minCount?getCountIndicatorHtml(item.ChildCount):""}function getTimerIndicator(item){var status;if("SeriesTimer"===item.Type)return'<i class="md-icon timerIndicator indicatorIcon">&#xE062;</i>';if(item.TimerId||item.SeriesTimerId)status=item.Status||"Cancelled";else{if("Timer"!==item.Type)return"";status=item.Status}return item.SeriesTimerId?"Cancelled"!==status?'<i class="md-icon timerIndicator indicatorIcon">&#xE062;</i>':'<i class="md-icon timerIndicator timerIndicator-inactive indicatorIcon">&#xE062;</i>':'<i class="md-icon timerIndicator indicatorIcon">&#xE061;</i>'}function getSyncIndicator(item){return 100===item.SyncPercent?'<div class="syncIndicator indicator fullSyncIndicator"><i class="md-icon indicatorIcon">&#xE2C4;</i></div>':null!=item.SyncPercent?'<div class="syncIndicator indicator emptySyncIndicator"><i class="md-icon indicatorIcon">&#xE2C4;</i></div>':""}function getVideoIndicator(item){return"Video"===item.MediaType?'<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">&#xE04B;</i></div>':""}function onAutoTimeProgress(){var start=parseInt(this.getAttribute("data-starttime")),end=parseInt(this.getAttribute("data-endtime")),now=(new Date).getTime(),total=end-start,pct=100*((now-start)/total);pct=Math.min(100,pct),pct=Math.max(0,pct);var itemProgressBarForeground=this.querySelector(".itemProgressBarForeground");itemProgressBarForeground.style.width=pct+"%"}var ProgressBarPrototype=Object.create(HTMLDivElement.prototype);return ProgressBarPrototype.attachedCallback=function(){this.timeInterval&&clearInterval(this.timeInterval),"time"===this.getAttribute("data-automode")&&(this.timeInterval=setInterval(onAutoTimeProgress.bind(this),6e4))},ProgressBarPrototype.detachedCallback=function(){this.timeInterval&&(clearInterval(this.timeInterval),this.timeInterval=null)},document.registerElement("emby-progressbar",{prototype:ProgressBarPrototype,extends:"div"}),{getProgressBarHtml:getProgressBarHtml,getPlayedIndicatorHtml:getPlayedIndicator,getChildCountIndicatorHtml:getChildCountIndicatorHtml,enableProgressIndicator:enableProgressIndicator,getTimerIndicator:getTimerIndicator,enablePlayedIndicator:enablePlayedIndicator,getSyncIndicator:getSyncIndicator,getVideoIndicator:getVideoIndicator}});