Merge pull request #7183 from thornbill/theme-videos

Improve theme video support

src/components/playback/playbackmanager.js

@@ -649,6 +649,7 @@ function normalizePlayOptions(playOptions) {
 
 function truncatePlayOptions(playOptions) {
     return {
+        aspectRatio: playOptions.aspectRatio,
         fullscreen: playOptions.fullscreen,
         mediaSourceId: playOptions.mediaSourceId,
         audioStreamIndex: playOptions.audioStreamIndex,
@@ -2663,6 +2664,7 @@ export class PlaybackManager {
                 const audioStreamIndex = playOptions.audioStreamIndex;
                 const subtitleStreamIndex = playOptions.subtitleStreamIndex;
                 const options = {
+                    aspectRatio: playOptions.aspectRatio,
                     maxBitrate,
                     startPosition,
                     isPlayback: null,
@@ -2720,7 +2722,7 @@ export class PlaybackManager {
                     }
 
                     const streamInfo = createStreamInfo(apiClient, item.MediaType, item, mediaSource, startPosition, player);
-
+                    streamInfo.aspectRatio = playOptions.aspectRatio;
                     streamInfo.fullscreen = playOptions.fullscreen;
 
                     const playerData = getPlayerData(player);

src/components/themeMediaPlayer.js

@@ -40,6 +40,7 @@ function playThemeMedia(items, ownerId) {
 
         playbackManager.play({
             items: currentThemeItems,
+            aspectRatio: 'cover',
             fullscreen: false,
             enableRemotePlayers: false
         }).then(function () {

src/plugins/htmlVideoPlayer/plugin.js

@@ -402,7 +402,7 @@ export class HtmlVideoPlayer {
         if (options.resetSubtitleOffset !== false) this.resetSubtitleOffset();
 
         const elem = await this.createMediaElement(options);
-        this.#applyAspectRatio();
+        this.#applyAspectRatio(options.aspectRatio || this.getAspectRatio());
 
         await this.updateVideoUrl(options);
         return this.setCurrentSrc(elem, options);
@@ -1608,13 +1608,11 @@ export class HtmlVideoPlayer {
 
         if (!dlg) {
             return import('./style.scss').then(() => {
-                loading.show();
+                if (options.fullscreen) loading.show();
 
                 const playerDlg = document.createElement('div');
                 playerDlg.setAttribute('dir', 'ltr');
-
                 playerDlg.classList.add('videoPlayerContainer');
-
                 if (options.fullscreen) {
                     playerDlg.classList.add('videoPlayerContainer-onTop');
                 }