simon/japji
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Tidying up CSS, trying to get sound recording to work. Realise this machine has no microphone!

Browse source
This commit is contained in:
Simon Brooke 2025-09-27 15:40:56 +01:00
parent 0f06fb501f
commit 5849a8b0f3
4 changed files with 1735 additions and 1743 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
resources/public/css/style.css
View file

@ -1,8 +1,96 @@
@font-face { @font-face {
font-family: Bulara; font-family: Bulara;
src: url(../fonts/bulara_5.ttf); src: url(../fonts/bulara_5.ttf);
font-weight: normal;
} }
#content { @font-face {
font-family: Bulara; font-family: 'Noto Sans Gurmukhi';
src: url(../fonts/NotoSansGurmukhi-Medium.ttf);
font-weight: normal;
}
body {
/* colours taken from
* https://www.sikhiwiki.org/index.php/File:Guru_Granth_Sahib_By_Bhai_Pratap_Singh_Giani.jpg */
background-color: #f8e1cf;
color: #331f16;
padding: 5% 20%;
font-size: x-large;
font-family: sans-serif;
}
footer {
border-top: thin solid #331f16;
font-size: medium;
padding: 4em 0 0.5em 0;
text-align: center;
}
.phrase:nth-child(even) {
background-color: #ddc9b9;
color: #331f16;
}
/* #popup {
position: absolute;
display: none;
background-color: whitesmoke;
z-index: 10;
} */
#popup-closebox {
float: right;
/* text-align: right; */
padding: 0.1em 0.5em;
}
#popup-closebox,
#popup-record-stop {
color: red;
}
#popup-content {
border: thin solid #331f16;
background-color: whitesmoke;
position: absolute;
display: block;
z-index: 10
}
#popup-controls {
border: thin solid #331f16;
padding: 0.25em 1em;
width: 100%;
}
#popup-phrase {
text-align: center;
margin: 0;
font-size: 2em;
}
#popup-titlebar {
background-color: #331f16;
color: red;
height: 1.2em;
width: 100%;
}
.gurmukhi {
font-family: "Noto Sans Gurmukhi", Bulara;
}
.play-control {
font-family: sans-serif;
}
.popup-launcher {
float: right;
}
@media all and (max-device-width: 768px) {
body {
margin: 0 5%;
}
} }

72
resources/public/index.html
View file

@ -4,77 +4,7 @@
<head> <head>
<!-- Copyright: Simon Brooke and Lucy Fyfe 2025 --> <!-- Copyright: Simon Brooke and Lucy Fyfe 2025 -->
<title>Japji Sahib</title> <title>Japji Sahib</title>
<style> <link rel="stylesheet" type="text/css" href="css/style.css">
@font-face {
font-family: Bulara;
src: url(fonts/bulara_5.ttf);
font-weight: normal;
}
@font-face {
font-family: 'Noto Sans Gurmukhi';
src: url(fonts/NotoSansGurmukhi-Medium.ttf);
font-weight: normal;
}
body {
/* colours taken from
* https://www.sikhiwiki.org/index.php/File:Guru_Granth_Sahib_By_Bhai_Pratap_Singh_Giani.jpg */
background-color: #f8e1cf;
color: #331f16;
padding: 5% 20%;
font-size: x-large;
font-family: sans-serif;
}
footer {
border-top: thin solid #331f16;
font-size: medium;
padding: 4em 0 0.5em 0;
text-align: center;
}
/* #popup {
position: absolute;
display: none;
background-color: whitesmoke;
z-index: 10;
} */
#popup-phrase {
text-align: center;
margin: 0;
font-size: 2em;
}
#popup-close-box {
float: right;
text-align: right;
}
#popup-record-stop,
#popup-close-box {
color: red;
}
.gurmukhi {
font-family: "Noto Sans Gurmukhi", Bulara;
}
.play-control {
font-family: sans-serif;
}
.popup-launcher {
float: right;
}
@media all and (max-device-width: 768px) {
body {
margin: 0 5%;
}
}
</style>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta Content-Language="pa, en-GB"> <meta Content-Language="pa, en-GB">
<script src="scripts/scittle.js" type="text/javascript"></script> <script src="scripts/scittle.js" type="text/javascript"></script>

2
resources/public/js/scittle.js
View file

