styling subtitles options dropdown

talitman · Mar 4, 2016 · e2e47fd · e2e47fd
1 parent faaad1a
commit e2e47fd
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 22 deletions.
diff --git a/video-controlbar.html b/video-controlbar.html
@@ -124,19 +124,25 @@
         border-bottom-width: 2px;
         border-bottom-style: solid;
         border-bottom-color: white;
+        z-index: 9999;
       }
 
       .languageselectionentry {
         color: rgba(255, 255, 255, 0.3);
       }
-
+      .languageselectionentry:hover{
+        color: rgba(255, 255, 255, 0.6);
+      }
       #subtitlesButton {
         color: rgba(255, 255, 255, 0.3);
       }
-
+      #subtitlesButton:hover {
+        color: rgba(255, 255, 255, 0.6);
+      }
       .video-dropdown-menu {
         color: rgba(255, 255, 255, 0.3);
       }
+
     </style>
 
     <iron-icon class="control" on-click="togglePlayPause" id="playPauseButton" icon="{{playIcon}}"></iron-icon>
@@ -161,7 +167,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: 34px; left: 81.7%; 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: 34px; left: 81.6%; display: none;"></ul>
     </td>
 
     <iron-icon id="volumeButton" icon="av:volume-up" class="control" on-click="toggleMute"></iron-icon>
@@ -227,7 +233,7 @@
           type: String,
           value: 'av:play-arrow',
           notify: true
-        }
+        },
       },
 
       listeners: {
@@ -243,6 +249,7 @@
         this.currentSubLang='';
         this.showSubtitlesMenu=false;
         this.showSubtitlesChanged();
+        this.timeoutTime=3000;
       },
 
       // Called from video-player element
@@ -352,27 +359,32 @@
         this.isFullscreen = !this.isFullscreen;
       },
 
+
       showSubtitlesOptions: function() {
         this.showSubtitlesMenu=!this.showSubtitlesMenu;
-        if(this.showSubtitlesMenu) {
-          this.querySelector(".video-dropdown-menu").style.display="block";
+        this.querySelector(".video-dropdown-menu").style.display="block";
+        if(this.setDropdownTimer) {
+              window.clearTimeout(this.timeoutHandle);
+              this.timeoutHandle = window.setTimeout(this.func, this.timeoutTime);
+              this.dropClicked=false;
+              this.setDropdownTimer=true;
         }
         else {
-          this.querySelector(".video-dropdown-menu").style.display="none";
+          this.timeoutHandle = setTimeout(this.func = function () {
+              if(!document.querySelector("video-controlbar").dropClicked) {
+                document.querySelector("video-controlbar").showSubtitlesMenu=!document.querySelector("video-controlbar").showSubtitlesMenu;
+                document.querySelector(".video-dropdown-menu").style.display="none";
+                document.querySelector("video-controlbar").setDropdownTimer=false;
+              } else {
+                window.clearTimeout(this.timeoutHandle);
+                this.timeoutHandle = window.setTimeout( document.querySelector("video-controlbar").func, this.timeoutTime);
+                document.querySelector("video-controlbar").dropClicked=false;
+                document.querySelector("video-controlbar").setDropdownTimer=true;
+              }
+            }, this.timeoutTime);
+          this.dropClicked = false;
+          this.setDropdownTimer=true;
         }
-        var func;
-
-        var timeoutHandle = setTimeout(func = function () {
-            if(!document.querySelector("video-controlbar").dropClicked) {
-              document.querySelector("video-controlbar").showSubtitlesMenu=!document.querySelector("video-controlbar").showSubtitlesMenu;
-              document.querySelector(".video-dropdown-menu").style.display="none";
-            } else {
-              window.clearTimeout(timeoutHandle);
-              timeoutHandle = window.setTimeout(func, 3000);
-              document.querySelector("video-controlbar").dropClicked=false;
-            }
-          }, 3000);
-        this.dropClicked = false;
       },
 
       changeSubtitles: function(event) {

diff --git a/video-player.html b/video-player.html
@@ -273,18 +273,31 @@
       subtitlesBindings: function() {
         //assuming the first video stream has the subs tracks
         var trackElements = (this.getEffectiveChildren()[0]).getEffectiveChildNodes();
-        for (var i=0; i<trackElements.length; i++) {
+        for (var i=0, j=0; i<trackElements.length; i++) {
           if (trackElements[i] instanceof HTMLElement) {
             trackElements[i].setAttribute("hidden", true);
             this.getEffectiveChildren()[0].$$("video").appendChild(trackElements[i]);
             var ListItem = document.createElement("li");
             ListItem.className = "languageselectionentry";
             ListItem.setAttribute("data-srclang", trackElements[i].getAttribute("srclang"));
-            ListItem.setAttribute("data-index", i);
+            ListItem.setAttribute("data-index", ++j);
             ListItem.setAttribute("data-label", trackElements[i].getAttribute("label"));
+            //ListItem.setAttribute("padding", "8px 0px");
             var lang=document.createElement("span");
             lang.innerHTML=trackElements[i].getAttribute("srclang").toUpperCase();
             ListItem.appendChild(lang);
+
+            var queryString = ".languageselectionentry[data-srclang='"+trackElements[i].getAttribute("srclang")+"']";
+            ListItem.addEventListener("mouseover", function () {
+                  if ((!document.querySelector("video-controlbar").currentSubLang)||(!(document.querySelector("video-controlbar").currentSubLang===event.target.parentElement.getAttribute("data-srclang")))) { 
+                    event.target.style.color = 'rgba(255, 255, 255, 0.6)';
+                  }
+                });
+            ListItem.addEventListener("mouseout", function () {
+                  if ((!document.querySelector("video-controlbar").currentSubLang)||(!(document.querySelector("video-controlbar").currentSubLang===event.target.parentElement.getAttribute("data-srclang")))) { 
+                    event.target.style.color = 'rgba(255, 255, 255, 0.3)';
+                  }
+                });
             this.$$("video-controlbar").$$(".video-dropdown-menu").appendChild(ListItem);
             ListItem.onclick=this.$$("video-controlbar").changeSubtitles;
           }