Merge branch 'feature/videoplayer-rework' of https://github.com/ViewT…

…ube/viewtube into feature/videoplayer-rework
ViewTube · Jan 17, 2024 · 700ff76 · 700ff76
2 parents d92f9cd + 596c1a5
commit 700ff76
Show file tree

Hide file tree

Showing 8 changed files with 19,756 additions and 10 deletions.
diff --git a/5USuekk16e0.json b/5USuekk16e0.json
diff --git a/client/components/flip/Settings.vue b/client/components/flip/Settings.vue
@@ -1,17 +1,28 @@
 <script setup lang="ts">
 const uiState = inject<UIState>('uiState');
+const videoState = inject<VideoState>('videoState');
 </script>
 
 <template>
   <div class="flip-settings-container clickaway-div" @click="uiState.closeSettings">
-    <div class="flip-settings">
+    <div class="flip-settings" @click.stop>
       <div class="flip-setting mobile-only">
         <VTIcon class="flip-setting-icon" name="mdi:volume" />
         <FlipVolume mobile />
       </div>
       <div class="flip-setting">
-        <VTIcon class="flip-setting-icon" name="mdi:cog" />
-        <p>Other setting</p>
+        <VTIcon class="flip-setting-icon" name="mdi:high-definition-box" />
+        <p>Video Quality</p>
+        <div class="quality-list">
+          <div
+            v-for="(quality, index) in videoState.video.videoQualityList"
+            :key="index"
+            :class="{ selected: index === videoState.video.videoQualityIndex }"
+            class="quality"
+          >
+            {{ quality.label }}
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -37,9 +48,20 @@ const uiState = inject<UIState>('uiState');
     .flip-setting {
       padding: 10px 15px 10px 40px;
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
       position: relative;
 
+      .quality-list {
+        display: flex;
+        flex-direction: column;
+
+        .quality {
+          &.selected {
+            color: var(--theme-color);
+          }
+        }
+      }
+
       &.mobile-only {
         @media screen and (min-width: $mobile-width) {
           display: none;

diff --git a/client/composables/videoplayer/videoState.ts b/client/composables/videoplayer/videoState.ts
@@ -1,4 +1,5 @@
 import type {
+  QualityInfo,
   VideoplaybackAdapterResponse,
   VideoplaybackAdapterType
 } from '@/utils/videoplayer/adapters/adapter';
@@ -24,8 +25,12 @@ export const useVideoState = (
     volume: 1,
     loop: false,
     speed: 1,
-    videoQualityList: [],
-    audioQualityList: [],
+    videoQualityList: [] as QualityInfo[],
+    audioQualityList: [] as QualityInfo[],
+    videoQualityAuto: true,
+    audioQualityAuto: true,
+    videoQualityIndex: 0,
+    audioQualityIndex: 0,
     videoTrackList: [],
     audioTrackList: []
   });
@@ -87,6 +92,12 @@ export const useVideoState = (
     adapterInstance.value.onPlaybackRateChanged(() => {
       videoState.speed = adapterInstance.value?.getPlaybackRate() ?? 1;
     });
+    adapterInstance.value.onVideoQualityChanged(e => {
+      videoState.videoQualityIndex = e.newQuality;
+    });
+    adapterInstance.value.onAudioQualityChanged(e => {
+      videoState.audioQualityIndex = e.newQuality;
+    });
   };
 
   onMounted(async () => {

diff --git a/client/utils/icons.ts b/client/utils/icons.ts
@@ -20,13 +20,13 @@ export const iconSafelist = [
   'mdi-chevron-left',
   'mdi-chevron-right',
   'mdi-chevron-up',
+  'mdi-clipboard-text-time-outline',
   'mdi-close',
   'mdi-cloud-check-outline',
   'mdi-cog',
   'mdi-comment-outline',
   'mdi-comment-remove-outline',
   'mdi-content-copy',
-  'mdi-clipboard-text-time-outline',
   'mdi-counter',
   'mdi-database-export-outline',
   'mdi-delete',
@@ -39,6 +39,7 @@ export const iconSafelist = [
   'mdi-github',
   'mdi-heart',
   'mdi-high-definition',
+  'mdi-high-definition-box',
   'mdi-history',
   'mdi-home',
   'mdi-import',

diff --git a/client/utils/videoplayer/adapters/adapter.ts b/client/utils/videoplayer/adapters/adapter.ts
@@ -1,6 +1,16 @@
-import type { BitrateInfo, MediaInfo } from 'dashjs';
-
-export type EventListenerCallback = (e: any) => void;
+import type { BitrateInfo, MediaInfo, MediaType } from 'dashjs';
+
+export type EventListenerCallback<E = any> = (e: E) => void;
+
+export class QualityInfo implements BitrateInfo {
+  mediaType: MediaType;
+  bitrate: number;
+  width: number;
+  height: number;
+  scanType: string;
+  qualityIndex: number;
+  label: string;
+}
 
 export interface VideoplaybackAdapterResponse {
   type: 'dash' | 'hls' | 'native';
@@ -17,6 +27,8 @@ export interface VideoplaybackAdapterResponse {
   onWaiting: (callback: EventListenerCallback) => void;
   onVolumeChanged: (callback: EventListenerCallback) => void;
   onPlaybackRateChanged: (callback: EventListenerCallback) => void;
+  onVideoQualityChanged: (callback: EventListenerCallback) => void;
+  onAudioQualityChanged: (callback: EventListenerCallback) => void;
 
   getTime: () => number;
   getDuration: () => number;

diff --git a/client/utils/videoplayer/adapters/dashAdapter.ts b/client/utils/videoplayer/adapters/dashAdapter.ts
@@ -34,6 +34,23 @@ export const dashAdapter: VideoplaybackAdapter = async options => {
   const onWaiting = registerCallback(dashjs.MediaPlayer.events.PLAYBACK_WAITING);
   const onVolumeChanged = registerCallback(dashjs.MediaPlayer.events.PLAYBACK_VOLUME_CHANGED);
   const onPlaybackRateChanged = registerCallback(dashjs.MediaPlayer.events.PLAYBACK_RATE_CHANGED);
+  const onQualityChanged = registerCallback(dashjs.MediaPlayer.events.QUALITY_CHANGE_RENDERED);
+
+  const onVideoQualityChanged = (callback: EventListenerCallback) => {
+    onQualityChanged((e: dashjs.QualityChangeRenderedEvent) => {
+      if (e.mediaType === 'video') {
+        callback(e.newQuality);
+      }
+    });
+  };
+
+  const onAudioQualityChanged = (callback: EventListenerCallback) => {
+    onQualityChanged((e: dashjs.QualityChangeRenderedEvent) => {
+      if (e.mediaType === 'audio') {
+        callback(e);
+      }
+    });
+  };
 
   const destroy = () => {
     unregisterCallback(dashjs.MediaPlayer.events.PLAYBACK_STARTED);
@@ -67,6 +84,8 @@ export const dashAdapter: VideoplaybackAdapter = async options => {
     return bufferLevel;
   };
   const getVideoQualityList = () => {
+    console.log(mediaPlayer.getBitrateInfoListFor('video'));
+    console.log(mediaPlayer.getTracksFor('video'));
     return mediaPlayer.getBitrateInfoListFor('video').map(bitrateInfo => ({
       ...bitrateInfo,
       label: `${bitrateInfo.height}p - ${humanizeBitrate(bitrateInfo.bitrate)}`
@@ -136,6 +155,8 @@ export const dashAdapter: VideoplaybackAdapter = async options => {
     onCanPlay,
     onWaiting,
     onVolumeChanged,
+    onVideoQualityChanged,
+    onAudioQualityChanged,
 
     getTime,
     getDuration,