Improvements to html decoding

materialious/package-lock.json

@@ -16,6 +16,7 @@
 				"@capacitor/core": "^6.0.0",
 				"beercss": "^3.5.5",
 				"fuse.js": "^7.0.0",
+				"he": "^1.2.0",
 				"human-number": "^2.0.4",
 				"iso-3166": "^4.3.0",
 				"material-dynamic-colors": "^1.1.0",
@@ -37,6 +38,7 @@
 				"@sveltejs/vite-plugin-svelte": "^3.1.0",
 				"@types/eslint": "^8.56.7",
 				"@types/event-source-polyfill": "^1.0.5",
+				"@types/he": "^1.2.3",
 				"@types/human-number": "^1.0.2",
 				"@types/mousetrap": "^1.6.15",
 				"@typescript-eslint/eslint-plugin": "^7.8.0",
@@ -3838,6 +3840,12 @@
 				"@types/node": "*"
 			}
 		},
+		"node_modules/@types/he": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@types/he/-/he-1.2.3.tgz",
+			"integrity": "sha512-q67/qwlxblDzEDvzHhVkwc1gzVWxaNxeyHUBF4xElrvjL11O+Ytze+1fGpBHlr/H9myiBUaUXNnNPmBHxxfAcA==",
+			"dev": true
+		},
 		"node_modules/@types/human-number": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/@types/human-number/-/human-number-1.0.2.tgz",
@@ -7259,7 +7267,6 @@
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
 			"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-			"dev": true,
 			"bin": {
 				"he": "bin/he"
 			}

materialious/package.json

@@ -19,6 +19,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.1.0",
 		"@types/eslint": "^8.56.7",
 		"@types/event-source-polyfill": "^1.0.5",
+		"@types/he": "^1.2.3",
 		"@types/human-number": "^1.0.2",
 		"@types/mousetrap": "^1.6.15",
 		"@typescript-eslint/eslint-plugin": "^7.8.0",
@@ -45,6 +46,7 @@
 		"@capacitor/core": "^6.0.0",
 		"beercss": "^3.5.5",
 		"fuse.js": "^7.0.0",
+		"he": "^1.2.0",
 		"human-number": "^2.0.4",
 		"iso-3166": "^4.3.0",
 		"material-dynamic-colors": "^1.1.0",

materialious/src/lib/Transcript.svelte

@@ -6,7 +6,7 @@
 	import type { MediaTimeUpdateEvent } from 'vidstack';
 	import type { MediaPlayerElement } from 'vidstack/elements';
 	import type { VideoPlay } from './Api/model';
-	import { videoLength } from './misc';
+	import { decodeHtmlCharCodes, videoLength } from './misc';
 	import { instanceStore } from './store';
 
 	export let video: VideoPlay;
@@ -104,7 +104,7 @@
 						class:secondary-container={currentTime >= cue.startTime && currentTime <= cue.endTime}
 					>
 						<p class="chip no-margin">{videoLength(cue.startTime)}</p>
-						<p class="transcript-text">{cue.text}</p>
+						<p class="transcript-text">{decodeHtmlCharCodes(cue.text)}</p>
 					</div>
 				{/each}
 			{:else}
@@ -134,6 +134,6 @@
 	}
 
 	.transcript-line .chip {
-		padding: 0.5em;
+		padding: 0 1.5em;
 	}
 </style>

materialious/src/lib/misc.ts

@@ -1,5 +1,6 @@
 import { pushState } from '$app/navigation';
 import { page } from '$app/stores';
+import he from 'he';
 import humanNumber from 'human-number';
 import type Peer from 'peerjs';
 import { get } from 'svelte/store';
@@ -98,9 +99,8 @@ export interface PhasedDescription {
 }
 
 export function decodeHtmlCharCodes(str: string): string {
-	return str.replace(/(&#(\d+);)/g, function (match, capture, charCode) {
-		return String.fromCharCode(charCode);
-	});
+	const { decode } = he;
+	return decode(str);
 }
 
 export function phaseDescription(content: string): PhasedDescription {