1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { VerticalBox, StyleMetrics } from "std-widgets.slint";
5
6export component App inherits Window {
7 in property <image> video-frame <=> image.source;
8 in property <bool> playing;
9
10 pure callback toggle-pause-play();
11
12 preferred-width: 500px;
13 preferred-height: 300px;
14 min-width: 500px;
15 min-height: 300px;
16 title: "Slint GStreamer Video Playback Example";
17 background: #000000;
18 icon: @image-url("../../logo/slint-logo-small-light.png");
19
20 states [
21 shown when area.has-hover || animation-tick() < 5s : {
22 controls.opacity: 1;
23 in {
24 animate controls.opacity {
25 duration: 50ms;
26 }
27 }
28 }
29 hidden when !area.has-hover: {
30 controls.opacity: 0;
31 in {
32 animate controls.opacity {
33 delay: 3s;
34 duration: 500ms;
35 }
36 }
37 }
38 ]
39
40 VerticalBox {
41 image := Image {}
42 }
43
44 area := TouchArea {
45 width: 50%;
46 height: self.preferred-height;
47 y: root.height - self.height - 40px;
48 controls := Rectangle {
49 border-radius: 4px;
50 background: StyleMetrics.dark-color-scheme ? #3737378c : #ffffff82;
51
52 Image {
53 width: 64px;
54 height: 64px;
55 source: root.playing ? @image-url("pause.svg") : @image-url("play.svg");
56 }
57
58 TouchArea {
59 clicked => {
60 root.toggle-pause-play();
61 }
62 }
63 }
64 }
65}
66