From d4c901f3236aad35e317a2a8dd19f64e3dfa3a3f Mon Sep 17 00:00:00 2001
From: Dominique Liberda <ja@sdomi.pl>
Date: Tue, 29 Nov 2022 06:47:24 -0500
Subject: [PATCH] * watch: move to the new templating engine

---
 .../components/player.t                       |   7 +-
 .../components/player_flash.t                 |   7 +-
 templates/themes/default/watch.t              |  41 +++++--
 webroot/playlist.shs                          |   2 +-
 webroot/watch.shs                             | 108 +++++++++++-------
 5 files changed, 107 insertions(+), 58 deletions(-)
 rename webroot/player.shs => templates/components/player.t (99%)
 mode change 100755 => 100644
 rename webroot/player_flash.shs => templates/components/player_flash.t (97%)
 mode change 100755 => 100644

diff --git a/webroot/player.shs b/templates/components/player.t
old mode 100755
new mode 100644
similarity index 99%
rename from webroot/player.shs
rename to templates/components/player.t
index 6f80d33..3ba33df
--- a/webroot/player.shs
+++ b/templates/components/player.t
@@ -1,4 +1,3 @@
-echo '
 <link href="https://f.sakamoto.pl/www-player-png.css" rel="stylesheet">
 <style>
 	.ytp-volume-control:hover > .ytp-volume-panel {
@@ -53,6 +52,6 @@ echo '
 
 <div class="ytp-progress-bar-container" style="height: 8px;"><div class="html5-storyboard enabled" style="display: none; height: 126px;" aria-hidden="true"><div class="html5-storyboard-filmstrip" style="width: 1700px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: 0px 0px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -62px 0px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -124px 0px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -186px 0px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -248px 0px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -310px 0px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -372px 0px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -434px 0px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -496px 0px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -558px 0px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: 0px -47px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -62px -47px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -124px -47px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -186px -47px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -248px -47px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -310px -47px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -372px -47px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -434px -47px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -496px -47px; background-size: 620px 94px;"><img class="html5-storyboard-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 62px; height: 47px; margin: 0px 12px 0px 11px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -558px -47px; background-size: 620px 94px;"></div><div class="html5-storyboard-lens" style="width: 170px; height: 106px; left: 342px;"><img class="html5-storyboard-lens-thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 125px; height: 94px; margin: 0px 23px 0px 22px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/MNaN.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-size: 1250px 940px;"><div class="ytp-storyboard-lens-timestamp-wrapper"><span class="html5-storyboard-lens-timestamp">-NaN:NaN</span></div></div></div><div class="html5-progress-bar ytp-force-transform red" tabindex="6250" role="slider" aria-label="Seek slider" aria-valuemin="0" aria-valuemax="19" aria-valuenow="NaN" aria-valuetext="NaN of 19 seconds"><div class="ytp-progress-bar-padding"></div><div class="ytp-progress-list"><div class="ytp-unloaded-progress" style="left: 0%; transform: scaleX(1);"></div><div class="ytp-play-progress" style="left: 0%; transform: scaleX(0);"></div><div class="ytp-load-progress" style="left: 0%; transform: scaleX(0);"></div><div class="ytp-hover-progress"></div><div class="ytp-clip-start-exclude" style="width: 0%;"></div><div class="ytp-clip-end-exclude" style="left: 100%; width: 0%;"></div><div class="html5-ad-progress-list"></div><div class="ytp-marker-crenellation-list"></div><div class="ytp-marker-progress-list"></div></div><div class="ytp-scrubber-pull-indicator" style="left: 8px;"></div><div class="html5-scrubber-button" style="height: 6px; transform-origin: 0% 50% 0px; left: 8px;"></div></div><div class="ytp-bound-time-left">0:00</div><div class="ytp-bound-time-right"></div><div class="ytp-clip-start html5-clip-marker yt-uix-tooltip" style="left: 0%;"></div><div class="ytp-clip-end html5-clip-marker yt-uix-tooltip" style="left: 100%;"></div><div class="ytp-progress-tooltip with-thumbnail" style="padding: 2px; width: 108px; left: 40.0119px; display: none;" aria-hidden="true"><div class="ytp-progress-tooltip-thumbnail-container"><div class="ytp-progress-tooltip-thumbnail" style="width: 80px; height: 60px; margin: 0px 14px; background-image: url(&quot;https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/M0.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg&quot;); background-position: -160px 0px; background-size: 800px 120px;"></div></div><div class="ytp-progress-tooltip-text-container"><div class="ytp-progress-tooltip-text"></div></div><div class="ytp-progress-tooltip-timestamp-container"><div class="ytp-progress-tooltip-timestamp">0:02</div></div><div class="ytp-progress-tooltip-arrow" style="left: 51px;"></div></div></div><div class="html5-player-chrome"><div class="ytp-button ytp-button-prev" role="button" aria-label="Previous" tabindex="6050" style="display: none;" aria-hidden="true"></div><div class="ytp-button ytp-button-play" role="button" tabindex="6000" aria-label="Play"></div><div class="ytp-button ytp-button-next" role="button" aria-label="Next" tabindex="6051" style="display: none;" aria-hidden="true"></div><span class="ytp-volume-hover-area"><div class="ytp-volume-control"><div class="ytp-button ytp-button-volume" role="button" tabindex="6100" aria-label="mute toggle" data-value="max"></div><div class="ytp-volume-panel" role="slider" aria-valuemin="0" aria-valuemax="100" tabindex="6200" aria-valuenow="100" aria-valuetext="100% volume"><div class="ytp-volume-slider"><div class="ytp-volume-slider-foreground" style="left: 49px;"></div></div></div></div><div class="ytp-time-display html5-control" aria-hidden="true"><span class="ytp-time-current">0:00</span><span class="ytp-time-separator"> / </span><span class="ytp-time-duration"></span><span class="ytp-time-live-badge">Live</span></div></span><div class="ytp-button ytp-button-fullscreen-enter" role="button" tabindex="6900" aria-label="Full screen" style="display: inline-block;"></div><div class="ytp-button ytp-size-toggle-large" role="button" aria-label="Theater mode" tabindex="6800" style="display: inline-block;"></div><div class="ytp-button ytp-button-watch-on-youtube" role="button" aria-label="Watch on YouTube.com" tabindex="6700" style="display: none;" aria-hidden="true"></div><div class="ytp-button ytp-settings-button" role="button" aria-label="Settings" tabindex="6600" aria-haspopup="true" id="settings_button">
 </div><div class="ytp-button ytp-subtitles-button" role="button" aria-label="Subtitles/CC" tabindex="6500" aria-haspopup="true" id="subtitles_button"></div><div class="ytp-button ytp-button-playlist" role="button" aria-label="Playlist" tabindex="6400"></div><div class="ytp-button ytp-button-watch-later" role="button" aria-label="Watch Later" tabindex="6300"></div></div><div class="ytp-menu-container" tabindex="-1" role="menu" aria-labelledby="settings_button" style="display: none;" aria-hidden="true"><div class="ytp-menu"><div class="ytp-menu-content"><div class="ytp-menu-row"><div class="ytp-menu-cell ytp-menu-title">Speed</div><div class="ytp-menu-cell ytp-menu-cell-span"><div class="ytp-drop-down" style="min-width: 100px;" aria-label="Speed"><div class="ytp-drop-down-menu" tabindex="-1" role="listbox" style="display: none; bottom: -1px;" aria-hidden="true"><div class="ytp-drop-down-menu-content"><div class="ytp-button ytp-drop-down-menu-button" role="option" aria-checked="false" tabindex="2300"><div class="ytp-drop-down-menu-button-check"></div>0.25</div><div class="ytp-button ytp-drop-down-menu-button" role="option" aria-checked="false" tabindex="2300"><div class="ytp-drop-down-menu-button-check"></div>0.5</div><div class="ytp-button ytp-drop-down-menu-button ytp-drop-down-menu-button-selected ytp-drop-down-menu-button-checked" role="option" aria-checked="true" tabindex="2300"><div class="ytp-drop-down-menu-button-check"></div>Normal</div><div class="ytp-button ytp-drop-down-menu-button" role="option" aria-checked="false" tabindex="2300"><div class="ytp-drop-down-menu-button-check"></div>1.25</div><div class="ytp-button ytp-drop-down-menu-button" role="option" aria-checked="false" tabindex="2300"><div class="ytp-drop-down-menu-button-check"></div>1.5</div><div class="ytp-button ytp-drop-down-menu-button" role="option" aria-checked="false" tabindex="2300"><div class="ytp-drop-down-menu-button-check"></div>2</div></div></div><div class="ytp-button ytp-drop-down-label" role="button" tabindex="2301"><div class="ytp-drop-down-label-content">Normal</div><div class="ytp-drop-down-arrow"></div></div></div></div></div><div class="ytp-menu-row"><div class="ytp-menu-cell ytp-menu-title">Subtitles/CC</div><div class="ytp-menu-cell"><div class="ytp-drop-down" style="min-width: 150px;" aria-label="Subtitles/CC"><div class="ytp-drop-down-menu" tabindex="-1" role="listbox" style="display: none; bottom: -1px;" aria-hidden="true"><div class="ytp-drop-down-menu-content"><div class="ytp-button ytp-drop-down-menu-button ytp-drop-down-menu-button-selected ytp-drop-down-menu-button-checked" role="option" aria-checked="true" tabindex="2500"><div class="ytp-drop-down-menu-button-check"></div>Off</div><div class="ytp-button ytp-drop-down-menu-button ytp-disabled ytp-drop-down-menu-button-separated-above" role="option" aria-checked="false" aria-disabled="true" tabindex="2500"><div class="ytp-drop-down-menu-button-check"></div>Translate captions</div></div></div><div class="ytp-button ytp-drop-down-label" role="button" tabindex="2501"><div class="ytp-drop-down-label-content">Off</div><div class="ytp-drop-down-arrow"></div></div></div></div><div class="ytp-menu-cell"><div class="ytp-button ytp-menu-more-options" role="button" aria-label="Options" tabindex="2700">Options</div></div></div><div class="ytp-menu-row"><div class="ytp-menu-cell ytp-menu-title">Quality</div><div class="ytp-menu-cell ytp-menu-cell-span"><div class="ytp-drop-down" style="min-width: 100px;" aria-label="Quality"><div class="ytp-drop-down-menu" tabindex="-1" role="listbox" style="display: none; bottom: -1px;" aria-hidden="true"><div class="ytp-drop-down-menu-content"><div class="ytp-button ytp-drop-down-menu-button ytp-drop-down-menu-button-checked" role="option" aria-checked="false" tabindex="2600"><div class="ytp-drop-down-menu-button-check"></div><span>240p</span></div><div class="ytp-button ytp-drop-down-menu-button" role="option" aria-checked="false" tabindex="2600"><div class="ytp-drop-down-menu-button-check"></div><span>144p</span></div><div class="ytp-button ytp-drop-down-menu-button ytp-drop-down-menu-button-selected" role="option" aria-checked="true" tabindex="2600"><div class="ytp-drop-down-menu-button-check"></div><span>Auto</span></div></div></div><div class="ytp-button ytp-drop-down-label" role="button" tabindex="2601"><div class="ytp-drop-down-label-content"><span>Auto (240p)</span></div><div class="ytp-drop-down-arrow"></div></div></div></div></div></div></div></div><div class="ytp-menu-container" tabindex="-1" role="menu" aria-labelledby="subtitles_button" style="display: none;" aria-hidden="true"><div class="ytp-menu"><div class="ytp-menu-content"></div></div></div></div><div class="ytp-clickguard"></div><div class="ytp-dialog-holder" style="display: none;" aria-hidden="true"></div><img class="html5-watermark ytp-scalable-icon-shrink" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Watermark" style="display: none;" aria-hidden="true"><div class="html5-info-bar ytp-can-share"><div class="html5-title"><div class="html5-like-dislike-buttons hid"></div><div class="ytp-action-buttons"><div class="ytp-button ytp-button-share" role="button" aria-label="Share" tabindex="3400"></div><div class="ytp-button ytp-button-dislike" role="button" aria-label="Dislike" tabindex="3300" data-tooltip-below="1"></div><div class="ytp-button ytp-button-like" role="button" aria-label="Like" tabindex="3200" data-tooltip-below="1"></div></div><a class="html5-title-logo" tabindex="3550" aria-label="Watch on YouTube.com" data-tooltip="Watch on YouTube.com" data-tooltip-below="1" href="https://www.youtube.com/watch?v=jNQXAC9IVRw">YouTube</a><div class="html5-title-text-wrapper"><a class="html5-title-text" tabindex="3100" href="https://www.youtube.com/watch?v=jNQXAC9IVRw">Me at the zoo</a></div></div></div><div class="html5-endscreen ytp-player-content videowall-endscreen" style="display: none;" aria-hidden="true"><div class="ytp-endscreen-content"></div></div><div class="ytp-error html5-stop-propagation" style="display: none;"><canvas width="854" height="510" class="ytp-tv-static" style="display: block;"></canvas><div class="ytp-error-content"><div class="ytp-error-content-wrap"><span>An error occurred, please try again later. <br><a href="//web.archive.org/web/20150202234535/https://support.google.com/youtube/?p=player_error1">Learn More</a></span></div></div></div></div>
-<script type="application/json" id="yt_formats">'"$formats"'</script>
-<script type="application/json" id="yt_subs">'"$subs"'</script>
-<script type='text/javascript' src='js/player.js'></script>'
+<script type="application/json" id="yt_formats">{{@formats}}</script>
+<script type="application/json" id="yt_subs">{{@subs}}</script>
+<script type='text/javascript' src='js/player.js'></script>
diff --git a/webroot/player_flash.shs b/templates/components/player_flash.t
old mode 100755
new mode 100644
similarity index 97%
rename from webroot/player_flash.shs
rename to templates/components/player_flash.t
index d58b6b6..05c36ae
--- a/webroot/player_flash.shs
+++ b/templates/components/player_flash.t
@@ -1,8 +1,7 @@
-url_="$(echo "$url" | xxd -ps | sed -E 's/.{2}/%&/g' | tr -d '\n')"
-echo '<script>
+<script>
 	(function() {
-		var fmt_url_map = "34%7C'"$url_"'"
+		var fmt_url_map = "34%7C{{url}}"
 		var fmt_stream_map = fmt_url_map;
 		document.write("<embed height=\"38" + "5\" width=\"64" + "0\" type=\"application\/x-shockwave-flash\" src=\"\/\/f.sakamoto.pl\/watch-vfl168525.swf\" id=\"movie_player\" flashvars=\"rv.7.length_seconds=53&rv.2.thumbnailUrl=http%3A%2F%2Fi4.ytimg.com%2Fvi%2Fgkeiv_eNlxs%2Fdefault.jpg&rv.0.url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D4jbkRGPxvaM&rv.0.view_count=109338857&enablecsi=1&rv.2.title=Who+Is+The+Oldest+YouTuber%3F&rv.6.author=judsonlaipply&rv.3.view_count=204757&is_doubleclick_tracked=0&rv.4.thumbnailUrl=http%3A%2F%2Fi2.ytimg.com%2Fvi%2FY7dpJ0oseIA%2Fdefault.jpg&fmt_url_map=" + fmt_url_map + "&csi_page_type=watch&keywords=jawed%2Ckarim%2Celephant%2Czoo%2Cyoutube%2Cfirst%2Cvideo%2Cyakov%2Clapitsky&cr=US&cc3_module=http%3A%2F%2Fs.ytimg.com%2Fyt%2Fswf%2Fsubtitles3_module-vfl169211.swf&rv.6.thumbnailUrl=http%3A%2F%2Fi1.ytimg.com%2Fvi%2FdMH0bHeiRNg%2Fdefault.jpg&rv.3.rating=3.2731629393&fmt_list=34%2F0%2F9%2F0%2F115%2C5%2F0%2F7%2F0%2F0&rv.7.id=feGZ4l5fk4Q&iv_storage_server=http%3A%2F%2Fwww.google.com%2Freviews%2Fy%2F&rv.7.url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DfeGZ4l5fk4Q&creator=jawed&rv.0.rating=2.5226886736&rv.4.rating=2.88055644388&rv.3.title=Oldest+Youtube+Video&rv.5.id=_OBlgSz8sSM&rv.2.view_count=101702&rv.0.featured=1&rv.0.id=4jbkRGPxvaM&cc_font=Arial+Unicode+MS%2C+arial%2C+verdana%2C+_sans&sdetail=p%3Awww.bookofjoe.com%2F2009%2F09%2F08%2Fi&rv.5.url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D_OBlgSz8sSM&rv.6.length_seconds=360&sourceid=r&timestamp=1275761040&rv.0.author=SHOWTIME&cc_asr=1&rv.2.author=creamofcardstv&rv.6.url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DdMH0bHeiRNg&fmt_map=34%2F0%2F9%2F0%2F115%2C5%2F0%2F7%2F0%2F0&hl=en_US&rv.0.thumbnailUrl=http%3A%2F%2Fi1.ytimg.com%2Fvi%2F4jbkRGPxvaM%2Fdefault.jpg&rv.5.length_seconds=56&rv.0.length_seconds=200&referrer=http%3A%2F%2Fwww.bookofjoe.com%2F2009%2F09%2F08%2Findex.html&rv.3.thumbnailUrl=http%3A%2F%2Fi1.ytimg.com%2Fvi%2Fl2lnMbnBzuM%2Fdefault.jpg&rv.7.author=jawed&tts_watch_url=%2Fwatch_ajax%3Faction_get_caption_track_all%26v%3DjNQXAC9IVRw&rv.1.length_seconds=307&rv.3.id=l2lnMbnBzuM&rv.2.id=gkeiv_eNlxs&rv.2.length_seconds=163&t=vjVQa1PpcFNO0Qg-PCO7YpsFsZwwrE-J1ymhKZWUDAY%3D&rv.6.id=dMH0bHeiRNg&vq=auto&rv.6.view_count=144980590&rv.3.author=Melcland&rv.4.id=Y7dpJ0oseIA&ttsurl=http%3A%2F%2Fvideo.google.com%2Ftimedtext%3Fsparams%3Dcaps%252Cexpire%252Cv%26expire%3D1275786000%26caps%3Dasr%26key%3Dyttt1%26signature%3D8A6B1478FE76B2A937FB34E1F13D1AEE9DE0EA8B.2EC9BD41592AE7D79F5B7C9FB898BA8AD9619B1A&fexp=907011&rv.4.author=YouTube&rv.7.thumbnailUrl=http%3A%2F%2Fi3.ytimg.com%2Fvi%2FfeGZ4l5fk4Q%2Fdefault.jpg&allow_embed=1&fmt_stream_map=" + fmt_stream_map + "&rv.2.rating=3.49242424242&rv.7.title=Extremely+short+runway+747+takeoff&cc_load_policy=1&rv.1.url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DuImk2RgCq_U&rv.1.id=uImk2RgCq_U&rv.6.title=Evolution+of+Dance+-+By+Judson+Laipply&rv.4.length_seconds=125&rv.7.view_count=4005023&rv.5.view_count=197773468&length_seconds=18&enablejsapi=1&video_id=jNQXAC9IVRw&plid=AASITEOh6RC4XUBh&iv_module=http%3A%2F%2Fs.ytimg.com%2Fyt%2Fswf%2Fiv_module-vfl168524.swf&rv.5.rating=4.61405687817&rv.4.url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DY7dpJ0oseIA&rv.1.author=1nterwebs&rv.1.rating=4.70571010249&rv.4.title=YouTube&rv.5.thumbnailUrl=http%3A%2F%2Fi4.ytimg.com%2Fvi%2F_OBlgSz8sSM%2Fdefault.jpg&watermark=http%3A%2F%2Fs.ytimg.com%2Fyt%2Fswf%2Flogo-vfl106645.swf%2Chttp%3A%2F%2Fs.ytimg.com%2Fyt%2Fswf%2Fhdlogo-vfl100714.swf&rv.0.title=Lezberado%3A+Revenge+Fantasies&iv3_module=http%3A%2F%2Fs.ytimg.com%2Fyt%2Fswf%2Fiv3_module-vfl169211.swf&rv.7.rating=4.5715796897&rv.3.url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dl2lnMbnBzuM&rv.2.url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dgkeiv_eNlxs&ttslisturl=%2Fajax_timedtext%3FvideoId%3DjNQXAC9IVRw%26type%3Dlist&cc_module=http%3A%2F%2Fs.ytimg.com%2Fyt%2Fswf%2Fsubtitle_module-vfl167653.swf&ttstrackurl=%2Fajax_timedtext%3FvideoId%3DjNQXAC9IVRw%26type%3Dtrack%26lang%3Den%26name%3D&rv.4.view_count=296911&iv_load_policy=0&rv.1.view_count=172499&rv.5.title=Charlie+bit+my+finger+-+again+%21&rv.6.rating=4.66225384259&sk=2mqJTltP8SpOATYtW_nZrjNZASKI-NT4C&rv.1.title=The+20+oldest+Videos+on+Youtube&rv.1.thumbnailUrl=http%3A%2F%2Fi2.ytimg.com%2Fvi%2FuImk2RgCq_U%2Fdefault.jpg&rv.3.length_seconds=11&rv.5.author=HDCYT\" allowscriptaccess=\"always\" allowfullscreen=\"true\" bgcolor=\"#000000\" \/>");
 	})();
-</script>'
+</script>
diff --git a/templates/themes/default/watch.t b/templates/themes/default/watch.t
index 288eb43..474569b 100644
--- a/templates/themes/default/watch.t
+++ b/templates/themes/default/watch.t
@@ -1,5 +1,4 @@
 <div><br>
-{{.player}}
 <h2>{{.title}}</h2>
 <div>
 	<div>
@@ -7,17 +6,43 @@
 	</div>
 	<div>
 		<b>{{.view_count}}</b> views<br>
-		{{.like_dislike_count}}<br>
-		{{.fav}}
-		{{.sub}}
+		<b>{{.like_count}}</b> likes<br>
+
+		{{start ?fav}}<a href='fav.shs?v={{.id}}' target='_blank'>Add to favourites</a><br>{{end ?fav}}
+		{{start ?unfav}}<a href='unfav.shs?v={{.id}}' target='_blank'>Remove from favourites</a><br>{{end ?unfav}}
+		{{start ?sub}}<a href='subscribe.shs?id={{.channel_id}}' target='_blank'>Subscribe to {{.uploader}}!</a><br>{{end ?sub}}
+		{{start ?unsub}}<a href='unsubscribe.shs?id={{.channel_id}}' target='_blank'>Unsubscribe from {{.uploader}}!</a><br>{{end ?unsub}}
+		{{start ?login}}<b><a href='/login.shs?r={{.r}}'>Log in</a> to add this video to your favourites and/or subscribe to this channel!</b><br>{{end ?login}}
 <br><br>
 		</div>
 	</div>
-<span><i>Description</i>:<br>{{.description}}</span>
+<pre><i>Description</i>:<br>{{.description}}</pre>
 </div>
 <h1>Recommended</h1>
 <div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));'>
