slint/demos/home-automation/ui/components/musicPlayer.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { Measurements, Colors, Palette } from "../common.slint";
import { Control} from "control.slint";
import { AppState } from "../appState.slint";
import { HaText } from "general/haText.slint";
export component AudioVisualizer inherits Rectangle {
    width: self.preferred-width;
    height: 100px;
    y: 0px;


    // Define the number of bars
    property <int> numBars: 50;

    // Define the bar width and spacing
    property <length> barWidth: self.width / numBars;
    property <length> spacing: 2px;
    HorizontalLayout {
        spacing: parent.spacing;
        alignment: start;
        y: 80px;

        // Random heights for demonstration purposes
        property <[float]> getBarHeight:
            [
            0.536607,
            0.927906,
            0.865396,
            0.503682,
            0.225622,
            0.038002,
            0.756923,
            0.914055,
            0.783485,
            0.614367,
            0.981598,
            0.399460,
            0.577364,
            0.786051,
            0.521291,
            0.716059,
            0.917610,
            0.555306,
            0.935384,
            0.166469,
            0.677960,
            0.331542,
            0.828376,
            0.334301,
            0.493934,
            0.742222,
            0.743564,
            0.126049,
            0.501512,
            0.933921,
            0.600989,
            0.876927,
            0.364581,
            0.942666,
            0.197834,
            0.762524,
            0.835514,
            0.134315,
            0.407657,
            0.960525,
            0.222813,
            0.176457,
            0.610204,
            0.0296424,
            0.4449036,
            0.9250662,
            0.6634989,
            0.1265369,
            0.636468,
            0.320777
        ];


        // Create the visualizer bars

        for bar[i] in numBars: Rectangle {
            width: barWidth;
            height: getBarHeight[i] * 1px * 4000%;
            background: Palette.music-gradient.transparentize(0.2);
            y: -self.height / 2;
        }
    }
}

export component MusicPlayer inherits Control {
    property <string> title: "Maxwell's Silver Hammer";
    property <int> current-page: AppState.current-page;
    property <string> artist: "The Beatles";
    property <string> album: "Abbey Road";
    property <bool> unlocked: false;
    property <image> cover-art: @image-url("../images/abbey-road.jpg");
    property <bool> is-active: false;

    tile := Rectangle {
        border-color: white;
        border-width: 2px;
        x: 0cm;
        Image {

            source: cover-art;
            width: 100%;
            image-fit: cover;
            height: 100%;
            horizontal-alignment: center;
            vertical-alignment: center;
        }

        VerticalLayout {
            alignment: end;
            spacing: 5px;
            padding: 5px;
            HorizontalLayout {
                width: tile.width;
                alignment: start;
                padding-left: 10px;
                AudioVisualizer {
                    width: tile.width * 0.7;
                    states [
                        isVisible when root.height < Measurements.large-height-tile: {
                            opacity: 0.0;
                            in {
                                animate opacity {
                                    duration: 300ms;
                                    easing: ease-in-out-sine;
                                }
                            }
                        }
                        isNotVisible when root.height >= Measurements.large-height-tile: {
                            opacity: 1.0;
                            in {
                                animate opacity {
                                    duration: 300ms;
                                    easing: ease-in-out-sine;
                                }
                            }
                        }
                    ]
                }
            }

            controls := Rectangle {
                border-radius: 20px;
                width: 95%;
                height: self.preferred-height;
                background: Palette.music-gradient.transparentize(0.2);
                animate height {
                    duration: 1000ms;
                    easing: ease-in-out-sine;
                }
                HorizontalLayout {
                    alignment: space-around;
                    padding-top: 15px;
                    padding-bottom: 15px;
                    Image {
                        source: @image-url("../images/back.svg");
                        width: 35px;
                        height: 35px;
                        colorize: Palette.music-alternate-foreground;
                    }

                    Image {
                        source: @image-url("../images/pause.svg");
                        width: 35px;
                        height: 35px;
                        colorize: Palette.music-alternate-foreground;
                    }

                    Image {
                        source: @image-url("../images/fwd.svg");
                        width: 35px;
                        height: 35px;
                        colorize: Palette.music-alternate-foreground;
                    }
                }
            }

            info := Rectangle {
                border-radius: 20px;
                width: 95%;
                height: self.preferred-height;
                background: Palette.music-gradient.transparentize(0.2);
                animate height {
                    duration: 1000ms;
                    easing: ease-in-out-sine;
                }
                VerticalLayout {
                    padding-top: (tile.height > Measurements.small-height-tile) ? 36px : 18px;
                    padding: (tile.height <= Measurements.small-height-tile) ? 36px : 18px;
                    spacing: 10px;

                    HaText {
                        color: Palette.control-background;
                        text: title;
                        font-size: 3rem;
                        font-weight: 500;
                        horizontal-alignment: left;
                        vertical-alignment: center;
                    }

                    Rectangle {
                        height: 10px;
                    }

                    HaText {
                        color: Palette.control-background;
                        text: artist;
                        font-size: 2rem;
                        font-weight: 400;
                        horizontal-alignment: left;
                        vertical-alignment: center;
                    }

                    Rectangle {
                        height: 20px;
                    }

                    HaText {
                        color: Palette.music-alternate-foreground;
                        text: "Album: " + album;
                        font-size: 2rem;
                        font-weight: 400;
                        horizontal-alignment: left;
                        vertical-alignment: center;
                    }
                }
            }
        }
    }
}