use event bus

src/csui/PlayerUiComponent.vue

@@ -47,7 +47,7 @@
       <div class="content flex flex-column">
         <!-- autodetection warning -->
 
-        <div class="warning-area">
+        <div v-if="ultrawidify?.videoData?.hasDrm" class="warning-area">
           <div class="warning-box">
             <div>
               <mdicon name="alert" :size="42" />
@@ -64,7 +64,7 @@
           <template v-if="settingsInitialized">
             <VideoSettings
               :settings="settings"
-              :eventBus="eventBus"
+              :eventBus="ultrawidify.eventBus"
             ></VideoSettings>
             <!-- <ResizerDebugPanel :debugData="debugData">
             </ResizerDebugPanel> -->

src/csui/PlayerUiPanels/AlignmentOptionsControlComponent.vue

@@ -68,84 +68,90 @@ import VideoAlignmentType from '../../common/enums/VideoAlignmentType.enum';
 
 
 export default {
+  props: [
+    'eventBus'
+  ],
   data() {
     return {
       VideoAlignment: VideoAlignmentType
     }
   },
   methods: {
-    align() {
+    align(alignmentX, alignmentY) {
-
+      console.warn('sending set alignment:', {x: alignmentX, y: alignmentY});
+      this.eventBus.send('set-alignment', {x: alignmentX, y: alignmentY})
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
-.alignment-box {
+.uw-ultrawidify-container-root {
-  aspect-ratio: 1;
+  .alignment-box {
-  width: 100%;
+    aspect-ratio: 1;
-  min-width: 40px;
+    width: 100%;
-  max-width: 80px;
+    min-width: 40px;
-
+    max-width: 80px;
-  display: flex;
-  flex-direction: column;
-
-  .row {
-    flex: 0 0 33%;
 
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-  }
 
-  .col {
+    .row {
-    flex: 0 0 33%;
+      flex: 0 0 33%;
 
-    display: flex;
+      display: flex;
-
+      flex-direction: row;
-    .alignment-ui {
-      width: 50%;
-      height: 50%;
     }
 
-    align-items: center;
+    .col {
-    justify-content: center;
+      flex: 0 0 33%;
 
-    &.top  {
+      display: flex;
-      align-items: flex-start;
 
       .alignment-ui {
-        border-top: 3px solid #fff;
+        width: 50%;
+        height: 50%;
       }
-    }
-    &.bottom  {
-      align-items: flex-end;
 
-      .alignment-ui {
+      align-items: center;
-        border-bottom: 3px solid #fff;
+      justify-content: center;
+
+      &.top  {
+        align-items: flex-start;
+
+        .alignment-ui {
+          border-top: 3px solid #fff;
+        }
       }
-    }
+      &.bottom  {
-    &.left {
+        align-items: flex-end;
-      justify-content: flex-start;
 
-      .alignment-ui {
+        .alignment-ui {
-        border-left: 3px solid #fff;
+          border-bottom: 3px solid #fff;
+        }
       }
-    }
+      &.left {
-    &.right {
+        justify-content: flex-start;
-      justify-content: flex-end;
 
-      .alignment-ui {
+        .alignment-ui {
-        border-right: 3px solid #fff;
+          border-left: 3px solid #fff;
+        }
       }
-    }
+      &.right {
+        justify-content: flex-end;
 
-    &.center.ycenter {
+        .alignment-ui {
+          border-right: 3px solid #fff;
+        }
+      }
 
-      .alignment-ui {
+      &.center.ycenter {
-        width: 25%;
+
-        height: 25%;
+        .alignment-ui {
-        background-color: #fff;
+          width: 25%;
+          height: 25%;
+          background-color: #fff;
+        }
       }
     }
   }

src/csui/PlayerUiPanels/VideoSettings.vue

@@ -120,7 +120,9 @@
       </div>
 
       <div class="flex flex-row">
-        <alignment-options-control-component>
+        <alignment-options-control-component
+          :eventBus="eventBus"
+        >
         </alignment-options-control-component>
       </div>
 
@@ -167,7 +169,7 @@ export default {
     'settings',
     'frame',
     'cropModePersistence',
-    'eventBus'
+    'eventBus',
   ],
   created() {
     this.exec = new ExecAction(this.settings, window.location.hostname);
@@ -238,24 +240,35 @@ export default {
 }
 </script>
 
+<style lang="scss">
+.uw-ultrawidify-container-root {
+  all: revert;
+  * {
+    all: revert;
+  }
+}
+
+</style>
+
 <style lang="scss" src="../../res/css/flex.scss" scoped></style>
 <style lang="scss" src="../res-common/panels.scss" scoped></style>
 <style lang="scss" src="../res-common/common.scss" scoped></style>
 
 <style lang="scss" scoped>
-.b3 {
+.uw-ultrawidify-container-root {
-  width: 9rem;
+  .b3 {
-  padding-left: 0.33rem;
+    width: 9rem;
-  padding-right: 0.33rem;
+    padding-left: 0.33rem;
+    padding-right: 0.33rem;
+  }
+  .input-slider {
+    width: 480px;
+  }
+  .warning-lite {
+    padding-right: 16px;
+    padding-bottom: 16px;
+    padding-top: 8px;
+  }
 }
-.input-slider {
-  width: 480px;
-}
-.warning-lite {
-  padding-right: 16px;
-  padding-bottom: 16px;
-  padding-top: 8px;
-}
-
 
 </style>

src/ext/lib/uwui/PlayerNotificationUI.js

@@ -24,7 +24,7 @@ class PlayerNotificationUi extends UI {
       PlayerNotificationUi.getStoreConfig(),
       PlayerNotificationUi.getUiConfig(playerElement),
       PlayerNotificationUi.getCommsConfig(),
-      eventBus
+      { eventBus }
     );
 
     this.settings = settings;

src/ext/lib/uwui/PlayerUI.js

@@ -20,13 +20,14 @@ class PlayerUi extends UI {
     playerElement,
     settings,
     eventBus,
+    videoData
   ) {
     super(
       'ultrawidifyUi',
       PlayerUi.getStoreConfig(),
       PlayerUi.getUiConfig(playerElement),
       PlayerUi.getCommsConfig(),
-      eventBus
+      { eventBus, videoData }
     );
 
     this.settings = settings;

src/ext/lib/uwui/UI.js

@@ -14,13 +14,13 @@ class UI {
     storeConfig,
     uiConfig, // {component, parentElement?}
     commsConfig,
-    eventBus
+    ultrawidify, // or, at least, videoData instance + event bus
   ) {
     this.interfaceId = interfaceId;
     this.commsConfig = commsConfig;
     this.storeConfig = storeConfig;
     this.uiConfig = uiConfig;
-    this.eventBus = eventBus;
+    this.ultrawidify = ultrawidify;
 
     this.init();
   }
@@ -71,12 +71,12 @@ class UI {
           app.mixin({
             data() {
               return {
-                eventBus: options.eventBus
+                ultrawidify: options.ultrawidify
               }
             }
           })
         }
-      }, {eventBus: this.eventBus});
+      }, {ultrawidify: this.ultrawidify});
 
     if (this.vuexStore) {
       app.use(this.vuexStore);

src/ext/lib/video-data/PlayerData.ts

@@ -95,7 +95,7 @@ class PlayerData {
       this.element = this.getPlayer();
 
       this.notificationService = new PlayerNotificationUi(this.element, this.settings, this.eventBus);
-      this.ui = new PlayerUi(this.element, this.settings, this.eventBus);
+      this.ui = new PlayerUi(this.element, this.settings, this.eventBus, this.videoData);
       this.ui.init();
 
       this.dimensions = undefined;

src/ext/lib/video-transform/Resizer.ts

@@ -591,6 +591,8 @@ class Resizer {
 
     const {realVideoWidth, realVideoHeight, marginX, marginY} = this.computeVideoDisplayedDimensions();
 
+    const {postZoomVideoDimensions, displayedVideoDimensions, crop} = this.computeCroppedAreas(stretchFactors);
+
     // correct any remaining element size discrepencies (applicable only to certain crop strategies!)
     // NOTE: it's possible that we might also need to apply a similar measure for CropPillarbox strategy
     // (but we'll wait for bug reports before doing so).
@@ -605,6 +607,9 @@ class Resizer {
       stretchFactors.yFactor *= autoHeightCompensationFactor;
     }
 
+    const offsetWidth = this.conf.video.offsetWidth;
+    const offsetHeight = this.conf.video.offsetHeight;
+
     const wdiff = this.conf.player.dimensions.width - realVideoWidth;
     const hdiff = this.conf.player.dimensions.height - realVideoHeight;