Ep watch status

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mira-ui",
-  "version": "2.10.2",
+  "version": "2.11.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -20,7 +20,7 @@
     "@angular/platform-browser-dynamic": "^18.1.0",
     "@angular/router": "^18.1.0",
     "@egjs/agent": "^2.4.0",
-    "@irohalab/deneb-ui": "^4.0.1",
+    "@irohalab/deneb-ui": "^4.4.0",
     "@irohalab/semantic-ui": "^2.4.1",
     "@swimlane/ngx-graph": "^8.4.0",
     "d3-scale": "^4.0.2",

src/app/admin/admin.module.ts

@@ -15,7 +15,7 @@ import { adminRoutes } from './admin.routes';
 import { FeedService } from './bangumi-detail/feed.service';
 import { AdminNavbar } from './admin-navbar/admin-navbar.component';
 import { BangumiCard } from './bangumi-card/bangumi-card.component';
-import { UIModule } from '@irohalab/deneb-ui';
+import { ResponsiveGenerateSrcService, SRC_GENERATOR_SERVICE, UIModule } from '@irohalab/deneb-ui';
 import { BangumiTypeNamePipe } from './bangumi-pipes/type-name-pipe';
 import { ResultDetail } from './search-bangumi/result-detail/result-detail.component';
 import { BangumiBasic } from './bangumi-detail/bangumi-basic/bangumi-basic.component';
@@ -32,7 +32,6 @@ import { UserManagerSerivce } from './user-manager/user-manager.service';
 import { UserPromoteModal } from './user-manager/user-promote-modal/user-promote-modal.component';
 import { DenebCommonPipes } from '../pipes';
 import { VideoFileModal } from './bangumi-detail/video-file-modal/video-file-modal.component';
-import { ResponsiveImageModule } from '../responsive-image/responsive-image.module';
 import { AnnounceComponent } from './announce/announce.component';
 import { EditAnnounceComponent } from './announce/edit-announce/edit-announce.component';
 import { AnnounceService } from './announce/announce.service';
@@ -47,8 +46,12 @@ import { NyaaPipe } from './bangumi-pipes/nyaa-pipe';
 import { EditBangumiRecommendComponent } from './announce/edit-bangumi-recommend/edit-bangumi-recommend.component';
 import { VideoProcessRuleComponent } from './bangumi-detail/video-processs-rule/video-process-rule.component';
 import { VideoProcessRuleService } from './bangumi-detail/video-processs-rule/video-process-rule.service';
-import { VideoProcessRuleEditorComponent } from './bangumi-detail/video-processs-rule/video-process-rule-editor/video-process-rule-editor.component';
-import { VideoProcessRuleItemComponent } from './bangumi-detail/video-processs-rule/video-process-rule-item/video-process-rule-item.component';
+import {
+    VideoProcessRuleEditorComponent
+} from './bangumi-detail/video-processs-rule/video-process-rule-editor/video-process-rule-editor.component';
+import {
+    VideoProcessRuleItemComponent
+} from './bangumi-detail/video-processs-rule/video-process-rule-item/video-process-rule-item.component';
 import { ActionTypePipe } from './bangumi-detail/video-processs-rule/action-type.pipe';
 import { ProfileTypePipe } from './bangumi-detail/video-processs-rule/profile-type.pipe';
 import { DownloadManagerComponent } from './download-manager/download-manager.component';
@@ -68,7 +71,8 @@ import { DownloadJobDetailComponent } from './download-manager/download-job-deta
 import { DownloadEditorComponent } from './bangumi-detail/universal-builder/download-editor/download-editor.component';
 
 
