Work on thumbnails, hide YT video annotations

frankhale · Sep 4, 2015 · 5045b03 · 5045b03
1 parent acbd15e
commit 5045b03
Show file tree

Hide file tree

Showing 7 changed files with 359 additions and 344 deletions.
diff --git a/README.md b/README.md
@@ -137,7 +137,7 @@ How to run master in Electron:
 ## Author(s)
 
 Frank Hale &lt;frankhale@gmail.com&gt;  
-31 July 2015
+4 September 2015
 
 ## License
 

diff --git a/assets/build/player.js b/assets/build/player.js
diff --git a/assets/build/toby.js b/assets/build/toby.js
diff --git a/assets/css/toby.css b/assets/css/toby.css
@@ -3,7 +3,6 @@ body {
   background-color: #111;
   color: #fff;
   overflow: hidden;
-  /*background-image: url(../images/dark.jpg);*/
   font-family: 'Quicksand', sans-serif;
 }
 input {
@@ -59,17 +58,12 @@ a {
   overflow-y: auto;
   overflow-x: hidden;
 }
-#search-results a:hover {
-  background-color: #880000;
-  color: #fff;
-}
 #recently-played {
   background-color: rgba(50, 50, 50, 0.3);
   position: absolute;
   margin-top: 10px;
   margin-left: 12px;
   border: 2px solid #777;
-  /*background-color: #333;*/
   color: #fff;
   font-size: 12pt;
   border-top-left-radius: 5px;
@@ -98,28 +92,28 @@ a {
   overflow-x: hidden;
 }
 .video-link-container {
-  /* Don't know what is going to go in here yet */
   /*border: 1px solid red;*/
 }
+.video-link-container:hover {
+  background-color: #880000;
+  color: #fff;
+}
 .video-thumbnail {
-  display: inline-block;
+  margin-top: 4px;
 }
 .video-title {
+  /*border: 1px solid blue;*/
   display: inline-block;
-  margin-left: 10px;
-  margin-left: 15px;
-  margin-top: 15px;
-  width: 575px; /* I am going to change this through code to dynamically resize it */
   vertical-align: top;
   font-size: 14pt;
+  width: 500px;
+  margin-left: 10px;
+  margin-left: 15px;
+  margin-top: 25px;
 }
 #recently-played a {
   color: #fff;
 }
-#recently-played a:hover {
-  background-color: #880000;
-  color: #FFF;
-}
 #notification {
   display: none;
   position: absolute;

diff --git a/assets/html/player.html b/assets/html/player.html
@@ -6,10 +6,6 @@
   <body>
     <div id="player"></div>
 
-    <script>
-      window._ = require('../../bower_components/lodash/lodash.min.js')
-    </script>
-
     <script src="../../bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
     <script src="http://localhost:5150/socket.io/socket.io.js" type="text/javascript"></script>
     <script src="../build/player.js" type="text/javascript"></script>

diff --git a/assets/src/player/core.cljs b/assets/src/player/core.cljs
@@ -2,7 +2,7 @@
 ; Toby - A YouTube player for the desktop
 ;
 ; Frank Hale <frankhale@gmail.com>
-; 16 July 2015
+; 4 September 2015
 ;
 ; License: GNU GPL v2
 ;
@@ -18,13 +18,22 @@
 
 (defn on-player-state-change [e]
  (let [video-info (.getVideoData (.-target e))]
-    (when-not (= @video-title video-info.title)
-      (reset! video-title video-info.title)
-      (.emit socket "video-info" video-info))))
+  (when-not (= @video-title video-info.title)
+    (reset! video-title video-info.title)
+    (.emit socket "video-info" video-info))))
 
 (defn set-webkit-filter [video-player setting value]
   (.css video-player "-webkit-filter" (str setting "(" value ")")))
 
+(defn hide-annotations []
+  ; NOTE: This may or may not be enough to stop all annotations, will revisit if I find
+  ; a video that this doesn't work on.
+  (let [video-player (.contents (js/jQuery "#player"))
+        annotations (.find video-player ".annotation")
+        legacy-annotations (.find video-player ".video-legacy-annotations")]
+    (.css annotations "display" "none")
+    (.css legacy-annotations "display" "none")))
+
 ; well clicking one of the suggested videos added the thumbnails to the recently
 ; played list, at least I did something right! LOL! =)
 
