test_MT/public/arplayer.js

/**
 * @name arPlayer
 * @desc ar配套前端js插件
 * @version 1.1.0   ← 版本号已更新
 * @date 2023-09-27
 */

function ARPlayer(param) {
    this.$el = document.querySelector('#' + param.videoId)
    this.currentBrowserHWND = 0
    this.focus = false
    this.visible = true
    this.seq = new Date().getTime()
    this.init(param)
    this.SN = 'EVOAR_002'
    this.randomKey = new Date().getTime()
    this.heartInterval = null
    this.refreshPosition = false
    this.domVisible = true
    this.oldOuterPosition = ''
    this.oldInnerPosition = ''
}

/**
 * 计算元素在可视区域的绝对位置
 * 支持多层 iframe 嵌套（不跨域）
 */
function getPositionRect() {
    let innerRect = this.$el.getBoundingClientRect()
    
    // 添加调试日志
    console.log('AR Player Element:', this.$el);
    console.log('Element Rect Info:', innerRect);
    
    // 获取当前窗口的滚动位置
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop
    let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
    
    // 计算相对于视口的位置
    let pos = {
        posX: Math.round(innerRect.left + scrollLeft),
        posY: Math.round(innerRect.top + scrollTop),
        width: Math.round(innerRect.width),
        height: Math.round(innerRect.height)
    }

    console.log('Calculated Position:', pos);
    
    return {
        outerPosition: pos,
        innerPosition: pos
    }
}

function isDomVisible(el) {
    return el && (window.getComputedStyle(el).display !== 'none' ||
                  window.getComputedStyle(el).visibility !== 'hidden')
}

ARPlayer.prototype = {
    init: function (param) {
        let _this = this
        this.param = param
        if (window.arPluginWebsocket) {
            window.arPluginWebsocket.close()
        }
        window.arPluginWebsocket = new WebSocket('ws://localhost:5878')
        window.arPluginWebsocket.binaryType = 'arraybuffer'
        window.arPluginWebsocket.onopen = function () {
            console.log('AR WebSocket 连接成功')
            _this.sendMsg('setCurrentBrowserHWND', {})
            _this.heartInterval = setInterval(() => _this.heartbeat(), 30000)
        }
        window.arPluginWebsocket.onmessage = this.receivsMsg.bind(this)
        window.arPluginWebsocket.onerror = () => console.warn('AR WebSocket 错误')
        window.arPluginWebsocket.onclose  = () => console.log('AR WebSocket 关闭')
    },

    login: function () {
        this.sendMsg('login', {
            browserType: 1,
            userName: this.param.userName,
            userPwd: this.param.userPwd,
            loginPort: this.param.loginPort,
            currentBrowserHWND: this.currentBrowserHWND,
            loginType: 0,
            memorizePwd: 0,
            quitWhenWebPageClosed: 0,
            randomKey: this.randomKey,
            showTree: 0,
            skin: 'DustyBlue'
        })
    },

    createCb: function () {
        document.visibilityState === 'visible' ? this.showPlugin() : this.hidePlugin()
        document.addEventListener('visibilitychange', this.visibilitychange.bind(this), true)
        window.addEventListener('beforeunload', this.beforeUnload.bind(this))
        document.addEventListener('click', this.setTopBind)
        this.param.createSuccess && this.param.createSuccess()
    },

    visibilitychange: function () {
        document.visibilityState === 'visible' ? this.showPlugin() : this.hidePlugin()
    },

    beforeUnload: function () {
        this.logout()
        window.arPluginWebsocket = null
    },

    heartbeat: function () {
        this.sendMsg('heartbeat', {})
    },

    browserFocusBlur: function () {
        this.sendMsg('browserFocusBlur', {
            show: this.visible,
            focus: this.focus
        })
    },

    focusHandler: function () {
        this.focus = true
        this.browserFocusBlur()
    },

    blurHandler: function () {
        this.focus = false
        this.browserFocusBlur()
    },

    showPlugin: function () {
        let { outerPosition, innerPosition } = getPositionRect.call(this)
        console.log('Show Plugin with positions:', { outerPosition, innerPosition });
        this.focusHandler()
        this.sendMsg('showPage', {
            outerPosition,
            innerPosition,
            pageParam: {},
            paramMoz: {},
            sn: this.SN
        })
        this.refreshPosition = true
        this.handleAdjust()
    },

    hidePlugin: function () {
        this.blurHandler()
        this.sendMsg('hidePage', { sn: this.SN })
        if (this.refreshTimer) {
            cancelAnimationFrame(this.refreshTimer)
            this.refreshTimer = null
        }
        this.refreshPosition = false
    },

    destroyPlugin: function () {
        this.logout()
    },

    handleAdjust: function () {
        let _this = this
        this.refreshPos()
        if (this.domVisible !== isDomVisible(this.$el)) {
            this.domVisible ? this.hidePlugin() : this.showPlugin()
            this.domVisible = isDomVisible(this.$el)
        }
        this.refreshTimer = requestAnimationFrame(() => _this.handleAdjust())
    },

    refreshPos: function () {
        let { outerPosition, innerPosition } = getPositionRect.call(this)
        let outer = JSON.stringify(outerPosition)
        let inner = JSON.stringify(innerPosition)
        if (this.oldOuterPosition === outer && this.oldInnerPosition === inner) return

        this.oldOuterPosition = outer
        this.oldInnerPosition = inner
        this.sendMsg('adjustSizePosition', {
            outerPosition,
            innerPosition,
            paramMoz: {},
            sn: this.SN
        })
    },

    sendMsg: function (method, params) {
        window.arPluginWebsocket.send(JSON.stringify({
            method,
            loginIp: this.param.loginIp,
            params: { ...params, seq: this.seq++ },
            randomKey: this.randomKey,
            userCode: this.param.userName
        }))
    },

    logout: function () {
        this.sendMsg('logout', {})
        clearInterval(this.heartInterval)
        this.heartInterval = null
        if (this.refreshTimer) {
            cancelAnimationFrame(this.refreshTimer)
            this.refreshTimer = null
        }
        this.refreshPosition = false
    },

    receivsMsg: function (evt) {
        let data = JSON.parse(evt.data)
        switch (data.method) {
            case 'notifyCurrentBrowserHWND':
                this.currentBrowserHWND = data.params.hWnd
                this.login()
                break
            case 'loginState':
            case 'loginConfirmFromClient':
            case 'runinfo':
                if (data.loginIp === this.param.loginIp) {
                    if (data.params.loginResult === 0) {
                        this.logined = true
                        this.visible = document.visibilityState === 'visible'
                        this.createCb()
                    } else if (data.params.loginResult === -3) {
                        if (data.params.errMsg.includes('已登录')) {
                            this.createCb()
                        } else {
                            this.logout()
                        }
                    } else if (data.params.loginResult === -1 &&
                               data.params.errMsg === '登录插件客户端超时') {
                        this.login()
                    } else {
                        this.param.createError && this.param.createError(data.params)
                    }
                }
                break
        }
    }
}