@ -1,7 +1,7 @@
var shadow$provide = {}; var shadow$provide = {};
var CLOSURE_NO_DEPS = true; var CLOSURE_NO_DEPS = true;
var CLOSURE_BASE_PATH = '/js/cljs-runtime/'; var CLOSURE_BASE_PATH = '/js/cljs-runtime/';
var CLOSURE_DEFINES = {"shadow.cljs.devtools.client.env.repl_pprint":true,"shadow.cljs.devtools.client.env.reload_strategy":"optimized","shadow.cljs.devtools.client.env.devtools_url":"","shadow.cljs.devtools.client.env.autoload":true,"shadow.cljs.devtools.client.env.proc_id":"e0125c76-3c44-423b-9581-c966fb3a8c47","shadow.cljs.devtools.client.env.use_document_protocol":false,"goog.ENABLE_DEBUG_LOADER":false,"shadow.cljs.devtools.client.env.server_port":9630,"shadow.cljs.devtools.client.env.server_token":"ca420fcb-fc2f-467a-8312-a2f4d2ca0255","shadow.cljs.devtools.client.env.use_document_host":true,"shadow.cljs.devtools.client.env.module_format":"goog","goog.LOCALE":"en","shadow.cljs.devtools.client.env.build_id":"main","shadow.cljs.devtools.client.env.ignore_warnings":false,"goog.DEBUG":true,"shadow.cljs.devtools.client.env.log":true,"shadow.cljs.devtools.client.env.ssl":false,"shadow.cljs.devtools.client.env.enabled":true,"shadow.cljs.devtools.client.env.server_host":"localhost","shadow.cljs.devtools.client.env.worker_client_id":2,"goog.TRANSPILE":"never"}; var CLOSURE_DEFINES = {"shadow.cljs.devtools.client.env.repl_pprint":true,"shadow.cljs.devtools.client.env.reload_strategy":"optimized","shadow.cljs.devtools.client.env.devtools_url":"","shadow.cljs.devtools.client.env.autoload":true,"shadow.cljs.devtools.client.env.proc_id":"59431359-a1d8-4982-b8e6-d1a7585a13aa","shadow.cljs.devtools.client.env.use_document_protocol":false,"goog.ENABLE_DEBUG_LOADER":false,"shadow.cljs.devtools.client.env.server_port":9630,"shadow.cljs.devtools.client.env.server_token":"622b7cb6-3708-47c0-bf9e-19cfed50203c","shadow.cljs.devtools.client.env.use_document_host":true,"shadow.cljs.devtools.client.env.module_format":"goog","goog.LOCALE":"en","shadow.cljs.devtools.client.env.build_id":"main","shadow.cljs.devtools.client.env.ignore_warnings":false,"goog.DEBUG":true,"shadow.cljs.devtools.client.env.log":true,"shadow.cljs.devtools.client.env.ssl":false,"shadow.cljs.devtools.client.env.enabled":true,"shadow.cljs.devtools.client.env.server_host":"localhost","shadow.cljs.devtools.client.env.worker_client_id":2,"goog.TRANSPILE":"never"};
var COMPILED = false; var COMPILED = false;
var goog = goog || {}; var goog = goog || {};
goog.global = this || self; goog.global = this || self;

66
resources/public/scripts/japji.cljs
View file

