Merge branch 'fix/video-issue-2217' into 'master'

720p videos not playing and not downgrading to 360p

Closes #2217

See merge request !642

src/app/modules/media/modal/modal.component.ts

 import {
   Component,
   HostListener,
+  Injector,
   Input,
   OnDestroy,
   OnInit,
-  ViewChild,
   SkipSelf,
-  Injector,
+  ViewChild,
 } from '@angular/core';
 import { Location } from '@angular/common';
 import { Event, NavigationStart, Router } from '@angular/router';
@@ -119,60 +119,72 @@ export class MediaModalComponent implements OnInit, OnDestroy {
   @ViewChild(MindsVideoComponent, { static: false })
   videoComponent: MindsVideoComponent;
 
-  get videoDirectSrc() {
-    const sources = [
+  videoDirectSrc = [];
+
+  videoTorrentSrc = [];
+
+  constructor(
+    public session: Session,
+    public analyticsService: AnalyticsService,
+    private overlayModal: OverlayModalService,
+    private router: Router,
+    private location: Location,
+    private site: SiteService,
+    private clientMetaService: ClientMetaService,
+    @SkipSelf() injector: Injector
+  ) {
+    this.clientMetaService
+      .inherit(injector)
+      .setSource('single')
+      .setMedium('modal');
+  }
+
+  updateSources() {
+    this.videoDirectSrc = [
       {
         res: '720',
         uri:
-          'api/v1/media/' + this.entity.entity_guid + '/play?s=modal&res=720',
+          'api/v1/media/' +
+          this.entity.entity_guid +
+          '/play/' +
+          Date.now() +
+          '?s=modal&res=720',
         type: 'video/mp4',
       },
       {
         res: '360',
-        uri: 'api/v1/media/' + this.entity.entity_guid + '/play?s=modal',
+        uri:
+          'api/v1/media/' +
+          this.entity.entity_guid +
+          '/play/' +
+          Date.now() +
+          '?s=modal',
         type: 'video/mp4',
       },
     ];
 
+    this.videoTorrentSrc = [
+      { res: '720', key: this.entity.entity_guid + '/720.mp4' },
+      { res: '360', key: this.entity.entity_guid + '/360.mp4' },
+    ];
+
     if (this.entity.custom_data.full_hd) {
-      sources.push({
+      this.videoDirectSrc.unshift({
         res: '1080',
         uri:
-          'api/v1/media/' + this.entity.entity_guid + '/play?s=modal&res=1080',
+          'api/v1/media/' +
+          this.entity.entity_guid +
+          '/play/' +
+          Date.now() +
+          '?s=modal&res=1080',
         type: 'video/mp4',
       });
-    }
 
-    return sources;
-  }
-
-  get videoTorrentSrc() {
-    const sources = [
-      { res: '720', key: this.entity.entity_guid + '/720.mp4' },
-      { res: '360', key: this.entity.entity_guid + '/360.mp4' },
-    ];
-
-    if (this.entity.custom_data.full_hd) {
-      sources.push({ res: '1080', key: this.entity.entity_guid + '/1080.mp4' });
+      this.videoTorrentSrc.unshift({
+        res: '1080',
+        key: this.entity.entity_guid + '/1080.mp4',
+      });
     }
-
-    return sources;
-  }
-
-  constructor(
-    public session: Session,
-    public analyticsService: AnalyticsService,
-    private overlayModal: OverlayModalService,
-    private router: Router,
-    private location: Location,
-    private site: SiteService,
-    private clientMetaService: ClientMetaService,
-    @SkipSelf() injector: Injector
-  ) {
-    this.clientMetaService
-      .inherit(injector)
-      .setSource('single')
-      .setMedium('modal');
   }
 
   ngOnInit() {
@@ -190,6 +202,8 @@ export class MediaModalComponent implements OnInit, OnDestroy {
           ? this.entity.thumbnails.xlarge
           : null;
 
+        this.updateSources();
+
         switch (this.entity.custom_type) {
           case 'video':
             this.contentType = 'video';
@@ -200,6 +214,7 @@ export class MediaModalComponent implements OnInit, OnDestroy {
               ? this.entity.custom_data.dimensions.height
               : 720;
             this.entity.thumbnail_src = this.entity.custom_data.thumbnail_src;
+            this.updateSources();
             break;
           case 'batch':
             this.contentType = 'image';

src/app/modules/media/view/views/theatre.component.ts

 import { Component, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
-import { timer, Subscription } from 'rxjs';
+import { Subscription, timer } from 'rxjs';
 
 import { Client } from '../../../../services/api';
 import { Session } from '../../../../services/session';
@@ -71,8 +71,18 @@ export class MediaTheatreComponent {
   @ViewChild(MindsVideoComponent, { static: false })
   videoComponent: MindsVideoComponent;
 
-  get videoDirectSrc() {
-    const sources = [
+  videoDirectSrc = [];
+  videoTorrentSrc = [];
+
+  constructor(
+    public session: Session,
+    public client: Client,
+    public router: Router,
+    private recommended: RecommendedService
+  ) {}
+
+  updateSources() {
+    this.videoDirectSrc = [
       {
         res: '720',
         uri: 'api/v1/media/' + this.object.guid + '/play?s=modal&res=720',
@@ -85,40 +95,29 @@ export class MediaTheatreComponent {
       },
     ];
 
+    this.videoTorrentSrc = [
+      { res: '720', key: this.object.guid + '/720.mp4' },
+      { res: '360', key: this.object.guid + '/360.mp4' },
+    ];
+
     if (this.object.flags.full_hd) {
-      sources.push({
+      this.videoDirectSrc.unshift({
         res: '1080',
         uri: 'api/v1/media/' + this.object.guid + '/play?s=modal&res=1080',
         type: 'video/mp4',
       });
-    }
-
-    return sources;
-  }
 
-  get videoTorrentSrc() {
-    const sources = [
-      { res: '720', key: this.object.guid + '/720.mp4' },
-      { res: '360', key: this.object.guid + '/360.mp4' },
-    ];
-
-    if (this.object.flags.full_hd) {
-      sources.push({ res: '1080', key: this.object.guid + '/1080.mp4' });
+      this.videoTorrentSrc.unshift({
+        res: '1080',
+        key: this.object.guid + '/1080.mp4',
+      });
     }
-
-    return sources;
   }
 
-  constructor(
-    public session: Session,
-    public client: Client,
-    public router: Router,
-    private recommended: RecommendedService
-  ) {}
-
   set _object(value: any) {
     if (!value.guid) return;
     this.object = value;
+    this.updateSources();
   }
 
   getThumbnail() {