Merge pull request #4145 from fishbigger/player-add-favorite

Add ability to favorite item within video playback

CONTRIBUTORS.md

@@ -62,6 +62,7 @@
  - [Pier-Luc Ducharme](https://github.com/pl-ducharme)
  - [Anantharaju S](https://github.com/Anantharajus)
  - [Merlin Sievers](https://github.com/dann-merlin)
+ - [Fishbigger](https://github.com/fishbigger)
 
 # Emby Contributors
 

src/controllers/playback/video/index.html

@@ -69,6 +69,10 @@
                 <div class="osdRatingsText">
                 </div>
 
+                <button is="emby-ratingbutton" type="button" class="btnUserRating hide autoSize paper-icon-button-light" title="${Rate}">
+                    <span class="xlargePaperIconButton material-icons favorite" aria-hidden="true"></span>
+                </button>
+
                 <button is="paper-icon-button-light" class="btnSubtitles hide autoSize" title="${Subtitles}">
                     <span class="xlargePaperIconButton material-icons closed_caption" aria-hidden="true"></span>
                 </button>

src/controllers/playback/video/index.js

@@ -17,6 +17,7 @@ import keyboardnavigation from '../../../scripts/keyboardNavigation';
 import '../../../styles/scrollstyles.scss';
 import '../../../elements/emby-slider/emby-slider';
 import '../../../elements/emby-button/paper-icon-button-light';
+import '../../../elements/emby-ratingbutton/emby-ratingbutton';
 import '../../../styles/videoosd.scss';
 import ServerConnections from '../../../components/ServerConnections';
 import shell from '../../../scripts/shell';
@@ -133,6 +134,17 @@ export default function (view) {
             programStartDateMs = 0;
             programEndDateMs = 0;
         }
+
+        // Set currently playing item for favorite button
+        const btnUserRating = view.querySelector('.btnUserRating');
+
+        if (itemHelper.canRate(currentItem)) {
+            btnUserRating.classList.remove('hide');
+            btnUserRating.setItem(currentItem);
+        } else {
+            btnUserRating.classList.add('hide');
+            btnUserRating.setItem(null);
+        }
     }
 
     function getDisplayTimeWithoutAmPm(date, showSeconds) {
@@ -1727,6 +1739,9 @@ export default function (view) {
     view.querySelector('.btnAudio').addEventListener('click', showAudioTrackSelection);
     view.querySelector('.btnSubtitles').addEventListener('click', showSubtitleTrackSelection);
 
+    // HACK: Remove `emby-button` from the rating button to make it look like the other buttons
+    view.querySelector('.btnUserRating').classList.remove('emby-button');
+
     // Register to SyncPlay playback events and show big animated icon
     const showIcon = (action) => {
         let primary_icon_name = '';