slint/examples/gstreamer-player/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: 500px;
    preferred-height: 300px;
    min-width: 500px;
    min-height: 300px;
    title: "Slint GStreamer Video Playback Example";
    background: #000000;
    icon: @image-url("../../logo/slint-logo-small-light.png");

    states [
        shown when area.has-hover || animation-tick() < 5s : {
            controls.opacity: 1;
            in {
                animate controls.opacity {
                    duration: 50ms;
                }
            }
        }
        hidden when !area.has-hover: {
            controls.opacity: 0;
            in {
                animate controls.opacity {
                    delay: 3s;
                    duration: 500ms;
                }
            }
        }
    ]

    VerticalBox {
        image := Image {}
    }

    area := TouchArea {
        width: 50%;
        height: self.preferred-height;
        y: root.height - self.height - 40px;
        controls := Rectangle {
            border-radius: 4px;
            background: Palette.color-scheme == ColorScheme.dark ? #3737378c : #ffffff82;

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

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