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

fixed image/gif positionning

This commit is contained in:
Nicolas Constant 2020-04-14 22:12:07 -04:00
parent 4ea25c4866
commit a88cf6a50e
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
7 changed files with 173 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -82,6 +82,7 @@ import { NotificationComponent } from './components/floating-column/manage-accou
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { BookmarksComponent } from './components/floating-column/manage-account/bookmarks/bookmarks.component';
import { AttachementImageComponent } from './components/stream/status/attachements/attachement-image/attachement-image.component';
const routes: Routes = [
@ -144,7 +145,8 @@ const routes: Routes = [
ScheduledStatusComponent,
StreamNotificationsComponent,
NotificationComponent,
BookmarksComponent
BookmarksComponent,
AttachementImageComponent
],
entryComponents: [
EmojiPickerComponent

10
src/app/components/stream/status/attachements/attachement-image/attachement-image.component.html Normal file
View File

@ -0,0 +1,10 @@
<div class="image">
<a *ngIf="attachment.type === 'image'" class="galery__image--link" title="{{ attachment.description }}"
(click)="attachmentSelected()">
<img class="galery__image--1" src="{{ attachment.preview_url }}" />
</a>
<video *ngIf="attachment.type === 'gifv'" class="galery__image--link galery__image--1" role="application" loop
autoplay (click)="attachmentSelected()">
<source src="{{ attachment.url }}" type="video/mp4">
</video>
</div>

15
src/app/components/stream/status/attachements/attachement-image/attachement-image.component.scss Normal file
View File

@ -0,0 +1,15 @@
.image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
img, video {
width: 100%;
height: 100%;
object-fit: cover;
cursor: zoom-in;
border-radius: 2px;
}

25
src/app/components/stream/status/attachements/attachement-image/attachement-image.component.spec.ts Normal file
View File

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

19
src/app/components/stream/status/attachements/attachement-image/attachement-image.component.ts Normal file
View File

@ -0,0 +1,19 @@
import { Component, OnInit, Input } from '@angular/core';
import { Attachment } from '../../../../../services/models/mastodon.interfaces';
@Component({
selector: 'app-attachement-image',
templateUrl: './attachement-image.component.html',
styleUrls: ['./attachement-image.component.scss']
})
export class AttachementImageComponent implements OnInit {
@Input() attachment: Attachment;
constructor() { }
ngOnInit() {
}
}

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

@ -1,128 +1,62 @@
<div class="galery" *ngIf="imageAttachments.length > 0">
<div class="galery__image">
<div class="galery__image" *ngIf="imageAttachments.length === 1">
<a *ngIf="imageAttachments[0].type === 'image'" class="galery__image--link"
title="{{ imageAttachments[0].description }}" (click)="attachmentSelected(0)">
<img class="galery__image--1" src="{{ imageAttachments[0].preview_url }}" />
<div class="galery__image" *ngIf="imageAttachments.length === 1">
<app-attachement-image class="galery__img--1" [attachment]="imageAttachments[0]">
</app-attachement-image>
</div>
<div class="galery__image" *ngIf="imageAttachments.length === 2">
<app-attachement-image class="galery__img--2" [attachment]="imageAttachments[0]">
</app-attachement-image>
<app-attachement-image class="galery__img--2" [attachment]="imageAttachments[1]">
</app-attachement-image>
</div>
<div class="galery__image" *ngIf="imageAttachments.length === 3">
<app-attachement-image class="galery__img--3-1" [attachment]="imageAttachments[0]">
</app-attachement-image>
<app-attachement-image class="galery__img--3-2" [attachment]="imageAttachments[1]">
</app-attachement-image>
<app-attachement-image class="galery__img--3-2" [attachment]="imageAttachments[2]">
</app-attachement-image>
</div>
<div class="galery__image" *ngIf="imageAttachments.length === 4">
<app-attachement-image class="galery__img--4" [attachment]="imageAttachments[0]">
</app-attachement-image>
<app-attachement-image class="galery__img--4" [attachment]="imageAttachments[1]">
</app-attachement-image>
<app-attachement-image class="galery__img--4" [attachment]="imageAttachments[2]">
</app-attachement-image>
<app-attachement-image class="galery__img--4" [attachment]="imageAttachments[3]">
</app-attachement-image>
</div>
<div class="galery galery__hover" *ngIf="isVideo">
<video #videoPlayer class="galery__video" role="application" loop>
<source src="{{ attachments[0].url }}" type="video/mp4">
</video>
<div class="galery__play-control">
<a href class="galery__control--button" (click)="onPlay()" *ngIf="!isPlaying">
<fa-icon [icon]="faPlay"></fa-icon>
</a>
<video *ngIf="imageAttachments[0].type === 'gifv'" class="galery__image--link galery__image--1"
role="application" loop autoplay (click)="attachmentSelected(0)">
<source src="{{ imageAttachments[0].url }}" type="video/mp4">
</video>
</div>
<div class="galery__image" *ngIf="imageAttachments.length === 2">
<a *ngIf="imageAttachments[0].type === 'image'" class="galery__image--link galery__image--link-2"
title="{{ imageAttachments[0].description }}" (click)="attachmentSelected(0)">
<img src="{{ imageAttachments[0].preview_url }}" />
<div class="galery__control">
<a href class="galery__control--button" (click)="onPlay()">
<fa-icon [icon]="faPause" *ngIf="isPlaying"></fa-icon>
</a>
<div class="galery__image--link galery__image--link-2">
<video *ngIf="imageAttachments[0].type === 'gifv'" role="application" loop autoplay
(click)="attachmentSelected(0)">
<source src="{{ imageAttachments[0].url }}" type="video/mp4">
</video>
</div>
<a *ngIf="imageAttachments[0].type === 'image'" class="galery__image--link galery__image--link-2"
title="{{ imageAttachments[1].description }}" (click)="attachmentSelected(1)">
<img src="{{ imageAttachments[1].preview_url }}" />
<a href class="galery__control--button galery__control--expand" (click)="onExpand()">
<fa-icon [icon]="faExpand"></fa-icon>
</a>
<a href class="galery__control--button galery__control--mute" (click)="onMute()">
<fa-icon [icon]="faVolumeUp" *ngIf="!isMuted"></fa-icon>
<fa-icon [icon]="faVolumeMute" *ngIf="isMuted"></fa-icon>
</a>
<div class="galery__image--link galery__image--link-2">
<video *ngIf="imageAttachments[1].type === 'gifv'" role="application" loop autoplay
(click)="attachmentSelected(1)">
<source src="{{ imageAttachments[1].url }}" type="video/mp4">
</video>
</div>
</div>
<a *ngIf="imageAttachments.length === 3" class="galery__image--link galery__image--link-3-1"
title="{{ imageAttachments[0].description }}" (click)="attachmentSelected(0)">
<img *ngIf="imageAttachments[0].type === 'image'" src="{{ imageAttachments[0].preview_url }}" />
<video *ngIf="imageAttachments[0].type === 'gifv'" class="galery__gifv" role="application" loop autoplay
(click)="attachmentSelected(0)">
<source src="{{ imageAttachments[0].url }}" type="video/mp4">
</video>
</a>
<a *ngIf="imageAttachments.length === 3" class="galery__image--link galery__image--link-3-2"
title="{{ imageAttachments[1].description }}" (click)="attachmentSelected(1)">
<img *ngIf="imageAttachments[1].type === 'image'" src="{{ imageAttachments[1].preview_url }}" />
<video *ngIf="imageAttachments[1].type === 'gifv'" class="galery__gifv" role="application" loop autoplay
(click)="attachmentSelected(1)">
<source src="{{ imageAttachments[1].url }}" type="video/mp4">
</video>
</a>
<a *ngIf="imageAttachments.length === 3" class="galery__image--link galery__image--link-3-2"
title="{{ imageAttachments[2].description }}" (click)="attachmentSelected(2)">
<img *ngIf="imageAttachments[2].type === 'image'" src="{{ imageAttachments[2].preview_url }}" />
<video *ngIf="imageAttachments[2].type === 'gifv'" class="galery__gifv" role="application" loop autoplay
(click)="attachmentSelected(2)">
<source src="{{ imageAttachments[2].url }}" type="video/mp4">
</video>
</a>
<a *ngIf="imageAttachments.length === 4" class="galery__image--link galery__image--link-4"
title="{{ imageAttachments[0].description }}" (click)="attachmentSelected(0)">
<img *ngIf="imageAttachments[0].type === 'image'" src="{{ imageAttachments[0].preview_url }}" />
<video *ngIf="imageAttachments[0].type === 'gifv'" class="galery__gifv" role="application" loop autoplay
(click)="attachmentSelected(0)">
<source src="{{ imageAttachments[0].url }}" type="video/mp4">
</video>
</a>
<a *ngIf="imageAttachments.length === 4" class="galery__image--link galery__image--link-4"
title="{{ imageAttachments[1].description }}" (click)="attachmentSelected(1)">
<img *ngIf="imageAttachments[1].type === 'image'" src="{{ imageAttachments[1].preview_url }}" />
<video *ngIf="imageAttachments[1].type === 'gifv'" class="galery__gifv" role="application" loop autoplay
(click)="attachmentSelected(1)">
<source src="{{ imageAttachments[1].url }}" type="video/mp4">
</video>
</a>
<a *ngIf="imageAttachments.length === 4" class="galery__image--link galery__image--link-4"
title="{{ imageAttachments[2].description }}" (click)="attachmentSelected(2)">
<img *ngIf="imageAttachments[2].type === 'image'" src="{{ imageAttachments[2].preview_url }}" />
<video *ngIf="imageAttachments[2].type === 'gifv'" class="galery__gifv" role="application" loop autoplay
(click)="attachmentSelected(2)">
<source src="{{ imageAttachments[2].url }}" type="video/mp4">
</video>
</a>
<a *ngIf="imageAttachments.length === 4" class="galery__image--link galery__image--link-4"
title="{{ imageAttachments[3].description }}" (click)="attachmentSelected(3)">
<img *ngIf="imageAttachments[3].type === 'image'" src="{{ imageAttachments[3].preview_url }}" />
<video *ngIf="imageAttachments[3].type === 'gifv'" class="galery__gifv" role="application" loop autoplay
(click)="attachmentSelected(3)">
<source src="{{ imageAttachments[3].url }}" type="video/mp4">
</video>
</a>
</div>
</div>
<!-- <div class="galery" *ngIf="isGifv">
<video class="galery__gifv" role="application" loop autoplay (click)="attachmentSelected(0)">
<source src="{{ attachments[0].url }}" type="video/mp4">
</video>
</div> -->
<div class="galery galery__hover" *ngIf="isVideo">
<video #videoPlayer class="galery__video" role="application" loop>
<source src="{{ attachments[0].url }}" type="video/mp4">
</video>
<div class="galery__play-control">
<a href class="galery__control--button" (click)="onPlay()" *ngIf="!isPlaying">
<fa-icon [icon]="faPlay"></fa-icon>
</a>
<div *ngIf="isAudio">
<audio controls class="audio">
<source src="{{ attachments[0].url }}" type="{{ audioType }}">
Your browser does not support the audio element.
</audio>
</div>
<div class="galery__control">
<a href class="galery__control--button" (click)="onPlay()">
<fa-icon [icon]="faPause" *ngIf="isPlaying"></fa-icon>
</a>
<a href class="galery__control--button galery__control--expand" (click)="onExpand()">
<fa-icon [icon]="faExpand"></fa-icon>
</a>
<a href class="galery__control--button galery__control--mute" (click)="onMute()">
<fa-icon [icon]="faVolumeUp" *ngIf="!isMuted"></fa-icon>
<fa-icon [icon]="faVolumeMute" *ngIf="isMuted"></fa-icon>
</a>
</div>
</div>
<div *ngIf="isAudio">
<audio controls class="audio">
<source src="{{ attachments[0].url }}" type="{{ audioType }}">
Your browser does not support the audio element.
</audio>
</div>

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

@ -8,6 +8,54 @@
border-radius: 2px;
position: relative;
&__img {
&--1 {
width: 100%;
height: 100%;
display: inline-block;
}
&--2 {
width: 49%;
height: 100%;
display: inline-block;
&:last-child {
margin-left: 2%; // border: 1px greenyellow solid;
}
}
&--3-1 {
width: 49%;
height: 100%;
float: left;
}
&--3-2 {
width: 49%;
height: 49%;
margin-left: 2%;
float: left;
&:nth-child(even) {
margin-bottom: 2%;
}
}
&--4 {
width: 49%;
height: 49%;
margin-bottom: 2%;
float: left;
&:nth-child(even) {
margin-left: 2%;
}
}
}
&__image {
width: 100%;
height: 100%;