-{{.recommended}}	
+{{start _recommended}}
+
+<div><a href='/watch?v={{.id}}'><img src='https://i.ytimg.com/vi/{{.id}}/mqdefault.jpg'>{{.title}}</a></div>
+
+{{end _recommended}}
 </div><h1>Comments</h1>
-{{.comments_list}}
-{{.playlist}}
+<div class='comments'></div>
+<script src='/js/watch.js'></script>
+
+<script type='text/javascript'>
+	if ('{{.next}}' != '') {
+		window.addEventListener('DOMContentLoaded', (event) => {
+			var video = document.querySelector('video');
+			video.addEventListener('ended', function() {
+				window.location = 'watch?v={{.next}}&playlist={{.playlist_id}}';
+			});
+		});
+	}
+</script>
+<h1>Playlist</h1>
+{{start _playlist}}
+
+<a href='watch?v={{.id}}&playlist={{.playlist_id}}'><img src='//i.ytimg.com/vi/{{.id}}/mqdefault.jpg'><br>{{.title}}</a><br>
+
+{{end _playlist}}
+
diff --git a/webroot/playlist.shs b/webroot/playlist.shs
index 6fbb802..273879e 100644
--- a/webroot/playlist.shs
+++ b/webroot/playlist.shs
@@ -9,7 +9,7 @@ if [[ ${cfg[template]} == 'default' ]]; then
 fi
 
 if [[ "${get_data[list]}" ]]; then
