Skip to content
Commits on Source (2)
......@@ -218,7 +218,7 @@ m-hashtags--sidebar-selector {
width: 48px;
z-index: 1;
@include m-theme(){
background: linear-gradient(to right, rgba(themed($m-white-always), 0) 0%, rgba(themed($m-body-bg), 1) 50%);
background: linear-gradient(to right, rgba(themed($m-white), 0) 0%, rgba(themed($m-body-bg), 1) 50%);
}
.m-hashtagsSidebarSelectorCompactListOverflow__Arrow {
......
......@@ -175,7 +175,7 @@
[torrent]="[{ res: '360', key: activity.custom_data.guid + '/360.mp4' }]"
[isActivity]="true"
(videoMetadataLoaded)="setVideoDimensions($event)"
(mediaModalRequested)="showMediaModal()"
(mediaModalRequested)="clickedVideo()"
#player>
<video-ads [player]="player" *ngIf="activity.monetized"></video-ads>
</m-video>
......@@ -212,7 +212,7 @@
style="width:100%"
(error)="activity.custom_data[0].src = minds.cdn_assets_url + 'assets/logos/placeholder-bulb.jpg'"
*ngIf="activity.custom_data"
(click)="showMediaModal()"
(click)="clickedImage()"
#batchImage
>
</a>
......
......@@ -449,34 +449,45 @@ export class Activity implements OnInit {
this.activity.custom_data[0].height = img.naturalHeight;
}
showMediaModal() {
if (this.featuresService.has('media-modal')) {
// Mobile (not tablet) users go to media page instead of modal
if (isMobile() && Math.min(screen.width, screen.height) < 768) {
this.router.navigate([`/media/${this.activity.entity_guid}`]);
}
if (this.activity.custom_type === 'video') {
this.activity.custom_data.dimensions = this.videoDimensions;
} else { // Image
// Set image dimensions if they're not already there
if (this.activity.custom_data[0].width === '0' || this.activity.custom_data[0].height === '0') {
this.setImageDimensions();
}
}
this.activity.modal_source_url = this.router.url;
clickedImage() {
// Check if is mobile (not tablet)
if (isMobile() && Math.min(screen.width, screen.height) < 768) {
this.goToMediaPage();
return;
}
this.overlayModal.create(MediaModalComponent, this.activity, {
class: 'm-overlayModal--media'
}).present();
if (!this.featuresService.has('media-modal')) {
// Non-canary
this.goToMediaPage();
return;
} else {
if (this.activity.custom_type !== 'video'){
this.router.navigate([`/media/${this.activity.entity_guid}`]);
// Canary
if (this.activity.custom_data[0].width === '0' || this.activity.custom_data[0].height === '0') {
this.setImageDimensions();
}
this.openModal();
}
}
clickedVideo() {
// Already filtered out mobile users/non-canary in video.component.ts
// So this is just applicable to desktop/tablet in canary and should always show modal
this.activity.custom_data.dimensions = this.videoDimensions;
this.openModal();
}
openModal() {
this.activity.modal_source_url = this.router.url;
this.overlayModal.create(MediaModalComponent, this.activity, {
class: 'm-overlayModal--media'
}).present();
}
goToMediaPage() {
this.router.navigate([`/media/${this.activity.entity_guid}`]);
}
detectChanges() {
this.cd.markForCheck();
this.cd.detectChanges();
......
......@@ -159,31 +159,40 @@ export class Remind {
this.activity.custom_data[0].height = img.naturalHeight;
}
showMediaModal() {
if (this.featuresService.has('media-modal')) {
// Mobile (not tablet) users go to media page instead of modal
if (isMobile() && Math.min(screen.width, screen.height) < 768) {
this.router.navigate([`/media/${this.activity.entity_guid}`]);
}
if (this.activity.custom_type === 'video') {
this.activity.custom_data.dimensions = this.videoDimensions;
} else { // Image
// Set image dimensions if they're not already there
if (this.activity.custom_data[0].width === '0' || this.activity.custom_data[0].height === '0') {
this.setImageDimensions();
}
}
this.activity.modal_source_url = this.router.url;
clickedImage() {
// Check if is mobile (not tablet)
if (isMobile() && Math.min(screen.width, screen.height) < 768) {
this.goToMediaPage();
}
this.overlayModal.create(MediaModalComponent, this.activity, {
class: 'm-overlayModal--media'
}).present();
if (!this.featuresService.has('media-modal')) {
// Non-canary
this.goToMediaPage();
} else {
if (this.activity.custom_type !== 'video') {
this.router.navigate([`/media/${this.activity.entity_guid}`]);
// Canary
if (this.activity.custom_data[0].width === '0' || this.activity.custom_data[0].height === '0') {
this.setImageDimensions();
}
this.openModal();
}
}
clickedVideo() {
// Already filtered out mobile users/non-canary in video.component.ts
// So this is just applicable to desktop/tablet in canary and should always show modal
this.activity.custom_data.dimensions = this.videoDimensions;
this.openModal();
}
openModal() {
this.activity.modal_source_url = this.router.url;
this.overlayModal.create(MediaModalComponent, this.activity, {
class: 'm-overlayModal--media'
}).present();
}
goToMediaPage() {
this.router.navigate([`/media/${this.activity.entity_guid}`]);
}
}
......@@ -12,7 +12,7 @@
(onError)="onError()"
(onCanPlayThrough)="onCanPlayThrough()"
(onLoadedMetadata)="loadedMetadata()"
(click)="isModal ? toggle() : requestMediaModal()"
(click)="clickedVideo()"
#player
></m-video--direct-http-player>
......@@ -29,14 +29,14 @@
(onError)="onError()"
(onCanPlayThrough)="onCanPlayThrough()"
(onLoadedMetadata)="loadedMetadata()"
(click)="isModal ? toggle() : requestMediaModal()"
(click)="clickedVideo()"
#player
></m-video--torrent-player>
<ng-container *ngIf="playerRef">
<i *ngIf="(!playerRef.isPlaying() && !playerRef.isLoading()) || (isActivity && metadataLoaded && !playerRef.isPlaying())"
class="material-icons minds-video-play-icon"
(click)="isModal ? toggle() : requestMediaModal()"
(click)="clickedVideo()"
>play_circle_outline</i>
<ng-content></ng-content>
......@@ -97,7 +97,7 @@
(select)="selectedQuality($event)"
></m-video--quality-selector>
<i *ngIf="!isModal" class="material-icons" (click)="playerRef.requestFullScreen()">tv</i>
<i *ngIf="!isModal && !isActivity" class="material-icons" (click)="toggleFullscreen($event)">tv</i>
</div>
<div class="m-video--torrent-info" *ngIf="torrentInfo && current.type === 'torrent'">
......
......@@ -86,6 +86,7 @@ export class MindsVideoComponent implements OnDestroy {
metadataLoaded: boolean = false;
canPlayThrough: boolean = false;
isFullscreen: boolean = false;
isMobile: boolean = false;
current: { type: 'torrent' | 'direct-http', src: string };
protected candidates: SourceCandidates = new SourceCandidates();
......@@ -105,7 +106,7 @@ export class MindsVideoComponent implements OnDestroy {
protected webtorrent: WebtorrentService,
protected cd: ChangeDetectorRef,
protected featuresService: FeaturesService,
private router: Router,
private router: Router
) { }
ngOnInit() {
......@@ -397,27 +398,23 @@ export class MindsVideoComponent implements OnDestroy {
this.toggle();
}
requestMediaModal() {
clickedVideo() {
if (!this.metadataLoaded) {
return;
}
let isMediaPage = false;
if (!this.isModal && !this.isActivity) {
isMediaPage = true;
}
if (this.isModal || (!isMediaPage && !this.featuresService.has('media-modal'))) {
if (isMobile() && Math.min(screen.width, screen.height) < 768) {
this.isMobile = true;
this.toggle();
return;
}
// Mobile (not tablet) users go to media page instead of modal
if (isMobile() && !isMediaPage && Math.min(screen.width, screen.height) < 768) {
this.router.navigate([`/media/${this.guid}`]);
if (this.isActivity && this.featuresService.has('media-modal')){
this.mediaModalRequested.emit();
return;
}
this.mediaModalRequested.emit();
this.toggle();
}
detectChanges() {
......@@ -442,9 +439,10 @@ export class MindsVideoComponent implements OnDestroy {
}
}
toggleFullscreen() {
toggleFullscreen($event) {
// This will only work on the main video on a media page (not comment attachments)
// TODO: make this work on pages with more than one m-video (i.e. feeds)
const elem = document.querySelector('m-video');
// this.fullscreenHovering = false;
// If fullscreen is not already enabled
if ( !document['fullscreenElement'] &&
......
......@@ -42,7 +42,6 @@ import { MindsVideoComponent } from '../../components/video/video.component';
[torrent]="[{ res: '720', key: object.guid + '/720.mp4' }, { res: '360', key: object.guid + '/360.mp4' }]"
[log]="object.guid"
[playCount]="false"
(click)="togglePlay($event)"
#player>
<video-ads [player]="player" *ngIf="object.monetized"></video-ads>
......