-@NgModule({ declarations: [
+@NgModule({
+    declarations: [
         Admin,
         SearchBangumi,
         ResultDetail,
@@ -114,17 +118,20 @@ import { DownloadEditorComponent } from './bangumi-detail/universal-builder/down
         VertexInfoPanelComponent,
         DownloadJobDetailComponent,
         DownloadEditorComponent
-    ], imports: [CommonModule,
+    ],
+    imports: [
+        CommonModule,
         FormsModule,
         ReactiveFormsModule,
         RouterModule.forChild(adminRoutes),
         UIModule,
         ConfirmDialogModule,
         DenebCommonPipes,
-        ResponsiveImageModule,
         UserServiceModule,
         DpDatePickerModule,
-        NgxGraphModule], providers: [
+        NgxGraphModule
+    ],
+    providers: [
         AdminService,
         FeedService,
         BangumiMoeService,
@@ -136,7 +143,9 @@ import { DownloadEditorComponent } from './bangumi-detail/universal-builder/down
         VideoProcessRuleService,
         DownloadManagerService,
         VideoProcessManagerService,
-        provideHttpClient(withInterceptorsFromDi())
-    ] })
+        provideHttpClient(withInterceptorsFromDi()),
+        {provide: SRC_GENERATOR_SERVICE, useClass: ResponsiveGenerateSrcService}
+    ],
+})
 export class AdminModule {
 }

src/app/admin/bangumi-card/bangumi-card.html

@@ -1,6 +1,6 @@
 <div class="ui segment" [ngClass]="{inverted: isDarkTheme}">
     <div class="bangumi-list-item">
-        <responsive-image class="cover-wrapper"
+        <ui-responsive-image class="cover-wrapper"
                           *ngIf="!!bangumi.cover_image"
                           [src]="imageUrl"
                           [size]="{
@@ -10,7 +10,7 @@
                             originalHeight: bangumi.cover_image.height}"
                           [background]="bangumi.cover_image.dominant_color"
                           (imageLoad)="onImageLoad()">
-        </responsive-image>
+        </ui-responsive-image>
         <div class="cover-wrapper" *ngIf="!!bangumi.image && !bangumi.cover_image">
             <img [src]="bangumi.image" alt="image" class="bangumi-image">
         </div>

src/app/admin/bangumi-detail/bangumi-detail.html

@@ -15,14 +15,14 @@
 <div class="bangumi-detail-container" *ngIf="bangumi && adminList">
     <div class="bangumi-basic-info section-card">
         <div class="cover-wrapper" *ngIf="bangumi.cover_image">
-            <responsive-image
+            <ui-responsive-image
                 [src]="bangumi.cover_image.url"
                 [size]="{
                     width: '100%',
                     height: 'auto',
                     originalWidth: bangumi.cover_image.width,
                     originalHeight: bangumi.cover_image.height}"
-                [background]="bangumi.cover_image.dominant_color"></responsive-image>
+                [background]="bangumi.cover_image.dominant_color"></ui-responsive-image>
         </div>
         <div class="bangumi-info-text">
             <h3 class="bangumi-title">
@@ -187,15 +187,15 @@ <h4 class="ui icon film icon-holder">
                                 </h4>
                             </div>
                         </div>
-                        <responsive-image
+                        <ui-responsive-image
                             [src]="episode.thumbnail_image.url"
                             [size]="{
                                 width: '6rem',
                                 height: '3.375rem',
                                 originalWidth: episode.thumbnail_image.width,
                                 originalHeight: episode.thumbnail_image.height}"
                             display="table" *ngIf="episode.status === 2 && !!episode.thumbnail_image"
-                            [background]="episode.thumbnail_image.dominant_color"></responsive-image>
+                            [background]="episode.thumbnail_image.dominant_color"></ui-responsive-image>
                     </td>
                     <td class="title">
                         <span class="key">日文:</span><span class="value">{{episode.name}}</span> <br>

src/app/home/bangumi-card/bangumi-card.html

@@ -1,7 +1,7 @@
 <div class="ui container">
     <a class="ui segment" [routerLink]="['/bangumi', bangumi.id]" [ngClass]="{inverted: isDarkTheme}">
         <div class="bangumi-list-item">
