Fix player icon row layout and autoplay disable behavior

pull/1163/head
voc0der 2 months ago
parent 4ebe1b0ad9
commit ec94d5f265

@ -46,6 +46,25 @@
position: relative;
}
.action-column {
display: flex;
justify-content: flex-end;
}
.action-buttons-row {
align-items: center;
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
overflow-x: auto;
white-space: nowrap;
width: 100%;
}
.action-buttons-row button {
flex: 0 0 auto;
}
.save-button {
right: 25px;
position: fixed;

@ -32,43 +32,45 @@
</p>
}
</div>
<div class="col-2">
@if (db_playlist) {
<span class="buttons">
<button (click)="downloadContent()" [disabled]="downloading" mat-icon-button><mat-icon>save</mat-icon></button>
@if (downloading) {
<mat-spinner class="spinner" [diameter]="35"></mat-spinner>
}
@if ((!postsService.isLoggedIn || postsService.permissions.includes('sharing')) && !auto) {
<button (click)="openShareDialog()" mat-icon-button><mat-icon>share</mat-icon></button>
}
</span>
}
@if (db_file) {
<span class="buttons">
<button (click)="downloadFile()" [disabled]="downloading" mat-icon-button><mat-icon>cloud_download</mat-icon></button>
@if (downloading) {
<mat-spinner class="spinner" [diameter]="35"></mat-spinner>
}
@if (!postsService.isLoggedIn || postsService.permissions.includes('sharing')) {
<button (click)="openShareDialog()" mat-icon-button><mat-icon>share</mat-icon></button>
}
</span>
}
@if (db_file || playlist[currentIndex]) {
<button class="playback-mode-button" [class.active]="autoplay_enabled" (click)="toggleAutoplay()" matTooltip="Autoplay" i18n-matTooltip="Autoplay toggle tooltip" mat-icon-button>
<mat-icon>playlist_play</mat-icon>
</button>
<button class="playback-mode-button" [class.active]="repeat_enabled" (click)="toggleRepeat()" matTooltip="Repeat current video" i18n-matTooltip="Repeat current video toggle tooltip" mat-icon-button>
<mat-icon>repeat_one</mat-icon>
</button>
}
@if (db_file || db_playlist) {
<button (click)="openFileInfoDialog()" mat-icon-button><mat-icon>info</mat-icon></button>
}
@if (db_file && db_file.url.includes('twitch.tv')) {
<button (click)="drawer.toggle()" mat-icon-button><mat-icon>chat</mat-icon></button>
}
<div class="col-2 action-column">
<span class="action-buttons-row">
@if (db_playlist) {
<span class="buttons">
<button (click)="downloadContent()" [disabled]="downloading" mat-icon-button><mat-icon>save</mat-icon></button>
@if (downloading) {
<mat-spinner class="spinner" [diameter]="35"></mat-spinner>
}
@if ((!postsService.isLoggedIn || postsService.permissions.includes('sharing')) && !auto) {
<button (click)="openShareDialog()" mat-icon-button><mat-icon>share</mat-icon></button>
}
</span>
}
@if (db_file) {
<span class="buttons">
<button (click)="downloadFile()" [disabled]="downloading" mat-icon-button><mat-icon>cloud_download</mat-icon></button>
@if (downloading) {
<mat-spinner class="spinner" [diameter]="35"></mat-spinner>
}
@if (!postsService.isLoggedIn || postsService.permissions.includes('sharing')) {
<button (click)="openShareDialog()" mat-icon-button><mat-icon>share</mat-icon></button>
}
</span>
}
@if (db_file || playlist[currentIndex]) {
<button class="playback-mode-button" [class.active]="autoplay_enabled" (click)="toggleAutoplay()" matTooltip="Autoplay" i18n-matTooltip="Autoplay toggle tooltip" mat-icon-button>
<mat-icon>playlist_play</mat-icon>
</button>
<button class="playback-mode-button" [class.active]="repeat_enabled" (click)="toggleRepeat()" matTooltip="Repeat current video" i18n-matTooltip="Repeat current video toggle tooltip" mat-icon-button>
<mat-icon>repeat_one</mat-icon>
</button>
}
@if (db_file || db_playlist) {
<button (click)="openFileInfoDialog()" mat-icon-button><mat-icon>info</mat-icon></button>
}
@if (db_file && db_file.url.includes('twitch.tv')) {
<button (click)="drawer.toggle()" mat-icon-button><mat-icon>chat</mat-icon></button>
}
</span>
</div>
</div>
</div>

@ -306,6 +306,10 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
this.repeat_enabled = false;
this.saveRepeatMode();
this.ensureAutoplayQueueReady();
} else {
this.pending_autoplay_advance = false;
this.autoplay_queue_loading = false;
this.collapseAutoplayQueueToCurrentItem();
}
this.saveAutoplayMode();
}
@ -316,6 +320,8 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
this.autoplay_enabled = false;
this.saveAutoplayMode();
this.pending_autoplay_advance = false;
this.autoplay_queue_loading = false;
this.collapseAutoplayQueueToCurrentItem();
}
this.saveRepeatMode();
}
@ -503,7 +509,21 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
}
shouldAutoloadWholeLibraryQueue(): boolean {
return !!this.uid && !this.playlist_id && !this.sub_id && this.playlist.length <= 1;
return this.isSingleFileMode() && this.playlist.length <= 1;
}
isSingleFileMode(): boolean {
return !!this.uid && !this.playlist_id && !this.sub_id;
}
collapseAutoplayQueueToCurrentItem(): void {
if (!this.isSingleFileMode() || !this.autoplay_queue_initialized || !this.currentItem) {
return;
}
this.playlist = [this.currentItem];
this.currentIndex = 0;
this.original_playlist = JSON.stringify(this.playlist);
this.autoplay_queue_initialized = false;
}
ensureAutoplayQueueReady(): void {
@ -521,6 +541,12 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
const queueSubID = this.queue_sub_id || null;
this.postsService.getAllFiles(sort, null, textSearch, fileTypeFilter, this.queue_favorite_filter, queueSubID).subscribe(res => {
if (!this.autoplay_enabled) {
this.autoplay_queue_loading = false;
this.pending_autoplay_advance = false;
return;
}
this.autoplay_queue_loading = false;
const files = res['files'] ?? [];
if (files.length === 0) return;

Loading…
Cancel
Save