<template>
    <div class="participant-video-item"
         v-bind:class="{highlight: participant._volume > 0}">
        <video v-if="!participant._isAudience && !participant._isVideoMuted && participant._stream"
               @dblclick="onDbClickVideo"
               class="video"
               v-bind:style="{objectFit:participant._isScreenSharing ? 'contain' : 'fit'}"
               :srcObject.prop="participant._stream"
               playsInline
               :muted="participant.uid === selfUserId"
               autoPlay/>
        <div v-else
             class="avatar-container">
            <img class="avatar" :src="participant.portrait" :alt="participant">
        </div>
        <audio v-if="!participant._isAudience && participant.uid !== selfUserId && participant._stream"
               :srcObject.prop="participant._stream"
               :muted="participant.uid === selfUserId"
               autoPlay/>
        <div v-if="!participant._isVideoMuted" class="video-stream-tip-container">
            <p>{{ '双击视频，将其设置为焦点' }}</p>
        </div>
        <div class="info-container">
            <i v-if="participant._isHost" class="icon-ion-person"></i>
            <i v-if="participant._isAudioMuted" class="icon-ion-ios-mic-off" style="color: white"></i>
            <i v-else class="icon-ion-ios-mic"></i>
            <div>{{ userName }}</div>
        </div>
    </div>

</template>

<script>
import CallState from "../../../wfc/av/engine/callState";
import VideoType from "../../../wfc/av/engine/videoType";
import conferenceManager from "./conferenceManager";

export default {
    name: "ConferenceParticipantVideoView",
    props: {
        participant: {
            type: Object,
            required: true
        },
        session: {
            type: Object,
            required: true,
        }
    },
    data() {
        return {
            status: CallState.STATUS_CONNECTING,
            selfUserId: conferenceManager.selfUserId,
        }
    },
    // created() {
    //     console.log('------------- videoView created', this.participant.uid);
    //     if (this.selfUserId !== this.participant.uid) {
    //         if (!this.participant._isVideoMuted) {
    //             this.session.setParticipantVideoType(this.participant.uid, this.participant._isScreenSharing, VideoType.BIG_STREAM);
    //         }
    //     }
    // },
    // unmounted() {
    //     console.log('------------- videoView destroyed', this.$parent.currentLayout, this.layoutMode, this.participant.uid);
    //     // fixme
    //     // 切换布局时，不取消订阅视频流
    //     // 已知问题，演讲者模式时，会订阅所有的视频流；从演讲者模式，切换到宫格布局时，会保持订阅所有的视频流，直到切换宫格布局的页面时，才会取消订阅一些看不见的流
    //     if (this.$parent.currentLayout !== this.currentLayout) {
    //         return;
    //     }
    //     if (this.selfUserId !== this.participant.uid) {
    //         if (!this.participant._isVideoMuted) {
    //             this.session.setParticipantVideoType(this.participant.uid, this.participant._isScreenSharing, VideoType.NONE);
    //         }
    //     }
    // },
    methods: {
        onDbClickVideo() {
            if (conferenceManager.isOwner()) {
                conferenceManager.requestFocus(this.participant.uid);
            } else {
                if (conferenceManager.conferenceInfo.focus) {
                    this.$notify({
                        text: '主持人已设置了焦点用户',
                        type: 'warn'
                    });
                } else {
                    conferenceManager.localFocusUser = this.participant;
                }
            }
        },

        switchVideoType(userId, screenSharing) {
            if (!this.session) {
                return
            }
            let subscriber = this.session.getSubscriber(userId, screenSharing);
            if (subscriber) {
                let currentVideoType = subscriber.currentVideoType;
                let videoType = VideoType.NONE;
                if (currentVideoType === VideoType.NONE) {
                    videoType = VideoType.BIG_STREAM;
                } else if (currentVideoType === VideoType.BIG_STREAM) {
                    videoType = VideoType.SMALL_STREAM;
                } else if (videoType === VideoType.SMALL_STREAM) {
                    videoType = VideoType.NONE;
                }
                this.session.setParticipantVideoType(userId, screenSharing, videoType);
            }
        },

        switchCamera() {
            if (!this.session || this.session.isScreenSharing()) {
                return;
            }
            // The order is significant - the default capture devices will be listed first.
            // navigator.mediaDevices.enumerateDevices()
            navigator.mediaDevices.enumerateDevices().then(devices => {
                devices = devices.filter(d => d.kind === 'videoinput');
                if (devices.length < 2) {
                    console.log('switchCamera error, no more video input device')
                    return;
                }
                this.videoInputDeviceIndex++;
                if (this.videoInputDeviceIndex >= devices.length) {
                    this.videoInputDeviceIndex = 0;
                }
                this.session.setVideoInputDeviceId(devices[this.videoInputDeviceIndex].deviceId)
                console.log('setVideoInputDeviceId', devices[this.videoInputDeviceIndex]);
            })
        },
    },
    computed: {
        userName() {
            let name = '';
            let user = this.participant;
            if (user.groupAlias) {
                name = user.groupAlias;
            } else if (user.friendAlias) {
                name = user.friendAlias;
            } else if (user.displayName) {
                name = user.displayName;
            } else {
                name = user.name;
            }
            return name;
        }
    }
}
</script>

<style scoped>
.participant-video-item {
    display: flex;
    position: relative;
    width: var(--participant-video-item-width);
    height: var(--participant-video-item-height);
    /*background-color: rebeccapurple;*/

    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    background: #2d3033;
}

.participant-video-item.highlight {
    border: 2px solid #1FCA6A;
}

.participant-video-item .video-stream-tip-container {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.participant-video-item .avatar-container {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #2d3033;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50px;
}

.participant-video-item:hover .video-stream-tip-container {
    display: inline-block;
}

.participant-video-item .info-container {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    background: gray;
    border-radius: 1px;
    padding: 5px 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.info-container * {
    margin: 0 5px;
}

.info-container .name {
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.participant-video-item > video {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.participant-video-item p {
    max-height: 20px;
    color: white;
}

</style>
