fix so much stuff + add hls player

2 files changed, 319 insertions, 315 deletions

diff --git a/theme/Brutalist/main.css b/theme/Brutalist/main.css
index 52f82d2..e9b22ed 100644
--- a/theme/Brutalist/main.css
+++ b/theme/Brutalist/main.css
@@ -1,198 +1,198 @@
 :root {
-	font-family: sans-serif;
-	background: #eee;
+    font-family: sans-serif;
+    background: #eee;
 }
 
 body {
-	margin: 0;
+    margin: 0;
 }
 
 main {
-	width: 100vw;
-	display: flex;
-	align-items: center;
-	flex-direction: column;
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
 }
 
 header {
-	box-sizing: border-box;
-	width: calc(100vw - 64px);
-	background: black;
-	margin: 32px;
-	padding: 16px;
-	color: white;
-	display: grid;
-	grid-auto-flow: column;
-	grid-auto-columns: 1fr auto;
-	align-items: center;
+    box-sizing: border-box;
+    width: calc(100vw - 64px);
+    background: black;
+    margin: 32px;
+    padding: 16px;
+    color: white;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr auto;
+    align-items: center;
 
-	a {
-		color: white;
-	}
+    a {
+	color: white;
+    }
 
-	frontend-name {
-		font-size: 0;
-		&::after {
-			font-size: large;
-			font-weight: bold;
-			content: "Brutalist Sounds";
-		}
+    frontend-name {
+	font-size: 0;
+	&::after {
+	    font-size: large;
+	    font-weight: bold;
+	    content: "Brutalist Sounds";
 	}
+    }
 
-	#search-form {
+    #search-form {
 	input {
-		background: black;
-		border: 1px solid white;
-		color: white;
-		font-family: inherit;
-		font-size: small;
-		padding: 4px 8px;
-		&::placeholder {
-			color: #bbb;
-		}
-	}
+	    background: black;
+	    border: 1px solid white;
+	    color: white;
+	    font-family: inherit;
+	    font-size: small;
+	    padding: 4px 8px;
+	    &::placeholder {
+		color: #bbb;
+	    }
 	}
+    }
 }
 
 inline-display-module {
-	border: 1px solid black;
-	margin: 16px;
-	padding: 16px;
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	height: fit-content;
-	max-height: 600px;
-	overflow-y: scroll;
-	box-sizing: border-box;
-	width: min(1000px, calc(100vw - 64px));
-	background: white;
-	color: black;
+    border: 1px solid black;
+    margin: 16px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    height: fit-content;
+    max-height: 600px;
+    overflow-y: scroll;
+    box-sizing: border-box;
+    width: min(1000px, calc(100vw - 64px));
+    background: white;
+    color: black;
 
-	h2 {
-		top: -16px;
-		margin: -16px;
-		margin-bottom: 0;
-		position: sticky;
-		background: black;
-		color: white;
-		padding: 8px;
-		padding-left: 16px;
-	}
+    h2 {
+	top: -16px;
+	margin: -16px;
+	margin-bottom: 0;
+	position: sticky;
+	background: black;
+	color: white;
+	padding: 8px;
+	padding-left: 16px;
+    }
 
-	module-description {
-		font-weight: bold;
-	}
+    module-description {
+	font-weight: bold;
+    }
 }
 
 inline-header-module {
-	display: block;
-	padding: 16px;
+    display: block;
+    padding: 16px;
 
-	h2 {
-		font-size: xx-large;
-	}
+    h2 {
+	font-size: xx-large;
+    }
 
-	container-item {
-		display: none;
-	}
+    container-item {
+	display: none;
+    }
 }
 
 playable-item, container-item, display-item, broadcast-summary {
-	display: block;
-	padding: 8px;
+    display: block;
+    padding: 8px;
 
-	item-first-titles {
-		margin: -8px;
-		margin-bottom: 8px;
-		background: black;
-		color: white;
-		padding: 0 8px;
-		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: 1fr auto;
-		align-items: baseline;
-	}
+    item-first-titles {
+	margin: -8px;
+	margin-bottom: 8px;
+	background: black;
+	color: white;
+	padding: 0 8px;
+	display: grid;
+	grid-auto-flow: column;
+	grid-auto-columns: 1fr auto;
+	align-items: baseline;
+    }
 
-	h3 {
-		margin: 0;
-	}
+    h3 {
+	margin: 0;
+    }
 
-	secondary-title {
-		display: block;
-		font-weight: bold;
-	}
+    secondary-title {
+	display: block;
+	font-weight: bold;
+    }
 
-	tertiary-title {
-		display: block;
-		font-style: italic;
-	}
+    tertiary-title {
+	display: block;
+	font-style: italic;
+    }
 
-	synopsis {
-		display: block;
-		margin-top: 8px;
-		white-space: pre-wrap;
+    synopsis {
+	display: block;
+	margin-top: 8px;
+	white-space: pre-wrap;
 
-		details {
-			summary {
-				list-style: none;
-				&::after {
-					font-weight: bold;
-					content: ' Show more…';
-				}
-			}
-			&[open] {
-				summary {
-					display: none;
-				}
-			}
+	details {
+	    summary {
+		list-style: none;
+		&::after {
+		    font-weight: bold;
+		    content: ' Show more…';
 		}
+	    }
+	    &[open] {
+		summary {
+		    display: none;
+		}
+	    }
 	}
+    }
 
-	a {
-		font-style: italic;
-		display: block;
-		text-align: end;
-		&::after {
-			content: " »";
-		}
+    a {
+	font-style: italic;
+	display: block;
+	text-align: end;
+	&::after {
+	    content: " »";
 	}
+    }
 }
 
 #aod_play_area, #single_item_promo {
-padding: 0;
-gap: 0;
-h2 {
+    padding: 0;
+    gap: 0;
+    h2 {
 	margin: 0px;
-}
-playable-item, display-item {
+    }
+    playable-item, display-item {
 	h3, secondary-title, tertiary-title, synopsis {
-		padding: 0 8px;
+	    padding: 0 8px;
 	}
 
 	a {
-		display: none;
+	    display: none;
 	}
-}
+    }
 }
 
 segment-item {
-	display: grid;
-	gap: 8px;
-	grid-auto-flow: column;
-	grid-auto-columns: 1fr auto auto;
-	border-bottom: 0.5px dashed black;
+    display: grid;
+    gap: 8px;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr auto auto;
+    border-bottom: 0.5px dashed black;
 
-	primary-title {
-		font-weight: bold;
-		margin-inline-end: 12px;
-	}
-	tertiary-title {
-		display: none;
-	}
+    primary-title {
+	font-weight: bold;
+	margin-inline-end: 12px;
+    }
+    tertiary-title {
+	display: none;
+    }
 
-	offset-start::after {
-		margin-inline-start: 8px;
-		content: '—';
-	}
+    offset-start::after {
+	margin-inline-start: 8px;
+	content: '—';
+    }
 }
diff --git a/theme/Default/main.css b/theme/Default/main.css
index b2892fb..23fe9bc 100644
--- a/theme/Default/main.css
+++ b/theme/Default/main.css
@@ -1,195 +1,195 @@
 body {
-	background: #eee;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	font-size: 10pt;
-	margin: 0;
-	padding: 16px;
-	gap: 16px;
-	font-family: sans-serif;
+    background: #eee;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 10pt;
+    margin: 0;
+    padding: 16px;
+    gap: 16px;
+    font-family: sans-serif;
 }
 
 a {
-	text-decoration: none;
-	color: #8a6040;
+    text-decoration: none;
+    color: #8a6040;
 }
 
 header, main {
-	width: min(800px, calc(100vw - 32px));
-	box-sizing: border-box;
-	background: white;
-	border-radius: 4px;
-	overflow: clip;
-	border: 2px solid grey;
+    width: min(800px, calc(100vw - 32px));
+    box-sizing: border-box;
+    background: white;
+    border-radius: 4px;
+    overflow: clip;
+    border: 2px solid grey;
 }
 
 header {
-	display: grid;
-	grid-auto-flow: column;
-	grid-auto-columns: 1fr auto;
-	align-items: center;
-	background: #963;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr auto;
+    align-items: center;
+    background: #963;
 
-	> * {
-		padding: 8px;
-	}
+    > * {
+	padding: 8px;
+    }
 
-	a {
-		background: linear-gradient(to right, #ca9a7a, #963);
-		display: block;
-		color: white;
-		font-weight: bold;
-		width: max-content;
-		font-size: 0;
-		&::after {
-			font-size: 16pt;
-			content: 'BBC Sounds';
-		}
+    a {
+	background: linear-gradient(to right, #ca9a7a, #963);
+	display: block;
+	color: white;
+	font-weight: bold;
+	width: max-content;
+	font-size: 0;
+	&::after {
+	    font-size: 16pt;
+	    content: 'BBC Sounds';
 	}
+    }
 }
 
 inline-display-module {
-	display: flex;
-	flex-direction: column;
+    display: flex;
+    flex-direction: column;
 
-	h2 {
-		text-align: center;
-		margin: 0;
-		background: linear-gradient(to bottom, #ffeeca, #efba99);
-		padding: 8px;
-		border-top: 1px solid #daaa55;
-		margin-top: 16px;
-	}
-
-	item-titles {
-		display: grid;
-		background: linear-gradient(to bottom, #fefefe, #efefef);
-		padding: 8px;
-		gap: 4px;
-		border-top: 2px solid #eee;
-		border-bottom: 1px solid #eee;
-	}
-	item-first-titles {
-		grid-row: 1;
-		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: 1fr auto;
-		align-items: baseline;
-	}
-	h3 {
-		margin: 0;
-	}
+    h2 {
+	text-align: center;
+	margin: 0;
+	background: linear-gradient(to bottom, #ffeeca, #efba99);
+	padding: 8px;
+	border-top: 1px solid #daaa55;
+	margin-top: 16px;
+    }
 
-	item-network {
-		grid-row: 1;
-		grid-column: 2;
-	}
-	secondary-title {
-		font-weight: bold;
-		grid-row: 2;
-		grid-column: 1;
-	}
-	tertiary-title {
-		grid-row: 3;
-		grid-column: 1;
-	}
+    item-titles {
+	display: grid;
+	background: linear-gradient(to bottom, #fefefe, #efefef);
+	padding: 8px;
+	gap: 4px;
+	border-top: 2px solid #eee;
+	border-bottom: 1px solid #eee;
+    }
+    item-first-titles {
+	grid-row: 1;
+	display: grid;
+	grid-auto-flow: column;
+	grid-auto-columns: 1fr auto;
+	align-items: baseline;
+    }
+    h3 {
+	margin: 0;
+    }
 
-	module-description, synopsis {
-		white-space: pre-wrap;
-		margin: 8px;
-		display: block;
-	}
+    item-network {
+	grid-row: 1;
+	grid-column: 2;
+    }
+    secondary-title {
+	font-weight: bold;
+	grid-row: 2;
+	grid-column: 1;
+    }
+    tertiary-title {
+	grid-row: 3;
+	grid-column: 1;
+    }
 
-	details {
-		summary {
-			list-style: none;
-			&::after {
-				font-weight: bold;
-				content: ' More…';
-			}
-		}
-		&[open] summary {
-			font-size: 0;
-			&::after {
-				font-size: 10pt;
-				content: 'Less…';
-			}
-		}
-	}
+    module-description, synopsis {
+	white-space: pre-wrap;
+	margin: 8px;
+	display: block;
+    }
 
-	a {
-		display: block;
-		background: #efefef;
-		padding: 4px;
-		text-align: center;
+    details {
+	summary {
+	    list-style: none;
+	    &::after {
 		font-weight: bold;
+		content: ' More…';
+	    }
 	}
-}
+	&[open] summary {
+	    font-size: 0;
+	    &::after {
+		font-size: 10pt;
+		content: 'Less…';
+	    }
+	}
+    }
 
-inline-header-module {
+    a {
 	display: block;
-	padding: 16px;
+	background: #efefef;
+	padding: 4px;
 	text-align: center;
-	module-items {
-		display: none;
-	}
+	font-weight: bold;
+    }
+}
+
+inline-header-module {
+    display: block;
+    padding: 16px;
+    text-align: center;
+    module-items {
+	display: none;
+    }
 }
 
 #listen_sign_in_upsell {
-h2 { margin-top: 0; }
-module-description::after {
+    h2 { margin-top: 0; }
+    module-description::after {
 	display: block;
 	margin-top: 8px;
 	content: "Please note this is an unofficial frontend to BBC services and is not affiliated with or endorsed by the BBC in any way.";
-}
+    }
 }
 inline-display-module:first-child h2 { margin-top: 0; }
 
 #listen_live {
-overflow-x: scroll;
+    overflow-x: scroll;
 
-module-description {
+    module-description {
 	display: none;
-}
+    }
 
-h2 {
+    h2 {
 	position: sticky;
 	left: 0;
-}
+    }
 
-playable-item {
+    playable-item {
 	display: block;
 	border-right: 1px solid #ccc;
 	width: 300px;
 	background: #eee;
-}
+    }
 
-module-items {
+    module-items {
 	display: flex;
 	flex-direction: row;
 	overflow-x: scroll;
 	border-bottom: 1px solid #ccc;
 	width: max-content;
-}
+    }
 }
 
 #single_item_promo {
-margin: 32px;
-border: 1px solid #963;
-border-radius: 4px;
-overflow: clip;
-> module-items > display-item > item-titles {
+    margin: 32px;
+    border: 1px solid #963;
+    border-radius: 4px;
+    overflow: clip;
+    > module-items > display-item > item-titles {
 	background: #ffeecb;
 	border: none;
-}
-h2 { display: none; }
+    }
+    h2 { display: none; }
 }
 
 #categories {
-display: flex;
+    display: flex;
 
-container-item {
+    container-item {
 	display: flex;
 	align-items: baseline;
 	background: #efefef;
@@ -197,54 +197,58 @@ container-item {
 	border-bottom: 1px solid #aaa;
 
 	item-titles {
-		background: none;
-		border: none;
+	    background: none;
+	    border: none;
 	}
 
 	a {
-		font-size: 0;
-		&::after {
-			font-size: 10pt;
-			content: "view category »"
-		}
+	    font-size: 0;
+	    &::after {
+		font-size: 10pt;
+		content: "view category »"
+	    }
 	}
-}
+    }
 }
 
 segment-item {
-	display: grid;
-	grid-template-columns: 1fr auto auto;
-	align-items: baseline;
-	padding: 0 8px 0 0;
-	background: linear-gradient(to bottom, #fff, #f8f8f8);
-	border-bottom: 1px solid #ccc;
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    align-items: baseline;
+    padding: 0 8px 0 0;
+    background: linear-gradient(to bottom, #fff, #f8f8f8);
+    border-bottom: 1px solid #ccc;
 
-	item-titles {
-		background: none;
-		border: none;
-	}
+    item-titles {
+	background: none;
+	border: none;
+    }
 
-	primary-title {
-		grid-row: 1;
-		grid-column: 1;
-	}
-	secondary-title {
-		grid-row: 2;
-		grid-column: 1;
-	}
-	tertiary-title {
-		white-space: pre-wrap;
-		font-size: 8pt;
-	}
-	offset-start {
-		grid-row: 1;
-		grid-column: 2;
-		&::after {
-			content: '—';
-		}
-	}
-	offset-end {
-		grid-row: 1;
-		grid-column: 3;
+    primary-title {
+	grid-row: 1;
+	grid-column: 1;
+    }
+    secondary-title {
+	grid-row: 2;
+	grid-column: 1;
+    }
+    tertiary-title {
+	white-space: pre-wrap;
+	font-size: 8pt;
+    }
+    offset-start {
+	grid-row: 1;
+	grid-column: 2;
+	&::after {
+	    content: '—';
 	}
+    }
+    offset-end {
+	grid-row: 1;
+	grid-column: 3;
+    }
+}
+
+#aod_play_area playable-item a:first-of-type {
+    display: none;
 }