Add HLS protocol option as a temporary fix for issue in Chrome.

https://forums.plex.tv/t/plex-skipping-forward-by-a-few-seconds-on-web-player/402112/

package-lock.json

@@ -7762,6 +7762,12 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
+    "mux.js": {
+      "version": "5.6.4",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.6.4.tgz",
+      "integrity": "sha512-k7UUafOn1axLqcnx0oF3xbTrVMXHd54ytwFHW30v+SRbZED63QjK7al+q9KMlF+NQOkydd+46xPqHk+ELZxL+g==",
+      "dev": true
+    },
     "mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",

package.json

@@ -36,6 +36,7 @@
     "fscreen": "^1.0.2",
     "last-commit-log": "^3.0.4",
     "libjass": "^0.11.0",
+    "mux.js": "^5.6.4",
     "nconf": "^0.10.0",
     "sass": "^1.26.10",
     "sass-loader": "^8.0.2",

src/components/settings.vue

@@ -45,6 +45,24 @@
 
     <v-divider />
 
+    <div
+      style="text-align:center"
+      class="pt-4"
+    >
+      <h4 style="text-align:initial">
+        Streaming Protocol
+      </h4>
+
+      <v-select
+        :value="GET_STREAMING_PROTOCOL"
+        :items="protocols"
+        :rules="[v => !!v || 'Item is required']"
+        label="Streaming Protocol"
+        required
+        @input="SET_STREAMING_PROTOCOL"
+      />
+    </div>
+
     <div
       style="text-align:center"
       class="pt-4"
@@ -110,6 +128,7 @@
 
 <script>
 import { mapActions, mapGetters, mapMutations } from 'vuex';
+import { streamingProtocols } from '@/utils/streamingprotocols';
 
 export default {
   name: 'Settings',
@@ -122,6 +141,14 @@ export default {
       'GET_SYNCMODE',
     ]),
 
+    ...mapGetters('slplayer', [
+      'GET_STREAMING_PROTOCOL',
+    ]),
+
+    protocols() {
+      return streamingProtocols;
+    },
+
     syncmode: {
       get() {
         return this.GET_SYNCMODE;
@@ -145,6 +172,9 @@ export default {
       'SET_SYNCMODE',
     ]),
 
+    ...mapMutations('slplayer', [
+      'SET_STREAMING_PROTOCOL',
+    ]),
   },
 };
 </script>

src/player/init.js

@@ -1,3 +1,4 @@
+import muxjs from 'mux.js';
 import shaka from 'shaka-player/dist/shaka-player.ui.debug';
 import store from '@/store';
 import playerUiPlugins from '@/player/ui';
@@ -6,6 +7,8 @@ import {
   getPlayer, setPlayer, getOverlay, setOverlay,
 } from './state';
 
+window.muxjs = muxjs;
+
 playerUiPlugins(store);
 
 shaka.log.setLevel(shaka.log.Level.ERROR);

src/store/index.js

@@ -28,6 +28,7 @@ const persistedState = createPersistedState({
     'slplayer.subtitleSize',
     'slplayer.subtitlePosition',
     'slplayer.subtitleColor',
+    'slplayer.streamingProtocol',
   ],
 });
 

src/store/modules/slplayer/getters.js

@@ -1,10 +1,13 @@
 import { makeUrl } from '@/utils/fetchutils';