-	data=$(haruhi-dl --cookies ${cfg[_cookies]} -j --flat-playlist "https://www.youtube.com/playlist?list=${get_data[list]}")
+	data=$(yt-dlp --cookies ${cfg[_cookies]} -j --flat-playlist "https://www.youtube.com/playlist?list=${get_data[list]}")
 else
 	strings[playlist]="Please specify id"
 fi
diff --git a/webroot/watch.shs b/webroot/watch.shs
index 4c4772d..ff3bd1c 100755
--- a/webroot/watch.shs
+++ b/webroot/watch.shs
@@ -1,4 +1,10 @@
 #!/bin/bash
+#TODO: move this somewhere more apropriate
+#jq_to_array(jq_expression)
+function _jq_to_array() {
+	declare -ga "_tmp=($(jq -r "$1" | sed 's/[][`~!@#$%^&*():;<>.,?\|{}=+-]/\\&/g;'"s@\\\'@\\'@g" ))"
+}
+
 
 function format_numbers() {
 	rev | sed "s#[[:digit:]]\{3\}#&,#g" | rev | sed -E 's/^,//'
@@ -10,13 +16,13 @@ fi
 
 declare -A strings
 
-if [[ ! "$(which haruhi-dl)" ]]; then
-	strings[error]='Could not load video'
-	source templates/head.sh
-	source "${cfg[namespace]}/templates/header.shs"
-        render strings "${cfg[namespace]}/templates/themes/${cfg[template]}/watch_error.t"
-	return
-fi
+#if [[ ! "$(which haruhi-dl)" ]]; then
+#	strings[error]='Could not load video'
+#	source templates/head.sh
+#	source "${cfg[namespace]}/templates/header.shs"
+ #       render strings "${cfg[namespace]}/templates/themes/${cfg[template]}/watch_error.t"
+#	return
+#fi
 
 if [[ "${get_data[v]}" ]]; then
 	if [[ "${get_data[v]}" == '18l' || "${get_data[v]}" == '5eFdt6Y_34E' ]]; then
@@ -117,50 +123,46 @@ if [[ "${get_data[v]}" ]]; then
 				url=${urls[0]}
 			fi
 		fi
-		strings[player]=$(source "${cfg[namespace]}/webroot/player_flash.shs")
+		declare -A player
+		player[url]=$(xxd -p <<< "$url" | sed -E 's/.{2}/%&/g' | tr -d '\n')
+
+		player_render="$(render player "${cfg[namespace]}/templates/components/player_flash.t")"
 	else
-		strings[player]=$(source "${cfg[namespace]}/webroot/player.shs")
+		declare -A player
+		player[@formats]="$formats"
+		player[@subs]="$subs"
+
+		player_render="$(render player "${cfg[namespace]}/templates/components/player.t")"
 	fi
 
 	strings[upload_date]=$(date -d "$(echo $video | jq -r '.upload_date' | sed -E 's/..../&-/;s/....-../&-/')" "+%d %B %Y")
-	strings[view_count]=$(echo $video | jq -r '.view_count' | format_numbers)
-	like_count=$(echo $video | jq -r '.like_count' | format_numbers)
-	dislike_count=$(echo $video | jq -r '.dislike_count' | format_numbers)
-	if [[ ${cfg[template]} == 'default' ]]; then
-		if [[ $like_count == 'null' && $dislike_count == 'null' ]]; then
-			strings[like_dislike_count]="Likes are turned off"
-		else
-			strings[like_dislike_count]="<b>$like_count</b> likes, <b>$dislike_count</b> dislikes."
-		fi
+	strings[view_count]=$(jq -r '.view_count' <<< "$video" | format_numbers)
+	like_count=$(jq -r '.like_count' <<< "$video" | format_numbers)
+	if [[ $like_count == 'null' ]]; then
+		strings[like_count]="Likes are turned off"
+	else
+		strings[like_count]="$like_count"
 	fi
 	strings[sub]=''
+	strings[id]="${get_data[v]}"
 
 	#<video id='player' src='$url' controls></video>
 	if [[ ${cookies[sh_session]} ]]; then
 		if [[ $(grep $(session_get_username "${cookies[sh_session]}") storage/faves | grep "${get_data[v]}") == '' ]]; then
-			if [[ ${cfg[template]} == 'default' ]]; then
-				strings[fav]="<a href='fav.shs?v=$(sed -s 's/<//g;' <<< "${get_data[v]}")' target='_blank'>Add to favourites</a><br>"
-			fi
+			strings[?fav]=true
 		else
-			if [[ ${cfg[template]} == 'default' ]]; then
-				strings[fav]="<a href='unfav.shs?v=$(sed -s 's/<//g;' <<< "${get_data[v]}")' target='_blank'>Remove from favourites</a><br>"
-			fi
+			strings[?unfav]=true
 		fi
 		if [[ $(grep $(session_get_username "${cookies[sh_session]}") storage/subscribed | grep "${strings[channel_id]}") == '' ]]; then
-			if [[ ${cfg[template]} == 'default' ]]; then
-				strings[sub]="<a href='subscribe.shs?id=${strings[channel_id]}' target='_blank'>Subscribe to ${strings[uploader]}!</a><br>"
-			fi
+			strings[?sub]=true
 		else
-			if [[ ${cfg[template]} == 'default' ]]; then
-				strings[sub]="<a href='unsubscribe.shs?id=${strings[channel_id]}' target='_blank'>Unsubscribe from ${strings[uploader]}</a><br>"
-			fi
+			strings[?unsub]=true
 		fi
 	else
-		if [[ ${cfg[template]} == 'default' ]]; then
-			strings[fav]="<b><a href='/login.shs?r=$(sed -s 's/?/___/' <<< "${r[url]}")'>Log in</a> to add this video to your favourites and/or subscribe to this channel!</b><br>"
-		fi
+		strings[?login]=true
+		strings[login_r]=$(sed -s 's/?/___/' <<< "${r[url]}")
 	fi
-	strings[description]=$(jq -r '.description' <<< "$video" | sed -E 's/$/<br>/g')
+	strings[description]=$(jq -r '.description' <<< "$video")
 
 	# youtube-dl modifies the filename when writing with --write-pages
 	# params restricted=True, is_id=False to https://github.com/ytdl-org/youtube-dl/blob/70d0d4f9beba0e5b6d95ee50ad62ae7ab5be9be1/youtube_dl/utils.py#L2079
@@ -173,14 +175,30 @@ if [[ "${get_data[v]}" ]]; then
 	vid="$(cat "temp/${written_id}_https_-_"*"watch"*".dump")"
 	vid_json="$(tr -d '\n' <<< "$vid" | grep -Poh "ytInitialData.*?</script>" | sed 's/ytInitialData = //;s/<\/script>//')"
 
-	strings[recommended]=$(jq -r '.contents.twoColumnWatchNextResults.secondaryResults.secondaryResults.results[] | .compactAutoplayRenderer.contents[0].compactVideoRenderer, .compactVideoRenderer | if .videoId != null then "<div><a href='"'"'/watch?v="+.videoId+"'"'"'><img src='"'"'https://i.ytimg.com/vi/"+.videoId+"/mqdefault.jpg'"'"'>"+.title.simpleText+"</a></div>" else empty end' <<< "$vid_json")
+	strings[recommended]=$()
 
-	strings[comments_list]="<div class='comments'></div><script src='/js/watch.js'></script>"
+	_jq_to_array '.contents.twoColumnWatchNextResults.secondaryResults.secondaryResults.results[] | .compactAutoplayRenderer.contents[0].compactVideoRenderer, .compactVideoRenderer | 
+		if .videoId != null then 
+			[.videoId,
+			.title.simpleText]
+		else 
+			empty
+		end | @sh' <<< "$vid_json"
+
+	nested_declare rec
+	declare -A rec_
+	for (( x=0; x<${#_tmp[@]}; x=x+2 )); do
+		rec_[id]="${_tmp[$x]}"
+		rec_[title]="${_tmp[$((x+1))]}"
+		nested_add rec rec_
+	done
+
+	strings[_recommended]="rec"
 
 	strings[playlist]=""
 
 	if [[ "${get_data[playlist]}" ]]; then
-		playlist=$(haruhi-dl --ie-key YoutubePlaylist --cookies ${cfg[_cookies]} -j --flat-playlist "https://www.youtube.com/playlist?list=${get_data[playlist]}")
+		playlist=$(yt-dlp --cookies ${cfg[_cookies]} -j --flat-playlist "https://www.youtube.com/playlist?list=${get_data[playlist]}")
 	
 		IFS=$'\n'
 		video_title=($(jq -r '.title' <<< $playlist))
@@ -194,12 +212,19 @@ if [[ "${get_data[v]}" ]]; then
 		done
 
 		[[ "$next" == '' ]] && next='dQw4w9WgXcQ'
-		
-		strings[playlist]+="<script type='text/javascript'>window.addEventListener('DOMContentLoaded', (event) => { var video = document.querySelector('video'); video.addEventListener('ended', function() { window.location = 'watch?v=$next&playlist=$(html_encode ${get_data[playlist]})';});});</script><h1>Playlist</h1>"
 
+		strings[playlist_id]="$(html_encode "${get_data[playlist]}")"
+		strings[next]="$next"
+
+		nested_declare list
+		declare -A list_
 		for (( i=0; i<${#video_id[@]}; i++ )); do
-			strings[playlist]+="<a href='watch?v=${video_id[$i]}&playlist=$(html_encode ${get_data[playlist]})'><img src='//i.ytimg.com/vi/${video_id[$i]}/mqdefault.jpg'><br>${video_title[$i]}</a><br>"
+			list_[id]="${video_id[$i]}"
+			list_[title]="${video_title[$i]}"
+			list_[playlist_id]="$(html_encode "${get_data[playlist]}")"
+			nested_add list list_
 		done
+		strings[_playlist]="list"
 	fi
 
 	if [[ ! "${strings[recommended]}" ]]; then
@@ -211,7 +236,8 @@ if [[ "${get_data[v]}" ]]; then
 	fi
 
 	source "${cfg[namespace]}/templates/header.shs"
-	render_unsafe strings "${cfg[namespace]}/templates/themes/${cfg[template]}/watch.t"
+	echo "$player_render"
+	render strings "${cfg[namespace]}/templates/themes/${cfg[template]}/watch.t"
 else
 	source templates/head.sh
 	echo "pls add ?v param i'm still WiP"