4 |
13 | {{level | userLevelName}}
5 |
6 |
12 |
2 |
--------------------------------------------------------------------------------
/src/app/admin/bangumi-card/bangumi-card.less:
--------------------------------------------------------------------------------
1 | @image-width: 10rem;
2 |
3 | bangumi-card {
4 | display: block;
5 | box-sizing: border-box;
6 | padding: 0.5rem 0;
7 | height: 16rem;
8 | > .ui.segment {
9 | width: 100%;
10 | height: 100%;
11 | margin: 0;
12 | }
13 | }
14 |
15 | .bangumi-list-item {
16 | position: relative;
17 | padding-left: @image-width;
18 | width: 100%;
19 | height: 100%;
20 | .cover-wrapper {
21 | position: absolute;
22 | top: 0;
23 | left: 0;
24 | width: @image-width;
25 | height: 100%;
26 | overflow: hidden;
27 | > .bangumi-image {
28 | display: block;
29 | object-fit: cover;
30 | width: 100%;
31 | height: 100%;
32 | }
33 | }
34 |
35 | .list-item-text {
36 | width: 100%;
37 | padding-right: 1rem;
38 | .bangumi-title {
39 | width: 100%;
40 | overflow: hidden;
41 | margin: 0 1.5rem 1rem 1.5rem;
42 | white-space: nowrap;
43 | text-overflow: ellipsis;
44 | .ui.label {
45 | margin-left: 1em;
46 | position: relative;
47 | top: -0.1rem;
48 | }
49 | }
50 | h4.entry {
51 | margin: 0 0 0.6rem 0;
52 | .entry-value {
53 | padding-left: 7.4em;
54 | }
55 | }
56 | .entry {
57 | position: relative;
58 | margin: 0 0 0.6em 0;
59 | .entry-key {
60 | width: 7em;
61 | display: block;
62 | position: absolute;
63 | left: 0;
64 | top: 0;
65 | text-align: right;
66 | padding-right: 1em;
67 | font-size: 1rem;
68 | color: #828574;
69 | font-weight: normal;
70 | }
71 | .entry-value {
72 | display: block;
73 | padding-left: 8em;
74 | width: 100%;
75 | white-space: nowrap;
76 | overflow: hidden;
77 | text-overflow: ellipsis;
78 | }
79 | }
80 | }
81 |
82 | .exist-indicator {
83 | color: #f44336 !important;
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/app/admin/bangumi-detail/bangumi-basic/bangumi-basic.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { Bangumi } from '../../../entity/bangumi';
3 | import { FormBuilder, FormGroup, Validators } from '@angular/forms';
4 | import { UIDialogRef } from 'deneb-ui';
5 | import { User } from '../../../entity/user';
6 |
7 | @Component({
8 | selector: 'bangumi-basic',
9 | templateUrl: './bangumi-basic.html',
10 | styleUrls: ['./bangumi-basic.less']
11 | })
12 | export class BangumiBasic implements OnInit {
13 |
14 | @Input()
15 | bangumi: Bangumi;
16 |
17 | bangumiForm: FormGroup;
18 |
19 | adminList: User[];
20 |
21 | constructor(private _fb: FormBuilder,
22 | private _dialogRef: UIDialogRef
3 |
13 |
14 |
41 |
15 | ![image]()
16 |
17 |
18 |
40 | {{bangumi.name_cn || '暂无'}}已添加
19 |20 | 日文名 21 | {{bangumi.name || '暂无'}} 22 |
23 |24 | 简介 25 | {{bangumi.summary || '暂无'}} 26 |
27 |28 | 放送开始 29 | {{bangumi.air_date || '未知'}} 30 |
31 |32 | 放送星期 33 | {{bangumi.air_weekday || '未知'}} 34 |
35 |36 | 话数 37 | {{bangumi.eps || '0'}} 38 |
39 |
2 |
9 |
--------------------------------------------------------------------------------
/src/app/admin/search-bangumi/result-detail/result-detail.less:
--------------------------------------------------------------------------------
1 | .result-detail {
2 | width: 100%;
3 | height: 100%;
4 | top: 0;
5 | left: 0;
6 | padding-top: 4rem;
7 | position: absolute;
8 | transition: transform 300ms ease-out;
9 | transform: translate3d(100%, 0, 0);
10 | &.show-detail {
11 | transform: translate3d(0, 0, 0);
12 | }
13 | }
14 | .action-bar {
15 | position: absolute;
16 | top: 0;
17 | left: 0;
18 | width: 100%;
19 | height: 4rem;
20 | border-bottom: 1px solid #cccccc;
21 | border-top-left-radius: 4px;
22 | border-top-right-radius: 4px;
23 | background-color: #ffffff;
24 | display: flex;
25 | flex-direction: row;
26 | justify-content: flex-start;
27 | align-items: center;
28 | .back-button {
29 | display: inline-block;
30 | padding: 0.6rem;
31 | color: #333333;
32 | cursor: pointer;
33 | margin-left: 2rem;
34 | margin-right: 4rem;
35 | }
36 | .title {
37 | flex: 1 1 auto;
38 | font-size: 1.2rem;
39 | }
40 | .confirm-button {
41 | flex: 0 0 auto;
42 | display: inline-block;
43 | padding: 0.6rem;
44 | color: #333333;
45 | cursor: pointer;
46 | margin-left: 2rem;
47 | margin-right: 2rem;
48 | }
49 | }
50 | .detail-container {
51 | width: 100%;
52 | height: 100%;
53 | background-color: #fff;
54 | border-bottom-left-radius: 4px;
55 | border-bottom-right-radius: 4px;
56 | overflow-x: hidden;
57 | overflow-y: auto;
58 | }
59 | .bangumi-form {
60 | display: flex;
61 | flex-direction: row;
62 | justify-content: flex-start;
63 | align-items: flex-start;
64 | .bangumi-image {
65 | width: 30%;
66 | padding: 1rem;
67 | > img {
68 | display: block;
69 | width: 100%;
70 | height: auto;
71 | }
72 | }
73 | .bangumi-basic-info {
74 | flex: 1 0 auto;
75 | display: flex;
76 | flex-direction: column;
77 | justify-content: flex-start;
78 | align-items: stretch;
79 | padding: 1rem 1rem 1rem 0.5rem;
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/app/admin/task-manager/task-manager.less:
--------------------------------------------------------------------------------
1 | .content-area {
2 | position: fixed;
3 | top: 4.8rem;
4 | left: 260px;
5 | bottom: 0;
6 | right: 0;
7 | overflow: hidden;
8 | padding: 0.5rem 1rem;
9 | background-color: #f0f0f0;
10 | .task-list {
11 | width: 100%;
12 | height: 100%;
13 | overflow-x: hidden;
14 | overflow-y: auto;
15 | }
16 | }
17 |
18 | .anchor-button {
19 | cursor: pointer;
20 | color: #333333;
21 | padding: 0.4em;
22 | &:hover,
23 | &:focus {
24 | color: #5f94c5;
25 | }
26 | }
--------------------------------------------------------------------------------
/src/app/admin/task-manager/task.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient } from '@angular/common/http';
2 | import { Injectable } from '@angular/core';
3 | import { Observable } from 'rxjs';
4 | import { catchError, map } from 'rxjs/operators';
5 | import { BaseService } from '../../../helpers/base.service';
6 | import { Bangumi, Episode } from '../../entity';
7 |
8 | @Injectable()
9 | export class TaskService extends BaseService {
10 | private _baseUrl = '/api/task';
11 |
12 | constructor(private _http: HttpClient) {
13 | super();
14 | }
15 |
16 | listPendingDeleteBangumi(): Observable<{data: Bangumi[], delete_delay: number}> {
17 | return this._http.get<{data: Bangumi[], delete_delay: number}>(`${this._baseUrl}/bangumi`).pipe(
18 | catchError(this.handleError),);
19 | }
20 |
21 | listPendingDeleteEpisode(): Observable<{data: Episode[], delete_delay: number}> {
22 | return this._http.get<{data: Episode[], delete_delay: number}>(`${this._baseUrl}/episode`).pipe(
23 | catchError(this.handleError),);
24 | }
25 |
26 | restoreBangumi(bangumi_id: string): Observable
10 |
41 |
42 |
2 |
--------------------------------------------------------------------------------
/src/app/admin/user-manager/user-promote-modal/user-promote-modal.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | box-sizing: border-box;
4 | text-align: left;
5 | @media(max-width: 465px) {
6 | width: 90%;
7 | }
8 | @media(min-width: 466px) {
9 | width: 470px;
10 | }
11 | @media(min-height: 300px) {
12 | height: 280px;
13 | }
14 | @media(max-height: 299px) {
15 | height: 90%;
16 | }
17 | margin: auto;
18 | top: 0;
19 | left: 0;
20 | right: 0;
21 | bottom: 0;
22 | position: absolute;
23 | border-radius: 4px;
24 | background-color: #fff;
25 | overflow: hidden;
26 | padding-bottom: 5rem;
27 | }
28 |
29 | .user-promote-modal {
30 | padding: 2rem;
31 | text-align: center;
32 | }
33 |
34 | .footer {
35 | position: absolute;
36 | width: 100%;
37 | height: 5rem;
38 | left: 0;
39 | bottom: 0;
40 | border-top: 1px solid #e2e2e2;
41 | background-color: #fff;
42 | display: flex;
43 | flex-direction: row;
44 | justify-content: flex-end;
45 | align-items: center;
46 | padding-right: 1.6rem;
47 | > .ui.button {
48 | margin-right: 2rem;
49 | }
50 | }
--------------------------------------------------------------------------------
/src/app/admin/web-hook/web-hook-card/web-hook-card.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, ViewEncapsulation } from '@angular/core';
2 | import { WebHook } from '../../../entity/web-hook';
3 |
4 | @Component({
5 | selector: 'web-hook-card',
6 | templateUrl: './web-hook-card.html',
7 | styleUrls: ['./web-hook-card.less'],
8 | encapsulation: ViewEncapsulation.None
9 | })
10 | export class WebHookCardComponent {
11 | @Input()
12 | webHook: WebHook;
13 |
14 | onClickId(event: Event) {
15 | event.preventDefault();
16 | event.stopPropagation();
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/admin/web-hook/web-hook-card/web-hook-card.html:
--------------------------------------------------------------------------------
1 |
3 |
14 |
18 |
2 |
--------------------------------------------------------------------------------
/src/app/admin/web-hook/web-hook-card/web-hook-card.less:
--------------------------------------------------------------------------------
1 | web-hook-card {
2 | display: block;
3 | box-sizing: border-box;
4 | padding: 0.5rem 0;
5 | height: 12rem;
6 | > .ui.segment {
7 | width: 100%;
8 | height: 100%;
9 | margin: 0;
10 |
11 | .url {
12 | font-size: 0.9em;
13 | color: #555555;
14 | margin-bottom: 0.5em;
15 | }
16 |
17 | .desc {
18 | overflow: hidden;
19 | text-overflow: ellipsis;
20 | -webkit-box-orient: vertical;
21 | -webkit-line-clamp: 2;
22 | font-size: 1rem;
23 | line-height: 1rem;
24 | max-height: 2rem;
25 | }
26 | }
27 |
28 | .created_by > .detail {
29 | padding-right: 1em;
30 | }
31 | }
--------------------------------------------------------------------------------
/src/app/admin/web-hook/web-hook.html:
--------------------------------------------------------------------------------
1 |
3 | {{webHook.name}}
4 | ID:{{webHook.id}}
5 | ALIVE
6 | HAS ERROR
7 | DEAD
8 | INITIAL
9 |
10 |
11 | 连续错误次数
12 | {{webHook.consecutive_failure_count}}
13 |
14 |
15 |
16 | URL:
17 | {{webHook.url}}
18 |
19 |
20 | {{webHook.description}}
21 |
22 |
23 | 创建者： {{webHook.created_by?.name}}
24 | 创建于： {{webHook.register_time | date:'fullDate'}}
25 |
26 |
7 |
--------------------------------------------------------------------------------
/src/app/admin/web-hook/web-hook.less:
--------------------------------------------------------------------------------
1 | .content-area {
2 | position: fixed;
3 | top: 4.8rem;
4 | left: 260px;
5 | bottom: 0;
6 | right: 0;
7 | overflow-x: hidden;
8 | overflow-y: auto;
9 | padding: 0.5rem 1rem;
10 | background-color: #f0f0f0;
11 | }
12 |
13 | .anchor-button {
14 | cursor: pointer;
15 | color: #333333;
16 | }
17 |
18 | .all-web-hook-container {
19 | width: 100%;
20 | height: 100%;
21 | padding: 0 2rem;
22 | }
23 |
24 | .no-result-container {
25 | width: 100%;
26 | height: 100%;
27 | overflow: hidden;
28 | position: relative;
29 | .no-result-tips {
30 | position: absolute;
31 | top: 0;
32 | left: 0;
33 | right: 0;
34 | bottom: 0;
35 | margin: auto;
36 | width: 12em;
37 | height: 2em;
38 | font-size: 3rem;
39 | color: #9f9f9f;
40 | }
41 | }
42 | .searching-container {
43 | width: 100%;
44 | height: 100%;
45 | overflow: hidden;
46 | position: relative;
47 | .loader {
48 | color: #9f9f9f;
49 | }
50 | }
--------------------------------------------------------------------------------
/src/app/alert-dialog/alert-dialog.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { UIDialogRef } from 'deneb-ui';
3 |
4 | @Component({
5 | selector: 'alert-dialog',
6 | templateUrl: './alert-dialog.html'
7 | })
8 | export class AlertDialog {
9 | @Input()
10 | confirmButtonText: string;
11 |
12 | @Input()
13 | title: string;
14 |
15 | @Input()
16 | content: string;
17 |
18 |
19 | constructor(private _dialogRef: UIDialogRef
8 |
9 |
13 |
14 |
15 |
17 | 还没有添加Web Hook
16 |
18 |
20 | Loading...
19 |
2 |
--------------------------------------------------------------------------------
/src/app/alert-dialog/alert-dialog.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { AlertDialog } from './alert-dialog.component';
3 | import { UIDialogModule } from 'deneb-ui';
4 | @NgModule({
5 | declarations: [AlertDialog],
6 | imports: [UIDialogModule],
7 | exports: [AlertDialog],
8 | entryComponents: [AlertDialog]
9 | })
10 | export class AlertDialogModule {
11 |
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/analytics.service.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from '@angular/core';
2 | import {Router, NavigationEnd} from '@angular/router';
3 |
4 | @Injectable()
5 | export class AnalyticsService {
6 |
7 | constructor(private router: Router) {
8 | this.router.events
9 | .subscribe(
10 | (event) => {
11 | if(event instanceof NavigationEnd) {
12 | this.routeChanged(this.getPath(event.url));
13 | }
14 | }
15 | )
16 | }
17 |
18 | private getPath(url: string): string {
19 | return url.split(';')[0];
20 | }
21 |
22 | private routeChanged(route: string): void {
23 | if(typeof ga === 'undefined') {
24 | ga_events.push(
25 | ['set', 'page', route],
26 | ['send', 'pageview']
27 | )
28 | } else {
29 | ga('set', 'page', route);
30 | ga('send', 'pageview');
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular 2 decorators and services
3 | */
4 | import { Component, ViewEncapsulation } from '@angular/core';
5 |
6 | import { AnalyticsService } from './analytics.service';
7 | import { Router, NavigationEnd, NavigationStart } from '@angular/router';
8 | import { Subscription } from 'rxjs';
9 |
10 | /*
11 | * App Component
12 | * Top Level Component
13 | */
14 | @Component({
15 | selector: 'app',
16 | template: `
17 |
3 |
4 | {{title}}
5 |
6 |
7 |
9 | {{content}}
8 |
10 |
14 |
15 |
2 |
--------------------------------------------------------------------------------
/src/app/confirm-dialog/confirm-dialog.directive.ts:
--------------------------------------------------------------------------------
1 | import {Directive, EventEmitter, HostListener, Input, OnDestroy, Output} from '@angular/core';
2 | import {UIDialog} from 'deneb-ui';
3 | import {ConfirmDialogModal} from './confirm-dialog-modal.component';
4 | import {Subscription} from 'rxjs';
5 |
6 | @Directive({
7 | selector: '[confirmDialog]'
8 | })
9 | export class ConfirmDialogDirective implements OnDestroy {
10 |
11 | private _subscription = new Subscription();
12 |
13 | @Input()
14 | dialogTitle: string;
15 |
16 | @Input()
17 | dialogContent: string;
18 |
19 | @Output()
20 | onConfirm = new EventEmitter
3 |
4 | {{title}}
5 |
6 |
7 |
8 |
9 |
10 |
14 |
18 |
19 |
2 |
--------------------------------------------------------------------------------
/src/app/email-confirm/email-confirm.less:
--------------------------------------------------------------------------------
1 | :host {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | bottom: 0;
6 | right: 0;
7 | display: block;
8 | box-sizing: border-box;
9 | background-color: #f0f0f0;
10 | }
11 |
12 | .email-confirm {
13 | width: 700px;
14 | height: 200px;
15 | position: absolute;
16 | top: 0;
17 | left: 0;
18 | right: 0;
19 | bottom: 0;
20 | margin: auto;
21 | background-color: #ffffff;
22 | border: 1px solid #ccc;
23 | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
24 | text-align: center;
25 | padding: 2rem;
26 | p {
27 | font-size: 1.2rem;
28 | }
29 | .confirmed {
30 | .ui.button {
31 | margin-top: 2rem;
32 | }
33 | }
34 | }
--------------------------------------------------------------------------------
/src/app/email-confirm/email-confirm.module.ts:
--------------------------------------------------------------------------------
1 | import { HttpClientModule } from '@angular/common/http';
2 | import { NgModule } from '@angular/core';
3 | import { CommonModule } from '@angular/common';
4 | import { EmailConfirm } from './email-confirm.component';
5 | import { EmailConfirmService } from "./email-confirm.service";
6 |
7 | @NgModule({
8 | declarations: [EmailConfirm],
9 | imports: [CommonModule, HttpClientModule],
10 | providers: [EmailConfirmService]
11 | })
12 | export class EmailConfirmModule {
13 |
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/email-confirm/email-confirm.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient } from '@angular/common/http';
2 | import { Injectable } from '@angular/core';
3 | import { Observable } from 'rxjs';
4 | import { catchError, map } from 'rxjs/operators';
5 | import { BaseService } from '../../helpers/base.service';
6 |
7 | @Injectable()
8 | export class EmailConfirmService extends BaseService {
9 | constructor(private _http: HttpClient) {
10 | super()
11 | }
12 |
13 | confirmEmail(querystring: string): Observable
3 |
5 | Just wait a little moment...
4 |
6 |
9 | Congratulations! You have completed email address confirmation.
7 | 8 |
10 |
12 | Fail to confirm email!
11 |this is an error
2 | {{errorStatus}}
{{errorMessage}}
3 |
--------------------------------------------------------------------------------
/src/app/forget-pass/forget-pass.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/forget-pass/forget-pass.less:
--------------------------------------------------------------------------------
1 | .forget-pass {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | right: 0;
6 | bottom: 0;
7 | .form-wrapper {
8 | width: 40rem;
9 | height: 12rem;
10 | position: absolute;
11 | top: 0;
12 | left: 0;
13 | right: 0;
14 | bottom: 0;
15 | margin: auto;
16 | text-align: center;
17 | }
18 | .email-input {
19 | width: 80%;
20 | }
21 | }
--------------------------------------------------------------------------------
/src/app/forget-pass/forget-pass.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { ForgetPass } from './forget-pass.component';
3 | import {CommonModule} from '@angular/common';
4 |
5 | @NgModule({
6 | declarations: [ForgetPass],
7 | imports: [CommonModule]
8 | })
9 | export class ForgetPassModule {
10 |
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/form-utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './validators';
2 |
--------------------------------------------------------------------------------
/src/app/form-utils/validators.ts:
--------------------------------------------------------------------------------
1 | import {FormGroup} from "@angular/forms";
2 |
3 |
4 | export function passwordMatch(passwordKey:string, passwordConfirmKey:string) {
5 | return (group:FormGroup):{[key:string]:any} => {
6 | let password = group.get(passwordKey);
7 | let passwordConfirm = group.get(passwordConfirmKey);
8 | return password.value !== passwordConfirm.value ? {mismatchedPasswords: true}: null;
9 | };
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/home/bangumi-account-binding/bangumi-account-binding.less:
--------------------------------------------------------------------------------
1 | :host {
2 | background-color: #f0f0f0;
3 | display: block;
4 | box-sizing: border-box;
5 | position: fixed;
6 | top: 3.5rem;
7 | left: 0;
8 | right: 0;
9 | bottom: 0;
10 | overflow-x: hidden;
11 | overflow-y: auto;
12 | }
13 | .bangumi-account-binding-container {
14 | width: 700px;
15 | padding-top: 2rem;
16 | padding-bottom: 3rem;
17 |
18 | @media (max-width: 479px) {
19 | width: 100%;
20 | }
21 | @media (min-width: 480px) and (max-width: 767px) {
22 | width: 480px;
23 | }
24 | @media (min-width: 768px) {
25 | width: 700px;
26 | }
27 | }
28 | .bangumi-bound {
29 | display: flex;
30 | flex-direction: row;
31 | justify-content: flex-start;
32 | padding: 1rem 1.5rem;
33 | .avatar {
34 | width: 75px;
35 | height: 75px;
36 | border-radius: 4px;
37 | border: 1px solid #f0f0f0;
38 | > img {
39 | width: 100%;
40 | height: 100%;
41 | border-radius: 4px;
42 | }
43 | }
44 | .info {
45 | margin: 0 1.5rem;
46 | > .nickname {
47 | font-size: 1.2rem;
48 | color: #383838;
49 | font-weight: 600;
50 | padding: 0 0 0.5rem 0;
51 | }
52 | > .username {
53 | font-size: 1.1rem;
54 | color: #606060;
55 | padding: 0 0 0.5rem 0;
56 | }
57 | > .user-space-url {
58 | font-size: 1.1rem;
59 | padding-top: 0.8rem;
60 | }
61 | > .actions {
62 | margin-top: 1.5rem;
63 | }
64 | }
65 | }
66 |
67 | .bangumi-login-status {
68 | height: 4em;
69 | line-height: 2em;
70 | .status-icon {
71 | background: transparent url('/assets/img/rate_emo.gif') no-repeat;
72 | height: 37px;
73 | width: 30px;
74 | display: inline-block;
75 | vertical-align: middle;
76 | margin: 0 1rem;
77 | }
78 |
79 | .status-logon {
80 | background-position: -153px 0;
81 | }
82 |
83 | .status-logout {
84 | background-position: 0;
85 | }
86 | .status-text {
87 | display: inline-block;
88 | margin: 0 1rem 0 0;
89 | }
90 | }
--------------------------------------------------------------------------------
/src/app/home/bangumi-card/image-loading-strategy.service.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from '@angular/core';
2 |
3 | @Injectable()
4 | export class ImageLoadingStrategy {
5 | imageUrl = {};
6 |
7 | hasLoaded(url) {
8 | return !!this.imageUrl[url];
9 | }
10 |
11 | addLoadedUrl(url: string) {
12 | this.imageUrl[url] = true;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/home/bangumi-extra-info/bangumi-character/bangumi-character.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { Bangumi } from '../../../entity';
3 | import { Character } from '../interfaces';
4 |
5 |
6 | @Component({
7 | selector: 'bangumi-character',
8 | templateUrl: './bangumi-character.html',
9 | styleUrls: ['./bangumi-character.less']
10 | })
11 | export class BangumiCharacterComponent {
12 | @Input()
13 | bangumi: Bangumi;
14 | @Input()
15 | characterList: Character[];
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/home/bangumi-extra-info/bangumi-character/bangumi-character.html:
--------------------------------------------------------------------------------
1 |
3 |
14 | 重置密码
4 | 13 |角色和声优
2 | 角色
3 |
4 |
--------------------------------------------------------------------------------
/src/app/home/bangumi-extra-info/bangumi-character/bangumi-character.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | -webkit-box-sizing: border-box;
4 | -moz-box-sizing: border-box;
5 | box-sizing: border-box;
6 | }
7 |
8 | .crt-header {
9 | margin-top: 1.8rem;
10 | padding-bottom: 0.4rem;
11 | border-bottom: 1px solid #ccc;
12 | display: block;
13 | font-size: 0.8rem;
14 | color: #adadad;
15 | }
16 |
17 | .chara-grid {
18 | margin-top: 0.4rem;
19 | }
20 |
21 | .character-wrapper {
22 | display: flex;
23 | flex-direction: row;
24 | justify-content: flex-start;
25 | .chara-avatar {
26 | flex: 0 0 auto;
27 | width: 4rem;
28 | height: 4rem;
29 | border-radius: 0.2rem;
30 | border: 1px solid #e0e0e0;
31 | > img {
32 | width: 100%;
33 | height: 100%;
34 | }
35 | }
36 | .chara-info {
37 | flex: 1 1 auto;
38 | margin-left: 0.5rem;
39 | > .main-info {
40 | padding-bottom: 0.2rem;
41 | border-bottom: 1px solid #d6d6d6;
42 | }
43 | > .extra-info {
44 | margin-top: 0.2rem;
45 | > .name-cn {
46 | font-size: 0.9rem;
47 | color: #606060;
48 | }
49 | }
50 | > .actor-info {
51 | font-size: 0.9rem;
52 | margin-top: 0.2rem;
53 | .actor-key {
54 | color: #474747;
55 | }
56 | .actor-name-link {
57 | color: #5f5f5f;
58 | &:hover,
59 | &:focus {
60 | color: #1e70bf;
61 | }
62 | }
63 | }
64 | }
65 | }
--------------------------------------------------------------------------------
/src/app/home/bangumi-extra-info/bangumi-staff-info/bangumi-staff-info.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { Staff } from '../interfaces';
3 |
4 | @Component({
5 | selector: 'bangumi-staff-info',
6 | templateUrl: './bangumi-staff-info.html',
7 | styleUrls: ['./bangumi-staff-info.less']
8 | })
9 | export class BangumiStaffInfoComponent implements OnInit {
10 | @Input()
11 | staffList: Staff[];
12 |
13 | staffMap: {[job: string]: Staff[]};
14 |
15 | jobs: string[];
16 |
17 | constructor() {
18 | this.staffMap = {};
19 | this.jobs = [];
20 | }
21 |
22 | ngOnInit(): void {
23 | this.staffList.forEach(staff => {
24 | staff.jobs.forEach(job => {
25 | if (!this.staffMap[job]) {
26 | this.jobs.push(job);
27 | this.staffMap[job] = [];
28 | }
29 | this.staffMap[job].push(staff);
30 | });
31 | });
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/home/bangumi-extra-info/bangumi-staff-info/bangumi-staff-info.html:
--------------------------------------------------------------------------------
1 |
5 |
27 |
6 |
26 |
7 | ![avatar]()
8 |
9 |
10 |
25 |
11 | {{character.name}}
12 |
13 |
14 | {{character.role_name}}
15 | {{character.name_cn}}
16 |
17 |
18 | CV:
19 |
20 | {{actor.name}}
21 | /
22 |
23 |
24 | 制作人员
2 |
3 |
--------------------------------------------------------------------------------
/src/app/home/bangumi-extra-info/bangumi-staff-info/bangumi-staff-info.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | margin-top: 2rem;
5 | }
6 | .staff-header {
7 | margin-top: 1.8rem;
8 | padding-bottom: 0.4rem;
9 | border-bottom: 1px solid #ccc;
10 | display: block;
11 | font-size: 0.8rem;
12 | color: #adadad;
13 | }
14 | .staff-info {
15 | width: 100%;
16 | margin-top: 0.4rem;
17 | .staff-item {
18 | margin-bottom: 0.5rem;
19 | }
20 | }
--------------------------------------------------------------------------------
/src/app/home/bangumi-extra-info/interfaces.ts:
--------------------------------------------------------------------------------
1 | export interface BgmImage {
2 | large: string;
3 | medium: string;
4 | small: string;
5 | grid: string;
6 | }
7 |
8 | export interface Actor {
9 | id: number;
10 | url: string;
11 | name: string;
12 | images: BgmImage;
13 | }
14 |
15 | export interface Person {
16 | id: number;
17 | url: string;
18 | name: string;
19 | name_cn?: string;
20 | role_name: string;
21 | images: BgmImage | null;
22 | comment: number;
23 | collects: number;
24 | info: {name_cn: string, alias: {en: string}, gender: string};
25 | }
26 |
27 | export interface Character extends Person {
28 | actors: Actor[];
29 | }
30 |
31 | export interface Staff extends Person {
32 | jobs: string[];
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/home/bangumi-list/bangumi-list.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 |
3 | @Injectable()
4 | export class BangumiListService {
5 | scrollPosition = 0;
6 | sort: string;
7 | type: number;
8 | isMovie: boolean;
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/home/bottom-float-banner/bottom-float-banner.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, HostBinding } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'bottom-float-banner',
5 | templateUrl: './bottom-float-banner.html',
6 | styleUrls: ['./bottom-float-banner.less'],
7 | })
8 | export class BottomFloatBannerComponent {
9 |
10 | @HostBinding('class.show')
11 | showBanner = false;
12 |
13 | constructor() {
14 | const ua = navigator.userAgent;
15 | this.showBanner = ua.toLowerCase().indexOf('android') > -1;
16 | }
17 |
18 | closeBanner(event: Event) {
19 | event.preventDefault();
20 | event.stopPropagation();
21 | this.showBanner = false;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/app/home/bottom-float-banner/bottom-float-banner.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/home/bottom-float-banner/bottom-float-banner.less:
--------------------------------------------------------------------------------
1 | @bannerHeight: 3rem;
2 |
3 | :host {
4 | display: none;
5 | box-sizing: border-box;
6 | position: fixed;
7 | left: 0;
8 | right: 0;
9 | bottom: 0;
10 | height: @bannerHeight;
11 | background: #383838;
12 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
13 | z-index: 2000;
14 | &.show {
15 | display: block;
16 | }
17 | .banner {
18 | height: @bannerHeight;
19 | line-height: @bannerHeight;
20 | font-size: 1.2rem;
21 | font-weight: 600;
22 | font-family: "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
23 | padding: 0 @bannerHeight 0 1rem;
24 | .app-link {
25 | .app-logo {
26 | display: inline-block;
27 | height: @bannerHeight - 0.8rem;
28 | width: auto;
29 | border: none;
30 | vertical-align: middle;
31 | margin-right: 1rem;
32 | }
33 | color: #f0f0f0;
34 | }
35 | .close-button {
36 | position: absolute;
37 | display: inline-block;
38 | width: @bannerHeight;
39 | height: @bannerHeight;
40 | top: 0;
41 | right: 0;
42 | font-size: 1.4rem;
43 | color: #f0f0f0;
44 | }
45 | }
46 | }
--------------------------------------------------------------------------------
/src/app/home/default/default.less:
--------------------------------------------------------------------------------
1 | .on-air-loading-wrapper {
2 | height: 21rem;
3 | position: static !important;
4 | }
5 | .default-container {
6 | padding-top: 2rem;
7 | }
8 |
9 | .recommend-header {
10 | font-size: 1.1rem;
11 | font-weight: bold;
12 | padding: 0.6rem 1rem;
13 | margin: 1rem 0 1.8rem 0;
14 | border-bottom: 1px solid #f0f0f0;
15 | }
16 |
17 | .bangumi-card {
18 | overflow: hidden;
19 | .ui.ribbon.label {
20 | position: absolute;
21 | top: 0.5rem;
22 | left: -1rem;
23 | }
24 | .image-wrapper {
25 | width: 100%;
26 | height: 0;
27 | padding-bottom: 140.5152224824%;
28 | position: relative;
29 | overflow: hidden;
30 | > img {
31 | position: absolute;
32 | top: 0;
33 | left: 0;
34 | object-fit: cover;
35 | width: 100%;
36 | height: 100%;
37 | }
38 | }
39 | }
40 |
41 | .announce-container {
42 | padding: 0 0.2rem;
43 | .announcement {
44 | display: block;
45 | position: relative;
46 | width: 100%;
47 | height: 0;
48 | padding-bottom: 20.43%;
49 | > img {
50 | display: block;
51 | position: absolute;
52 | top: 0;
53 | left: 0;
54 | width: 100%;
55 | height: 100%;
56 | }
57 | }
58 | }
--------------------------------------------------------------------------------
/src/app/home/favorite-chooser/conflict-dialog/conflict-dialog.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { UIDialogRef } from 'deneb-ui';
3 |
4 | @Component({
5 | selector: 'conflict-dialog',
6 | templateUrl: './conflict-dialog.html',
7 | styleUrls: ['./conflict-dialog.less']
8 | })
9 | export class ConflictDialogComponent {
10 | siteTitle = SITE_TITLE;
11 |
12 | STATUS_TEXT = ['', '想看', '看过', '在看', '搁置', '抛弃'];
13 |
14 | @Input()
15 | bangumiName: string;
16 |
17 | @Input()
18 | siteStatus: number;
19 |
20 | @Input()
21 | bgmStatus: number;
22 |
23 | constructor(private _dialogRef: UIDialogRef
4 | {{job}}：
5 |
6 | {{staff.name}}
7 | /
8 |
9 |
10 |
2 |
--------------------------------------------------------------------------------
/src/app/home/favorite-chooser/conflict-dialog/conflict-dialog.less:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lordfriend/Deneb/44560541483739727bfad30b0bb6eddbf57b6a15/src/app/home/favorite-chooser/conflict-dialog/conflict-dialog.less
--------------------------------------------------------------------------------
/src/app/home/favorite-chooser/favorite-chooser.less:
--------------------------------------------------------------------------------
1 | favorite-chooser {
2 | display: block;
3 | -webkit-box-sizing: border-box;
4 | -moz-box-sizing: border-box;
5 | box-sizing: border-box;
6 | margin-top: 1.8rem;
7 |
8 | .facade-item {
9 | margin-top: 2.8rem;
10 | padding-top: 0.6rem;
11 | border-top: 1px solid #ccc;
12 | position: relative;
13 | &:before {
14 | display: block;
15 | font-size: 0.8rem;
16 | color: #adadad;
17 | position: absolute;
18 | top: -1.8rem;
19 | left: 0;
20 | }
21 | }
22 | .my-review {
23 | &:before {
24 | content: "我的评价";
25 | }
26 | }
27 |
28 | .sync-disabled-tip {
29 | display: inline-block;
30 | margin-left: 1rem;
31 | color: #da9003
32 | }
33 |
34 | .sync-complete-tip {
35 | color: #6cbb72;
36 | }
37 | }
--------------------------------------------------------------------------------
/src/app/home/favorite-list/favorite-list.less:
--------------------------------------------------------------------------------
1 | :host {
2 | position: fixed;
3 | top: 3.5rem;
4 | left: 0;
5 | right: 0;
6 | bottom: 0;
7 | }
8 |
9 | :host-context(.home-content.sidebar-active) {
10 | position: fixed;
11 | top: 3.5rem;
12 | left: 15rem;
13 | right: 0;
14 | bottom: 0;
15 | @media (max-width: 1330px) {
16 | left: 0;
17 | }
18 | }
19 |
20 | .anchor-button {
21 | cursor: pointer;
22 | color: #333333;
23 | &:hover,
24 | &:focus {
25 | color: #4f7ba4
26 | }
27 | }
28 |
29 | .favorite-list-container {
30 | padding-bottom: 1rem;
31 | padding-top: 4rem;
32 | width: 100%;
33 | height: 100%;
34 | background-color: #f0f0f0;
35 | .filter-container {
36 | position: absolute;
37 | top: 0;
38 | left: 0;
39 | width: 100%;
40 | font-size: 1rem;
41 | padding: 1rem 4rem 1rem 0;
42 | text-align: right;
43 | .ui.dropdown {
44 | cursor: pointer;
45 | > .text {
46 | font-weight: normal;
47 | }
48 | &:hover,
49 | &:focus {
50 | color: #4f7ba4
51 | }
52 | }
53 | }
54 | .timeline-container {
55 | width: 100%;
56 | height: 100%;
57 | }
58 | }
59 | .no-result-container {
60 | width: 100%;
61 | height: 100%;
62 | overflow: hidden;
63 | position: relative;
64 | .no-result-tips {
65 | position: absolute;
66 | top: 0;
67 | left: 0;
68 | right: 0;
69 | bottom: 0;
70 | margin: auto;
71 | width: 8em;
72 | height: 2em;
73 | font-size: 4rem;
74 | color: #9f9f9f;
75 | }
76 | }
77 | .loading-container {
78 | width: 100%;
79 | height: 100%;
80 | overflow: hidden;
81 | position: relative;
82 | background-color: #f0f0f0;
83 | .loader {
84 | color: #9f9f9f;
85 | }
86 | }
--------------------------------------------------------------------------------
/src/app/home/index.ts:
--------------------------------------------------------------------------------
1 | export {HomeModule} from './home.module';
2 |
--------------------------------------------------------------------------------
/src/app/home/my-bangumi/my-bangumi.html:
--------------------------------------------------------------------------------
1 |
3 |
4 | 同步 {{bangumiName}} 收藏状态时发现冲突
5 |
6 |
7 |
13 | 发现{{siteTitle}}的状态与Bangumi的状态不同，请选择保留何种状态
8 |
9 |
12 | {{siteTitle}}的收藏状态：{{STATUS_TEXT[siteStatus]}}
10 | Bangumi的收藏状态：{{STATUS_TEXT[bgmStatus]}}
11 |
14 |
17 |
20 |
21 |
2 | 我在看的番組
3 |
4 |
13 |
14 | 还没有{{favoriteLabel[currentStatus]}}的番組
15 |
--------------------------------------------------------------------------------
/src/app/home/my-bangumi/my-bangumi.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | box-sizing: border-box;
4 | }
5 |
6 | .status-picker {
7 | float: right;
8 | color: rgba(0, 0, 0, 0.87);
9 | font-weight: 500;
10 | }
11 |
12 | .header {
13 | margin: 0;
14 | font-size: 0.9rem;
15 | font-weight: 700;
16 | line-height: 2;
17 | color: #2185d0;
18 | }
19 |
20 | .menu.favorite-list {
21 | margin: .3em -1.14285714em 0;
22 | padding-top: 1rem;
23 | > .item.favorite-item {
24 | font-size: 1rem;
25 | padding: 0.5em 1.14em;
26 | white-space: nowrap;
27 | > .bangumi-name {
28 | display: inline-block;
29 | width: 9em;
30 | color: #696969;
31 | overflow: hidden;
32 | text-overflow: ellipsis;
33 | white-space: nowrap;
34 | }
35 | > .ui.label {
36 | position: absolute;
37 | top: 0.63em;
38 | right: 1.14em;
39 | &.undecorated {
40 | background: transparent;
41 | color: #999999;
42 | }
43 | }
44 | }
45 | }
46 |
47 | .empty-placeholder {
48 | margin: .5em -1.14285714em 0;
49 | font-size: 1rem;
50 | padding: 1.5em 1.14em 0.5em;
51 | color: #4c4c4c;
52 | }
--------------------------------------------------------------------------------
/src/app/home/play-episode/comment/comment-form/comment-form.html:
--------------------------------------------------------------------------------
1 |
2 | ![avatar]()
3 |
4 |
--------------------------------------------------------------------------------
/src/app/home/play-episode/comment/comment-form/comment-form.less:
--------------------------------------------------------------------------------
1 | :host {
2 | width: 100%;
3 | display: flex;
4 | flex-direction: row;
5 | justify-content: flex-start;
6 | -webkit-box-sizing: border-box;
7 | -moz-box-sizing: border-box;
8 | box-sizing: border-box;
9 | }
10 | .user-avatar {
11 | width: 2.5em;
12 | height: 2.5em;
13 | border-radius: 0.25rem;
14 | margin-right: 1rem;
15 | > img {
16 | width: 100%;
17 | height: 100%;
18 | border-radius: 0.25rem;
19 | }
20 | }
21 | .ui.form {
22 | flex: 1 1 auto;
23 | textarea {
24 | height: 8em;
25 | }
26 | .buttons.field {
27 | display: flex;
28 | flex-direction: row;
29 | justify-content: flex-end;
30 | }
31 | }
--------------------------------------------------------------------------------
/src/app/home/play-episode/comment/edit-comment/edit-comment.html:
--------------------------------------------------------------------------------
1 |
2 | ![avatar]()
3 |
4 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/app/home/play-episode/comment/edit-comment/edit-comment.less:
--------------------------------------------------------------------------------
1 | :host {
2 | width: 100%;
3 | display: flex;
4 | flex-direction: row;
5 | justify-content: flex-start;
6 | -webkit-box-sizing: border-box;
7 | -moz-box-sizing: border-box;
8 | box-sizing: border-box;
9 | }
10 | .user-avatar {
11 | width: 2.5em;
12 | height: 2.5em;
13 | border-radius: 0.25rem;
14 | margin-right: 1rem;
15 | > img {
16 | width: 100%;
17 | height: 100%;
18 | border-radius: 0.25rem;
19 | }
20 | }
21 | .ui.form {
22 | flex: 1 1 auto;
23 | textarea {
24 | height: 8em;
25 | }
26 | .buttons.field {
27 | display: flex;
28 | flex-direction: row;
29 | justify-content: flex-end;
30 | }
31 | }
--------------------------------------------------------------------------------
/src/app/home/play-episode/feedback/feedback.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { UIDialogRef } from 'deneb-ui';
3 | import { FormBuilder, FormGroup } from '@angular/forms';
4 |
5 | @Component({
6 | selector: 'feedback-dialog',
7 | templateUrl: './feedback.html',
8 | styleUrls: ['./feedback.less']
9 | })
10 | export class FeedbackComponent implements OnInit {
11 |
12 | feedbackForm: FormGroup;
13 |
14 | issueList = ['有画面无声音', '有声音无画面', '无声音无画面', '其他'];
15 |
16 | pickedIndex = -1;
17 |
18 | constructor(private _dialogRef: UIDialogRef
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/src/app/home/play-episode/reveal-extra/reveal-extra.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | -webkit-box-sizing: border-box;
4 | -moz-box-sizing: border-box;
5 | box-sizing: border-box;
6 | margin-top: 1rem;
7 | }
8 |
9 | //.reveal-off {
10 | // text-align: center;
11 | //}
12 |
13 | .reveal-on {
14 | > .buttons {
15 | margin-top: 1rem;
16 | //text-align: center;
17 | }
18 | }
--------------------------------------------------------------------------------
/src/app/home/preview-video/preview-video.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/home/rating/my-review/my-review.html:
--------------------------------------------------------------------------------
1 |
3 |
7 |
8 |
26 |
9 |
25 |
10 | ![]()
11 |
12 |
13 |
24 | 14 | {{currentPV.name_cn}} 15 |
16 |17 | {{currentPV.name}} 18 |
19 |{{currentPV.name}}
20 |
21 |
22 | 放送开始：{{currentPV.air_date}}
23 |
2 |
14 |
27 |
--------------------------------------------------------------------------------
/src/app/home/rating/rating.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { Rating } from '../../entity/rating';
3 |
4 | export const RATING_TEXT = ['无评分', '不忍直视', '很差', '差', '较差', '不过不失', '还行', '推荐', '力荐', '神作', '超神作'];
5 | export const RATING_COLOR = [
6 | '#cccccc',
7 | '#a80407',
8 | '#ec4017',
9 | '#df641d',
10 | '#da9003',
11 | '#ffd400',
12 | '#c2e008',
13 | '#65e615',
14 | '#72e7a3',
15 | '#71dddf',
16 | '#04afff'
17 | ];
18 |
19 | @Component({
20 | selector: 'bangumi-rating',
21 | templateUrl: './rating.html',
22 | styleUrls: ['./rating.less']
23 | })
24 | export class RatingComponent {
25 | @Input()
26 | rating: Rating;
27 |
28 | get countDist(): {r: number, c: number}[] {
29 | if (this.rating) {
30 | return Object.keys(this.rating.count)
31 | .map(r => parseInt(r, 10))
32 | .sort((r1, r2) => r2 - r1)
33 | .map(r => {
34 | return {r: r, c: this.rating.count[r]};
35 | });
36 | } else {
37 | return [];
38 | }
39 | }
40 |
41 | get ratingScore(): string {
42 | if (!this.rating) {
43 | return '0.0';
44 | }
45 | if (Math.floor(this.rating.score) === this.rating.score) {
46 | return this.rating.score + '.0';
47 | }
48 | return this.rating.score + '';
49 | }
50 |
51 | get roundedScore(): number {
52 | if (!this.rating) {
53 | return 0;
54 | }
55 | return Math.round(this.rating.score);
56 | }
57 |
58 | get ratingText(): string {
59 | if (!this.rating) {
60 | return RATING_TEXT[0];
61 | }
62 | return RATING_TEXT[this.roundedScore];
63 | }
64 |
65 | get ratingColor(): string {
66 | if (!this.rating) {
67 | return RATING_COLOR[0];
68 | }
69 | return RATING_COLOR[this.roundedScore];
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/app/home/rating/rating.html:
--------------------------------------------------------------------------------
1 |
25 |
--------------------------------------------------------------------------------
/src/app/home/user-action/browser-extension-tip/browser-extension-tip.html:
--------------------------------------------------------------------------------
1 |
15 |
26 |
16 | {{comment}}
17 |
18 |
19 |
20 |
25 | 暂时还没有评论
21 |
24 |
2 |
13 |
--------------------------------------------------------------------------------
/src/app/home/user-action/browser-extension-tip/browser-extension-tip.less:
--------------------------------------------------------------------------------
1 | @arrowOffset: 0.30714286em;
2 |
3 | @arrowStroke: 1px;
4 | @arrowColor: #bababc;
5 |
6 | @arrowBoxShadow: @arrowStroke @arrowStroke 0px 0px @arrowColor;
7 | @leftArrowBoxShadow: @arrowStroke -@arrowStroke 0px 0px @arrowColor;
8 | @rightArrowBoxShadow: -@arrowStroke @arrowStroke 0px 0px @arrowColor;
9 | @bottomArrowBoxShadow: -@arrowStroke -@arrowStroke 0px 0px @arrowColor;
10 |
11 |
12 | :host {
13 | display: block;
14 | position: absolute;
15 | top: 0;
16 | left: 0;
17 | -webkit-box-sizing: border-box;
18 | -moz-box-sizing: border-box;
19 | box-sizing: border-box;
20 | z-index: 1900;
21 | }
22 |
23 | .ui-basic-popover {
24 | position: relative;
25 | border: 1px solid #d6d6d6;
26 | border-radius: 4px;
27 | background: #ffffff;
28 | margin: 0.5rem;
29 | -webkit-box-shadow: 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15);
30 | -moz-box-shadow: 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15);
31 | box-shadow: 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15);
32 | .popover-title {
33 | padding: 0.6rem 0.8rem 0.2rem 0.8rem;
34 | font-weight: bold;
35 | font-size: 1rem;
36 | }
37 | .popover-content {
38 | padding: 0.5rem 0.8rem 0.6rem 0.8rem;
39 | font-size: 1rem;
40 | }
41 |
42 | &:before {
43 | top: -@arrowOffset;
44 | right: 1em;
45 | bottom: auto;
46 | left: auto;
47 | margin-left: 0em;
48 | box-shadow: @bottomArrowBoxShadow;
49 | background-color: #ffffff;
50 | position: absolute;
51 | content: ' ';
52 | width: .71428571em;
53 | height: .71428571em;
54 | -webkit-transform: rotate(45deg);
55 | -moz-transform: rotate(45deg);
56 | -ms-transform: rotate(45deg);
57 | -o-transform: rotate(45deg);
58 | transform: rotate(45deg);
59 | z-index: 2;
60 | }
61 | .popover-footer {
62 | text-align: right;
63 | padding: 0 0.5rem 0.5rem 0;
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/app/home/user-action/user-action-panel/user-action-panel.component.ts:
--------------------------------------------------------------------------------
1 |
2 | import {fromEvent as observableFromEvent, Subscription , Observable } from 'rxjs';
3 |
4 | import {skip} from 'rxjs/operators';
5 | import { UIPopoverContent, UIPopoverRef } from 'deneb-ui';
6 | import { Component, Input, OnDestroy } from '@angular/core';
7 | import { User } from '../../../entity';
8 |
9 | @Component({
10 | selector: 'user-action-panel',
11 | templateUrl: './user-action-panel.html',
12 | styleUrls: ['./user-action-panel.less']
13 | })
14 | export class UserActionPanelComponent extends UIPopoverContent implements OnDestroy {
15 | private _subscription = new Subscription();
16 |
17 | @Input()
18 | user: User;
19 |
20 | @Input()
21 | isBangumiEnabled: boolean;
22 |
23 | @Input()
24 | bgmAccountInfo: {
25 | nickname: string,
26 | avatar: {large: string, medium: string, small: string},
27 | username: string,
28 | id: string,
29 | url: string
30 | };
31 |
32 | constructor(popoverRef: UIPopoverRefBangumi整合功能
3 |
4 | 现在你可以通过安装{{browserType}}扩展的方式绑定Bangumi帐号，
5 | 这项增强的功能提供了评分到评论的一系列基于Bangumi帐号的社交服务。
6 | 前往{{browserType}}商店 7 | 8 |
9 |
12 | 5 | 这项增强的功能提供了评分到评论的一系列基于Bangumi帐号的社交服务。
6 | 前往{{browserType}}商店 7 | 8 |
2 |
8 |
9 |
--------------------------------------------------------------------------------
/src/app/home/user-action/user-action.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | -webkit-box-sizing: border-box;
4 | -moz-box-sizing: border-box;
5 | box-sizing: border-box;
6 | }
7 |
8 | .user-action {
9 | margin-right: 2rem;
10 | @media (max-width: 639px) {
11 | margin-right: 1rem;
12 | }
13 | cursor: pointer;
14 | .text {
15 | font-weight: 700;
16 | display: inline-block;
17 | -webkit-transition: none;
18 | -moz-transition: none;
19 | -ms-transition: none;
20 | -o-transition: none;
21 | transition: none;
22 | > img {
23 | display: inline-block;
24 | vertical-align: top;
25 | width: 2em;
26 | height: 2em;
27 | margin: -.4em .78571429rem -.4em 0;
28 | float: none;
29 | max-height: 2em;
30 | border-radius: 4px;
31 | border: 1px solid #dfdfdf;
32 | }
33 | }
34 | .dropdown.icon {
35 | margin: 0 0.5em 0 0.21428571em;
36 | vertical-align: baseline;
37 | font-family: Dropdown;
38 | width: auto;
39 | height: 1em;
40 | line-height: 1;
41 | display: inline-block;
42 | font-weight: 400;
43 | font-style: normal;
44 | text-align: center;
45 | position: relative;
46 | font-size: 0.85714286em;
47 | opacity: 1;
48 | speak: none;
49 | }
50 | }
--------------------------------------------------------------------------------
/src/app/home/user-center/user-center.less:
--------------------------------------------------------------------------------
1 | :host {
2 | background-color: #f0f0f0;
3 | display: block;
4 | box-sizing: border-box;
5 | position: fixed;
6 | top: 3.5rem;
7 | left: 0;
8 | right: 0;
9 | bottom: 0;
10 | overflow-x: hidden;
11 | overflow-y: auto;
12 | }
13 | .user-center-container {
14 | width: 700px;
15 | padding-top: 2rem;
16 | padding-bottom: 3rem;
17 |
18 | @media (max-width: 479px) {
19 | width: 100%;
20 | }
21 | @media (min-width: 480px) and (max-width: 767px) {
22 | width: 480px;
23 | }
24 | @media (min-width: 768px) {
25 | width: 700px;
26 | }
27 |
28 | .ui.form {
29 | .inline.field {
30 | > label {
31 | width: 8em;
32 | text-align: right;
33 | }
34 | .warning.text {
35 | display: inline-block;
36 | margin-left: 1em;
37 | color: #573a08;
38 | }
39 | > .ui.button {
40 | margin-left: 1em;
41 | }
42 | }
43 | .ui.button {
44 | margin-left: 8em;
45 | }
46 | .inline.field + .ui.error.message {
47 | margin-left: 8.4em;
48 | }
49 | }
50 | }
51 |
52 |
53 | .web-hook-list {
54 | .name {
55 | font-size: 1.2rem;
56 | padding: 0.4rem 1rem 0.8rem 0;
57 | border-bottom: 1px solid #cccccc;
58 | margin-bottom: 0.6rem;
59 | }
60 | .desc {
61 | margin-top: 1rem;
62 | color: #4c4c4c;
63 | }
64 | .permission-tags {
65 | padding: 0.5rem 0;
66 | > .key {
67 | font-size: 0.9rem;
68 | padding-right: 1rem;
69 | }
70 | }
71 | }
72 |
73 | .action-row {
74 | margin-top: 2rem;
75 | }
--------------------------------------------------------------------------------
/src/app/home/web-hook/web-hook.html:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/src/app/home/web-hook/web-hook.less:
--------------------------------------------------------------------------------
1 | :host {
2 | background-color: #f0f0f0;
3 | display: block;
4 | box-sizing: border-box;
5 | position: fixed;
6 | top: 3.5rem;
7 | left: 0;
8 | right: 0;
9 | bottom: 0;
10 | overflow-x: hidden;
11 | overflow-y: auto;
12 | }
13 |
14 | .web-hook-list-container {
15 | width: 700px;
16 | padding-top: 2rem;
17 | padding-bottom: 3rem;
18 |
19 | @media (max-width: 479px) {
20 | width: 100%;
21 | }
22 | @media (min-width: 480px) and (max-width: 767px) {
23 | width: 480px;
24 | }
25 | @media (min-width: 768px) {
26 | width: 700px;
27 | }
28 |
29 | }
30 |
31 |
32 | .web-hook-list {
33 | .name {
34 | font-size: 1.2rem;
35 | padding: 0.4rem 1rem 0.8rem 0;
36 | border-bottom: 1px solid #cccccc;
37 | margin-bottom: 0.6rem;
38 | }
39 | .desc {
40 | margin-top: 1rem;
41 | color: #4c4c4c;
42 | }
43 | .permission-tags {
44 | padding: 0.5rem 0;
45 | > .key {
46 | font-size: 0.9rem;
47 | padding-right: 1rem;
48 | }
49 | }
50 | }
--------------------------------------------------------------------------------
/src/app/index.ts:
--------------------------------------------------------------------------------
1 | // APP
2 | export * from './app.module';
3 |
--------------------------------------------------------------------------------
/src/app/login/login.html:
--------------------------------------------------------------------------------
1 |
8 |
25 | 可用的Web Hook
9 | 13 |
14 |
24 |
15 |
23 | {{webHook.name}}
16 |
20 |
21 |
22 |
2 |
40 |
41 |
--------------------------------------------------------------------------------
/src/app/login/login.less:
--------------------------------------------------------------------------------
1 | @import '../_center-box.less';
2 |
3 | .forget-link {
4 | margin-top: 20px;
5 | margin-bottom: 15px;
6 | }
7 |
8 | .additional-info {
9 | text-align: center;
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/pipes/index.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {UserLevelNamePipe} from './user-level-name.pipe';
3 | import {WeekdayPipe} from './weekday.pipe';
4 |
5 | export const PIPES = [
6 | UserLevelNamePipe,
7 | WeekdayPipe
8 | ];
9 |
10 | @NgModule({
11 | declarations: PIPES,
12 | exports: PIPES
13 | })
14 | export class DenebCommonPipes {
15 |
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/pipes/user-level-name.pipe.ts:
--------------------------------------------------------------------------------
1 | import {Pipe, PipeTransform} from '@angular/core';
2 |
3 | export const LEVEL_NAMES = ['默认等级Level 0', '用户Level 1', '管理员Level 2', '超级管理员Level 3'];
4 |
5 | @Pipe({name: 'userLevelName'})
6 | export class UserLevelNamePipe implements PipeTransform {
7 |
8 | transform(level: number): any {
9 | return LEVEL_NAMES[level] || '未知';
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/pipes/weekday.pipe.ts:
--------------------------------------------------------------------------------
1 | import {PipeTransform, Pipe} from "@angular/core";
2 |
3 | @Pipe({name: 'weekday'})
4 | export class WeekdayPipe implements PipeTransform {
5 |
6 | weekday_cn = ['', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
7 |
8 | transform(value:any, ...args):any {
9 | if(Number.isInteger(value) && value < this.weekday_cn.length) {
10 | return this.weekday_cn[value];
11 | } else {
12 | return '';
13 | }
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/register/register.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/register/register.less:
--------------------------------------------------------------------------------
1 | @import '../_center-box.less';
2 |
3 | .login-link {
4 | margin-top: 30px;
5 | }
6 |
--------------------------------------------------------------------------------
/src/app/reset-pass/reset-pass.less:
--------------------------------------------------------------------------------
1 | .reset-pass {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | right: 0;
6 | bottom: 0;
7 |
8 | .reset-pass-wrapper {
9 | width: 30rem;
10 | height: 22rem;
11 | position: absolute;
12 | top: 0;
13 | left: 0;
14 | right: 0;
15 | bottom: 0;
16 | margin: auto;
17 | padding: 0.8rem;
18 | .reset-header {
19 | text-align: center;
20 | }
21 | .ui.form {
22 | margin: 1rem 0 2rem 0;
23 | }
24 | }
25 | }
--------------------------------------------------------------------------------
/src/app/reset-pass/reset-pass.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { ResetPass } from './reset-pass.component';
3 | import { ReactiveFormsModule } from '@angular/forms';
4 | import { CommonModule } from '@angular/common';
5 |
6 | @NgModule({
7 | declarations: [ResetPass],
8 | imports: [ReactiveFormsModule, CommonModule]
9 | })
10 | export class ResetPassModule {
11 |
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/responsive-image/responsive-image.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { ResponsiveImage } from './responsive-image.directive';
3 | import { ResponsiveService } from './responsive.service';
4 | import { ResponsiveImageWrapper } from './responsive-image-wrapper';
5 |
6 | @NgModule({
7 | declarations: [ResponsiveImage, ResponsiveImageWrapper],
8 | providers: [ResponsiveService],
9 | exports: [ResponsiveImage, ResponsiveImageWrapper]
10 | })
11 | export class ResponsiveImageModule {
12 |
13 | }
14 |
--------------------------------------------------------------------------------
/src/app/responsive-image/responsive.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 |
3 | export interface ObservableStub {
4 | target: Element;
5 | callback(rect: ClientRect): void;
6 | unobserveOnVisible: boolean;
7 | }
8 |
9 | @Injectable()
10 | export class ResponsiveService {
11 | private _observer: IntersectionObserver;
12 |
13 | private _observableStubList: ObservableStub[] = [];
14 |
15 | constructor() {
16 | this._observer = new IntersectionObserver(this.intersectionCallback.bind(this));
17 | }
18 |
19 | intersectionCallback(entries: IntersectionObserverEntry[]) {
20 | entries.filter(entry => {
21 | return entry['isIntersecting']; // current lib.es6.d.ts not updated.
22 | }).forEach((entry: IntersectionObserverEntry) => {
23 | let stub = this.getStub(entry.target);
24 | if (stub) {
25 | stub.callback(entry.boundingClientRect);
26 | if (stub.unobserveOnVisible) {
27 | this.unobserve(stub);
28 | }
29 | }
30 | });
31 | }
32 |
33 | observe(stub: ObservableStub) {
34 | if (this.getStub(stub.target)) {
35 | throw new Error('Duplicate ObservableStub on target');
36 | }
37 | this._observableStubList.push(stub);
38 | this._observer.observe(stub.target);
39 | }
40 |
41 | unobserve(stub: ObservableStub) {
42 | let index = this._observableStubList.findIndex(obStub => obStub == stub);
43 | if (index !== -1) {
44 | this._observableStubList.splice(index, 1);
45 | this._observer.unobserve(stub.target);
46 | }
47 | }
48 |
49 | private getStub(target: Element) {
50 | if (!this._observableStubList) {
51 | return null;
52 | }
53 | return this._observableStubList.find(stub => stub.target === target);
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/app/static-content/apps/apps.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy, OnInit } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 | import { Subscription } from 'rxjs';
4 | import { Title } from '@angular/platform-browser';
5 |
6 | @Component({
7 | selector: 'apps-guide',
8 | templateUrl: './apps.html',
9 | styleUrls: ['./apps.less']
10 | })
11 | export class AppsComponent implements OnInit, OnDestroy {
12 | private _subscription = new Subscription();
13 |
14 | siteTitle = SITE_TITLE;
15 | chromeExtensionId = CHROME_EXTENSION_ID;
16 |
17 | showAndroid: boolean;
18 |
19 | expanded1 = false;
20 |
21 | expanded2 = false;
22 |
23 | constructor(private _route: ActivatedRoute,
24 | titleService: Title) {
25 | titleService.setTitle(`Apps - ${SITE_TITLE}`);
26 | }
27 |
28 | ngOnInit(): void {
29 | this._subscription.add(
30 | this._route.params
31 | .subscribe(params => {
32 | console.log(params);
33 | this.showAndroid = !!params['android'];
34 | })
35 | );
36 | }
37 |
38 | ngOnDestroy(): void {
39 | this._subscription.unsubscribe();
40 | }
41 |
42 | expand1(): void {
43 | this.expanded1 = true;
44 | }
45 |
46 | expand2(): void {
47 | this.expanded2 = true;
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/app/static-content/developers/developers.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'developers',
5 | templateUrl: './developers.html'
6 | })
7 | export class DevelopersComponent {
8 |
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/static-content/developers/developers.html:
--------------------------------------------------------------------------------
1 |
3 |
39 |
4 |
5 |
9 |
38 | 6 | 注册 7 |
8 |
10 |
30 |
37 |
31 | 已有帐号?登录
32 |
33 |
36 |
2 |
--------------------------------------------------------------------------------
/src/app/static-content/privacy/privacy.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'privacy',
5 | templateUrl: './privacy.html'
6 | })
7 | export class PrivacyComponent {
8 |
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/static-content/privacy/privacy.html:
--------------------------------------------------------------------------------
1 | 开放API
3 |本站允许开发者根据需要来使用API访问网站内容，请开发者自行阅读API文档，注意除了登陆和注册相关API，其他API均需要登录访问。
4 | 5 |源代码
6 |我们坚持开放源代码与社区共同维护我们的服务。您可以访问到服务端和客户端的源代码
7 |-
8 |
- 服务端源代码：https://github.com/lordfriend/Albireo 9 |
- Web客户端源代码：https://github.com/lordfriend/Deneb 10 |
2 |
--------------------------------------------------------------------------------
/src/app/static-content/static-content.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'static-content',
5 | templateUrl: './static-content.html',
6 | styleUrls: ['./static-content.less']
7 | })
8 | export class StaticContentComponent {
9 | siteTitle: string = SITE_TITLE;
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/static-content/static-content.html:
--------------------------------------------------------------------------------
1 |
6 | 我们收集与存储的信息
3 |-
4 |
- 5 | 当你访问Web版客户端时，我们使用Google Analytics收集必要的信息用于统计用户使用状况，这些信息由Google收集与储存，本站并不直接存储这些信息。 6 | 所有的这些信息都是匿名的，我们不会将帐号信息提供给Google。 7 | 8 |
- 9 | 为了更好的提供服务，本站保存了您的用户名，密码，邮箱地址。其中密码经过加盐hash加密存储的，确保任何人（包括我们）不会知道泄露您的原始密码。 10 | 此外本站还会自动保存您的观看记录和进度。 11 | 12 |
- 13 | 所有这些信息收集政策都仅限Web客户端，如果您使用的是第三方客户端，您需要检查第三方客户端的信息收集政策。 14 | 15 |
我们分享的信息
17 |-
18 |
- 19 | 我们仅使用Google Analytics收集匿名信息，但我们并不会与Google分享任何您的帐号相关信息。 20 | 21 |
- 22 | 当您使用第三方客户端时，请检查第三方客户端的隐私政策来了解第三方客户端是否会与其他机构或个人分享信息。 23 | 24 |
政策的变化
26 |-
27 |
- 28 | 我们的隐私政策可能会随时变化，当隐私政策发生变化时，我们会尽可能通知您，但您依然有义务随时检查隐私政策。只要您继续使用我们的服务即意味着您接受我们的隐私政策。 29 | 30 |
7 |
--------------------------------------------------------------------------------
/src/app/static-content/static-content.less:
--------------------------------------------------------------------------------
1 | @navbarHeight: 3.5rem;
2 | @footerHeight: 8em;
3 |
4 | :host {
5 | display: block;
6 | height: 100%;
7 | padding-top: @navbarHeight + 1.5rem;
8 | }
9 |
10 | .navbar {
11 | width: 100%;
12 | height: @navbarHeight;
13 | background-color: #fff;
14 | display: flex;
15 | flex-direction: row;
16 | justify-content: flex-start;
17 | border-bottom: 1px solid #ccc;
18 | align-items: center;
19 | position: fixed;
20 | top: 0;
21 | left: 0;
22 | z-index: 200;
23 |
24 | .brand {
25 | display: block;
26 | padding: 0 1rem 0 2.5rem;
27 | color: #101010;
28 | }
29 | }
--------------------------------------------------------------------------------
/src/app/static-content/static-content.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { PrivacyComponent } from './privacy/privacy.component';
3 | import { TosComponent } from './tos/tos.component';
4 | import { StaticContentComponent } from './static-content.component';
5 | import { RouterModule } from '@angular/router';
6 | import { staticContentRoutes } from './static-content.routes';
7 | import { DevelopersComponent } from './developers/developers.component';
8 | import { AppsComponent } from './apps/apps.component';
9 | import { CommonModule } from '@angular/common';
10 |
11 | @NgModule({
12 | declarations: [
13 | PrivacyComponent,
14 | TosComponent,
15 | StaticContentComponent,
16 | DevelopersComponent,
17 | AppsComponent
18 | ],
19 | imports: [
20 | RouterModule.forChild(staticContentRoutes),
21 | CommonModule
22 | ]
23 | })
24 | export class StaticContentModule {
25 |
26 | }
27 |
--------------------------------------------------------------------------------
/src/app/static-content/static-content.routes.ts:
--------------------------------------------------------------------------------
1 | import { Routes } from '@angular/router';
2 | import { TosComponent } from './tos/tos.component';
3 | import { StaticContentComponent } from './static-content.component';
4 | import { PrivacyComponent } from './privacy/privacy.component';
5 | import { DevelopersComponent } from './developers/developers.component';
6 | import { AppsComponent } from './apps/apps.component';
7 |
8 | export const staticContentRoutes: Routes = [
9 | {
10 | path: 'about',
11 | component: StaticContentComponent,
12 | children: [
13 | {
14 | path: 'tos',
15 | component: TosComponent
16 | },
17 | {
18 | path: 'privacy',
19 | component: PrivacyComponent
20 | },
21 | {
22 | path: 'developers',
23 | component: DevelopersComponent
24 | },
25 | {
26 | path: 'apps',
27 | component: AppsComponent
28 | }
29 | ]
30 | }
31 | ];
32 |
--------------------------------------------------------------------------------
/src/app/static-content/tos/tos.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'tos',
5 | templateUrl: './tos.html'
6 | })
7 | export class TosComponent {
8 | siteName = SITE_TITLE;
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/user-service/index.ts:
--------------------------------------------------------------------------------
1 | import { HttpClientModule } from '@angular/common/http';
2 | import { NgModule } from '@angular/core';
3 | import { UserService } from './user.service';
4 | import { RouterModule } from '@angular/router';
5 | import { Authentication } from './authentication.service';
6 | import { PersistStorage } from './persist-storage';
7 |
8 | @NgModule({
9 | providers: [
10 | UserService,
11 | Authentication,
12 | PersistStorage
13 | ],
14 | imports: [
15 | HttpClientModule,
16 | RouterModule
17 | ]
18 | })
19 | export class UserServiceModule {
20 |
21 | }
22 |
23 | export * from './user.service';
24 | export * from './authentication.service';
25 | export * from './persist-storage';
26 |
--------------------------------------------------------------------------------
/src/app/video-player/controls/capture-button/capture-button.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
2 | import { VideoCapture } from '../../core/video-capture.service';
3 | import { VideoPlayer } from '../../video-player.component';
4 | import { Subscription } from 'rxjs';
5 | import { PersistStorage } from '../../../user-service/persist-storage';
6 | import { Capture } from '../../core/settings';
7 |
8 | @Component({
9 | selector: 'video-capture-button',
10 | template: '',
11 | styles: [`
12 | :host {
13 | display: inline-block;
14 | box-sizing: border-box;
15 | flex: 0 0 auto;
16 | margin-left: 0.5rem;
17 | margin-right: 0.5rem;
18 | padding: 0.4rem;
19 | cursor: pointer;
20 | line-height: 1;
21 | }
22 | `]
23 | })
24 | export class VideoCaptureButton implements OnInit, OnDestroy{
25 | private _subscription = new Subscription();
26 |
27 | private _currentTime: number = 0;
28 |
29 | constructor(private _videoCapture: VideoCapture,
30 | private _videoPlayer: VideoPlayer) {
31 | }
32 |
33 | @HostListener('click', ['$event'])
34 | onClick(event: Event) {
35 | event.preventDefault();
36 | event.stopPropagation();
37 | let bangumi_name = this._videoPlayer.bangumiName;
38 | let episode_no = this._videoPlayer.episodeNo;
39 | this._videoCapture.capture(bangumi_name, episode_no, this._currentTime);
40 | }
41 |
42 | ngOnInit(): void {
43 | this._subscription.add(
44 | this._videoPlayer.currentTime
45 | .subscribe(time => this._currentTime = time)
46 | );
47 | }
48 |
49 | ngOnDestroy(): void {
50 | this._subscription.unsubscribe();
51 | }
52 |
53 | }
54 |
--------------------------------------------------------------------------------
/src/app/video-player/controls/captured-frame-list/captured-frame-list.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/app/video-player/controls/captured-frame-list/captured-frame-list.less:
--------------------------------------------------------------------------------
1 | :host {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | height: 10rem;
6 | width: 100%;
7 | background-color: rgba(0, 0, 0, 0.4);
8 | }
9 |
10 | .captured-frame-list-wrapper {
11 | width: 100%;
12 | height: 100%;
13 | padding: 0.6rem 0.3rem;
14 | overflow-y: hidden;
15 | overflow-x: auto;
16 | white-space: nowrap;
17 | user-select: none;
18 | cursor: default;
19 | }
--------------------------------------------------------------------------------
/src/app/video-player/controls/captured-frame-list/operation-dialog/operation-dialog.html:
--------------------------------------------------------------------------------
1 |
2 |
6 |
3 |
4 |
5 |
7 |
16 |
17 |
--------------------------------------------------------------------------------
/src/app/video-player/controls/captured-frame-list/operation-dialog/operation-dialog.less:
--------------------------------------------------------------------------------
1 | :host {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | right: 0;
6 | bottom: 0;
7 | margin: auto;
8 | display: block;
9 | box-sizing: border-box;
10 | text-align: left;
11 | background-color: #000;
12 | overflow: hidden;
13 | padding-bottom: 5rem;
14 |
15 | width: 400px;
16 | height: 320px;
17 |
18 |
19 | @media screen and (max-width: 656px) {
20 | width: 90%;
21 | height: 200px;
22 | }
23 |
24 | @media screen and (min-width: 1320px) and (min-height:870px) {
25 | width: 640px;
26 | height: 460px;
27 | }
28 | }
29 | .image-container {
30 | width: 100%;
31 | height: 0;
32 | padding-bottom: 56.25%;
33 | position: relative;
34 | > .image-wrapper {
35 | position: absolute;
36 | width: 100%;
37 | height: 100%;
38 | margin: 0 -0.3rem;
39 | }
40 | }
41 |
42 | .operation-wrapper {
43 | margin: 0.5rem;
44 | .operation-buttons {
45 | margin: 0;
46 | padding: 0;
47 | &:before,
48 | &:after {
49 | display: table;
50 | content: ' ';
51 | }
52 | > .operation-button {
53 | padding: 0.4rem;
54 | margin: 0.5rem;
55 | display: inline-block;
56 | font-size: 1.2rem;
57 | color: #fff;
58 | cursor: pointer;
59 | &.right {
60 | float: right;
61 | }
62 | }
63 | }
64 | }
65 |
66 | .default-operation {
67 | margin: 0 1.5rem 0.5rem 1.5rem;
68 | color: #fff;
69 | }
--------------------------------------------------------------------------------
/src/app/video-player/controls/config-button/config-panel/config-panel.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/video-player/controls/config-button/config-panel/config-panel.less:
--------------------------------------------------------------------------------
1 | @arrowOffset: 0.30714286em;
2 |
3 | @arrowStroke: 1px;
4 | @arrowColor: #000;
5 |
6 | @arrowBoxShadow: @arrowStroke @arrowStroke 0px 0px @arrowColor;
7 | @leftArrowBoxShadow: @arrowStroke -@arrowStroke 0px 0px @arrowColor;
8 | @rightArrowBoxShadow: -@arrowStroke @arrowStroke 0px 0px @arrowColor;
9 | @bottomArrowBoxShadow: -@arrowStroke -@arrowStroke 0px 0px @arrowColor;
10 |
11 |
12 | :host {
13 | display: block;
14 | -webkit-box-sizing: border-box;
15 | -moz-box-sizing: border-box;
16 | box-sizing: border-box;
17 | z-index: 300;
18 | padding: 1rem;
19 | }
20 |
21 | .config-panel-container {
22 | position: relative;
23 | border: 1px solid #000;
24 | border-radius: 4px;
25 | background-color: #000;
26 | color: #fff;
27 | margin: 0.5rem;
28 | -webkit-box-shadow: 0 2px 4px 0 rgba(15,15,15,.12), 0 2px 10px 0 rgba(15, 15, 15, 0.15);
29 | -moz-box-shadow: 0 2px 4px 0 rgba(15,15,15,.12), 0 2px 10px 0 rgba(15,15,15,.15);
30 | box-shadow: 0 2px 4px 0 rgba(15,15,15,.12), 0 2px 10px 0 rgba(15,15,15,.15);
31 | &.ui.form {
32 | padding: 1rem;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/app/video-player/controls/controls.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/app/video-player/controls/controls.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | position: absolute;
4 | top: 0;
5 | left: 0;
6 | right: 0;
7 | bottom: 0;
8 |
9 | &.hide-cursor {
10 | cursor: none;
11 | }
12 | }
13 |
14 | .reflect-state-indicator {
15 | position: absolute;
16 | top: 0;
17 | left: 0;
18 | right: 0;
19 | bottom: 0;
20 | margin: auto;
21 | width: 2rem;
22 | height: 2rem;
23 | font-size: 2rem;
24 | color: #fff;
25 | line-height: 1;
26 | z-index: 10;
27 | }
28 |
29 | .control-wrapper {
30 | width: 100%;
31 | height: 100%;
32 | display: flex;
33 | flex-direction: column;
34 | justify-content: flex-end;
35 | -webkit-user-select: none;
36 | -moz-user-select: none;
37 | -ms-user-select: none;
38 | user-select: none;
39 | overflow: hidden;
40 | position: relative;
41 | z-index: 100;
42 |
43 | > .control-bar {
44 | display: flex;
45 | flex: 0 0 auto;
46 | width: 100%;
47 | height: 3rem;
48 | flex-direction: column;
49 | justify-content: flex-start;
50 | background-color: rgba(0, 0, 0, 0.4);
51 | > .control-buttons {
52 | width: 100%;
53 | flex: 1 1 auto;
54 | display: flex;
55 | flex-direction: row;
56 | justify-content: flex-start;
57 | align-items: center;
58 | color: #f8f8f8;
59 | .right-aligned-controls {
60 | flex: 1 1 auto;
61 | display: flex;
62 | flex-direction: row;
63 | justify-content: flex-end;
64 | align-items: center;
65 | }
66 | }
67 | }
68 | }
--------------------------------------------------------------------------------
/src/app/video-player/controls/fullscreen-button/fullscreen-button.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, HostListener, Input} from '@angular/core';
2 | import {VideoPlayer} from '../../video-player.component';
3 | @Component({
4 | selector: 'video-fullscreen-button',
5 | template: ``,
6 | styles: [`
7 | :host {
8 | display: inline-block;
9 | box-sizing: border-box;
10 | flex: 0 0 auto;
11 | margin-left: 0.5rem;
12 | margin-right: 0.5rem;
13 | padding: 0.4rem;
14 | cursor: pointer;
15 | line-height: 1;
16 | }
17 | `]
18 | })
19 | export class VideoFullscreenButton {
20 |
21 | @Input()
22 | controlVisibleState: boolean;
23 |
24 | get isFullscreen() {
25 | if (this._videoPlayer) {
26 | return this._videoPlayer.isFullscreen;
27 | }
28 | return false;
29 | }
30 |
31 | constructor(private _videoPlayer: VideoPlayer) {
32 | }
33 |
34 | @HostListener('click', ['$event'])
35 | onClick(event: Event) {
36 | event.preventDefault();
37 | event.stopPropagation();
38 | if (!this.controlVisibleState) {
39 | return;
40 | }
41 | this._videoPlayer.toggleFullscreen();
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/app/video-player/controls/help-button/help-button.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, HostListener } from '@angular/core';
2 | import { VideoPlayer } from '../../video-player.component';
3 |
4 | @Component({
5 | selector: 'video-player-help-button',
6 | template: '',
7 | styles: [`
8 | :host {
9 | display: inline-block;
10 | box-sizing: border-box;
11 | flex: 0 0 auto;
12 | margin-left: 0.5rem;
13 | margin-right: 0.5rem;
14 | padding: 0.4rem;
15 | cursor: pointer;
16 | line-height: 1;
17 | }
18 | `]
19 | })
20 | export class VideoPlayerHelpButton {
21 | constructor(private _videoPlayer: VideoPlayer) {
22 | }
23 |
24 | @HostListener('click', ['$event'])
25 | onClick(event: Event) {
26 | event.preventDefault();
27 | event.stopPropagation();
28 | this._videoPlayer.openHelpDialog();
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/video-player/controls/scrub-bar/scrub-bar.html:
--------------------------------------------------------------------------------
1 |
5 |
6 | {{pointPosition}}
7 |
--------------------------------------------------------------------------------
/src/app/video-player/controls/time-indicator/time-indicator.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy, OnInit } from '@angular/core';
2 | import { VideoPlayer } from '../../video-player.component';
3 | import { Subscription } from 'rxjs';
4 | import { VideoPlayerHelpers } from '../../core/helpers';
5 |
6 | @Component({
7 | selector: 'video-time-indicator',
8 | template: `
9 | {{currentTimeClock}}
10 | /
11 | {{durationClock}}
12 | `,
13 | styles: [`
14 | :host {
15 | display: inline-block;
16 | box-sizing: border-box;
17 | flex: 0 0 auto;
18 | margin-left: 0.5rem;
19 | margin-right: 0.5rem;
20 | padding: 0.4rem;
21 | line-height: 1;
22 | cursor: default;
23 | font-family: "Segoe UI", sans-serif;
24 | }
25 | `]
26 | })
27 | export class VideoTimeIndicator implements OnInit, OnDestroy {
28 | private _subscription = new Subscription();
29 |
30 | currentTime = Number.NaN;
31 | duration = Number.NaN;
32 |
33 | get durationClock(): string {
34 | if (Number.isNaN(this.duration)) {
35 | return '-';
36 | }
37 | return VideoPlayerHelpers.convertTime(this.duration);
38 | }
39 |
40 | get currentTimeClock() : string {
41 | if (Number.isNaN(this.duration)) {
42 | return '-';
43 | }
44 | return VideoPlayerHelpers.convertTime(this.currentTime);
45 | }
46 |
47 | constructor(private _videoPlayer: VideoPlayer) {
48 | }
49 |
50 | ngOnInit(): void {
51 | this._subscription.add(
52 | this._videoPlayer.currentTime.subscribe(time => this.currentTime = time)
53 | );
54 | this._subscription.add(
55 | this._videoPlayer.duration.subscribe(duration => this.duration = duration)
56 | )
57 | }
58 |
59 | ngOnDestroy(): void {
60 | this._subscription.unsubscribe();
61 | }
62 |
63 | }
64 |
--------------------------------------------------------------------------------
/src/app/video-player/controls/volume-control/volume-control.html:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/app/video-player/controls/volume-control/volume-control.less:
--------------------------------------------------------------------------------
1 | @sliderHandlerRadius: 5px;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: row;
6 | justify-content: space-between;
7 | align-items: center;
8 | box-sizing: border-box;
9 | flex: 0 0 auto;
10 | margin-left: 0.5rem;
11 | margin-right: 0.5rem;
12 | }
13 |
14 | .mute-button {
15 | display: inline-block;
16 | flex: 0 0 auto;
17 | padding: 0.4rem;
18 | cursor: pointer;
19 | line-height: 1;
20 | > .icon.volume {
21 | position: relative;
22 | }
23 | > .icon.volume.down {
24 | left: -2px;
25 | }
26 | > .icon.volume.off {
27 | left: -3px;
28 | }
29 | }
30 |
31 | .volume-slider-wrapper {
32 | display: inline-block;
33 | flex: 0 0 auto;
34 | position: relative;
35 | width: 4rem;
36 | height: 1rem;
37 | cursor: pointer;
38 | .volume-slider-bg {
39 | width: 100%;
40 | height: 0.3rem;
41 | position: relative;
42 | top: 0.35rem;
43 | background-color: rgba(255, 255, 255, 0.2);
44 | }
45 | .volume-slider-current {
46 | position: absolute;
47 | height: 0.3rem;
48 | top: 0.35rem;
49 | background-color: #f8f8f8;
50 | }
51 | .slider-handler-slot {
52 | display: block;
53 | position: absolute;
54 | top: 0;
55 | left: @sliderHandlerRadius;
56 | bottom: 0;
57 | right: @sliderHandlerRadius;
58 | > .slider-handler {
59 | position: relative;
60 | margin-left: -@sliderHandlerRadius;
61 | margin-top: 0.15rem;
62 | border-radius: @sliderHandlerRadius;
63 | width: 2 * @sliderHandlerRadius;
64 | height: 2 * @sliderHandlerRadius;
65 | background-color: #f8f8f8;
66 | }
67 | }
68 |
69 | }
70 |
--------------------------------------------------------------------------------
/src/app/video-player/core/settings.ts:
--------------------------------------------------------------------------------
1 | export const PREFIX = 'VideoPlayer';
2 |
3 | export class Capture {
4 | static className = 'Capture';
5 | static prefix = `${PREFIX}:${Capture.className}`;
6 | static AUTO_REMOVE = `${Capture.prefix}:AutoRemove`;
7 | static DIRECT_DOWNLOAD = `${Capture.prefix}:DirectDownload`;
8 | }
9 |
10 | export class PlayList {
11 | static className = 'PlayList';
12 | static prefix = `${PREFIX}:${PlayList.className}`;
13 | static AUTO_PLAY_NEXT = `${PlayList.prefix}:AutoPlayNext`;
14 | }
15 |
16 | export class FloatPlayer {
17 | static className = 'FloatPlayer';
18 | static prefix = `${PREFIX}:${FloatPlayer.className}`;
19 | static AUTO_FLOAT_WHEN_SCROLL = `${FloatPlayer.prefix}:AutoFloatWhenScroll`;
20 | static AUTO_FLOAT_WHEN_LEAVE = `${FloatPlayer.prefix}:AutoFloatWhenLeave`;
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/video-player/core/state.ts:
--------------------------------------------------------------------------------
1 | export class PlayState {
2 | static INITIAL = -1;
3 | static INVALID = 0;
4 | static PLAYING = 1;
5 | static PLAY_END = 2;
6 | static PAUSED = 3;
7 | }
8 |
9 | export class ReadyState {
10 | static HAVE_NOTHING = 0;
11 | static HAVE_METADATA = 1;
12 | static HAVE_CURRENT_DATA = 2;
13 | static HAVE_FUTURE_DATA = 3;
14 | static HAVE_ENOUGH_DATA = 4;
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/video-player/float-controls/float-controls.html:
--------------------------------------------------------------------------------
1 |
2 |
10 |
17 |
--------------------------------------------------------------------------------
/src/app/video-player/float-controls/non-interactive-progress-bar/non-interactive-progress-bar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, OnDestroy, OnInit, Self } from '@angular/core';
2 | import { Subscription } from 'rxjs/index';
3 | import { VideoPlayer } from '../../video-player.component';
4 |
5 | @Component({
6 | selector: 'non-interactive-progress-bar',
7 | templateUrl: 'non-interactive-progress-bar.html',
8 | styleUrls: ['./non-interactive-progress-bar.less']
9 | })
10 | export class NonInteractiveProgressBarComponent implements OnInit, OnDestroy {
11 | private _subscription = new Subscription();
12 |
13 | duration = Number.NaN;
14 | currentTime = 0;
15 | buffered = 0;
16 |
17 | get playProgressPercentage(): number {
18 | if (Number.isNaN(this.duration)) {
19 | return 0;
20 | }
21 | return Math.round(this.currentTime / this.duration * 1000) / 10;
22 | }
23 |
24 | get bufferedPercentage(): number {
25 | if (Number.isNaN(this.duration)) {
26 | return 0;
27 | }
28 | return Math.round(this.buffered / this.duration * 1000) / 10;
29 | }
30 |
31 | constructor(@Self() private _hostRef: ElementRef, private _videoPlayer: VideoPlayer) {
32 | }
33 |
34 | ngOnInit(): void {
35 | this._subscription.add(
36 | this._videoPlayer.currentTime.subscribe(time => this.currentTime = time)
37 | );
38 | this._subscription.add(
39 | this._videoPlayer.duration.subscribe(duration => {
40 | this.duration = duration;
41 | })
42 | );
43 | this._subscription.add(
44 | this._videoPlayer.buffered.subscribe(buffered => this.buffered = buffered)
45 | );
46 | }
47 |
48 | ngOnDestroy(): void {
49 | this._subscription.unsubscribe();
50 | }
51 |
52 | }
53 |
--------------------------------------------------------------------------------
/src/app/video-player/float-controls/non-interactive-progress-bar/non-interactive-progress-bar.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/video-player/float-controls/non-interactive-progress-bar/non-interactive-progress-bar.less:
--------------------------------------------------------------------------------
1 | @import '../../controls/scrub-bar/scrub-bar.less';
2 |
3 | :host {
4 | height: 0.36rem;
5 | .progress-bar-wrapper {
6 | height: 0.36rem;
7 | .scrub-bar-wrapper();
8 | }
9 | }
--------------------------------------------------------------------------------
/src/app/video-player/help-dialog/help-dialog.component.ts:
--------------------------------------------------------------------------------
1 |
2 | import {fromEvent as observableFromEvent, Subscription , Observable } from 'rxjs';
3 |
4 | import {filter} from 'rxjs/operators';
5 | import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, Self, ViewChild } from '@angular/core';
6 | import { UIDialogRef } from 'deneb-ui';
7 |
8 | export const KEY_ESC = 27;
9 |
10 | @Component({
11 | selector: 'video-player-help-dialog',
12 | templateUrl: './help-dialog.html',
13 | styleUrls: ['./help-dialog.less'],
14 | host: {
15 | 'tabIndex': '-1'
16 | }
17 | })
18 | export class VideoPlayerHelpDialog implements OnInit, AfterViewInit, OnDestroy {
19 | private _subscription = new Subscription();
20 |
21 | @ViewChild('closeButton', {static: false}) closeButton: ElementRef;
22 |
23 | constructor(private _dialogRef: UIDialogRef
11 |
13 |
14 |
16 | {{currentTimeClock}} / {{durationClock}}
15 |
2 |
6 |
--------------------------------------------------------------------------------
/src/app/video-player/help-dialog/help-dialog.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | box-sizing: border-box;
4 | text-align: left;
5 | @media(max-width: 375px) {
6 | width: 90%;
7 | }
8 | width: 300px;
9 | height: 410px;
10 | margin: auto;
11 | top: 0;
12 | left: 0;
13 | right: 0;
14 | bottom: 0;
15 | position: absolute;
16 | border-radius: 4px;
17 | background-color: #fff;
18 | overflow: hidden;
19 | }
20 |
21 | .dialog-title {
22 | padding: 0.5rem;
23 | position: relative;
24 | border-bottom: 1px solid #ccc;
25 | > h3 {
26 | margin: 0;
27 | text-align: center;
28 | font-weight: 600;
29 | color: #414141;
30 | }
31 | > .close-button {
32 | position: absolute;
33 | top: 0.5rem;
34 | right: 0.5rem;
35 | color: #636363;
36 | font-size: 1.5rem;
37 | cursor: pointer;
38 | outline: none;
39 | }
40 | }
41 | .dialog-content {
42 | padding: 1rem;
43 | > table.no-border {
44 | border: none;
45 | td {
46 | padding: 0.4rem 0.6rem;
47 | }
48 | }
49 | }
--------------------------------------------------------------------------------
/src/app/video-player/next-episode-overlay/next-episode-overlay.html:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
45 |
46 | | space | 11 |播放/暂停 | 12 |
| ←<, | 15 |快退 | 16 |
| →>. | 19 |快进 | 20 |
| ↵ | 23 |全屏/退出全屏 |
| -_ | 26 |音量减小10% |
| =+ | 29 |音量增加10% | 30 |
| m | 33 |静音/取消静音 | 34 |
| c | 37 |截图 | 38 |
| /? | 41 |帮助 | 42 |
2 | ![]()
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/app/video-player/touch-controls/touch-controls.html:
--------------------------------------------------------------------------------
1 |
6 |
10 |
18 |
19 | 取消
20 |
21 | 下一话
7 |
8 |
9 |
2 |
--------------------------------------------------------------------------------
/src/app/video-player/touch-controls/touch-controls.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | position: absolute;
4 | top: 0;
5 | left: 0;
6 | right: 0;
7 | bottom: 0;
8 | }
9 |
10 | .touch-control-wrapper {
11 | width: 100%;
12 | height: 100%;
13 | display: flex;
14 | flex-direction: column;
15 | justify-content: center;
16 | -webkit-user-select: none;
17 | -moz-user-select: none;
18 | -ms-user-select: none;
19 | user-select: none;
20 | overflow: hidden;
21 | position: relative;
22 | z-index: 100;
23 | .top-section {
24 | position: absolute;
25 | left: 0;
26 | top: 0;
27 | width: 100%;
28 | display: flex;
29 | flex-direction: row;
30 | justify-content: flex-end;
31 | align-items: flex-start;
32 | padding: 0.5rem 0 1.5rem 0;
33 | color: #fff;
34 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
35 | }
36 | .center-section {
37 | position: relative;
38 | display: flex;
39 | flex-direction: row;
40 | justify-content: center;
41 | font-size: 2.5rem;
42 | color: #fff;
43 | }
44 | .bottom-section {
45 | position: absolute;
46 | left: 0;
47 | bottom: -0.5rem;
48 | width: 100%;
49 | display: flex;
50 | flex-direction: row;
51 | justify-content: space-between;
52 | align-items: flex-end;
53 | padding: 0 0.5rem;
54 | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
55 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
56 | .time-indicator {
57 | flex: 0 1 auto;
58 | font-family: "Segoe UI", sans-serif;
59 | font-size: 1rem;
60 | color: #fff;
61 | line-height: 1;
62 | margin-bottom: 1rem;
63 | }
64 | .scrub-wrapper {
65 | flex: 1 1 auto;
66 | margin-left: 1rem;
67 | margin-right: 1rem;
68 | }
69 | }
70 | }
--------------------------------------------------------------------------------
/src/app/video-player/video-player.html:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/app/video-player/video-player.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | box-sizing: border-box;
4 | flex: 0 1 auto;
5 | position: relative;
6 | background-color: #000;
7 | outline: none;
8 | width: 854px;
9 | height: 480px;
10 |
11 | @media screen and (max-width: 656px) {
12 | width: 426px;
13 | height: 240px;
14 | }
15 |
16 | @media screen and (min-width: 1320px) and (min-height: 870px) {
17 | width: 1280px;
18 | height: 720px;
19 | }
20 |
21 | &.is-portrait:not(.fullscreen):not(.float-play) {
22 | position: fixed;
23 | top: 50px; // navbar height
24 | left: 0;
25 | z-index: 204;
26 | }
27 |
28 | &.fullscreen {
29 | position: fixed;
30 | top: 0;
31 | left: 0;
32 | right: 0;
33 | bottom: 0;
34 | width: 100%;
35 | height: 100%;
36 | }
37 |
38 | &.float-play {
39 | position: fixed;
40 | right: 1rem;
41 | bottom: 1rem;
42 | z-index: 204;
43 | //&.is-portrait {
44 | // bottom: inherit;
45 | // top: 3.5rem;
46 | //}
47 | }
48 | }
49 |
50 | video {
51 | display: block;
52 | width: 100%;
53 | height: 100%;
54 | }
55 |
56 | .overlay {
57 | display: none;
58 | position: absolute;
59 | top: 0;
60 | left: 0;
61 | width: 100%;
62 | height: 100%;
63 | &.show {
64 | display: block;
65 | }
66 | }
--------------------------------------------------------------------------------
/src/assets/css/.gitkeep:
--------------------------------------------------------------------------------
1 | @AngularClass
2 |
--------------------------------------------------------------------------------
/src/assets/css/main.css:
--------------------------------------------------------------------------------
1 | #body-container {
2 | margin: 0;
3 | height: 100%;
4 | }
5 | .bgm-link-icon {
6 | display: inline-block;
7 | vertical-align: middle;
8 | }
9 | .bgm-rate-emo {
10 | background: transparent url('/assets/img/rate_emo.gif') no-repeat;
11 | background-position: -77px 0;
12 | height: 37px;
13 | width: 30px;
14 | }
15 |
16 | .bgm-emo-47 {
17 | background: transparent url('/assets/img/24.gif') no-repeat;
18 | height: 21px;
19 | width: 21px;
20 | display: inline-block;
21 | vertical-align: baseline;
22 | }
--------------------------------------------------------------------------------
/src/assets/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "value": "AngularClass"
3 | }
4 |
--------------------------------------------------------------------------------
/src/assets/google-fonts/1KWMyx7m-L0fkQGwYhWwuuvvDin1pK8aKteLpeZ5c0A.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lordfriend/Deneb/44560541483739727bfad30b0bb6eddbf57b6a15/src/assets/google-fonts/1KWMyx7m-L0fkQGwYhWwuuvvDin1pK8aKteLpeZ5c0A.woff2
--------------------------------------------------------------------------------
/src/assets/google-fonts/8qcEw_nrk_5HEcCpYdJu8BTbgVql8nDJpwnrE27mub0.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lordfriend/Deneb/44560541483739727bfad30b0bb6eddbf57b6a15/src/assets/google-fonts/8qcEw_nrk_5HEcCpYdJu8BTbgVql8nDJpwnrE27mub0.woff2
--------------------------------------------------------------------------------
/src/assets/google-fonts/AcvTq8Q0lyKKNxRlL28Rn4X0hVgzZQUfRDuZrPvH3D8.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lordfriend/Deneb/44560541483739727bfad30b0bb6eddbf57b6a15/src/assets/google-fonts/AcvTq8Q0lyKKNxRlL28Rn4X0hVgzZQUfRDuZrPvH3D8.woff2
--------------------------------------------------------------------------------
/src/assets/google-fonts/HkF_qI1x_noxlxhrhMQYEJBw1xU1rKptJj_0jans920.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lordfriend/Deneb/44560541483739727bfad30b0bb6eddbf57b6a15/src/assets/google-fonts/HkF_qI1x_noxlxhrhMQYEJBw1xU1rKptJj_0jans920.woff2
--------------------------------------------------------------------------------
/src/assets/google-fonts/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lordfriend/Deneb/44560541483739727bfad30b0bb6eddbf57b6a15/src/assets/google-fonts/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2
--------------------------------------------------------------------------------
/src/assets/google-fonts/MgNNr5y1C_tIEuLEmicLmwLUuEpTyoUstqEm5AMlJo4.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lordfriend/Deneb/44560541483739727bfad30b0bb6eddbf57b6a15/src/assets/google-fonts/MgNNr5y1C_tIEuLEmicLmwLUuEpTyoUstqEm5AMlJo4.woff2
--------------------------------------------------------------------------------
/src/assets/google-fonts/cT2GN3KRBUX69GVJ2b2hxn-_kf6ByYO6CLYdB4HQE-Y.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lordfriend/Deneb/44560541483739727bfad30b0bb6eddbf57b6a15/src/assets/google-fonts/cT2GN3KRBUX69GVJ2b2hxn-_kf6ByYO6CLYdB4HQE-Y.woff2
--------------------------------------------------------------------------------
/src/assets/google-fonts/rZPI2gHXi8zxUjnybc2ZQFKPGs1ZzpMvnHX-7fPOuAc.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lordfriend/Deneb/44560541483739727bfad30b0bb6eddbf57b6a15/src/assets/google-fonts/rZPI2gHXi8zxUjnybc2ZQFKPGs1ZzpMvnHX-7fPOuAc.woff2
--------------------------------------------------------------------------------
/src/assets/humans.txt:
--------------------------------------------------------------------------------
1 | # humanstxt.org/
2 | # The humans responsible & technology colophon
3 |
4 | # TEAM
5 |
6 |
3 |
5 |
6 |
8 |
9 |
15 | {{currentTimeClock}}
10 |
11 |
13 | {{durationClock}}
14 |