From 4477dcfb95eefe7f47895720eec6f2ae2ceca501 Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Sun, 15 Dec 2024 22:15:31 +0800 Subject: [PATCH] fix: set aspect ratio for youtube video player --- src/main/frontend/components/block.css | 5 +++++ src/main/frontend/extensions/video/youtube.cljs | 16 +++++++--------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/main/frontend/components/block.css b/src/main/frontend/components/block.css index fdae2d9560b..256b47d26df 100644 --- a/src/main/frontend/components/block.css +++ b/src/main/frontend/components/block.css @@ -1062,3 +1062,8 @@ html.is-mac { transition: background-color 0.2s cubic-bezier(0, 1, 0, 1); background-color: var(--ls-secondary-background-color, var(--rx-gray-03)); } + +.aspect-video { + width: auto; + aspect-ratio: 16 / 9; +} diff --git a/src/main/frontend/extensions/video/youtube.cljs b/src/main/frontend/extensions/video/youtube.cljs index 4f94912b0df..2ae13fcb355 100644 --- a/src/main/frontend/extensions/video/youtube.cljs +++ b/src/main/frontend/extensions/video/youtube.cljs @@ -59,7 +59,7 @@ url (if start (str url "&start=" start) url)] - [:iframe + [:iframe.aspect-video {:id (str "youtube-player-" id) :allow-full-screen "allowfullscreen" :allow "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope" @@ -99,7 +99,6 @@ id (str/replace-first id #"youtube-player-" "")] (get (get @state/state :youtube/players) id)))) - (rum/defc timestamp [seconds] [:a.svg-small.youtube-timestamp @@ -121,7 +120,6 @@ Remember: You can paste a raw YouTube url as embedded video on mobile." false) nil))) - (defn parse-timestamp [timestamp'] (let [reg #"^(?:(\d+):)?([0-5]?\d):([0-5]?\d)$" reg-number #"^\d+$" @@ -145,13 +143,13 @@ Remember: You can paste a raw YouTube url as embedded video on mobile." (re-matches #"^(?:(\d+):)?([0-5]?\d):([0-5]?\d)$" "123:22:23") ;; => ["123:22:23" "123" "22" "23"] (re-matches #"^(?:(\d+):)?([0-5]?\d):([0-5]?\d)$" "30:23") ;; => ["30:23" nil "30" "23"] - (parse-timestamp "01:23") ;; => 83 + (parse-timestamp "01:23") ;; => 83 - (parse-timestamp "01:01:23") ;; => 3683 + (parse-timestamp "01:01:23") ;; => 3683 ;; seconds->display ;; https://stackoverflow.com/questions/1322732/convert-seconds-to-hh-mm-ss-with-javascript - (seconds->display 129600) ;; => "36:00:00" - (seconds->display 13545) ;; => "03:45:45" - (seconds->display 18) ;; => "00:18" - ) + (seconds->display 129600) ;; => "36:00:00" + (seconds->display 13545) ;; => "03:45:45" + (seconds->display 18) ;; => "00:18" + )