slint/examples/ffmpeg/scene.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { VerticalBox, Palette } from "std-widgets.slint";

export component App inherits Window {
    in property <image> video-frame <=> image.source;
    in property <bool> playing;

    pure callback toggle-pause-play();

    preferred-width: 1280px;
    preferred-height: 534px;
    min-width: 1280px;
    min-height: 534px;
    title: "Slint FFmpeg Video Playback Example";
    background: #000000;
    icon: @image-url("../../logo/slint-logo-small-light.png");

    states [
        shown when !playing || controls-area.has-hover: {
            controls.opacity: 1;
            in {
                animate controls.opacity {
                    duration: 500ms;
                }
            }
        }
        hidden when playing: {
            controls.opacity: 0;
        }
    ]

    VerticalBox {
        image := Image {}
    }

    area := TouchArea {
        width: 100%;
        height: 100%;
        clicked => {
            root.toggle-pause-play();
        }
        controls := Rectangle {
            width: 50%;
            height: self.preferred-height;
            y: root.height - self.height - 40px;
            border-radius: 4px;
            background: Palette.color-scheme == ColorScheme.dark ? #3737378c : #ffffff82;

            play-pause := Image {
                width: 64px;
                height: 64px;
                source: root.playing ? @image-url("pause.svg") : @image-url("play.svg");
            }

            controls-area := TouchArea {
                clicked => {
                    root.toggle-pause-play();
                }
            }
        }
    }
}