feat: add films component

.cspell.json

@@ -31,9 +31,11 @@
         "forecastday",
         "mintemp",
         "maxtemp",
+        "Create",
+        "Unstake",
+        "Unstaking",
         "Tiko",
         "Create",
-        "NFTTABLE",
         "Unstake",
         "Unstaking"
     ]

apps/taiga-lumbermill/src/components/app/app.routes.ts

@@ -32,6 +32,32 @@ export const appRoutes: Route[] = [
                     ),
                 data: {title: 'Crypto'},
             },
+            {
+                path: 'films',
+                loadComponent: async () =>
+                    import('../../dashboards/films/films.component').then(
+                        (mod) => mod.FilmComponent,
+                    ),
+                data: {title: 'Films'},
+                children: [
+                    {
+                        path: '',
+                        loadComponent: async () =>
+                            import(
+                                '../../dashboards/films/components/list-films/list-films.component'
+                            ).then((mod) => mod.ListFilmsComponent),
+                        data: {title: 'Films'},
+                    },
+                    {
+                        path: ':id',
+                        loadComponent: async () =>
+                            import(
+                                '../../dashboards/films/components/film-view/film-view.component'
+                            ).then((mod) => mod.default),
+                        data: {title: 'Films'},
+                    },
+                ],
+            },
         ],
     },
     {

apps/taiga-lumbermill/src/components/navigation/navigation.component.html

@@ -72,7 +72,10 @@
             </button>
         </footer>
     </aside>
-    <main tuiNavigationMain>
+    <main
+        tuiNavigationMain
+        class="main"
+    >
         <router-outlet [style.display]="'none'" />
     </main>
 </div>

apps/taiga-lumbermill/src/components/navigation/navigation.component.less

@@ -1,3 +1,7 @@
 .aside-bar {
     height: calc(100vh - 3rem);
 }
+
+.main {
+    max-width: 100%;
+}

apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.html

@@ -1,60 +1,64 @@
 <div class="info">
     <h3 class="row-title tui-space_top-0 tui-space_bottom-0">Top NFTs</h3>
-    <div class="list">
-        @for (nft of nfts; track $index) {
-            <button
-                tuiCardLarge
-                tuiSurface="elevated"
-                class="card-nft"
-                (click)="updateItem($index)"
-            >
-                <tui-avatar
-                    class="logo-nft"
-                    [src]="nft.src"
-                />
-                <div
-                    class="text"
-                    [style.margin-top]="0"
+    <tui-scrollbar>
+        <div class="list">
+            @for (nft of nfts; track $index) {
+                <button
+                    tuiCardLarge
+                    tuiSurface="elevated"
+                    class="card-nft"
+                    (click)="updateItem($index)"
                 >
-                    <p class="nft-name tui-space_top-1 tui-space_bottom-0">{{ nft.name }}</p>
-                    <p
-                        tuiSubtitle
-                        class="tui-space_top-0 tui-space_bottom-0"
+                    <tui-avatar
+                        class="logo-nft"
+                        [src]="nft.src"
+                    />
+                    <div
+                        class="text"
+                        [style.margin-top]="0"
                     >
-                        {{ nft.price | tuiAmount: 'USD' | async }}
-                    </p>
-                </div>
-            </button>
-        }
-    </div>
+                        <p class="nft-name tui-space_top-1 tui-space_bottom-0">{{ nft.name }}</p>
+                        <p
+                            tuiSubtitle
+                            class="tui-space_top-0 tui-space_bottom-0"
+                        >
+                            {{ nft.price | tuiAmount: 'USD' | async }}
+                        </p>
+                    </div>
+                </button>
+            }
+        </div>
+    </tui-scrollbar>
 </div>
 <div class="info">
     <h3 class="row-title tui-space_top-0 tui-space_bottom-0">Recent bought NFTs</h3>
-    <div class="list">
-        @for (nft of nfts; track $index) {
-            <button
-                tuiCardLarge
-                tuiSurface="elevated"
-                class="card-nft"
-                (click)="updateItem($index)"
-            >
-                <tui-avatar
-                    class="logo-nft"
-                    [src]="nft.src"
-                />
-                <div
-                    class="text"
-                    [style.margin-top]="0"
+    <tui-scrollbar>
+        <div class="list">
+            @for (nft of nfts; track $index) {
+                <button
+                    tuiCardLarge
+                    tuiSurface="elevated"
+                    class="card-nft"
+                    (click)="updateItem($index)"
                 >
-                    <p class="nft-name tui-space_top-1 tui-space_bottom-0">{{ nft.name }}</p>
-                    <p
-                        tuiSubtitle
-                        class="tui-space_top-0 tui-space_bottom-0"
+                    <tui-avatar
+                        class="logo-nft"
+                        [src]="nft.src"
+                    />
+                    <div
+                        class="text"
+                        [style.margin-top]="0"
                     >
-                        {{ nft.price | tuiAmount: 'USD' | async }}
-                    </p>
-                </div>
-            </button>
-        }
-    </div>
+                        <p class="nft-name tui-space_top-1 tui-space_bottom-0">{{ nft.name }}</p>
+                        <p
+                            tuiSubtitle
+                            class="tui-space_top-0 tui-space_bottom-0"
+                        >
+                            {{ nft.price | tuiAmount: 'USD' | async }}
+                        </p>
+                    </div>
+                </button>
+            }
+        </div>
+    </tui-scrollbar>
 </div>

apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.less

@@ -15,7 +15,6 @@
 
 .info {
     display: flex;
-    overflow: hidden;
     flex-direction: column;
     gap: 0.5rem;
 }

apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.ts

@@ -7,7 +7,7 @@ import {
     Output,
 } from '@angular/core';
 import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
-import {TuiAppearance, TuiSurface, TuiTitle} from '@taiga-ui/core';
+import {TuiAppearance, TuiScrollbar, TuiSurface, TuiTitle} from '@taiga-ui/core';
 import {TuiAvatar} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 
@@ -24,6 +24,7 @@ import {NftService} from '../nft.service';
         TuiAvatar,
         TuiCardLarge,
         TuiHeader,
+        TuiScrollbar,
         TuiSurface,
         TuiTitle,
     ],

