From 07f9f3d1e18d72d198f454105f071115a50e71a8 Mon Sep 17 00:00:00 2001
From: Ignacio <icarbajop@gmail.com>
Date: Sat, 6 Jan 2024 23:48:28 +0800
Subject: [PATCH] Add songs section

---
 .../react-ui/src/containers/Panel/Panel.tsx   | 12 ++++++
 .../RecordsSection/RecordsSection.tsx         | 14 +++++++
 .../RecordsSection/screens/RecordsList.tsx    | 42 +++++++++++++++++++
 .../cantonese/songs/kay-tse-saan-lam-dou.ts   | 25 +++++++++++
 4 files changed, 93 insertions(+)
 create mode 100644 packages/react-ui/src/languages/cantonese/songs/kay-tse-saan-lam-dou.ts

diff --git a/packages/react-ui/src/containers/Panel/Panel.tsx b/packages/react-ui/src/containers/Panel/Panel.tsx
index 4fcb87a0..f52efd6f 100644
--- a/packages/react-ui/src/containers/Panel/Panel.tsx
+++ b/packages/react-ui/src/containers/Panel/Panel.tsx
@@ -408,6 +408,18 @@ const Panel = ({
         onRecordsClose={() => {
           setShowingRecordsInitScreen('')
         }}
+        onSongLoad={lyrics => {
+          onPracticeSourceChange()
+          const newFragments = {
+            index: 0,
+            list: lyrics,
+          }
+
+          setFragments(newFragments)
+
+          storage.setValue('fragments', JSON.stringify(newFragments))
+          setShowingRecordsInitScreen('')
+        }}
         pronunciation={pronunciationValue}
         selectedLanguage={selectedLanguage}
         services={services}
diff --git a/packages/react-ui/src/containers/RecordsSection/RecordsSection.tsx b/packages/react-ui/src/containers/RecordsSection/RecordsSection.tsx
index 81fc16a5..0b590477 100644
--- a/packages/react-ui/src/containers/RecordsSection/RecordsSection.tsx
+++ b/packages/react-ui/src/containers/RecordsSection/RecordsSection.tsx
@@ -7,6 +7,16 @@ import RecordsWrapper from './RecordsWrapper'
 import RecordSave, { RecordToSave } from './screens/RecordSave'
 import RecordsList from './screens/RecordsList'
 
+const songs = [
+  {
+    artist: 'Kay Tse',
+    lang: 'cantonese',
+    load: () => import('../../languages/cantonese/songs/kay-tse-saan-lam-dou'),
+    name: '山林道',
+    video: 'https://www.youtube.com/watch?v=W4q4XHhDM-c',
+  },
+]
+
 export enum RecordsScreen {
   Edit = 'edit',
   List = 'list',
@@ -46,6 +56,7 @@ type IProps = {
   initScreen: RecordsScreen
   onRecordLoad: (r: Record) => void
   onRecordsClose: () => void
+  onSongLoad: (s: string[]) => void
   pronunciation: string
   selectedLanguage: LanguageDefinition['id']
   services: T_Services
@@ -56,6 +67,7 @@ const RecordsSection = ({
   initScreen,
   onRecordLoad,
   onRecordsClose,
+  onSongLoad,
   pronunciation,
   selectedLanguage,
   services,
@@ -198,7 +210,9 @@ const RecordsSection = ({
         onRecordEdit={handleRecordEdit}
         onRecordLoad={handleRecordLoad}
         onRecordRemove={handleRecordRemove}
+        onSongLoad={onSongLoad}
         records={records}
+        songs={songs}
       />
     </RecordsWrapper>
   )
diff --git a/packages/react-ui/src/containers/RecordsSection/screens/RecordsList.tsx b/packages/react-ui/src/containers/RecordsSection/screens/RecordsList.tsx
index 3340f8ca..e025a0ab 100644
--- a/packages/react-ui/src/containers/RecordsSection/screens/RecordsList.tsx
+++ b/packages/react-ui/src/containers/RecordsSection/screens/RecordsList.tsx
@@ -43,18 +43,30 @@ const formatRecordDate = (d: number): string => {
   return `[${dateStr}]`
 }
 
+type Song = {
+  artist: string
+  lang: string
+  load: () => Promise<{ lyrics: string[] }>
+  name: string
+  video: string
+}
+
 type RecordsListProps = {
   onRecordEdit: (r: Record) => void
   onRecordLoad: (r: Record) => void
   onRecordRemove: (r: Record) => void
+  onSongLoad: (s: string[]) => void
   records: Record[]
+  songs: Song[]
 }
 
 const RecordsList = ({
   onRecordEdit,
   onRecordLoad,
   onRecordRemove,
+  onSongLoad,
   records,
+  songs,
 }: RecordsListProps) => {
   const [filterValue, setFilterValue] = useState<string>('')
   const filteredRecords = Record.filterByText({
@@ -125,6 +137,36 @@ const RecordsList = ({
             </div>
           )
         })}
+        {songs.map(song => {
+          const { artist, lang, load, name, video } = song
+
+          return (
+            <div key={name + artist} style={{ padding: 10 }}>
+              <Cell label="Name" value={name} />
+              <Cell title="Artist" value={artist} />
+              <Cell bold title="Language" value={lang} />
+              {video && (
+                <a
+                  href={video}
+                  style={{ marginRight: 15 }}
+                  target="_blank"
+                  title={video}
+                >
+                  Video
+                </a>
+              )}
+              <Button
+                onClick={() => {
+                  load().then(({ lyrics }) => {
+                    onSongLoad(lyrics)
+                  })
+                }}
+              >
+                Load
+              </Button>
+            </div>
+          )
+        })}
       </div>
     </div>
   )
diff --git a/packages/react-ui/src/languages/cantonese/songs/kay-tse-saan-lam-dou.ts b/packages/react-ui/src/languages/cantonese/songs/kay-tse-saan-lam-dou.ts
new file mode 100644
index 00000000..1271b9c4
--- /dev/null
+++ b/packages/react-ui/src/languages/cantonese/songs/kay-tse-saan-lam-dou.ts
@@ -0,0 +1,25 @@
+export const lyrics = [
+  '昨日是 小小鬥志, 祈求突破悶局 闖一次, 劈下樹 開山兩次, 由無路 變吋吋 慢慢移',
+
+  '要實現 當天壯語, 沿途活得相當 有意義, 今天也算 爲世間貢獻, 卻怕轉折處 欠勵志',
+
+  '妄想 這裡有天 會由樹 變成路, 一醒覺 經已殺出 這條路, 叢林萬里 別攔著我, 舊時熱情又急躁 不看地圖',
+
+  '我只盼 這裡有天 變回樹 撤回路, 疏忽了 趕快去補 趁還未老, 遺落美好枝~~葉 換到好前途 皆負數, 時候不早了 但總算 知道',
+
+  '我活著 只因我愛 然而沒法事事 都裝載, 昨日共 青春競賽 狼忙像 錯過了 沒後來',
+
+  '吃玩睡 身邊至愛 流程外的統統 當障礙, 花花世界 用半生灌溉 我卻荒廢了 某樹海',
+
+  '當初說 這裡有天 會由樹 變成路, 一醒覺 經已殺出 這條路, 叢林萬里 別攔著我, 舊時熱情又急躁 不看地圖',
+
+  '我只盼 這裡有天 變回樹 撤回路, 疏忽了 趕快去補 趁還未老, 遺落美好枝~~葉 換到好前途 皆負數, 無謂到 所有樹枯了 才環抱',
+
+  '那蔥綠年華 及態度, 若未忘未棄 就拾回原稿, 回去 原地照計劃來做',
+
+  '初出發那天 盼由樹 變成路, 一醒覺 經已殺出 這條路, 人情物理 直行直過, 若然後遺未清掃 可否盡掃',
+
+  '太意想不到 一切困境 會平定 變成路, 犧牲最寶貴那些 也難料到, 然後賺了獎~~項 又想走回頭 改定數, 時候不早了 別等到 情懷老',
+
+  '問我初衷 鏗鏘的答 不吞吐',
+]