Reply to thread

Message: <blockquote data-quote="Sana_s Logs" data-source="post: 31559608" data-attributes="member: 591145"><a href="https://elakiri.com/threads/%E0%B6%B8%E0%B6%9C%E0%B7%9A%E0%B6%B8-youtube-offline-music-app-%E0%B6%91%E0%B6%9A.2257231/" target="_blank">කලින් පෝස්ට් එකෙන්</a> මම කිව්වනේ මේක හදන්න ගිහින් YouTube Security එක්ක මම කරපු හැප්පීම ගැන. අද මම කතා කරන්න යන්නේ මේ වැඩේට මම පාවිච්චි කරපු Tech Stack එක ගැන. පිටින් බලද්දි සරල Music App එකක් වුණාට, මේක stable දුවන්න යටින් වෙනමම architecture එකක් වැඩ කරනවා. මගේ ප්ලෑන් එක වුණේ Frontend, Backend සහ Deployment කියන කොටස් තුනම හරිම පිළිවෙලට වෙන් කරලා හදාගන්න එකයි. මේ තියෙන්නේ මම ඒකට පාවිච්චි කරපු tools ටික:1. Frontend එක සහ Offline Storage එක මේක ෆෝන් එකේ ඇප් එකක් විදියට පේන එක සහ සම්පූර්ණයෙන්ම offline වැඩ කරන එක තමයි මෙතන ප්‍රධානම දේ.<ul> <li data-xf-list-type="ul">Next.js 16 (App Router) & React 19: මගේ ප්‍රධාන framework එක. Frontend UI එකයි, Backend API Routes ටිකයි දෙකම එකම repo එකකින් manage කරන්න මේක ගොඩක් ලේසි වුණා.</li> <li data-xf-list-type="ul">Tailwind CSS 4: YouTube Music එකට සමාන Dark UI එකක් ඉක්මනින්ම design කරගන්න පාවිච්චි කළා.</li> <li data-xf-list-type="ul">Zustand: Play වෙන සින්දුව මොකක්ද, library එකේ තියෙන්නේ මොනවාද කියලා App එකේ state එක manage කරන්න, Redux වගේ ලොකු දේවල් නැතුව හරිම සැහැල්ලු Zustand පාවිච්චි කළා.</li> <li data-xf-list-type="ul">IndexedDB (idb හරහා): App එකේ offline වැඩ කරන ප්‍රධානම කොටස. සින්දුවක් download කළාම, ඒ Audio blob එකයි, metadata ටිකයි ෆෝන් එකේම save කරලා තියාගන්නේ මේකෙන්.</li> <li data-xf-list-type="ul">Service Worker & Media Session API: Network එකක් නැතුව මුලින්ම load වෙන්න app shell එක cache කළා. ඒ වගේම ෆෝන් එක lock කරලා තියෙද්දි background playback සහ lock-screen controls හැදුවේ මේකෙන්.</li> </ul>2. Backend එක සහ Audio Acquisition YouTube එකෙන් audio එක extract කරලා ෆෝන් එකට එවන බර වැඩේ කරන්නේ මේ සෙට් එකයි:<ul> <li data-xf-list-type="ul">yt-dlp & ffmpeg: YouTube එකෙන් අදාළ media එක fetch කරන්නේ yt-dlp වලින්. ඊටපස්සේ ඒක ගොඩක් ඉඩ යන්නේ නැති වෙන්න m4a/AAC format එකට transcode කරන්නේ ffmpeg හරහා.</li> <li data-xf-list-type="ul">Deno: YouTube එකෙන් දෙන JavaScript Challenge එක solve කරන script එක run කරන්න yt-dlp එකට JS runtime එකක් ඕනේ. ඒකට තමයි server එක ඇතුළේ Deno run කළේ.</li> <li data-xf-list-type="ul">Cloudflare WARP & PO-token provider: Server IP එක datacenter IP එකක් නිසා YouTube එකෙන් bot block එකක් එන එක නවත්තන්න, egress IP එක විදියට Cloudflare WARP පාවිච්චි කළා (SOCKS5 proxy එකක් විදියට). ඒ වගේම authentication handshakes වලට PO-tokens generate කරන්න වෙනම sidecar එකක් run කළා.</li> </ul>3. Deployment සහ Orchestration මේ ඔක්කොම එකට connect කරලා run කරන්න පාවිච්චි කළේ:<ul> <li data-xf-list-type="ul">Docker Compose: Main App එක, Deno පැත්ත, WARP සහ potoken කියන ඔක්කොම වෙන වෙනම containers විදියට හදලා එකම network එකක connect කළේ Docker Compose හරහා. මේක නිසා මුළු system එකම අලුත් server එකක වුණත් deploy කරන්න මාරම ලේසියි.</li> </ul>බැලූ බැල්මට "සින්දුවක් play කරනවා" කියන දේ සරල වුණත්, මේ වගේ reliable විදියට ඒක run කරන්න මේ ඔක්කොම technologies හරියටම align වෙන්න ඕනේ. මේ විදියට stack එක හදාගත්තට පස්සේ කිසිම කරදරයක් නැතුව system එක වැඩ කරනවා.අමතර වාසියක් විදියට, මගේ server එකේ මේ හැම සින්දුවකම backup එකක් හැදෙන නිසා, ෆෝන් එකේ browser ඩේටා මැකුණත් ආයේ YouTube එකෙන් download කර කර ඉන්න ඕනෙත් නෑ. <img class="smilie smilie--emoji" loading="lazy" alt="😎" title="Smiling face with sunglasses    :sunglasses:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/1f60e.png" data-shortname=":sunglasses:" />ඉස්සරහට මේ App එක තවත් ටිකක් ලස්සන කරලා, තව features ටිකක් දාලා, ඕනම කෙනෙක්ට තමන්ගේම server එකක setup කරගන්න පුළුවන් වෙන්න Open Source Repo එකක් විදියට public කරන්න බලාපොරොත්තුවක් තියෙනවා. <img class="smilie smilie--emoji" loading="lazy" alt="🌍" title="Globe showing Europe-Africa    :earth_africa:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/1f30d.png" data-shortname=":earth_africa:" /></blockquote>

Verification: Dawasata paya keeyak thibeda?

Top Bottom