-            <responsive-image class="cover-wrapper"
+            <ui-responsive-image class="cover-wrapper"
                               [src]="imageUrl"
                               [size]="{
                                 width: '10rem',
@@ -11,7 +11,7 @@
                               }"
                               [background]="bangumi.cover_image.dominant_color"
                               (imageLoad)="onImageLoad()"
-            ></responsive-image>
+            ></ui-responsive-image>
             <div class="list-item-text">
                 <h4 class="bangumi-title">{{bangumi.name_cn || '暂无'}}</h4>
                 <h4 class="entry">

src/app/home/bangumi-detail/bangumi-detail.components.ts

@@ -116,6 +116,19 @@ export class BangumiDetail extends HomeChild implements OnInit, OnDestroy {
         );
     }
 
+    changeEpStatus(episode: Episode, status: number): void {
+        this._subscription.add(
+            this._watchService.favorite_favorite(
+                episode.bangumi_id,
+                episode.id,
+                status)
+                .subscribe(() => {
+                    episode.watch_progress.watch_status = status;
+                    this._toastRef.show('已更新');
+                })
+        );
+    }
+
     changeLayoutType(layoutType: string): void {
         this.layoutType = layoutType;
         this._persistStorage.setItem(LAYOUT_TYPE, layoutType);

src/app/home/bangumi-detail/bangumi-detail.html

@@ -4,13 +4,13 @@
 <div class="ui container bangumi-default-container" *ngIf="bangumi" [ngClass]="{'dark-theme': isDarkTheme}">
     <div class="bangumi-info">
         <div #bangumiCover class="bangumi-cover" *ngIf="bangumi.cover">
-            <responsive-image [src]="bangumi.cover_image.url"
+            <ui-responsive-image [src]="bangumi.cover_image.url"
                               [size]="{
                                 width: '100%',
                                 ratio: bangumi.cover_image.height / bangumi.cover_image.width,
                                 originalWidth: bangumi.cover_image.width,
                                 originalHeight: bangumi.cover_image.height}"
-                              [background]="bangumi.cover_image.dominant_color"></responsive-image>
+                              [background]="bangumi.cover_image.dominant_color"></ui-responsive-image>
             <bangumi-staff-info *ngIf="!!extraInfo && !!extraInfo.staff" [staffList]="extraInfo.staff"></bangumi-staff-info>
         </div>
         <div class="bangumi-cover-revealer" [style.height]="coverRevealerHeight" (click)="toggleCover()">
@@ -79,13 +79,13 @@ <h4 class="ui icon film icon-holder">
                         </div>
                     </div>
                     <a *ngIf="episode.status===2" class="image" [routerLink]="['/play', episode.id]">
-                        <responsive-image [src]="episode.thumbnail_image.url"
+                        <ui-responsive-image [src]="episode.thumbnail_image.url"
                                           [size]="{
                                         width: '100%',
                                         ratio: 0.5625,
                                         originalWidth: episode.thumbnail_image.width,
                                         originalHeight: episode.thumbnail_image.height}"
-                                          [background]="episode.thumbnail_image.dominant_color"></responsive-image>
+                                          [background]="episode.thumbnail_image.dominant_color"></ui-responsive-image>
                     </a>
                     <a *ngIf="episode.status===2" class="content" [routerLink]="['/play', episode.id]">
                         <div class="content-heading">
@@ -98,6 +98,13 @@ <h4 class="ui icon film icon-holder">
                             <span class="ui tiny teal label" *ngIf="sortOrder === 'desc' && episode.status !== 2">即将播出</span>
                         </div>
                     </a>
