ps-tcplayer/src/utils.js

Tencent Cloud Player component with Vue2/Vue3 compatibility

/**
 * 加载外部资源（JS、CSS）
 * @param {Array} sources - 资源URL数组
 * @param {Function} cb - 加载完成回调
 */
export function loadResource(sources, cb) {
    let arr = [...sources]
    if (!arr.length) {
        cb && cb()
        console.log('resource loaded')
        return false
    }
    let item = arr.shift()
    if (!item) {
        loadResource(arr, cb)
        return false
    }
    if (item.endsWith('.js')) {
        getJS(item, () => {
            loadResource(arr, cb)
        })
    } else if (item.endsWith('.css')) {
        getCss(item, () => {
            loadResource(arr, cb)
        })
    } else {
        console.warn('unsupported resource:', item)
        loadResource(arr, cb)
    }
}

/**
 * 加载JS文件
 * @param {String} url - JS文件URL
 * @param {Function} callback - 加载完成回调
 */
function getJS(url, callback) {
    if(document.querySelector(`script[src="${url}"]`)) {
        console.log(url, ': already loaded')
        callback && callback();
        return false
    }
    var script = document.createElement('script'),
        fn = callback || function(){};
    script.type = 'text/javascript'

    // IE
    if(script.readyState) {
        script.onreadystatechange = function() {
            if(script.readyState == 'loaded' || script.readyState == 'complete') {
                script.onreadystatechange = null;
                fn();
            } else {
                script.onreadystatechange = null;
                fn();
            }
        };
    } else {
        // 其他浏览器
        script.onload = function() {
            fn();
        };
        script.onerror = function(err) {
            fn();
            console.log(err)
        };
    }
    script.src = url;
    document.querySelector('body').appendChild(script)   
}

/**
 * 加载CSS文件
 * @param {String} url - CSS文件URL
 * @param {Function} callback - 加载完成回调
 */
function getCss(url, callback) {
    if(document.querySelector(`link[href="${url}"]`)) {
        console.log(url, ': already loaded')
        callback && callback();
        return false
    }
    var css = document.createElement('link'),
        fn = callback || function(){};
    css.rel = 'stylesheet';
    
    // IE
    if(css.readyState) {
        css.onreadystatechange = function() {
            if(css.readyState == 'loaded' || css.readyState == 'complete') {
                css.onreadystatechange = null;
                fn();
            } else {
                css.onreadystatechange = null;
                fn();
            }
        };
    } else {
        // 其他浏览器
        css.onload = function() {
            fn();
        };
        css.onerror = function(err) {
            fn();
            console.log(err)
        };
    }
    css.href = url;
    document.querySelector('head').appendChild(css)   
}

/**
 * 解析DOM字符串为DOM元素
 * @param {String} html - HTML字符串
 * @returns {Node} - DOM节点
 */
export function parseDom(html) {
    let ele = document.createElement('div')
    ele.innerHTML = html.trim()
    return ele.childNodes[0]
}

/**
 * 在目标元素之后插入新元素
 * @param {Element} newElement - 要插入的新元素
 * @param {Element} targetElement - 目标元素
 */
export function afterinsert(newElement, targetElement) {
    const parent = targetElement.parentNode;
    if (parent.lastChild === targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

/**
 * 判断是否为DOM元素
 * @param {any} node - 要检查的节点
 * @returns {Boolean} - 是否为元素
 */
export function isElement(node) {
    return node instanceof Element || node instanceof HTMLDocument
} 

export const STORAGE_KEYS = {
    VOLUME: 'cto_ali_player_vol',
    RATE: 'cto_video_Rate',
  }
  
// 本地存储工具函数
export const localStore = {
    get(key, defaultVal) {
        try {
        const val = localStorage.getItem(key)
        return val !== null ? JSON.parse(val) : defaultVal
        } catch (e) {
        console.error('获取本地存储失败:', e)
        return defaultVal
        }
    },
    set(key, val) {
        try {
        localStorage.setItem(key, JSON.stringify(val))
        } catch (e) {
        console.error('设置本地存储失败:', e)
        }
    }
}