apps/taiga-lumbermill/src/dashboards/dashboards-list/dashboards-list.component.ts

@@ -21,6 +21,11 @@ export const INITIAL_DATA: DashboardsData[] = [
         link: '/dashboards/crypto',
         description: 'Crypto token dashboard',
     },
+    {
+        title: 'Films Dashboard',
+        link: '/dashboards/films',
+        description: 'Streaming service for films and TV series',
+    },
 ];
 
 @Component({

apps/taiga-lumbermill/src/dashboards/films/components/film-view/film-view.component.html

@@ -0,0 +1,39 @@
+<div
+    tuiAppearance="whiteblock"
+    tuiCardLarge="normal"
+    class="card"
+>
+    @let item = filmsService[id];
+    <div class="player">
+        <div class="blackout"></div>
+        <video
+            #video
+            controls
+            tuiMedia
+            class="video"
+            [(currentTime)]="currentTime"
+            [(paused)]="paused"
+            [(volume)]="volume"
+        >
+            <source
+                src="./example.mp4"
+                type="video/mp4"
+            />
+        </video>
+        <header
+            tuiHeader="l"
+            class="title"
+        >
+            <h2 tuiTitle>
+                {{ item.title }}
+            </h2>
+        </header>
+        <button
+            appearance="icon"
+            iconStart="@tui.circle-x"
+            tuiIconButton
+            class="close"
+            [routerLink]="'/dashboards/films/'"
+        ></button>
+    </div>
+</div>

apps/taiga-lumbermill/src/dashboards/films/components/film-view/film-view.component.less

@@ -0,0 +1,63 @@
+.video {
+    display: block;
+    width: 100%;
+}
+
+.blackout {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    box-shadow: inset 0 10rem 7rem -5rem var(--tui-background-accent-opposite);
+}
+
+.player {
+    position: relative;
+    margin: 0;
+}
+
+.close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    color: var(--tui-background-base-alt);
+
+    @media (max-width: 700px) {
+        top: 0.4rem;
+        right: 0.4rem;
+    }
+
+    @media (max-width: 420px) {
+        top: 0.1rem;
+        right: 0.1rem;
+    }
+}
+
+.title[tuiHeader][data-size='l'] {
+    position: absolute;
+    top: 1rem;
+    right: 50%;
+    left: 50%;
+    width: max-content;
+    transform: translateX(-50%);
+    color: var(--tui-background-base-alt);
+
+    @media (max-width: 700px) {
+        & h2 {
+            font-size: 1.3rem;
+        }
+    }
+
+    @media (max-width: 420px) {
+        & h2 {
+            font-size: 1rem;
+        }
+    }
+}
+
+.card[tuiCardLarge] {
+    margin-top: 1.25rem;
+    padding: 1.25rem;
+    background-color: var(--tui-background-base-alt);
+}

apps/taiga-lumbermill/src/dashboards/films/components/film-view/film-view.component.ts

@@ -0,0 +1,36 @@
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
+import {FormsModule} from '@angular/forms';
+import {ActivatedRoute, RouterLink} from '@angular/router';
+import {TuiMedia} from '@taiga-ui/cdk';
+import {TuiAppearance, TuiButton, TuiIcon, TuiTitle} from '@taiga-ui/core';
+import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
+
+import {FilmsService} from '../../films.service';
+
+@Component({
+    standalone: true,
+    selector: 'lmb-film-view',
+    imports: [
+        FormsModule,
+        RouterLink,
+        TuiAppearance,
+        TuiButton,
+        TuiCardLarge,
+        TuiHeader,
+        TuiIcon,
+        TuiMedia,
+        TuiTitle,
+    ],
+    templateUrl: './film-view.component.html',
+    styleUrls: ['./film-view.component.less'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class FilmViewComponent {
+    private readonly activatedRoute = inject(ActivatedRoute);
+    protected id = toSignal(this.activatedRoute.params)()?.['id'];
+    protected filmsService = inject(FilmsService).filmsData;
+    protected currentTime = 0;
+    protected paused = true;
+    protected volume = 1;
+}