qml/components/messageContent/MessageAnimationVideoPlayer.qml - develop - s5z6/telegraf

qml/components/messageContent/MessageAnimationVideoPlayer.qml

105 строк2 KB

mbarashkov

Начинаем проигрывать видеоанимации после их загрузки

04 июл 2025, 16:14

04 июл 2025, 16:14b61c2e0

import QtQuick 2.6
import Sailfish.Silica 1.0
import QtMultimedia 5.6
import ru.telegrafaurora.telegraf 1.0
import "../"

Item {
    id: videoPlayer
    anchors.fill: parent
    visible: true

    property url source: ""
    property bool loop: true


    states: [
        State {
            name: "active"
            when: videoPlayer.visible
            StateChangeScript {
                script: {
                    player.play()
                }
            }
        },
        State {
            name: "inactive"
            when: !videoPlayer.visible
            StateChangeScript {
                script: {
                    player.pause()
                }
            }
        }
    ]

    MediaPlayer {
        id: player
        source: videoPlayer.source
        loops: videoPlayer.loop ? MediaPlayer.Infinite : 1
        autoPlay: false

        onStatusChanged: {
            if(status === MediaPlayer.Buffered) {
                videoPlayer.captureFrame()
                if(videoPlayer.visible && playbackState !== MediaPlayer.PlayingState) {
                    play()
                }
            }
        }
    }

    VideoOutput {
        id: output
        anchors.fill: parent
        source: player
        opacity: videoPlayer.visible ? 1 : 0
        Behavior on opacity { NumberAnimation { duration: 300 } }
        z: 1
    }

    Image {
        id: bgImage
        anchors.fill: parent
        source: ""
        fillMode: Image.PreserveAspectFit
        visible: videoPlayer.visible
        z: 0
    }

    function captureFrame() {
        output.grabToImage(function(result) {
            bgImage.source = result.url
        })
    }

    Component.onCompleted: {
        player.play()
    }

    onSourceChanged: {
        if(source != "" && source != player.source)
        {
            player.source = source;
            player.play();
        }
    }


    Component.onDestruction: {
        player.stop()
        player.source = ""
        bgImage.source = ""
    }

    // Плавные переходы
    Behavior on visible {
        enabled: true
        NumberAnimation {
            property: "opacity"
            duration: 500
            easing.type: Easing.InOutQuad
        }
    }
}