Changes:

- Range Headers for videoplayback
- Changed behaviour of local playlists
- Added UTC timestamps to footer

index.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; img-src *; media-src * blob:; style-src 'unsafe-inline' 'self'; connect-src *" />
+      content="default-src 'self'; base-uri 'none'; form-action 'none'; img-src *; media-src * blob:; style-src 'unsafe-inline' 'self'; connect-src *" />
+
     <link rel="icon" href="/favicon.svg" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <meta name="msapplication-TileColor" content="#181818" />
@@ -16,6 +17,7 @@
 
     <link rel="manifest" href="/manifest.json" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="referrer" content="no-referrer" />
 
     <meta property="og:title" content="Hyperpipe" />
     <meta property="og:type" content="website" />

package.json

@@ -10,20 +10,20 @@
     "check": "prettier --check ."
   },
   "dependencies": {
-    "bootstrap-icons": "^1.9.1",
+    "bootstrap-icons": "^1.10.2",
     "buffer": "^6.0.3",
-    "dompurify": "^2.4.0",
+    "dompurify": "^2.4.1",
     "mux.js": "^6.2.0",
     "peerjs": "^1.4.7",
-    "pinia": "^2.0.23",
+    "pinia": "^2.0.26",
-    "shaka-player": "^4.2.2",
+    "shaka-player": "^4.3.0",
     "stream-browserify": "^3.0.0",
     "vue": "^3.2.38",
     "xml-js": "^1.6.11"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^3.1.2",
+    "@vitejs/plugin-vue": "^3.2.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
-    "vite": "^3.1.8"
+    "vite": "^3.2.4"
   }
 }

src/assets/version.json

@@ -0,0 +1,3 @@
+{
+  "date": "2022-11-26"
+}

src/components/Modal.vue

@@ -2,8 +2,9 @@
 import { ref, watch } from 'vue';
 
 const props = defineProps(['display', 'title', 'n']),
-  emit = defineEmits(['show']),
+  emit = defineEmits(['show']);
-  show = ref(props.display);
+
+const show = ref(props.display);
 
 watch(
   () => props.display,
@@ -13,7 +14,7 @@ watch(
   },
 );
 
-watch(show, n => {
+watch(show, () => {
   emit('show', show.value);
 });
 </script>

src/components/NewPlaylist.vue

@@ -6,19 +6,22 @@ import Modal from './Modal.vue';
 
 import { useRand } from '@/scripts/colors.js';
 import { useStore } from '@/scripts/util.js';
-import {
-  useAuthCreatePlaylist,
-  getAuthPlaylists,
-  getJsonAuth,
-} from '@/scripts/fetch.js';
-import { useI18n } from '@/stores/misc.js';
 
 import {
   useListPlaylists,
   useGetPlaylist,
   useCreatePlaylist,
   useUpdatePlaylist,
-} from '../scripts/db.js';
+} from '@/scripts/db.js';
+
+import {
+  useAuthCreatePlaylist,
+  getAuthPlaylists,
+  getJsonAuth,
+} from '@/scripts/fetch.js';
+
+import { useResults } from '@/stores/results.js';
+import { useI18n, useNav } from '@/stores/misc.js';
 
 const { t } = useI18n(),
   store = useStore(),
@@ -46,13 +49,18 @@ const emit = defineEmits(['play-urls', 'open-playlist']),
 
 const pathname = url => new URL(url).pathname;
 
-const Play = key => {
+const Open = key => {
     console.log(key);
 
     useGetPlaylist(key, res => {
       console.log(res);
       if (res.urls.length > 0) {
-        emit('play-urls', res.urls);
+        useResults().items.songs = {
+          title: 'Local • ' + key,
+          items: res.urls.map(i => ({ ...i, ...{ thumbnail: '/1x1.png' } })),
+        };
+
+        useNav().state.page = 'home';
       } else alert('No songs to play!');
     });
   },
@@ -286,7 +294,7 @@ onMounted(async () => {
           :name="i.name"
           :author="t('title.songs') + ' • ' + i.urls.length"
           :grad="useRand()"
-          @open-album="Play(i.name)" />
+          @open-album="Open(i.name)" />
       </template>
     </div>
 

src/components/Player.vue

@@ -66,6 +66,22 @@ async function Stream() {
 
           const codecs = useStore().getItem('codec');
 
+          audioPlayer
+            .getNetworkingEngine()
+            .registerRequestFilter((_type, req) => {
+              const headers = req.headers;
+
+              let url = new URL(req.uris[0]);
+
+              if (url.pathname.indexOf('/videoplayback') > -1) {
+                if (headers.Range) {
+                  url.searchParams.set('range', headers.Range.split('=')[1]);
+                  req.headers = {};
+                  req.uris[0] = url.toString();
+                }
+              }
+            });
+
           audioPlayer.configure({
             preferredAudioCodecs: codecs ? codecs.split(':') : ['opus', 'mp4a'],
             manifest: {

src/components/Prefs.vue

@@ -6,10 +6,16 @@ import {
   HYPERPIPE_INSTANCE,
   getJson,
 } from '@/scripts/fetch.js';
-import { useStore } from '@/scripts/util.js';
 
+import { useStore } from '@/scripts/util.js';
 import { SUPPORTED_LOCALES, useI18n } from '@/stores/misc.js';
 
+const date = ref('unknown');
+
+import('@/assets/version.json').then(v => {
+  date.value = v.date;
+});
+
 const { t, setupLocale } = useI18n(),
   instances = ref([]),
   hypInstances = ref([]),
@@ -286,6 +292,7 @@ onMounted(() => {
   </div>
 
   <footer>
+    {{ date }}
     <a
       class="bi bi-code-slash"
       target="_blank"

src/components/SongItem.vue

@@ -22,8 +22,9 @@ const props = defineProps({
     art: String,
     playlistId: String,
   }),
-  emit = defineEmits(['open-song', 'remove']),
+  emit = defineEmits(['open-song', 'remove']);
-  show = ref(false);
+
+const show = ref(false);
 
 const openSong = el => {
     if (!el.classList.contains('ign')) {

src/scripts/dash.js

@@ -25,6 +25,7 @@ export function useDash(streams, len) {
       name: 'AdaptationSet',
       attributes: {
         id: i,
+        contentType: 'audio',
         mimeType: mimeTypes[i],
         startWithSAP: '1',
         subsegmentAlignment: 'true',
@@ -108,6 +109,9 @@ export function useDash(streams, len) {
           {
             type: 'element',
             name: 'Period',
+            attributes: {
+              id: 0,
+            },
             elements: sets,
           },
         ],

src/stores/misc.js

@@ -34,7 +34,7 @@ export const SUPPORTED_LOCALES = [
   },
   {
     code: 'fa',
-    name: 'فارسی'
+    name: 'فارسی',
   },
   {
     code: 'fr',

src/stores/results.js

@@ -68,7 +68,6 @@ export const useResults = defineStore('results', () => {
     useNav().state.page = 'home';
 
     next.value = hash + '?nextpage=' + encodeURIComponent(json.nextpage);
-
   }
 
   return {