message: change media item cover to use resizesensor to figure out when it's content area has changed width instead of screen resize watching
  fixes:
diff: import Vue from 'vue';
  -import { Subscription } from 'rxjs/Subscription';
  import { Component, Prop, Watch } from 'vue-property-decorator';
  import * as View from '!view!./cover.html?style=./cover.styl';
  @@ -8,6 +7,8 @@ import { Ruler } from '../../../../lib/gj-lib-client/components/ruler/ruler-serv
  import { Screen } from '../../../../lib/gj-lib-client/components/screen/screen-service';
  import { AppImgResponsive } from '../../../../lib/gj-lib-client/components/img/responsive/responsive';
  +const ResizeSensor = require('css-element-queries/src/ResizeSensor');
  +
  @View
  @Component({
  components: {
  @@ -16,14 +17,13 @@ import { AppImgResponsive } from '../../../../lib/gj-lib-client/components/img/r
  })
  export class AppMediaItemCover extends Vue {
  @Prop(MediaItem) mediaItem: MediaItem;
  -
  @Prop(Number) maxHeight?: number;
  + private resizeSensor?: any;
  +
  isLoaded = false;
  height = 'auto';
  - private resize$: Subscription | undefined;
  -
  created() {
  if (GJ_IS_SSR) {
  this.recalcHeight();
  @@ -33,24 +33,17 @@ export class AppMediaItemCover extends Vue {
  mounted() {
  this.recalcHeight();
  - this.resize$ = Screen.resizeChanges.subscribe(() => this.recalcHeight());
  + this.resizeSensor = new ResizeSensor(this.$el, () => this.recalcHeight());
  }
  @Watch('mediaItem')
  - mediaItemWatch() {
  - this.recalcHeight();
  - }
  -
  @Watch('maxHeight')
  changes() {
  this.recalcHeight();
  }
  destroyed() {
  - if (this.resize$) {
  - this.resize$.unsubscribe();
  - this.resize$ = undefined;
  - }
  + this.resizeSensor = undefined;
  }
  recalcHeight() {
  