Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

added architecture to display media

This commit is contained in:
Nicolas Constant 2019-02-25 23:38:15 -05:00
parent 6e1cb62fb1
commit 513c372511
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
10 changed files with 145 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.component.html
View File

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

27
src/app/app.component.ts
View File

@ -5,19 +5,23 @@ 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;
// mediaViewerActive: boolean = false;
openedMediaEvent: OpenMediaEvent
private columnEditorSub: Subscription;
private openMediaSub: Subscription;
private streamSub: Subscription;
@Select(state => state.streamsstatemodel.streams) streamElements$: Observable<StreamElement[]>;
@ -25,8 +29,8 @@ export class AppComponent implements OnInit, OnDestroy {
}
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;
@ -40,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;
}
}

6
src/app/components/media-viewer/media-viewer.component.html
View File

@ -1,3 +1,3 @@
<div class="media-viewer-canvas">
media-viewer works!
</div>
<div class="media-viewer-canvas" (click)="close()">
<img class="media-viewer-canvas__image" *ngIf="imageUrl" src="{{imageUrl}}"/>
</div>

2
src/app/components/media-viewer/media-viewer.component.scss
View File

@ -1,5 +1,5 @@
.media-viewer-canvas {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .6);
background-color: rgba(0, 0, 0, 0.8);
}

49
src/app/components/media-viewer/media-viewer.component.ts
View File

@ -1,15 +1,50 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Input, Output } from '@angular/core';
import { OpenMediaEvent } from '../../models/common.model';
import { Attachment } from '../../services/models/mastodon.interfaces';
import { Subject } from 'rxjs';
@Component({
selector: 'app-media-viewer',
templateUrl: './media-viewer.component.html',
styleUrls: ['./media-viewer.component.scss']
selector: 'app-media-viewer',
templateUrl: './media-viewer.component.html',
styleUrls: ['./media-viewer.component.scss']
})
export class MediaViewerComponent implements OnInit {
private _mediaEvent: OpenMediaEvent;
constructor() { }
imageUrl: string;
@Input('openedMediaEvent')
set openedMediaEvent(value: OpenMediaEvent) {
this._mediaEvent = value;
ngOnInit() {
}
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) {
console.warn('attachment');
console.warn(attachment);
if (attachment.type === 'image') {
this.imageUrl = attachment.url;
}
}
close(): boolean {
console.warn('xclose media');
this.closeSubject.next(true);
return false;
}
}

69
src/app/components/stream/status/attachements/attachements.component.html
View File

@ -1,48 +1,57 @@
<div class="galery" *ngIf="isImage">
<div class="galery__image">
<a *ngIf="attachments.length === 1" href="{{ attachments[0].url }}" title="{{ attachments[0].text_url }}"
target="_blank">
<img class="galery__image--1" src="{{ attachments[0].url }}" />
<a *ngIf="attachments.length === 1" class="galery__image--link" title="{{ attachments[0].text_url }}"
(click)="attachmentSelected(0)">
<img class="galery__image--1" src="{{ attachments[0].preview_url }}" />
</a>
<a *ngIf="attachments.length === 2" class="galery__image--link-2" href="{{ attachments[0].url }}" title="{{ attachments[0].text_url }}"
target="_blank">
<img src="{{ attachments[0].url }}" />
<a *ngIf="attachments.length === 2" class="galery__image--link galery__image--link-2"
title="{{ attachments[0].text_url }}"
(click)="attachmentSelected(0)">
<img src="{{ attachments[0].preview_url }}" />
</a>
<a *ngIf="attachments.length === 2" class="galery__image--link-2" href="{{ attachments[1].url }}" title="{{ attachments[1].text_url }}"
target="_blank">
<img src="{{ attachments[1].url }}" />
<a *ngIf="attachments.length === 2" class="galery__image--link galery__image--link-2"
title="{{ attachments[1].text_url }}"
(click)="attachmentSelected(1)">
<img src="{{ attachments[1].preview_url }}" />
</a>
<a *ngIf="attachments.length === 3" class="galery__image--link-3-1" href="{{ attachments[0].url }}" title="{{ attachments[0].text_url }}"
target="_blank">
<img src="{{ attachments[0].url }}" />
<a *ngIf="attachments.length === 3" class="galery__image--link galery__image--link-3-1"
title="{{ attachments[0].text_url }}"
(click)="attachmentSelected(0)">
<img src="{{ attachments[0].preview_url }}" />
</a>
<a *ngIf="attachments.length === 3" class="galery__image--link-3-2" href="{{ attachments[1].url }}" title="{{ attachments[1].text_url }}"
target="_blank">
<img src="{{ attachments[1].url }}" />
<a *ngIf="attachments.length === 3" class="galery__image--link galery__image--link-3-2"
title="{{ attachments[1].text_url }}"
(click)="attachmentSelected(1)">
<img src="{{ attachments[1].preview_url }}" />
</a>
<a *ngIf="attachments.length === 3" class="galery__image--link-3-2" href="{{ attachments[2].url }}" title="{{ attachments[2].text_url }}"
target="_blank">
<img src="{{ attachments[2].url }}" />
<a *ngIf="attachments.length === 3" class="galery__image--link galery__image--link-3-2"
title="{{ attachments[2].text_url }}"
(click)="attachmentSelected(2)">
<img src="{{ attachments[2].urpreview_urll }}" />
</a>
<a *ngIf="attachments.length === 4" class="galery__image--link-4" href="{{ attachments[0].url }}" title="{{ attachments[0].text_url }}"
target="_blank">
<img src="{{ attachments[0].url }}" />
<a *ngIf="attachments.length === 4" class="galery__image--link galery__image--link-4"
title="{{ attachments[0].text_url }}"
(click)="attachmentSelected(0)">
<img src="{{ attachments[0].preview_url }}" />
</a>
<a *ngIf="attachments.length === 4" class="galery__image--link-4" href="{{ attachments[1].url }}" title="{{ attachments[1].text_url }}"
target="_blank">
<img src="{{ attachments[1].url }}" />
<a *ngIf="attachments.length === 4" class="galery__image--link galery__image--link-4"
title="{{ attachments[1].text_url }}"
(click)="attachmentSelected(1)">
<img src="{{ attachments[1].preview_url }}" />
</a>
<a *ngIf="attachments.length === 4" class="galery__image--link-4" href="{{ attachments[2].url }}" title="{{ attachments[2].text_url }}"
target="_blank">
<img src="{{ attachments[2].url }}" />
<a *ngIf="attachments.length === 4" class="galery__image--link galery__image--link-4"
title="{{ attachments[2].text_url }}"
(click)="attachmentSelected(2)">
<img src="{{ attachments[2].preview_url }}" />
</a>
<a *ngIf="attachments.length === 4" class="galery__image--link-4" href="{{ attachments[3].url }}" title="{{ attachments[3].text_url }}"
target="_blank">
<img src="{{ attachments[3].url }}" />
<a *ngIf="attachments.length === 4" class="galery__image--link galery__image--link-4"
title="{{ attachments[3].text_url }}"
(click)="attachmentSelected(3)">
<img src="{{ attachments[3].preview_url }}" />
</a>
</div>
</div>