+                    <div class="ui dropdown extend-menu-button" uiDropdown="click" [stopPropagation]="false">
+                        <div class="text"><i class="ellipsis vertical icon"></i></div>
+                        <div class="left menu">
+                            <div class="item" (click)="changeEpStatus(episode, 2)">看过</div>
+                            <div class="item" (click)="changeEpStatus(episode, 3)">在看</div>
+                        </div>
+                    </div>
                     <div class="ui bottom attached progress"
                          *ngIf="episode.watch_progress && episode.watch_progress.percentage"
                          [ngClass]="{
@@ -127,13 +134,13 @@ <h4 class="ui icon film icon-holder">
                     <span class="episode-title" *ngIf="episode.name_cn || episode.name">{{episode.name_cn || episode.name}}</span>
                 </div>
                 <a *ngIf="episode.status===2" class="image" [routerLink]="['/play', episode.id]">
-                    <responsive-image [src]="episode.thumbnail_image.url"
+                    <ui-responsive-image [src]="episode.thumbnail_image.url"
                                       [size]="{
                                         width: '100%',
                                         ratio: 0.5625,
                                         originalWidth: episode.thumbnail_image.width,
                                         originalHeight: episode.thumbnail_image.height}"
-                                      [background]="episode.thumbnail_image.dominant_color"></responsive-image>
+                                      [background]="episode.thumbnail_image.dominant_color"></ui-responsive-image>
                 </a>
                 <span class="episode-number">{{episode.episode_no}}</span>
                 <a *ngIf="episode.status===2" class="content" [routerLink]="['/play', episode.id]">

src/app/home/bangumi-detail/bangumi-detail.less

@@ -256,6 +256,7 @@
       flex: 0 0 8rem;
     }
     > .content {
+      flex: 1 0 auto;
       padding: 0.7em 1em;
       .extra-info {
         margin-top: 0.2em;
@@ -282,5 +283,16 @@
         }
       }
     }
+    .extend-menu-button {
+      align-self: center;
+      display: inline-block;
+      padding: 0.7em 0.2em 0.7em 0.5em;
+      cursor: pointer;
+      color: #4c4c4c;
+      &:focus,
+      &:hover {
+        color: #101010;
+      }
+    }
   }
 }

src/app/home/default/default.html

@@ -10,13 +10,13 @@
     <div class="ui five doubling cards" *ngIf="!!announce_in_bangumi && announce_in_bangumi.length > 0">
         <div class="card bangumi-card" *ngFor="let announce of announce_in_bangumi">
             <a class="image" [routerLink]="['/bangumi', announce.bangumi.id]">
-                <responsive-image [src]="announce.bangumi.cover_image.url"
+                <ui-responsive-image [src]="announce.bangumi.cover_image.url"
                                   [size]="{
                                     width: '100%',
                                     ratio: 0.8,
                                     originalWidth: announce.bangumi.cover_image.width,
                                     originalHeight: announce.bangumi.cover_image.height}"
-                                  [background]="announce.bangumi.cover_image.dominant_color"></responsive-image>
+                                  [background]="announce.bangumi.cover_image.dominant_color"></ui-responsive-image>
             </a>
             <div *ngIf="announce.bangumi.favorite_status" class="ui ribbon label"
                  [ngClass]="{
@@ -42,13 +42,13 @@
     <div class="ui five doubling cards" *ngIf="onAirBangumi">
         <div class="card bangumi-card" *ngFor="let bangumi of onAirBangumi">
             <a class="image" [routerLink]="['/bangumi', bangumi.id]">
-                <responsive-image [src]="bangumi.cover_image.url"
+                <ui-responsive-image [src]="bangumi.cover_image.url"
                                   [size]="{
                                     width: '100%',
                                     ratio: 1.405152224824,
                                     originalWidth: bangumi.cover_image.width,
                                     originalHeight: bangumi.cover_image.height}"
-                                  [background]="bangumi.cover_image.dominant_color"></responsive-image>
+                                  [background]="bangumi.cover_image.dominant_color"></ui-responsive-image>
             </a>
             <div *ngIf="bangumi.favorite_status" class="ui ribbon label"
                  [ngClass]="{