(WIP): Media modal - handle video and more

src/app/modules/blockchain/marketing/marketing.component.scss

@@ -155,7 +155,7 @@ m-blockchain--marketing {
 
  m-video .minds-video-play-icon {
  @include m-theme(){
- text-shadow: 0 0 3px themed($m-grey-900);
+ text-shadow: 0 0 3px rgba(themed($m-black-always), 0.6);
  }
  }
 

src/app/modules/legacy/components/cards/activity/activity.html

@@ -173,7 +173,8 @@
  [guid]="activity.custom_data.guid"
  [playCount]="activity['play:count']"
  [torrent]="[{ res: '360', key: activity.custom_data.guid + '/360.mp4' }]"
- (triggerMediaModal)="showMediaModal('video')"
+ (requestedMediaModal)="showMediaModal()"
+ (videoMetadataLoaded)="setVideoDimensions($event)"
  #player>
  <video-ads [player]="player" *ngIf="activity.monetized"></video-ads>
  </m-video>
@@ -190,7 +191,7 @@
  </span>
  </div>
 
- <a class="m-activity--image-link" (click)="showMediaModal('image')">
+ <a class="m-activity--image-link">
  <img [src]="activity.thumbnail_src" (error)="activity.thumbnail_src = null">
  </a>
  </div>
@@ -205,7 +206,7 @@
  <span i18n="@@M__COMMON__CONFIRM_18">Click to confirm your are 18+</span>
  </span>
  </div>
- <a class="m-activity--image-link" (click)="showMediaModal('image')">
+ <a class="m-activity--image-link" (click)="showMediaModal()">
  <img [src]="activity.custom_data[0].src" style="width:100%"
  (error)="activity.custom_data[0].src = minds.cdn_assets_url + 'assets/logos/placeholder-bulb.jpg'"
  *ngIf="activity.custom_data"

src/app/modules/legacy/components/cards/activity/activity.ts

@@ -11,7 +11,6 @@ import {
  Injector,
 } from '@angular/core';
 
-import { Location } from '@angular/common';
 import { Client } from '../../../../../services/api';
 import { Session } from '../../../../../services/session';
 import { AttachmentService } from '../../../../../services/attachment';
@@ -113,7 +112,6 @@ export class Activity implements OnInit {
  private cd: ChangeDetectorRef,
  private entitiesService: EntitiesService,
  private router: Router,
- private location: Location,
  protected blockListService: BlockListService,
  protected activityAnalyticsOnViewService: ActivityAnalyticsOnViewService,
  protected newsfeedService: NewsfeedService,
@@ -436,12 +434,11 @@ export class Activity implements OnInit {
  this.activity.mature_visibility = !this.activity.mature_visibility;
  }
 
- detectChanges() {
- this.cd.markForCheck();
- this.cd.detectChanges();
+ setVideoDimensions($event) {
+ this.activity.custom_data.dimensions = $event.dimensions;
  }
 
- showMediaModal(subtype: string) {
+ showMediaModal() {
  // Mobile users go to media page instead of modal
  if (isMobile()) {
  this.router.navigate([`/media/${this.activity.entity_guid}`]);
@@ -449,11 +446,14 @@ export class Activity implements OnInit {
 
  this.activity.modal_source_url = this.router.url;
 
- // 'image' or 'video'
- this.activity.modal_subtype = subtype;
-
  this.overlayModal.create(MediaModalComponent, this.activity, {
  class: 'm-overlayModal--media'
  }).present();
+
+ }
+
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
  }
 }

src/app/modules/media/components/video/players/direct-http.component.ts

@@ -2,9 +2,7 @@ import {
  ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output,
  ViewChild
 } from '@angular/core';
-import { Router } from '@angular/router';
 import { MindsPlayerInterface } from './player.interface';
-import isMobile from '../../../../../helpers/is-mobile';
 
 @Component({
  moduleId: module.id,
@@ -38,19 +36,24 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
  @Output() onPause: EventEmitter<HTMLVideoElement> = new EventEmitter();
  @Output() onEnd: EventEmitter<HTMLVideoElement> = new EventEmitter();
  @Output() onError: EventEmitter<{ player: HTMLVideoElement, e }> = new EventEmitter();
- @Output() triggerMediaModal: EventEmitter<any> = new EventEmitter();
+ @Output() onCanPlay: EventEmitter<any> = new EventEmitter();
+ @Output() onLoadedMetadata: EventEmitter<any> = new EventEmitter();
+ @Output() onLoadedData: EventEmitter<any> = new EventEmitter();
+ @Output() requestedMediaModal: EventEmitter<any> = new EventEmitter();
 
  loading: boolean = false;
- isModal: boolean = false;
 
  constructor(
  protected cd: ChangeDetectorRef,
- private router: Router,
  ) { }
+
  protected _emitPlay = () => this.onPlay.emit(this.getPlayer());
  protected _emitPause = () => this.onPause.emit(this.getPlayer());
  protected _emitEnd = () => this.onEnd.emit(this.getPlayer());
  protected _emitError = e => this.onError.emit({ player: this.getPlayer(), e });
+ protected _emitCanPlay = () => this.onCanPlay.emit(this.getPlayer());
+ protected _emitLoadedMetadata = () => this.onLoadedMetadata.emit(this.getPlayer());
+ protected _emitLoadedData = () => this.onLoadedData.emit(this.getPlayer());
 
  protected _canPlayThrough = () => {
  this.loading = false;
@@ -58,7 +61,7 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
  };
 
  protected _dblClick = () => {
- this.requestFullScreen();
+ this.requestedMediaModal.emit();
  };
 
  protected _onPlayerError = e => {
@@ -81,9 +84,11 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
  player.addEventListener('ended', this._emitEnd);
  player.addEventListener('error', this._onPlayerError);
  player.addEventListener('canplaythrough', this._canPlayThrough);
+ player.addEventListener('canplay', this._emitCanPlay);
+ player.addEventListener('loadedmetadata', this._emitLoadedMetadata);
+ player.addEventListener('loadeddata', this._emitLoadedData);
 
  this.loading = true;
- this.isModal = document.body.classList.contains('m-overlay-modal--shown');
  }
 
  ngOnDestroy() {
@@ -96,6 +101,9 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
  player.removeEventListener('ended', this._emitEnd);
  player.removeEventListener('error', this._onPlayerError);
  player.removeEventListener('canplaythrough', this._canPlayThrough);
+ player.removeEventListener('canplay', this._emitCanPlay);
+ player.removeEventListener('loadedmetadata', this._emitLoadedMetadata);
+ player.removeEventListener('loadeddata', this._emitLoadedData);
  }
  }
 
@@ -172,21 +180,13 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
  return {};
  }
 
+ requestMediaModal() {
+ this.requestedMediaModal.emit();
+ }
+
  detectChanges() {
  this.cd.markForCheck();
  this.cd.detectChanges();
  }
 
- requestMediaModal() {
- // Don't reopen modal if you're already on it
- if ( this.isModal ) {
- this.toggle();
- }
-
- // Mobile users go to media page instead of modal
- if (isMobile()) {
- this.router.navigate([`/media/${this.guid}`]);
- }
- this.triggerMediaModal.emit();
- }
 }

src/app/modules/media/components/video/players/torrent.component.ts

@@ -3,12 +3,10 @@ import {
  ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output,
  ViewChild
 } from '@angular/core';
-import { Router } from '@angular/router';
 import { MindsPlayerInterface } from './player.interface';
 import { WebtorrentService } from '../../../../webtorrent/webtorrent.service';
 import { Client } from '../../../../../services/api/client';
 import base64ToBlob from '../../../../../helpers/base64-to-blob';
-import isMobile from '../../../../../helpers/is-mobile';
 
 @Component({
  moduleId: module.id,
@@ -41,7 +39,10 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
  @Output() onPause: EventEmitter<HTMLVideoElement> = new EventEmitter();
  @Output() onEnd: EventEmitter<HTMLVideoElement> = new EventEmitter();
  @Output() onError: EventEmitter<{ player, e }> = new EventEmitter();
- @Output() triggerMediaModal: EventEmitter<any> = new EventEmitter();
+ @Output() onCanPlay: EventEmitter<any> = new EventEmitter();
+ @Output() onLoadedMetadata: EventEmitter<any> = new EventEmitter();
+ @Output() onLoadedData: EventEmitter<any> = new EventEmitter();
+ @Output() requestedMediaModal: EventEmitter<any> = new EventEmitter();
 
  initialized: boolean = false;
  loading: boolean = false;
@@ -66,13 +67,15 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
  protected cd: ChangeDetectorRef,
  protected client: Client,
  protected webtorrent: WebtorrentService,
- private router: Router,
  ) { }
 
  protected _emitPlay = () => this.onPlay.emit(this.getPlayer());
  protected _emitPause = () => this.onPause.emit(this.getPlayer());
  protected _emitEnd = () => this.onEnd.emit(this.getPlayer());
  protected _emitError = e => this.onError.emit({ player: this.getPlayer(), e});
+ protected _emitCanPlay = () => this.onCanPlay.emit(this.getPlayer());
+ protected _emitLoadedMetadata = () => this.onLoadedMetadata.emit(this.getPlayer());
+ protected _emitLoadedData = () => this.onLoadedData.emit(this.getPlayer());
 
  protected _canPlayThrough = () => {
  this.loading = false;
@@ -136,6 +139,9 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
  player.addEventListener('ended', this._emitEnd);
  player.addEventListener('error', this._onPlayerError);
  player.addEventListener('canplaythrough', this._canPlayThrough);
+ player.addEventListener('canplay', this._emitCanPlay);
+ player.addEventListener('loadedmetadata', this._emitLoadedMetadata);
+ player.addEventListener('loadeddata', this._emitLoadedData);
 
  this.infoTimer$ = setInterval(this._refreshInfo, 1000);
  this.isModal = document.body.classList.contains('m-overlay-modal--shown');
@@ -165,6 +171,9 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
  player.removeEventListener('ended', this._emitEnd);
  player.removeEventListener('error', this._onPlayerError);
  player.removeEventListener('canplaythrough', this._canPlayThrough);
+ player.removeEventListener('canplay', this._emitCanPlay);
+ player.removeEventListener('loadedmetadata', this._emitLoadedMetadata);
+ player.removeEventListener('loadeddata', this._emitLoadedData);
  }
  }
 
@@ -360,16 +369,8 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
  this.torrentReady = false;
  }
  }
- requestMediaModal() {
- // Don't reopen modal if you're already on it
- if ( this.isModal ) {
- this.toggle();
- }
 
- // Mobile users go to media page instead of modal
- if (isMobile()) {
- this.router.navigate([`/media/${this.guid}`]);
- }
- this.triggerMediaModal.emit();
+ requestMediaModal() {
+ this.requestedMediaModal.emit();
  }
 }

src/app/modules/media/components/video/video.component.html

@@ -10,6 +10,10 @@
  (onPause)="onPause()"
  (onEnd)="onEnd()"
  (onError)="onError()"
+ (onCanPlay)="onCanPlay()"
+ (onLoadedMetadata)="loadedMetadata()"
+ (onLoadedData)="loadedData()"
+ (requestedMediaModal)="requestMediaModal()"
  #player
  ></m-video--direct-http-player>
 
@@ -24,15 +28,18 @@
  (onPause)="onPause()"
  (onEnd)="onEnd()"
  (onError)="onError()"
+ (onCanPlay)="onCanPlay()"
+ (onLoadedMetadata)="loadedMetadata()"
+ (onLoadedData)="loadedData()"
+ (requestedMediaModal)="requestMediaModal()"
  #player
  ></m-video--torrent-player>
 
  <ng-container *ngIf="playerRef">
  <i *ngIf="!playerRef.isPlaying() && !playerRef.isLoading()"
  class="material-icons minds-video-play-icon"
- (click)="playerRef.play()"
+ (click)="requestMediaModal()"
  >play_circle_outline</i>
-
  <ng-content></ng-content>
 
  <div *ngIf="transcoding" class="minds-video-bar-top">
@@ -44,9 +51,9 @@
  </div>
 
  <div class="minds-video-bar-full">
- <i class="material-icons" *ngIf="!playerRef.isLoading(); else loadingSpinner"
+ <i class="material-icons"
  (click)="playerRef.toggle()"
- >{{ playerRef.isPlaying() ? 'pause' : 'play_arrow' }}</i>
+ >{{ playerRef.isPlaying() || playerRef.isLoading() ? 'pause' : 'play_arrow' }}</i>
  <ng-template #loadingSpinner>
  <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
  </ng-template>
@@ -55,7 +62,7 @@
  <m-video--volume-slider #volumeSlider [player]="playerRef"></m-video--volume-slider>
 
  <a class="material-icons m-video-full-page minds-video--open-new"
- *ngIf="guid"
+ *ngIf="guid && !isModal"
  [routerLink]="['/media', guid]"
  target="_blank"
  (click)="playerRef.pause()">
@@ -92,7 +99,7 @@
  (select)="selectedQuality($event)"
  ></m-video--quality-selector>
 
- <i class="material-icons" (click)="playerRef.requestFullScreen()">tv</i>
+ <i *ngIf="!isModal" class="material-icons" (click)="playerRef.requestFullScreen()">tv</i>
  </div>
 
  <div class="m-video--torrent-info" *ngIf="torrentInfo && current.type === 'torrent'">

src/app/modules/media/components/video/video.component.scss

@@ -5,6 +5,12 @@
  m-video{
  position: relative;
  display:block;
+ cursor:pointer;
+ &:hover {
+ .minds-video-play-icon {
+ opacity: 1;
+ }
+ }
 
  video{
  width:100%;
@@ -43,6 +49,7 @@
  }
  }
  .minds-video-play-icon{
+ opacity: 0.8;
  display: block;
  text-align: center;
  top: 50%;
@@ -51,8 +58,10 @@
  position: absolute;
  cursor: pointer;
  width: 100%;
+ transition: opacity 0.3s cubic-bezier(.23, 1, .32, 1);
  @include m-theme(){
  color: themed($m-white-always);
+ text-shadow: 0 0 3px rgba(themed($m-black-always), 0.6);
  }
  }
  .minds-video-bar-full{
@@ -62,7 +71,6 @@
  left: 0;
  width: 100%;
  box-sizing: border-box;
- //padding: $minds-padding;
  text-align: center;
  align-items: center;
  @include m-theme(){
@@ -75,7 +83,7 @@
  color:themed($m-white-always);
  }
  }
- 
+
  .mdl-spinner {
  margin: 0 8px;
  }
@@ -91,9 +99,6 @@
  .minds-video-bar-min{
  display: none;
  }
- .minds-video-bar-full{
- display: flex;
- }
  }
 
  .m-video--torrent-info {

src/app/modules/media/components/video/video.component.ts

 import { Component, ElementRef, Input, Output, EventEmitter, ViewChild, ChangeDetectorRef } from '@angular/core';
-// import { Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { MindsVideoProgressBar } from './progress-bar/progress-bar.component';
 import { MindsVideoVolumeSlider } from './volume-slider/volume-slider.component';
 
@@ -8,7 +8,7 @@ import { ScrollService } from '../../../../services/ux/scroll';
 import { MindsPlayerInterface } from './players/player.interface';
 import { WebtorrentService } from '../../../webtorrent/webtorrent.service';
 import { SOURCE_CANDIDATE_PICK_ZIGZAG, SourceCandidates } from './source-candidates';
-// import isMobile from '../../../../helpers/is-mobile';
+import isMobile from '../../../../helpers/is-mobile';
 
 @Component({
  selector: 'm-video',
@@ -24,9 +24,14 @@ export class MindsVideoComponent {
  @Input() log: string | number;
  @Input() muted: boolean = false;
  @Input() poster: string = '';
+ @Input() isModal: boolean = false;
 
  @Output('finished') finished: EventEmitter<any> = new EventEmitter();
- // @Output() triggerMediaModal: EventEmitter<any> = new EventEmitter();
+
+ @Output() videoMetadataLoaded: EventEmitter<any> = new EventEmitter();
+ @Output() videoLoaded: EventEmitter<any> = new EventEmitter();
+ @Output() videoCanPlay: EventEmitter<any> = new EventEmitter();
+ @Output() requestedMediaModal: EventEmitter<any> = new EventEmitter();
 
  @ViewChild('progressBar', { static: false }) progressBar: MindsVideoProgressBar;
  @ViewChild('volumeSlider', { static: false }) volumeSlider: MindsVideoVolumeSlider;
@@ -55,6 +60,7 @@ export class MindsVideoComponent {
  playedOnce: boolean = false;
  playCount: number = -1;
  playCountDisabled: boolean = false;
+ modalHover: boolean = false;
 
  current: { type: 'torrent' | 'direct-http', src: string };
  protected candidates: SourceCandidates = new SourceCandidates();
@@ -73,7 +79,7 @@ export class MindsVideoComponent {
  public client: Client,
  protected webtorrent: WebtorrentService,
  protected cd: ChangeDetectorRef,
- // private router: Router,
+ private router: Router,
  ) { }
 
  ngOnInit() {
@@ -163,6 +169,9 @@ export class MindsVideoComponent {
  }
 
  onMouseLeave() {
+ if (this.modalHover) {
+ return;
+ }
  this.progressBar.stopSeeker();
  this.progressBar.disableKeyControls();
  }
@@ -228,6 +237,23 @@ export class MindsVideoComponent {
  this.playerRef.toggle();
  }
 
+ loadedMetadata() {
+ const dimensions = {
+ 'width' : this.playerRef.getPlayer().videoWidth,
+ 'height' : this.playerRef.getPlayer().videoHeight
+ };
+
+ this.videoMetadataLoaded.emit({dimensions: dimensions});
+ }
+
+ loadedData() {
+ this.videoLoaded.emit();
+ }
+
+ onCanPlay() {
+ this.videoCanPlay.emit();
+ }
+
  // Sources
 
  async fallback() {
@@ -327,21 +353,23 @@ export class MindsVideoComponent {
  }
  }
 
- // requestMediaModal() {
- // // this.playerRef.pause(); //no need anymore
- // // Mobile users go to media page instead of modal
- // if (isMobile()) {
- // this.router.navigate([`/media/${this.guid}`]);
- // }
+ requestMediaModal() {
+ // Don't reopen modal if you're already on it
+ if (this.isModal) {
+ this.toggle();
+ }
+ // Mobile users go to media page instead of modal
+ if (isMobile()) {
+ this.router.navigate([`/media/${this.guid}`]);
+ }
 
- // this.triggerMediaModal.emit();
- // }
+  this.requestedMediaModal.emit();
+ }
 
  detectChanges() {
  this.cd.markForCheck();
  this.cd.detectChanges();
  }
-
 }
 
 export { VideoAds } from './ads.component';

src/app/modules/media/components/video/volume-slider/volume-slider.component.html

@@ -5,6 +5,7 @@
  <i class="material-icons" *ngIf="element.volume >= 0.9 && !element.muted" (click)="element.muted = true">volume_up</i>
 
  <div class="m-video--volume-control">
+ <div class="m-video--volume-control--background"></div>
  <input type="range" [(ngModel)]="element.volume" class="m-video--volume-control-selector" min="0" max="1" step="0.05" />
  </div>
 </div>

src/app/modules/media/components/video/volume-slider/volume-slider.component.scss

@@ -61,6 +61,9 @@ m-video--volume-slider{
  position: absolute;
  top: 35px;
  right: -18px;
+ @include m-theme(){
+ background-color: themed($m-white-always);
+ }
  }
 
  .m-video--volume-control{
@@ -72,6 +75,14 @@ m-video--volume-slider{
  height: 80px;
  position: absolute;
  margin: 0;
+ }
+
+ .m-video--volume-control--background {
+ width:40px;
+ height:72px;
+ position: absolute;
+ left: calc(50% - 20px);
+ bottom: 16px;
  @include m-theme(){
  background-color: rgba(themed($m-black-always), 0.4);
  }

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

-<div class="m-mediaModal__exoWrapper">
- <div class="m-mediaModal__wrapper"
+<div class="m-mediaModal__wrapper">
+ <div class="m-mediaModal__theater"
  (click)="clickedModal($event)"
  >
  <div class="m-mediaModal m-mediaModal__clearFix"
  [style.width]="modalWidth + 'px'"
  [style.height]="stageHeight + 'px'"
  >
- <!-- This is the element that goes into fullscreen -->
+ <!-- The stageWrapper is the element that goes into fullscreen -->
  <div class="m-mediaModal__stageWrapper"
  [style.width]="stageWidth + 'px'"
  [style.line-height]="stageHeight + 'px'"
+ (mouseenter)="onMouseEnterStage()"
+ (mouseleave)="onMouseLeaveStage()"
  >
  <!-- LOADING PANEL -->
  <div class="m-mediaModal__loadingPanel" *ngIf="inProgress">
@@ -22,28 +24,28 @@
  >
 
  <!-- MEDIA: IMAGE -->
- <div class="m-mediaModal__imageWrapper"
- *ngIf="entity.modal_subtype === 'image'"
+ <div class="m-mediaModal__mediaWrapper m-mediaModal__mediaWrapper--image"
+ *ngIf="entity.custom_type === 'batch'"
  [style.width]="mediaWidth + 'px'"
  [style.height]="mediaHeight + 'px'"
  >
  <img [src]="thumbnail"
- (load)="inProgress = !inProgress"
-
+ (load)="this.inProgress = false"
  [style.height]="entity.height + 'px'"
  [style.width]="entity.width + 'px'"
  />
  </div>
 
  <!-- MEDIA: VIDEO -->
- <div class="m-mediaModal__videoWrapper"
- *ngIf="entity.modal_subtype === 'video'"
+ <div class="m-mediaModal__mediaWrapper m-mediaModal__mediaWrapper--video"
+ *ngIf="entity.custom_type === 'video'"
  [style.width]="mediaWidth + 'px'"
  [style.height]="mediaHeight + 'px'"
  >
  <m-video
  [style.height]="entity.height + 'px'"
  [style.width]="entity.width + 'px'"
+ [isModal]="true"
  [autoplay]="true"
  [muted]="false"
  [poster]="entity.custom_data.thumbnail_src"
@@ -51,7 +53,7 @@
  [guid]="entity.custom_data.guid"
  [playCount]="entity['play:count']"
  [torrent]="[{ res: '360', key: entity.custom_data.guid + '/360.mp4' }]"
- #player
+ (videoCanPlay)="this.inProgress = false"
  >
  <video-ads [player]="player" *ngIf="entity.monetized"></video-ads>
  </m-video>
@@ -67,7 +69,7 @@
  <!-- TITLE: FULLSCREEN -->
  <span class="m-mediaModal__overlayTitle m-mediaModal__overlayTitle--fullscreen" *ngIf="isFullscreen">
  <a [routerLink]="['/', entity.ownerObj.username]">
- <img class="avatar" [hovercard]="entity.ownerObj.guid" [src]="minds.cdn_url + 'icon/' + entity.ownerObj.guid + '/small/' + getOwnerIconTime()" class="mdl-shadow--2dp"/>
+ <img class="avatar" [src]="minds.cdn_url + 'icon/' + entity.ownerObj.guid + '/small/' + getOwnerIconTime()" class="mdl-shadow--2dp"/>
  <span title={{entity.ownerObj.name}}>{{entity.ownerObj.name}}</span>
  </a>
  <div class="m-mediaModal__overlayTitleSeparator"></div>

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

@@ -9,9 +9,9 @@ m-overlay-modal {
  }
 
  .m-overlay-modal.m-overlayModal--media {
- min-width: 1060px; // ! Need to output this to parent
+ // min-width: 1060px; // should output this to parent
  min-height: 100%;
- position: fixed; //should be absolute?
+ position: fixed; //? should be absolute?
  top: 0;
  right: 0;
  left: 0;
@@ -48,28 +48,25 @@ m-overlay-modal {
  vertical-align: middle;
  width: 100%;
 
- .m-mediaModal__exoWrapper {
+ .m-mediaModal__wrapper {
  position: static;
  margin: 20px;
  display:inline-block;
  text-align: left;
 
- .m-mediaModal__wrapper {
+ .m-mediaModal__theater {
  position: relative;
  @include m-theme(){
  box-shadow: 0 12px 24px rgba(themed($m-black-always), 0.3);
  }
- // .m-mediaModal { // has inline width/height
-
- // }
+ // .m-mediaModal {} // has inline width/height
  }
  }
  }
  }
 }
 
-.m-mediaModal__loadingPanel {
- .mdl-spinner {
+.m-mediaModal__loadingPanel .mdl-spinner {
  position: absolute;
  top: unquote("-webkit-calc(50% - 14px)");
  left: unquote("-webkit-calc(50% - 14px)");
@@ -77,7 +74,6 @@ m-overlay-modal {
  left: unquote("-moz-calc(50% - 14px)");
  top: unquote("calc(50% - 14px)");
  left: unquote("calc(50% - 14px)");
- }
 }
 
 .m-mediaModal__stageWrapper { // Has inline width/line-height
@@ -95,13 +91,17 @@ m-overlay-modal {
  .m-mediaModal__overlayContainer {
  opacity: 1;
  }
+ .minds-video-bar-full {
+ visibility: visible;
+ opacity: 1;
+ }
  }
 }
 
 .m-mediaModal__stage {
  display: flex;
  align-items:center;
- font-size:0;
+ font-size: 0;
  height: 100%;
  min-height: 402px;
  position: relative;
@@ -109,27 +109,55 @@ m-overlay-modal {
  width: 100%;
 }
 
-.m-mediaModal__imageWrapper { // Has inline width/height
+.m-mediaModal__mediaWrapper { // Has inline width/height
  display: inline-block;
  margin: 0 auto;
  vertical-align: middle;
 
- img { // Has inline width/height
+ img, m-video { // Has inline width/height
  display: inline-block;
  max-height: 100%;
  max-width: 100%;
  vertical-align: top;
  }
 
-}
+ m-video {
+ position: static;
+
+ .minds-video-bar-full {
+ visibility: hidden;
+ display: flex;
+ opacity: 0;
+ transition: opacity .3s;
+
+ .m-video--progress-bar {
+ padding-right: 0;
+ }
+
+ .m-video--volume-control-wrapper {
+ margin-right: 16px;
+ }
+ }
+ .minds-video-play-icon {
+ transform: none;
+ width: auto;
+ top: unquote("-webkit-calc(50% - 50px)");
+ left: unquote("-webkit-calc(50% - 50px)");
+ top: unquote("-moz-calc(50% - 50px)");
+ left: unquote("-moz-calc(50% - 50px)");
+ top: unquote("calc(50% - 50px)");
+ left: unquote("calc(50% - 50px)");
+ }
+ m-video--progress-bar {
+ .seeker-ball {
+ top: 4px;
+ }
+ .progress-bar {
+ margin-right: 8px;
+ }
+ }
+ }
 
-.m-mediaModal__videoWrapper {
- // TODO - this was from fb
- // bottom: 40px;
- // overflow: hidden;
- // position: absolute;
- // top: 40px;
- // width: 100%;
 }
 
 .m-mediaModal__overlayContainer {
@@ -155,13 +183,13 @@ m-overlay-modal {
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 36px;
- cursor: pointer;
  @include m-theme(){
  color: themed($m-white-always);
  }
 
  .m-mediaModal__overlayTitle {
  text-decoration: none;
+ cursor: pointer;
 
  > * {
  &:not(.m-mediaModal__overlayTitleSeparator) {