+import { protocolExtension } from '@/utils/streamingprotocols';
 import contenttitleutils from '@/utils/contenttitleutils';
 import qualities from './qualities';
 
 export default {
   GET_PLEX_DECISION: (state) => state.plexDecision,
 
+  GET_STREAMING_PROTOCOL: (state) => state.streamingProtocol,
+
   GET_PLEX_SERVER: (state, getters, rootState, rootGetters) => rootGetters['plexservers/GET_PLEX_SERVER'](rootGetters['plexclients/GET_ACTIVE_SERVER_ID']),
 
   GET_PLEX_SERVER_ACCESS_TOKEN: (state, getters) => (getters.GET_PLEX_SERVER
@@ -27,7 +30,10 @@ export default {
     ? rootGetters['plexclients/GET_ACTIVE_MEDIA_METADATA'].Media[getters.GET_MEDIA_INDEX].Part[0].id
     : null),
 
-  GET_SRC_URL: (state, getters) => makeUrl(`${getters.GET_PLEX_SERVER_URL}/video/:/transcode/universal/start.mpd`, getters.GET_DECISION_AND_START_PARAMS),
+  GET_SRC_URL: (state, getters) => makeUrl(
+    `${getters.GET_PLEX_SERVER_URL}/video/:/transcode/universal/start.${protocolExtension[getters.GET_STREAMING_PROTOCOL]}`,
+    getters.GET_DECISION_AND_START_PARAMS,
+  ),
 
   GET_SUBTITLE_BASE_URL: (state, getters) => `${getters.GET_PLEX_SERVER_URL}/video/:/transcode/universal/subtitles`,
 
@@ -114,7 +120,7 @@ export default {
   ),
 
   GET_PLEX_PROFILE_EXTRAS: (state, getters, rootState, rootGetters) => {
-    const base = 'append-transcode-target-codec(type=videoProfile&context=streaming&audioCodec=aac&protocol=dash)';
+    const base = `append-transcode-target-codec(type=videoProfile&context=streaming&audioCodec=aac&protocol=${getters.GET_STREAMING_PROTOCOL})`;
     return rootGetters['settings/GET_SLPLAYERQUALITY']
       ? `${base}+add-limitation(scope=videoCodec&scopeName=*&type=upperBound&name=video.bitrate&value=${rootGetters['settings/GET_SLPLAYERQUALITY']}&replace=true)`
       : base;
@@ -124,8 +130,9 @@ export default {
     hasMDE: 1,
     path: rootGetters['plexclients/GET_ACTIVE_MEDIA_METADATA'].key,
     mediaIndex: getters.GET_MEDIA_INDEX,
+    // TODO: investigate multipart file support
     partIndex: 0,
-    protocol: 'dash',
+    protocol: getters.GET_STREAMING_PROTOCOL,
     fastSeek: 1,
     directPlay: 0,
     directStream: rootGetters['settings/GET_SLPLAYERFORCETRANSCODE'] ? 0 : 1,
@@ -135,8 +142,7 @@ export default {
     ...rootGetters['settings/GET_SLPLAYERQUALITY'] && { maxVideoBitrate: rootGetters['settings/GET_SLPLAYERQUALITY'] }, // only include if not null
     addDebugOverlay: 0,
 
-    // Shaka doesn't seem to support switching
-    // TODO: figure out how to make it work
+    // TODO: figure out how to make autoAdjustQuality work
     autoAdjustQuality: 0,
     directStreamAudio: rootGetters['settings/GET_SLPLAYERFORCETRANSCODE'] ? 0 : 1,
     mediaBufferSize: 102400, // ~100MB (same as what Plex Web uses)

src/store/modules/slplayer/mutations.js

@@ -84,4 +84,8 @@ export default {
   SET_SUBTITLE_OFFSET: (state, offset) => {
     state.subtitleOffset = offset;
   },
+
+  SET_STREAMING_PROTOCOL: (state, protocol) => {
+    state.streamingProtocol = protocol;
+  },
 };

src/store/modules/slplayer/state.js

@@ -29,6 +29,7 @@ const state = () => ({
   subtitlePosition: subtitlePositions.Bottom,
   subtitleColor: subtitleColors.White,
   subtitleOffset: 0,
+  streamingProtocol: 'dash',
 });
 
 export default state;

src/utils/streamingprotocols.js

@@ -0,0 +1,9 @@
+export const streamingProtocols = [
+  'dash',
+  'hls',
+];
+
+export const protocolExtension = {
+  dash: 'mpd',
+  hls: 'm3u8',
+};