From 599c214ec4aa5dfcffb14d68dbd9b56eb0df2e9d Mon Sep 17 00:00:00 2001
From: "Yann Esposito (Yogsototh)" <Yann.Esposito@gmail.com>
Date: Fri, 28 Aug 2015 23:19:36 +0200
Subject: [PATCH] nicer effects

---
 src/apintro/message.cljs | 26 ++++++++++++++----------
 src/apintro/vgapi.cljs   | 44 +++++++++++++++++++++++++---------------
 2 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/src/apintro/message.cljs b/src/apintro/message.cljs
index 6ecfc84..96fde52 100644
--- a/src/apintro/message.cljs
+++ b/src/apintro/message.cljs
@@ -22,7 +22,8 @@
 (defn user-name [message params]
   "display user screen name as message header section"
   (if (:reshared message)
-    [:div
+    [:div {:style {:text-decoration "underline"
+                   :font-weight "bold"}}
      ;;double display with original author if RT
      [:div {:class "retweeted_holder"}
       [:p {:style {:cursor "pointer"}
@@ -46,7 +47,8 @@
 
 
     ;; simple display otherwise
-    [:div {:class "username_holder "}
+    [:div {:style {:text-decoration "underline"
+                   :font-weight "bold"}}
      [:p {:style {:cursor "pointer"}
           :on-click #(open (str "http://www.twitter.com/"
                                 (:user-screen_name message)))
@@ -81,7 +83,8 @@
 (defn publish-date
   "Display the publication date in timeago format."
   [message]
-  [:span (:pub_date_epoch_ms message)])
+  [:div {:style {:opacity 0.5}}
+   (.toISOString (js/Date. (:pub_date_epoch_ms message)))])
 
 (defn actions-holder [message params]
   "twitter actions for a message"
@@ -118,8 +121,8 @@
                     (:user-profile_image_url message))
         _ (when-not image-url (println "image-url nil: " message))
         author-page (author-page-url message)]
-    [:img {:style {:height height
-                   :width width
+    [:img {:style {:max-height "100%"
+                   :max-width "30%"
                    :margin-right "2%"
                    :cursor "pointer"
                    :float "left"
@@ -133,7 +136,6 @@
                         (get-in message [:retweeted_status :text])
                         (:text message))]
     [:p {:style {:cursor "pointer"
-                 :font-size "0.8em"
                  :line-height "1.2em"}
          :on-click #(let [target (js/$ (aget % "target"))
                           el-type (aget target 0 "localName")]
@@ -145,13 +147,15 @@
 (defn message [message & params]
   "Message component"
   (when message
-    [:div {:style {:height "250px" :width "23%" :overflow "hidden" :float "left"
+    [:div {:style {:height "120px"
+                   :width "100%"
+                   :font-size "0.5em"
+                   :overflow "hidden"
                    :border "solid 1px rgba(0,0,0,0.3)"
                    :background "rgba(0,0,0,0.1)"
                    :margin "0.5%"
                    }}
-     [:div
-      [user-pic {:message message :width "30%"}]
-      [user-name message params]
-      [text message]]
+     [user-pic {:message message}]
+     [user-name message params]
+     [text message]
      [actions-holder message params]]))
diff --git a/src/apintro/vgapi.cljs b/src/apintro/vgapi.cljs
index 38e93fb..1dacd61 100644
--- a/src/apintro/vgapi.cljs
+++ b/src/apintro/vgapi.cljs
@@ -30,7 +30,7 @@
   (smart-si
    (fn []
      (go (let [now  (.getTime (new js/Date))
-               from (.toISOString (new js/Date (- now (+ interval (* 60 1000)))))
+               from (.toISOString (new js/Date (- now (+ (* 2 interval) (* 60 1000)))))
                to   (.toISOString (new js/Date (- now (* 60 1000))))
                response (<! (http/get (str "http://dev.api.vigiglo.be/api" route)
                                       {:query-params (into {:project_id (gets [prefix :project-id])
@@ -52,10 +52,10 @@
        (sets [prefix :volume] new-size)))))
 
 (defn get-messages [prefix]
-  (let [interval 1000]
+  (let [interval 10000]
     (get-datas-every
       prefix
-     "/content/v1/messages" {:limit (* 20 (/ interval 100))} interval
+     "/content/v1/messages" {:limit (* 30 (/ interval 1000))} interval
      (fn [res]
        (let [now (.getTime (new js/Date))]
          (sets [prefix :msg-time] now)
@@ -89,19 +89,31 @@
 ;; View
 ;; ------------------------------------------------------------------------------
 (defn view-tweets [state]
-  (let [ease (animation/easer 1.0)]
-    [:div {:style {:text-align "left"
-                   :line-height "2em"
-                   :opacity (rx @ease)
-                   :overflow "hidden"
-                   :height "50vh"
-                   :border "solid 1px red"
-                   :font-family "Futura, sans-serif"}
-          :node/on-attached (fn [node callback]
-                              (animation/start-easing! ease 1.0 0.0 1000 animation/quad-in callback))
-           }
-     (for [tweet (:messages state)]
-       [message tweet])]))
+  (when (:messages state)
+    (let [ease (animation/easer 1.0)
+          tweets (:messages state)
+          max-sec (reduce max 0 (map :pub_date_epoch_ms tweets))
+          tweets-by-sec (clojure.set/index (set tweets) [:pub_date_epoch_ms])
+          ]
+      [:div {:style {:text-align "left"
+                     :line-height "2em"
+                                        ; :opacity (rx @ease)
+                     :overflow "hidden"
+                     :height "50vh"
+                     :font-family "Futura, sans-serif"}
+             :node/on-attached (fn [node callback]
+                                 (animation/start-easing! ease 1.0 0.0 20000 animation/linear callback))
+             }
+       (for [tweet-sec (keys tweets-by-sec)]
+         (let [nb (/ (- max-sec (:pub_date_epoch_ms tweet-sec)) 1000)]
+           [:div {:style {:position "absolute"
+                          :bottom "0"
+                          :left (rx (str (* (- (* 10 @ease) nb) 23) "%"))
+                          :width "22%"
+                          }
+                  }
+            (for [tweet (get tweets-by-sec tweet-sec)]
+              [message tweet])]))])))
 
 (defn view-volume [state]
   [:div