enhance: add lite video

src/main/frontend/components/block.cljs

@@ -664,6 +664,29 @@
                 (not (= (:id config) "contents")))
        [:span.text-gray-500 "]]"])]))
 
+(rum/defcs tutorial-video  <
+  (rum/local true)
+  [state]
+  (let [lite-mode? (:rum/local state)]
+    [:div.tutorial-video-container.relative
+     {:style {:height 367 :width 653}}
+     (if @lite-mode?
+       [:div
+        [:img.w-full.h-full.absolute
+         {:src (if (util/electron?)
+                 "img/tutorial-thumb.jpg"
+                 "https://img.youtube.com/vi/Afmqowr0qEQ/maxresdefault.jpg")}]
+        [:button
+         {:class "absolute bg-red-300 w-16 h-16 -m-8 top-1/2 left-1/2 rounded-full"
+          :on-click (fn [_] (swap! lite-mode? not))}
+         (svg/play)]]
+       [:iframe.w-full.h-full
+        {:allow-full-screen "allowfullscreen"
+         :allow
+         "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
+         :frame-border "0"
+         :src "https://www.youtube.com/embed/Afmqowr0qEQ?autoplay=1"}])]))
+
 (declare custom-query)
 
 (defn- show-link?
@@ -992,12 +1015,7 @@
                     :width width}])))))
 
         (= name "tutorial-video")
-        (let [youtube-id "Afmqowr0qEQ"]
-          [:div.tutorial-video-container.relative
-           {:style
-            {:height 367 :width 653}}
-           [:img.w-full.h-full.absolute {:src "https://i.ytimg.com/vi/Afmqowr0qEQ/maxresdefault.jpg"}]
-           (svg/play)])
+        (tutorial-video)
 
         (= name "vimeo")
         (when-let [url (first arguments)]

src/main/frontend/components/onboarding.cljs

@@ -6,6 +6,7 @@
             [frontend.extensions.latex :as latex]
             [frontend.handler.route :as route-handler]
             [frontend.ui :as ui]
+            [frontend.util :as util]
             [rum.core :as rum]))
 
 (rum/defc intro
@@ -45,7 +46,9 @@
 
       [:img.shadow-2xl
        {:src
-        "https://cdn.logseq.com/%2F8b9a461d-437e-4ca5-a2da-18b51077b5142020_07_25_Screenshot%202020-07-25%2013-29-49%20%2B0800.png?Expires=4749255017&Signature=Qbx6jkgAytqm6nLxVXQQW1igfcf~umV1OcG6jXUt09TOVhgXyA2Z5jHJ3AGJASNcphs31pZf4CjFQ5mRCyVKw6N8wb8Nn-MxuTJl0iI8o-jLIAIs9q1v-2cusCvuFfXH7bq6ir8Lpf0KYAprzuZ00FENin3dn6RBW35ENQwUioEr5Ghl7YOCr8bKew3jPV~OyL67MttT3wJig1j3IC8lxDDT8Ov5IMG2GWcHERSy00F3mp3tJtzGE17-OUILdeuTFz6d-NDFAmzB8BebiurYz0Bxa4tkcdLUpD5ToFHU08jKzZExoEUY8tvaZ1-t7djmo3d~BAXDtlEhC2L1YC2aVQ__&Key-Pair-Id=APKAJE5CCD6X7MP6PTEA"
+        (if (util/electron?)
+          "img/screenshot.png"
+          "https://cdn.logseq.com/%2F8b9a461d-437e-4ca5-a2da-18b51077b5142020_07_25_Screenshot%202020-07-25%2013-29-49%20%2B0800.png?Expires=4749255017&Signature=Qbx6jkgAytqm6nLxVXQQW1igfcf~umV1OcG6jXUt09TOVhgXyA2Z5jHJ3AGJASNcphs31pZf4CjFQ5mRCyVKw6N8wb8Nn-MxuTJl0iI8o-jLIAIs9q1v-2cusCvuFfXH7bq6ir8Lpf0KYAprzuZ00FENin3dn6RBW35ENQwUioEr5Ghl7YOCr8bKew3jPV~OyL67MttT3wJig1j3IC8lxDDT8Ov5IMG2GWcHERSy00F3mp3tJtzGE17-OUILdeuTFz6d-NDFAmzB8BebiurYz0Bxa4tkcdLUpD5ToFHU08jKzZExoEUY8tvaZ1-t7djmo3d~BAXDtlEhC2L1YC2aVQ__&Key-Pair-Id=APKAJE5CCD6X7MP6PTEA")
         :alt "screenshot"}]
 
       [:div.flex.flex-col.ls-block.intro-docs
@@ -166,7 +169,10 @@
               :target "_blank"} "isomorphic-git"]
          (t :on-boarding/isomorphic-git-desc)]]
 
-       [:img {:src "https://asset.logseq.com/static/img/credits.png"
+       [:img {:src
+              (if (util/electron?)
+                "img/credits.png"
+                "https://asset.logseq.com/static/img/credits.png")
               :style {:margin "12px 0 0 0"}}]]]]))
 
 (defn help

templates/tutorial-en.md

@@ -21,15 +21,8 @@ some changes on the right sidebar, those referenced blocks will be changed too!
     - NOW [#A] A dummy tutorial on "How to take dummy notes?"
     - LATER [#A] Check out this awesome video by [:a {:href "https://twitter.com/TechWithEd" :target "_blank"} "@TechWithEd"], which shows how to use logseq to open your local directory.
 
-[:div.video-wrapper.mb-4
-        [:iframe
-         {:allowFullScreen "allowfullscreen"
-          :allow
-          "accelerometer; autoplay; encrypted-media; gyroscope"
-        :frameBorder "0"
-        :src "https://www.youtube.com/embed/Afmqowr0qEQ"
-        :height "367"
-        :width "653"}]]
+    {{tutorial-video}}
+
     - DONE Create a page
     - CANCELED [#C] Write a page with more than 1000 blocks
 - That's it! You can create more bullets or open a local directory to import some notes now!