4
src/app/components/stream/status/attachements/attachements.component.scss
View File

@ -6,6 +6,10 @@
&__image {
width: 100%;
height: 100%;
&--link {
cursor: zoom-in;
}
&--1 {
width: 100%;
height: 100%;

15
src/app/components/stream/status/attachements/attachements.component.ts
View File

@ -1,5 +1,8 @@
import { Component, OnInit, Input } from '@angular/core';
import { Attachment } from '../../../../services/models/mastodon.interfaces';
import { NavigationService } from '../../../../services/navigation.service';
import { OpenMediaEvent } from '../../../../models/common.model';
@Component({
selector: 'app-attachements',
@ -7,7 +10,7 @@ import { Attachment } from '../../../../services/models/mastodon.interfaces';
styleUrls: ['./attachements.component.scss']
})
export class AttachementsComponent implements OnInit {
private _attachments: Attachment[];
private _attachments: Attachment[];
isImage: boolean;
imageUrls: string[];
@ -15,7 +18,7 @@ export class AttachementsComponent implements OnInit {
set attachments(value: Attachment[]) {
this._attachments = value;
if(this._attachments[0].type === 'image'){
if (this._attachments[0].type === 'image') {
this.isImage = true;
// this.imageUrls = this._attachments.map(x => x.url);
}
@ -24,9 +27,15 @@ export class AttachementsComponent implements OnInit {
return this._attachments;
}
constructor() { }
constructor(private readonly navigationService: NavigationService) { }
ngOnInit() {
}
attachmentSelected(index: number): boolean {
let openMediaEvent = new OpenMediaEvent(index, this.attachments);
this.navigationService.openMedia(openMediaEvent);
return false;
}
}

8
src/app/models/common.model.ts Normal file
View File

@ -0,0 +1,8 @@
import { Attachment } from "../services/models/mastodon.interfaces";
export class OpenMediaEvent {
constructor(
public selectedIndex: number,
public attachments: Attachment[]) {
}
}

14
src/app/services/navigation.service.ts
View File

@ -1,15 +1,15 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { BehaviorSubject, Subject } from 'rxjs';
import { AccountWrapper } from '../models/account.models';
import { OpenMediaEvent } from '../models/common.model';
@Injectable()
export class NavigationService {
private accountToManage: AccountWrapper;
activatedPanelSubject = new BehaviorSubject<LeftPanelType>(LeftPanelType.Closed);
// openColumnEditorSubject = new BehaviorSubject<AccountWrapper>(null);
columnSelectedSubject = new BehaviorSubject<number>(-1);
activatedMediaSubject: Subject<OpenMediaEvent> = new Subject<OpenMediaEvent>();
columnSelectedSubject = new BehaviorSubject<number>(-1);
constructor() { }
@ -34,6 +34,10 @@ export class NavigationService {
getAccountToManage(): AccountWrapper {
return this.accountToManage;
}
openMedia(openMediaEvent: OpenMediaEvent): void{
this.activatedMediaSubject.next(openMediaEvent);
}
}
export enum LeftPanelType {