nostr/blockcore-notes
1
0
Fork 0
mirror of https://github.com/block-core/blockcore-notes.git synced 2024-09-29 06:20:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Tune the media player UI for tiny devices

Browse Source
This commit is contained in:
SondreB 2023-01-19 01:06:39 +01:00
parent ae8063a0af
commit ae9ed4e8f9
No known key found for this signature in database
GPG Key ID: D6CC44C75005FDBF
4 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/shared/content-podcast/content-podcast.css
View File

@ -14,7 +14,6 @@
.music-title {
font-weight: 700;
font-size: 1.2em;
margin-bottom: 0.4em;
}
@ -36,4 +35,7 @@ audio {
}
@media only screen and (max-width: 599px) {
.music-album {
max-height: 32px;
}
}

6
src/app/shared/content-podcast/content-podcast.html
View File

@ -1,5 +1,5 @@
<div class="music-list feed-page">
<mat-card class="events clickable">
<mat-card class="events">
<div class="events-header">
<div class="music-item">
<img class="music-album" src="https://images.podcastpage.io/fetch/https%3A%2F%2Fd3t3ozftmdmh3i.cloudfront.net%2Fproduction%2Fpodcast_uploaded_episode400%2F2151293%2F2151293-1673891743030-8e480bcd5cf47.jpg?w=400" />
@ -28,7 +28,7 @@
<!-- <app-event-header [pubkey]="event.pubkey"><span class="event-date clickable">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon></app-event-header> -->
</div>
</mat-card>
<mat-card class="events clickable">
<mat-card class="events">
<div class="events-header">
<div class="music-item">
<img class="music-album" src="https://images.podcastpage.io/fetch/https%3A%2F%2Fd3t3ozftmdmh3i.cloudfront.net%2Fproduction%2Fpodcast_uploaded_episode400%2F2151293%2F2151293-1673395914791-e4b9606d5df43.jpg?w=400" />
@ -58,7 +58,7 @@
</div>
</mat-card>
<mat-card class="events clickable">
<mat-card class="events">
<div class="events-header">
<div class="music-item">
<img class="music-album" src="https://images.podcastpage.io/fetch/https%3A%2F%2Fd3t3ozftmdmh3i.cloudfront.net%2Fproduction%2Fpodcast_uploaded_episode400%2F2151293%2F2151293-1673318163134-74d83f9a9216b.jpg?w=400" />

7
src/app/shared/media-player/media-player.css
View File

@ -67,7 +67,6 @@
-webkit-line-clamp: 1; /* number of lines to show */
line-clamp: 1;
-webkit-box-orient: vertical;
}
.media-info-text {
@ -87,3 +86,9 @@
z-index: 1000;
}
}
@media only screen and (max-width: 780px) {
.hide-small {
display: none !important;
}
}

12
src/app/shared/media-player/media-player.html
View File

@ -1,14 +1,14 @@
<div class="media-player">
<div class="media-info">
<img class="music-album" [src]="media.current?.artwork" />
<div class="media-info-text">
<div class="media-info-text hide-small">
<div class="music-title">{{ media.current?.title }}</div>
<div class="music-artist">{{ media.current?.artist }}</div>
</div>
</div>
<div class="media-controls">
<div class="media-controls-container">
<button (click)="media.rewind(30)" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
<button class="hide-small" (click)="media.rewind(30)" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
<mat-icon>replay_30</mat-icon>
</button>
@ -25,7 +25,7 @@
<mat-icon>skip_next</mat-icon>
</button>
<button (click)="media.forward(30)" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
<button class="hide-small" (click)="media.forward(30)" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
<mat-icon>forward_30</mat-icon>
</button>
<button (click)="media.rate()" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
@ -36,11 +36,11 @@
</div>
<div class="media-audio">
<div class="media-audio-container">
<button *ngIf="media.muted" mat-icon-button (click)="media.mute()">
<button class="hide-small" *ngIf="media.muted" mat-icon-button (click)="media.mute()">
<mat-icon>volume_off</mat-icon>
</button>
<button *ngIf="!media.muted" mat-icon-button (click)="media.mute()">
<button class="hide-small" *ngIf="!media.muted" mat-icon-button (click)="media.mute()">
<mat-icon>volume_up</mat-icon>
</button>
<!--
@ -52,7 +52,7 @@
<mat-icon>volume_down</mat-icon>
</button> -->
<button mat-icon-button>
<button class="hide-small" mat-icon-button>
<mat-icon>queue_music</mat-icon>
</button>
<button (click)="media.exit()" mat-icon-button>