Merge pull request #48 from NicolasConstant/develop

Merge for 0.3

src/app/app.component.html

@@ -1,3 +1,8 @@
+<app-media-viewer 
+    id="media-viewer" 
+    *ngIf="openedMediaEvent"
+    [openedMediaEvent]="openedMediaEvent" (closeSubject)="closeMedia()"></app-media-viewer>
+
 <app-left-side-bar>
 </app-left-side-bar>
 

src/app/app.component.scss

@@ -24,6 +24,15 @@
     z-index: 1;
 }
 
+#media-viewer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 99999999;
+}
+
 app-streams-selection-footer {
     position: absolute;
     height: 30px;

src/app/app.component.ts

@@ -5,27 +5,32 @@ import { Select } from '@ngxs/store';
 
 import { NavigationService, LeftPanelType } from './services/navigation.service';
 import { StreamElement } from './states/streams.state';
+import { OpenMediaEvent } from './models/common.model';
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit, OnDestroy {    
+export class AppComponent implements OnInit, OnDestroy {
     title = 'Sengi';
-
     floatingColumnActive: boolean;
     tutorialActive: boolean;
+    // mediaViewerActive: boolean = false;
+    openedMediaEvent: OpenMediaEvent
+
     private columnEditorSub: Subscription;
+    private openMediaSub: Subscription;
+    private streamSub: Subscription;
 
     @Select(state => state.streamsstatemodel.streams) streamElements$: Observable<StreamElement[]>;
 
     constructor(private readonly navigationService: NavigationService) {
     }
 
     ngOnInit(): void {
-        this.streamElements$.subscribe((streams: StreamElement[]) => {
-            if(streams && streams.length === 0){
+        this.streamSub = this.streamElements$.subscribe((streams: StreamElement[]) => {
+            if (streams && streams.length === 0) {
                 this.tutorialActive = true;
             } else {
                 this.tutorialActive = false;
@@ -39,10 +44,25 @@ export class AppComponent implements OnInit, OnDestroy {
                 this.floatingColumnActive = true;
             }
         });
+
+        this.openMediaSub = this.navigationService.activatedMediaSubject.subscribe((openedMediaEvent: OpenMediaEvent) => {
+            if (openedMediaEvent) {
+                this.openedMediaEvent = openedMediaEvent;
+                // this.mediaViewerActive = true;
+
+            }
+        });
     }
 
     ngOnDestroy(): void {
+        this.streamSub.unsubscribe();
         this.columnEditorSub.unsubscribe();
+        this.openMediaSub.unsubscribe();
+    }
+
+    closeMedia(){
+        console.warn('closeMedia()');
+        this.openedMediaEvent = null;
     }
 
 }

src/app/app.module.ts

@@ -48,6 +48,7 @@ import { StreamEditionComponent } from './components/stream/stream-edition/strea
 import { TutorialComponent } from './components/tutorial/tutorial.component';
 import { NotificationHubComponent } from './components/notification-hub/notification-hub.component';
 import { NotificationService } from "./services/notification.service";
+import { MediaViewerComponent } from './components/media-viewer/media-viewer.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -85,7 +86,8 @@ const routes: Routes = [
     StreamStatusesComponent,
     StreamEditionComponent,
     TutorialComponent,
-    NotificationHubComponent
+    NotificationHubComponent,
+    MediaViewerComponent
   ],
   imports: [
     FontAwesomeModule,

src/app/components/media-viewer/media-viewer.component.html

@@ -0,0 +1,12 @@
+<div class="media-viewer-canvas" (click)="close()">
+    <button class="media-viewer-canvas__close" title="close">
+        <fa-icon [icon]="faTimes"></fa-icon>
+    </button>
+    <img class="media-viewer-canvas__image" *ngIf="imageUrl" src="{{imageUrl}}" (click)="blockClick($event)"/>
+    <video class="media-viewer-canvas__image" *ngIf="gifvUrl" role="application" loop autoplay (click)="blockClick($event)">
+        <source src="{{ gifvUrl }}" type="video/mp4">
+    </video>
+    <video class="media-viewer-canvas__image" *ngIf="videoUrl" role="application" loop controls="controls" (click)="blockClick($event)">
+        <source src="{{ videoUrl }}" type="video/mp4">
+    </video>
+</div>

src/app/components/media-viewer/media-viewer.component.scss

@@ -0,0 +1,30 @@
+@import "variables";
+@import "mixins";
+
+.media-viewer-canvas {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    overflow: hidden;
+    position: relative;
+
+    &__close {
+        @include clearButton;
+        position: absolute;
+        top: 15px;
+        right: 20px;
+        font-size: 24px;
+        color: $font-link-primary; 
+        &:hover {
+            color: $font-link-primary-hover;
+        }
+    }
+
+    &__image {
+        max-width: 95%;
+        max-height: calc(100% - 120px);
+        margin-top: 50vh;
+        margin-left: 50vw;
+        transform: translate(-50%, -50%);
+    }
+}

src/app/components/media-viewer/media-viewer.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaViewerComponent } from './media-viewer.component';
+
+xdescribe('MediaViewerComponent', () => {
+  let component: MediaViewerComponent;
+  let fixture: ComponentFixture<MediaViewerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MediaViewerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MediaViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/media-viewer/media-viewer.component.ts

@@ -0,0 +1,61 @@
+import { Component, OnInit, Input, Output } from '@angular/core';
+import { faChevronLeft, faChevronRight, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { Subject } from 'rxjs';
+
+import { OpenMediaEvent } from '../../models/common.model';
+import { Attachment } from '../../services/models/mastodon.interfaces';
+
+@Component({
+    selector: 'app-media-viewer',
+    templateUrl: './media-viewer.component.html',
+    styleUrls: ['./media-viewer.component.scss']
+})
+export class MediaViewerComponent implements OnInit {
+    private _mediaEvent: OpenMediaEvent;
+
+    faChevronLeft = faChevronLeft;
+    faChevronRight = faChevronRight;
+    faTimes = faTimes;
+
+    imageUrl: string;
+    gifvUrl: string;
+    videoUrl: string;
+
+    @Input('openedMediaEvent')
+    set openedMediaEvent(value: OpenMediaEvent) {
+        this._mediaEvent = value;
+
+        const attachment = value.attachments[value.selectedIndex];
+        this.loadAttachment(attachment);
+    }
+    get openedMediaEvent(): OpenMediaEvent {
+        return this._mediaEvent;
+    }
+
+    @Output() closeSubject = new Subject<boolean>();
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+    private loadAttachment(attachment: Attachment) {
+        if (attachment.type === 'image') {
+            this.imageUrl = attachment.url;
+        } else if (attachment.type === 'gifv'){
+            this.gifvUrl = attachment.url;
+        } else if (attachment.type === 'video'){
+            this.videoUrl = attachment.url;
+        }
+    }
+
+    close(): boolean {
+        this.closeSubject.next(true);
+        return false;
+    }
+
+    blockClick(event: any): boolean{
+        event.stopPropagation();
+        return false;
+    }
+}

src/app/components/stream/status/action-bar/action-bar.component.html

@@ -4,18 +4,34 @@
     </a>
     <ion-icon *ngIf="isLocked" class="action-bar__lock" name="lock" title="Account can't access this post"></ion-icon>
 
-    <a *ngIf="!(isBoostLocked || isLocked)" href class="action-bar__link" title="Boost" [class.boosted]="isBoosted" (click)="boost()">
+    <a *ngIf="!(isBoostLocked || isLocked)" href class="action-bar__link" title="Boost" [class.boosted]="isBoosted"
+        (click)="boost()">
         <ion-icon name="md-swap"></ion-icon>
     </a>
-    <ion-icon *ngIf="isBoostLocked && !isLocked" class="action-bar__lock" name="lock" title="This post cannot be boosted"></ion-icon>
+    <ion-icon *ngIf="isBoostLocked && !isLocked" class="action-bar__lock" name="lock"
+        title="This post cannot be boosted"></ion-icon>
     <ion-icon *ngIf="isLocked" class="action-bar__lock" name="lock" title="Account can't access this post"></ion-icon>
 
-    <a *ngIf="!isLocked" href class="action-bar__link" title="Favourite" [class.favorited]="isFavorited" (click)="favorite()">
+    <a *ngIf="!isLocked" href class="action-bar__link" title="Favourite" [class.favorited]="isFavorited"
+        (click)="favorite()">
         <ion-icon name="md-star"></ion-icon>
     </a>
     <ion-icon *ngIf="isLocked" class="action-bar__lock" name="lock" title="Account can't access this post"></ion-icon>
 
-    <a href class="action-bar__link" title="More" (click)="more()">
-        <ion-icon name="ios-more"></ion-icon>
+    <a href class="action-bar__link action-bar__link--cw" 
+        title="show content" (click)="showContent()"
+        *ngIf="isContentWarningActive">
+        <fa-icon class="action-bar__cw" [icon]="faWindowClose"></fa-icon>
+    </a>
+    <a href class="action-bar__link action-bar__link--cw"
+        title="hide content" (click)="hideContent()"
+        *ngIf="!isContentWarningActive">
+        <fa-icon class="action-bar__cw" [icon]="faWindowCloseRegular"></fa-icon>
     </a>
+
+    <a href class="action-bar__link action-bar__link--more" title="More" (click)="more()">
+        <ion-icon name="ios-more"></ion-icon>
+    </a> 
+
+
 </div>

src/app/components/stream/status/action-bar/action-bar.component.scss

@@ -5,6 +5,8 @@
     padding: 0;
     font-size: 24px;
     height: 30px;
+    position: relative;
+
     &__link {
         color: $status-secondary-color;
         &:hover {
@@ -13,6 +15,18 @@
         &:not(:last-child) {
             margin-right: 15px;
         }
+
+        &--cw {
+            position: absolute;
+            bottom: -2px;
+            font-size: 22px;
+        }
+
+        &--more {
+            position: absolute;
+            left: 155px;
+            bottom: -6px;
+        }
     }
 
     &__lock {
@@ -23,6 +37,15 @@
             margin-right: 15px;
         }
     }
+
+    // &_cw {
+    //     // width: 18px;
+    //     font-size: 10px;
+
+    //     &:not(:last-child) {
+    //         margin-right: 15px;
+    //     }
+    // }
 }
 
 .boosted {

src/app/components/stream/status/action-bar/action-bar.component.ts

@@ -2,31 +2,40 @@ import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angu
 import { HttpErrorResponse } from '@angular/common/http';
 import { Store } from '@ngxs/store';
 import { Observable, Subscription } from 'rxjs';
+import { faWindowClose, faReply, faRetweet, faStar } from "@fortawesome/free-solid-svg-icons";
+import { faWindowClose as faWindowCloseRegular } from "@fortawesome/free-regular-svg-icons";
 
 import { StatusWrapper } from '../../stream.component';
 import { MastodonService } from '../../../../services/mastodon.service';
 import { AccountInfo } from '../../../../states/accounts.state';
-import { Status, Results } from '../../../../services/models/mastodon.interfaces';
+import { Status } from '../../../../services/models/mastodon.interfaces';
 import { ToolsService } from '../../../../services/tools.service';
 import { NotificationService } from '../../../../services/notification.service';
-// import { map } from "rxjs/operators";
 
 @Component({
     selector: 'app-action-bar',
     templateUrl: './action-bar.component.html',
     styleUrls: ['./action-bar.component.scss']
 })
 export class ActionBarComponent implements OnInit, OnDestroy {
+    faWindowClose = faWindowClose;
+    faReply = faReply;
+    faRetweet = faRetweet;
+    faStar = faStar;
+    faWindowCloseRegular = faWindowCloseRegular;
 
     @Input() statusWrapper: StatusWrapper;
     @Output() replyEvent = new EventEmitter();
+    @Output() cwIsActiveEvent = new EventEmitter<boolean>();
 
     isFavorited: boolean;
     isBoosted: boolean;
 
     isBoostLocked: boolean;
     isLocked: boolean;
 
+    isContentWarningActive: boolean = false;
+
     private isProviderSelected: boolean;
     private selectedAccounts: AccountInfo[];
 
@@ -78,10 +87,26 @@ export class ActionBarComponent implements OnInit, OnDestroy {
             this.isLocked = false;
         }
 
+        if(status.sensitive || status.spoiler_text){
+            this.isContentWarningActive = true;
+        }
+
         this.checkIfFavorited();
         this.checkIfBoosted();
     }
 
+    showContent(): boolean {
+        this.isContentWarningActive = false;
+        this.cwIsActiveEvent.next(false);
+        return false;
+    }
+
+    hideContent(): boolean {
+        this.isContentWarningActive = true;
+        this.cwIsActiveEvent.next(true);
+        return false;
+    }
+
     reply(): boolean {
         this.replyEvent.emit();
         return false;