@@ -37,6 +46,7 @@
          :videoId ytid
          :playerVars #js { :autoplay 1 :autohide 1 }
          :events #js { :onStateChange on-player-state-change }}))
+       (js/setInterval hide-annotations 1000)
        (.on socket "video-settings" (fn [settings]
          (let [video-player (.find (.contents (js/jQuery "#player")) ".html5-main-video")
                grayscale-value (.-grayscale settings)
@@ -48,13 +58,7 @@
             (set-webkit-filter video-player "saturate" saturate-value))
            (when-not (= sepia-value js/undefined)
             (set-webkit-filter video-player "sepia" sepia-value))))))
-       (do
-         (.loadVideoById @player ytid))))))
-         ;(.forEach lodash
-           ;(.find (.contents (js/jQuery "#player")) ".annotation")
-           ;(fn [annotation]
-            ; (js/console.log annotation))))))))
-             ;(.-display (.-style annotation) "none"))) ; OMG, what is wrong here?
+      (.loadVideoById @player ytid)))))
 
 (aset js/window "onYouTubeIframeAPIReady" on-youtube-api-ready)
 (set! (.-src tag) "https://www.youtube.com/iframe_api")

diff --git a/assets/src/toby/core.cljs b/assets/src/toby/core.cljs
@@ -2,7 +2,7 @@
 ; Toby - A YouTube player for the desktop
 ;
 ; Frank Hale <frankhale@gmail.com>
-; 30 August 2015
+; 4 September 2015
 ;
 ; License: GNU GPL v2
 ;
@@ -294,11 +294,12 @@
   (let [browser-size (.getContentSize browser)
         recently-played (om/get-node owner "recently-played")
         recently-played-list (om/get-node owner "recently-played-list")
+        video-containers (jq/$ :.video-link-container)
         video-titles (jq/$ :.video-title)]
-    ;(js/console.log video-titles)
-    ; it'll be a miracle if this works! =)
     (.forEach lodash video-titles
       (fn [vt] (set! (.-width (.-style vt)) (str (- (first browser-size) 220) "px"))))
+    (.forEach lodash video-containers
+      (fn [vc] (set! (.-width (.-style vc)) (str (- (first browser-size) 60) "px"))))
     (set! (.-width (.-style recently-played)) (str (- (first browser-size) 30) "px"))
     (set! (.-height (.-style recently-played-list)) (str (- (last browser-size) 120) "px"))))
 
@@ -365,16 +366,33 @@
         (dom/div #js { :id "recently-played-list" :ref "recently-played-list" }
           (apply dom/div nil
             (map (fn [r]
-              (dom/div #js { :className "video-link-container" }
-                (when-not (nil? (aget r "thumbnails"))
-                  (dom/img #js { :className "video-thumbnail" :src (aget (aget (aget r "thumbnails") "default") "url") }))
-                (dom/a #js {
+              (dom/a #js {
                   :ref "video-title"
-                  :className "video-title"
+                  :className "video-link-container"
                   :href "#"
                   :data-ytid (.-ytid r)
                   :onClick (.-play-video r)
-                } (.-description r)))) (.sortBy lodash (:videos data) "description"))))))))
+                }
+                (dom/div nil
+                  (when-not (nil? (aget r "thumbnails"))
+                    (dom/img #js { :className "video-thumbnail" :src (aget (aget (aget r "thumbnails") "default") "url") }))
+                  (dom/div #js { :className "video-title" }
+                    (.-description r))))
+            ) (.sortBy lodash (:videos data) "description"))))))))
+
+
+  ; (dom/div #js { :className "video-link-container" }
+  ;   (when-not (nil? (aget r "thumbnails"))
+  ;     (dom/img #js { :className "video-thumbnail" :src (aget (aget (aget r "thumbnails") "default") "url") }))
+  ;   (dom/a #js {
+  ;     :ref "video-title"
+  ;     :className "video-title"
+  ;     :href "#"
+  ;     :data-ytid (.-ytid r)
+  ;     :onClick (.-play-video r)
+  ;   } (.-description r)))) (.sortBy lodash (:videos data) "description"))))))))
+
+
 
 ;
 ; Video playback component