chore: Add music

apps/taiga-lumbermill/src/dashboards/iot/components/music/music.component.html

@@ -0,0 +1,60 @@
+<div
+    tuiAppearance="whiteblock"
+    tuiCardLarge="normal"
+    class="card"
+>
+    <header tuiHeader>
+        <h2
+            tuiTitle
+            [style.text-align]="'center'"
+        >
+            Music
+        </h2>
+    </header>
+    <div class="info">
+        <img
+            src="/music_1.jpg"
+            class="logo"
+        />
+        <h2 class="tui-space_top-4 tui-space_bottom-2">Believer</h2>
+        <p
+            class="tui-space_top-0 tui-space_bottom-0"
+            [style.color]="'var(--tui-text-primary)'"
+        >
+            Imagine Dragons
+        </p>
+    </div>
+    <div>
+        <input
+            size="m"
+            tuiSlider
+            type="range"
+            value="60"
+            [formControl]="play"
+        />
+        <div class="numbers">
+            <p class="tui-space_top-0 tui-space_bottom-0">00:013</p>
+            <p class="tui-space_top-0 tui-space_bottom-0">00:52</p>
+        </div>
+    </div>
+    <div class="buttons">
+        <tui-icon icon="@tui.shuffle" />
+        <tui-icon icon="@tui.skip-back" />
+        <tui-icon icon="@tui.circle-play" />
+        <tui-icon icon="@tui.skip-forward" />
+        <tui-icon icon="@tui.repeat" />
+    </div>
+    <hr />
+    <div class="volume">
+        <tui-icon icon="@tui.volume-1" />
+        <input
+            size="m"
+            tuiSlider
+            type="range"
+            value="60"
+            [formControl]="volume"
+            [style.color]="'var(--tui-status-info)'"
+        />
+        <tui-icon icon="@tui.volume-2" />
+    </div>
+</div>

apps/taiga-lumbermill/src/dashboards/iot/components/music/music.component.less

@@ -0,0 +1,29 @@
+.numbers {
+    display: flex;
+    justify-content: space-between;
+    color: var(--tui-text-primary);
+}
+
+.buttons {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.volume {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.logo {
+    border-radius: 0.5rem;
+    width: 9rem;
+    height: 9rem;
+}

apps/taiga-lumbermill/src/dashboards/iot/components/music/music.component.ts

@@ -0,0 +1,33 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiAppearance, TuiIcon, TuiTitle} from '@taiga-ui/core';
+import {TuiHeader} from '@taiga-ui/experimental';
+import {TuiSliderComponent} from '@taiga-ui/kit';
+import {TuiCardLarge} from '@taiga-ui/layout';
+
+// import {MusicService} from './music.service';
+
+@Component({
+    standalone: true,
+    selector: 'lmb-music',
+    imports: [
+        CommonModule,
+        TuiAppearance,
+        TuiCardLarge,
+        TuiTitle,
+        TuiHeader,
+        TuiSliderComponent,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiIcon,
+    ],
+    templateUrl: './music.component.html',
+    styleUrl: './music.component.less',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MusicComponent {
+    protected value = 4;
+    protected play = new FormControl(60);
+    protected volume = new FormControl(0);
+}

apps/taiga-lumbermill/src/dashboards/iot/iot.component.html

@@ -23,5 +23,11 @@
                 <lmb-cleaning />
             </div>
         </div>
+        <div class="row">
+            <div class="grow"></div>
+            <div class="grow">
+                <lmb-music />
+            </div>
+        </div>
     </div>
 </div>

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

@@ -9,6 +9,7 @@ import {ControlPanelComponent} from './components/control-panel/control-panel.co
 import {CostComponent} from './components/Cost/cost.component';
 import {ElectricityComponent} from './components/electricity/electricity.component';
 import {LightingComponent} from './components/Lighting/lighting.component';
+import {MusicComponent} from './components/music/music.component';
 import {SafetyComponent} from './components/Safety/safety.component';
 
 @Component({
@@ -23,6 +24,7 @@ import {SafetyComponent} from './components/Safety/safety.component';
         LightingComponent,
         CleaningComponent,
         ControlPanelComponent,
+        MusicComponent,
         TuiAppearance,
         TuiCardLarge,
     ],