@ -1623,8 +1623,7 @@
{:text "ਨਿਰੰਕਾਰ", :start 481.579, :end 483.117} {:text "ਨਿਰੰਕਾਰ", :start 481.579, :end 483.117}
{:text "॥੧੯॥"}], {:text "॥੧੯॥"}],
:lineStart 480.371, :lineStart 480.371,
:lineEnd 483.117}] :lineEnd 483.117}])
)
(.log js/console (str "Data has " (count data) " entries")) (.log js/console (str "Data has " (count data) " entries"))
@ -1633,8 +1632,6 @@
(def student-recordings (atom (apply vector (repeat (count data) nil)))) (def student-recordings (atom (apply vector (repeat (count data) nil))))
(defn enable-play-button! [phrase-no])
(defn record-student-sound! (defn record-student-sound!
[phrase-no] [phrase-no]
(.info js/console "Recording student sound for phrase " phrase-no) (.info js/console "Recording student sound for phrase " phrase-no)
@ -1644,7 +1641,6 @@
(fn [arg] (fn [arg]
(let [media-recorder (js/MediaRecorder. arg) (let [media-recorder (js/MediaRecorder. arg)
audio-chunks (atom [])] audio-chunks (atom [])]
(.start media-recorder)
(set! (.-onerror media-recorder) (set! (.-onerror media-recorder)
(fn [s] (fn [s]
(.log js/console (str "Error while recording sound: " s)))) (.log js/console (str "Error while recording sound: " s))))
@ -1655,12 +1651,10 @@
(set! (.-onstop media-recorder) (set! (.-onstop media-recorder)
(fn [e] (fn [e]
(js/console.log "data available after MediaRecorder.stop() called.") (js/console.log "data available after MediaRecorder.stop() called.")
(if (> (count @audio-chunks) 0) (when (> (count @audio-chunks) 0)
(do
;; Store the blob in the student-recordings data structure
(swap! student-recordings assoc phrase-no (swap! student-recordings assoc phrase-no
(js/Blob. (clj->js @audio-chunks))) (js/Blob. (clj->js @audio-chunks))))))
(enable-play-button! phrase-no)))))))) (.start media-recorder))))
(catch js/Error e (catch js/Error e
(.log js/console (.log js/console
(str "Error thrown while recording sound: " (.-message e)))) (str "Error thrown while recording sound: " (.-message e))))
@ -1687,12 +1681,12 @@
(.log js/console (str "Playing recording from " start " to " end)) (.log js/console (str "Playing recording from " start " to " end))
(let [clone (.cloneNode audio true)] (let [clone (.cloneNode audio true)]
(set! (.-currentTime clone) start) (set! (.-currentTime clone) start)
(.log js/console (str "current time now set to " (.-currentTime clone))) (.log js/console (str "current time now set to " (.-currentTime clone) "; start is " start "; end is " end))
(.play clone) (.play clone)
(set! (.-int clone) (set! (.-int clone)
(.setInterval js/window (.setInterval js/window
(interval-watcher clone end) (interval-watcher clone end)
10)))) (- end start)))))
(defn markup-word [record phrase-no word-no] (defn markup-word [record phrase-no word-no]
[:span {:class "word, gurmukhi" [:span {:class "word, gurmukhi"
@ -1706,9 +1700,6 @@
(when popup (when popup
(rdom/render "" popup)))) (rdom/render "" popup))))
(def popup-control-style {:border "thin solid #331f16"
:padding "0 0.5em"})
(defn play-student! (defn play-student!
[phrase-no] [phrase-no]
(.play (js/Audio. (.createObjectURL js/URL (@student-recordings phrase-no))))) (.play (js/Audio. (.createObjectURL js/URL (@student-recordings phrase-no)))))
@ -1721,8 +1712,7 @@
e (.getElementById js/document id)] e (.getElementById js/document id)]
(when (< i 99) (when (< i 99)
(js/setTimeout (js/setTimeout
#(do (.setAttribute e "value" i) #(.setAttribute e "value" i) (* i progress-step))
(.info js/console (str "progress-width updated to " i))) (* i progress-step))
(recur (inc i) e))))) (recur (inc i) e)))))
(defn record-student! [phrase-no] (defn record-student! [phrase-no]
@ -1738,49 +1728,33 @@
;; initially styled; so style needs to be embedded. ;; initially styled; so style needs to be embedded.
(let [popup (.getElementById js/document "popup") (let [popup (.getElementById js/document "popup")
phrase-data (nth data phrase-no) phrase-data (nth data phrase-no)
duration (- (:lineEnd phrase-data) (:lineStart phrase-data))
progress-width (atom 0)
progress-step (int (* duration 10))
content [:div {:id "popup-content" content [:div {:id "popup-content"
:style {:border "thin solid #331f16" :style {:left (- (.-pageX event) 100)
:background-color "whitesmoke" :top (.-pageY event)}}
:left (- (.-pageX event) 100) [:div {:id "popup-titlebar"}
:top (.-pageY event)
:position "absolute"
:display "block"
:z-index 10}}
[:div {:style {:background-color "#331f16"
:color "red"
:height "1.2em"
:width "100%"}}
[:span {:id "popup-closebox" :on-click #(close-popup) [:span {:id "popup-closebox" :on-click #(close-popup)
:title "Close popup" :title "Close popup"} " x "]]
:style {:float "right"}} "x"]]
(apply vector (concat [:p {:id "popup-phrase" :class "gurmukhi"}] (apply vector (concat [:p {:id "popup-phrase" :class "gurmukhi"}]
(map #(markup-word %1 phrase-no %2) (:words phrase-data) (range)))) (map #(markup-word %1 phrase-no %2) (:words phrase-data) (range))))
[:table {:id "popup-controls" [:table {:id "popup-controls"
:summary "Controls for audio playback and recording" :summary "Controls for audio playback and recording"}
:style {:border "thin solid #331f16"
:padding "0.25em 1em"
:width "100%"}}
[:tr [:td "Tutor"] [:td {:id "popup-play-tutor" [:tr [:td "Tutor"] [:td {:id "popup-play-tutor"
:class "popup-control"
:on-click #(play-segment recording :on-click #(play-segment recording
(:lineStart phrase-data) (:lineStart phrase-data)
(:lineEnd phrase-data)) (:lineEnd phrase-data))
:style popup-control-style
:title "Play the tutor's recording"} :title "Play the tutor's recording"}
"►"]] "►"]]
[:tr [:td "You"] [:tr [:td "You"]
(when (@student-recordings phrase-no) [:td [:button {:id "popup-play-student"
[:td {:id "popup-play-student" :class "popup-control"
:on-click #(play-student! phrase-no) :on-click #(play-student! phrase-no)
:style popup-control-style :disabled (nil? (@student-recordings phrase-no))
:title "Play your own recording"} "►"]) :title "Play your own recording"} "►"]]
[:td {:id "popup-record-stop" [:td [:button {:id "popup-record-stop"
:class "popup-control"
:on-click #(record-student! phrase-no) :on-click #(record-student! phrase-no)
:style popup-control-style :title "Record yourself saying this phrase"} "⏺"]]]
:title "Record yourself saying this phrase"}
"⏺"]]
[:tr [:td {:id "progress" [:tr [:td {:id "progress"
:colspan 3} :colspan 3}
[:progress {:id "progress-bar" [:progress {:id "progress-bar"