Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-23 15:30:34 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixing loading indicator

Browse Source
This commit is contained in:
Zoe Roux 2020-10-22 23:10:58 +02:00
parent 665c98ba03
commit a988d2b75b
3 changed files with 70 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,46 +1,51 @@
import {HttpClientModule} from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import {NgModule} from '@angular/core'; import { NgModule } from '@angular/core';
import {MatButtonModule} from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import {MatCardModule} from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
import {MatRippleModule} from '@angular/material/core'; import { MatRippleModule } from '@angular/material/core';
import {MatIconModule} from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import {MatMenuModule} from '@angular/material/menu'; import { MatMenuModule } from '@angular/material/menu';
import {MatProgressBarModule} from '@angular/material/progress-bar'; import { MatProgressBarModule } from '@angular/material/progress-bar';
import {MatSelectModule} from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
import {MatSliderModule} from '@angular/material/slider'; import { MatSliderModule } from '@angular/material/slider';
import {MatSnackBarModule} from '@angular/material/snack-bar'; import { MatSnackBarModule } from '@angular/material/snack-bar';
import {MatTooltipModule} from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserModule, HammerModule } from "@angular/platform-browser"; import { BrowserModule, HammerModule } from "@angular/platform-browser";
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {AppRoutingModule} from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import {AppComponent} from './app.component'; import { AppComponent } from './app.component';
import {ItemsGridComponent} from './components/items-grid/items-grid.component'; import { ItemsGridComponent } from './components/items-grid/items-grid.component';
import {CollectionComponent} from './pages/collection/collection.component'; import { CollectionComponent } from './pages/collection/collection.component';
import {EpisodesListComponent} from './components/episodes-list/episodes-list.component'; import { EpisodesListComponent } from './components/episodes-list/episodes-list.component';
import {NotFoundComponent} from './pages/not-found/not-found.component'; import { NotFoundComponent } from './pages/not-found/not-found.component';
import {PeopleListComponent} from './components/people-list/people-list.component'; import { PeopleListComponent } from './components/people-list/people-list.component';
import { BufferToWidthPipe, FormatTimePipe, PlayerComponent } from "./pages/player/player.component"; import {
import {SearchComponent} from './pages/search/search.component'; BufferToWidthPipe,
import {ShowDetailsComponent} from './pages/show-details/show-details.component'; FormatTimePipe,
import {FormsModule, ReactiveFormsModule} from "@angular/forms"; PlayerComponent,
import {MatInputModule} from "@angular/material/input"; VolumeToButtonPipe
import {MatFormFieldModule} from "@angular/material/form-field"; } from "./pages/player/player.component";
import {MatTabsModule} from "@angular/material/tabs"; import { SearchComponent } from './pages/search/search.component';
import {PasswordValidator} from "./misc/password-validator"; import { ShowDetailsComponent } from './pages/show-details/show-details.component';
import {MatCheckboxModule} from "@angular/material/checkbox"; import { FormsModule , ReactiveFormsModule} from "@angular/forms";
import {MatDialogModule} from '@angular/material/dialog'; import { MatInputModule } from "@angular/material/input";
import {FallbackDirective} from "./misc/fallback.directive"; import { MatFormFieldModule } from "@angular/material/form-field";
import {AuthModule} from "./auth/auth.module"; import { MatTabsModule } from "@angular/material/tabs";
import {AuthRoutingModule} from "./auth/auth-routing.module"; import { PasswordValidator } from "./misc/password-validator";
import {TrailerDialogComponent} from './pages/trailer-dialog/trailer-dialog.component'; import { MatCheckboxModule } from "@angular/material/checkbox";
import {ItemsListComponent} from "./components/items-list/items-list.component"; import { MatDialogModule } from '@angular/material/dialog';
import {MetadataEditComponent} from './pages/metadata-edit/metadata-edit.component'; import { FallbackDirective } from "./misc/fallback.directive";
import {MatChipsModule} from "@angular/material/chips"; import { AuthModule } from "./auth/auth.module";
import {MatAutocompleteModule} from "@angular/material/autocomplete"; import { AuthRoutingModule } from "./auth/auth-routing.module";
import {MatExpansionModule} from "@angular/material/expansion"; import { TrailerDialogComponent } from './pages/trailer-dialog/trailer-dialog.component';
import {InfiniteScrollModule} from "ngx-infinite-scroll"; import { ItemsListComponent } from "./components/items-list/items-list.component";
import {ShowGridComponent} from "./components/show-grid/show-grid.component"; import { MetadataEditComponent } from './pages/metadata-edit/metadata-edit.component';
import {MatBadgeModule} from "@angular/material/badge"; import { MatChipsModule } from "@angular/material/chips";
import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { MatExpansionModule } from "@angular/material/expansion";
import { InfiniteScrollModule } from "ngx-infinite-scroll";
import { ShowGridComponent } from "./components/show-grid/show-grid.component";
import { MatBadgeModule } from "@angular/material/badge";
@NgModule({ @NgModule({
@ -61,7 +66,8 @@ import {MatBadgeModule} from "@angular/material/badge";
MetadataEditComponent, MetadataEditComponent,
ShowGridComponent, ShowGridComponent,
FormatTimePipe, FormatTimePipe,
BufferToWidthPipe BufferToWidthPipe,
VolumeToButtonPipe
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

4
src/app/pages/player/player.component.html
View File

@ -7,7 +7,7 @@
poster="backdrop/{{this.item.showSlug}}" poster="backdrop/{{this.item.showSlug}}"
autoplay muted autoplay muted
(click)="this.videoClicked()" (click)="this.videoClicked()"
(play)="this.playing = true" (play)="this.playing = true; this.loading = false"
(pause)="this.playing = false" (pause)="this.playing = false"
(ended)="this.next()" (ended)="this.next()"
[volume]="this.volume / 100" [volume]="this.volume / 100"
@ -122,7 +122,7 @@
<div id="volume" [ngClass]="{'d-none': this.isMobile}"> <div id="volume" [ngClass]="{'d-none': this.isMobile}">
<button mat-icon-button matTooltipPosition="above" matTooltip="Volume" <button mat-icon-button matTooltipPosition="above" matTooltip="Volume"
(click)="this.muted = !this.muted"> (click)="this.muted = !this.muted">
<mat-icon>{{this.getVolumeBtn()}}</mat-icon> <mat-icon>{{this.volume | volumeToButton: this.muted}}</mat-icon>
</button> </button>
<mat-slider [value]="this.volume" (input)="this.volume = $event.value"></mat-slider> <mat-slider [value]="this.volume" (input)="this.volume = $event.value"></mat-slider>

31
src/app/pages/player/player.component.ts
View File

@ -57,6 +57,25 @@ export class BufferToWidthPipe implements PipeTransform
} }
} }
@Pipe({
name: "volumeToButton",
pure: true
})
export class VolumeToButtonPipe implements PipeTransform
{
transform(volume: number, muted: boolean): string
{
if (volume == 0 || muted)
return "volume_off";
else if (volume < 25)
return "volume_mute";
else if (volume < 65)
return "volume_down";
else
return "volume_up";
}
}
@Component({ @Component({
selector: "app-player", selector: "app-player",
templateUrl: "./player.component.html", templateUrl: "./player.component.html",
@ -358,18 +377,6 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
document.body.requestFullscreen(); document.body.requestFullscreen();
} }
getVolumeBtn(): string
{
if (this.volume == 0 || this.muted)
return "volume_off";
else if (this.volume < 25)
return "volume_mute";
else if (this.volume < 65)
return "volume_down";
else
return "volume_up";
}
selectSubtitle(subtitle: Track, changeUrl: boolean = true) selectSubtitle(subtitle: Track, changeUrl: boolean = true)
{ {
if (changeUrl) if (changeUrl)