[WIP] Video Options Menu and OPML Export Fix

src/js/channels.js

@@ -84,7 +84,7 @@ function goToChannel(channelId) {
 
       grabDuration.then((videoList) => {
         videoList.items.forEach((video) => {
-          displayVideo(video, 'history');
+          displayVideo(video);
         });
       });
     });

src/js/events.js

@@ -200,7 +200,7 @@ let videoShortcutHandler = function(event) {
 };
 
 let fullscreenVideo = function(event){
-  $('.videoPlayer').get(0).webkitRequestFullscreen()
+  $('.videoPlayer').get(0).webkitRequestFullscreen();
 }
 
 /**

src/js/layout.js

@@ -300,3 +300,13 @@ function removeMouseTimeout(){
   $('.videoPlayer')[0].style.cursor = 'default';
   clearTimeout(mouseTimeout);
 }
+
+function showVideoOptions(element){
+    console.log(element.nextElementSibling.style.display);
+    if (element.nextElementSibling.style.display == 'none' || element.nextElementSibling.style.display == ''){
+      element.nextElementSibling.style.display = 'inline-block'
+    }
+    else{
+      element.nextElementSibling.style.display = 'none'
+    }
+}

src/js/settings.js

@@ -231,7 +231,7 @@ function setTheme(option) {
 * @return {Void}
 */
 function importOpmlSubs(json){
-  if(json[0]['folder'] !== 'YouTube Subscriptions'){
+  if(!json[0]['folder'].includes('YouTube')){
     showToast('Invalid OPML File.  Import is unsuccessful.');
     return;
   }

src/style/player.css

@@ -27,6 +27,35 @@ iframe {
   width: 100%;
 }
 
+.videoOptions {
+  float: right;
+  width: 50px;
+}
+
+.videoOptions i {
+  text-align: right;
+  width: 50px;
+  cursor: pointer;
+}
+
+.videoOptions ul {
+  width: 75px;
+  font-size: 12px;
+  position: relative;
+  right: 75px;
+  bottom: 10px;
+  background-color: #f5f5f5;
+  list-style-type: none;
+  display: none;
+}
+
+.videoOptions li {
+  width: 125px;
+  position: relative;
+  right: 40px;
+  padding: 10px;
+}
+
 .videoTitle {
   font-weight: bold;
   margin-left: 285px;

src/templates/videoList.html

@@ -1,5 +1,13 @@
 <div class='video'>
   {{{deleteHtml}}}
+  <div class='videoOptions'>
+    <i class="fas fa-ellipsis-v" onclick='showVideoOptions(this)'></i>
+    <ul>
+      <li>Open in YouTube</li>
+      <li>Open in HookTube</li>
+      <li>Save Video</li>
+    </ul>
+  </div>
   <div class='videoThumbnail'>
     <img onclick='playVideo("{{videoId}}")' src={{videoThumbnail}} />
     <p onclick='playVideo("{{videoId}}")' class='videoDuration'>{{videoDuration}}</p>