Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-23 07:20:33 -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 {NgModule} from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import {MatRippleModule} from '@angular/material/core';
import {MatIconModule} from '@angular/material/icon';
import {MatMenuModule} from '@angular/material/menu';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatSelectModule} from '@angular/material/select';
import {MatSliderModule} from '@angular/material/slider';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatTooltipModule} from '@angular/material/tooltip';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatRippleModule } from '@angular/material/core';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserModule, HammerModule } from "@angular/platform-browser";
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {ItemsGridComponent} from './components/items-grid/items-grid.component';
import {CollectionComponent} from './pages/collection/collection.component';
import {EpisodesListComponent} from './components/episodes-list/episodes-list.component';
import {NotFoundComponent} from './pages/not-found/not-found.component';
import {PeopleListComponent} from './components/people-list/people-list.component';
import { BufferToWidthPipe, FormatTimePipe, PlayerComponent } from "./pages/player/player.component";
import {SearchComponent} from './pages/search/search.component';
import {ShowDetailsComponent} from './pages/show-details/show-details.component';
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {MatInputModule} from "@angular/material/input";
import {MatFormFieldModule} from "@angular/material/form-field";
import {MatTabsModule} from "@angular/material/tabs";
import {PasswordValidator} from "./misc/password-validator";
import {MatCheckboxModule} from "@angular/material/checkbox";
import {MatDialogModule} from '@angular/material/dialog';
import {FallbackDirective} from "./misc/fallback.directive";
import {AuthModule} from "./auth/auth.module";
import {AuthRoutingModule} from "./auth/auth-routing.module";
import {TrailerDialogComponent} from './pages/trailer-dialog/trailer-dialog.component';
import {ItemsListComponent} from "./components/items-list/items-list.component";
import {MetadataEditComponent} from './pages/metadata-edit/metadata-edit.component';
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";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ItemsGridComponent } from './components/items-grid/items-grid.component';
import { CollectionComponent } from './pages/collection/collection.component';
import { EpisodesListComponent } from './components/episodes-list/episodes-list.component';
import { NotFoundComponent } from './pages/not-found/not-found.component';
import { PeopleListComponent } from './components/people-list/people-list.component';
import {
BufferToWidthPipe,
FormatTimePipe,
PlayerComponent,
VolumeToButtonPipe
} from "./pages/player/player.component";
import { SearchComponent } from './pages/search/search.component';
import { ShowDetailsComponent } from './pages/show-details/show-details.component';
import { FormsModule , ReactiveFormsModule} from "@angular/forms";
import { MatInputModule } from "@angular/material/input";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatTabsModule } from "@angular/material/tabs";
import { PasswordValidator } from "./misc/password-validator";
import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatDialogModule } from '@angular/material/dialog';
import { FallbackDirective } from "./misc/fallback.directive";
import { AuthModule } from "./auth/auth.module";
import { AuthRoutingModule } from "./auth/auth-routing.module";
import { TrailerDialogComponent } from './pages/trailer-dialog/trailer-dialog.component';
import { ItemsListComponent } from "./components/items-list/items-list.component";
import { MetadataEditComponent } from './pages/metadata-edit/metadata-edit.component';
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({
@ -61,7 +66,8 @@ import {MatBadgeModule} from "@angular/material/badge";
MetadataEditComponent,
ShowGridComponent,
FormatTimePipe,
BufferToWidthPipe
BufferToWidthPipe,
VolumeToButtonPipe
],
imports: [
BrowserModule,

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

@ -7,7 +7,7 @@
poster="backdrop/{{this.item.showSlug}}"
autoplay muted
(click)="this.videoClicked()"
(play)="this.playing = true"
(play)="this.playing = true; this.loading = false"
(pause)="this.playing = false"
(ended)="this.next()"
[volume]="this.volume / 100"
@ -122,7 +122,7 @@
<div id="volume" [ngClass]="{'d-none': this.isMobile}">
<button mat-icon-button matTooltipPosition="above" matTooltip="Volume"
(click)="this.muted = !this.muted">
<mat-icon>{{this.getVolumeBtn()}}</mat-icon>
<mat-icon>{{this.volume | volumeToButton: this.muted}}</mat-icon>
</button>
<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({
selector: "app-player",
templateUrl: "./player.component.html",
@ -358,18 +377,6 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
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)
{
if (changeUrl)