NN2023031201/web/assets/common/plugins/umeditor/dialogs/video/video.js

(function(){
    var domUtils = UM.dom.domUtils;
    var widgetName = 'video';

    UM.registerWidget( widgetName,{

        tpl: "<link rel=\"stylesheet\" type=\"text/css\" href=\"<%=video_url%>video.css\" />" +
            "<div class=\"edui-video-wrapper\">" +
            "<div id=\"eduiVideoTab\">" +
            "<div id=\"eduiVideoTabHeads\" class=\"edui-video-tabhead\">" +
            "<span tabSrc=\"video\" class=\"edui-video-focus\"><%=lang_tab_insertV%></span>" +
            "</div>" +
            "<div id=\"eduiVideoTabBodys\" class=\"edui-video-tabbody\">" +
            "<div id=\"eduiVideoPanel\" class=\"edui-video-panel\">" +
            "<table>" +
            "<tr>" +
            "   <td>" +
            "       <label for=\"eduiVideoUrl\" class=\"edui-video-url\"><%=lang_video_url%></label>" +
            "   </td>" +
            "   <td>" +
            "       <input id=\"eduiVideoUrl\" type=\"text\" placeholder=\"请输入视频url（必填）\">" +
            "   </td>" +
            "</tr>" +
            "<tr>" +
            "   <td>" +
            "       <label for=\"eduiVideoPoster\" class=\"edui-video-poster\">视频封面</label>" +
            "   </td>" +
            "   <td><input id=\"eduiVideoPoster\" type=\"text\" placeholder=\"请输入封面图url（非必填）\"></td>" +
            "</tr>" +
            // "<tr>" +
            // "   <td>" +
            // "       <label for=\"eduiVideoPoster\" class=\"edui-video-poster\">自动播放</label>" +
            // "   </td>" +
            // "   <td>" +
            // "       <label>" +
            // "           <input class='eduiVideoAutoPlay' name=\"auto_play\" type=\"radio\" checked>" +
            // "           <span> 否 </span>" +
            // "       <label>" +
            // "       <label>" +
            // "           <input class='eduiVideoAutoPlay' name=\"auto_play\" type=\"radio\">" +
            // "           <span> 是 </span>" +
            // "       <label>" +
            // "   </td>" +
            // "</tr>" +
            "</table>" +
            "<div id=\"eduiVideoPreview\"></div>" +
            "<div id=\"eduiVideoInfo\">" +
            "<fieldset>" +
            "<legend><%=lang_video_size%></legend>" +
            "<table>" +
            // "<tr><td><label for=\"eduiVideoWidth\"><%=lang_videoW%></label></td><td><input class=\"edui-video-txt\" id=\"eduiVideoWidth\" type=\"text\"/></td></tr>" +
            "<tr>" +
            "   <td><label for=\"eduiVideoHeight\"><%=lang_videoH%></label></td>" +
            "   <td><input class=\"edui-video-txt\" id=\"eduiVideoHeight\" value=\"190\" type=\"text\"/></td>" +
            "</tr>" +
            "</table>" +
            "</fieldset>" +
            "<fieldset>" +
            "<legend><%=lang_alignment%></legend>" +
            "<div id=\"eduiVideoFloat\"></div>" +
            "</fieldset>" +
            "</div>" +
            "</div>" +
            "</div>" +
            "</div>" +
            "</div>",
        initContent:function( editor, $widget ){

            var me = this,
                lang = editor.getLang( widgetName),
                video_url = UMEDITOR_CONFIG.UMEDITOR_HOME_URL + 'dialogs/video/';

            me.lang = lang;
            me.editor = editor;
            me.$widget = $widget;
            me.root().html( $.parseTmpl( me.tpl, $.extend( { video_url: video_url }, lang['static'] ) ) );

            me.initController( lang );

        },
        initEvent:function(){

            var me = this,
                url = $("#eduiVideoUrl", me.$widget)[0];

            if( 'oninput' in url ) {
                url.oninput = function(){
                    me.createPreviewVideo( this.value );
                };
            } else {
                url.onpropertychange = function () {
                    me.createPreviewVideo( this.value );
                }
            }

        },
        initController: function( lang ){

            var me = this,
                img = me.editor.selection.getRange().getClosedNode(),
                url;

            me.createAlignButton( ["eduiVideoFloat"] );

            //编辑视频时初始化相关信息
            if(img && img.className == "edui-faked-video"){
                $("#eduiVideoUrl", me.$widget)[0].value = url = img.getAttribute("_url");
                $("#eduiVideoWidth", me.$widget)[0].value = img.width;
                $("#eduiVideoHeight", me.$widget)[0].value = img.height;
                var align = domUtils.getComputedStyle(img,"float"),
                    parentAlign = domUtils.getComputedStyle(img.parentNode,"text-align");
                me.updateAlignButton(parentAlign==="center"?"center":align);
            }
            me.createPreviewVideo(url);

        },
        /**
         * 根据url生成视频预览
         */
        createPreviewVideo: function(url){

            if ( !url )return;

            var me = this;
                // lang = me.lang,
                // conUrl = me.convert_url(url);

            // if(!me.endWith(conUrl,[".swf",".flv",".wmv"])){
            //     $("#eduiVideoPreview", me.$widget).html( lang.urlError );
            //     return;
            // }

            $("#eduiVideoPreview", me.$widget)[0].innerHTML = '<video src="' + url + '" controls></video>';

        },
        /**
         * 将单个视频信息插入编辑器中
         */
        insertSingle: function(){

            var me = this,
                // width = $("#eduiVideoWidth", me.$widget)[0],
                height = $("#eduiVideoHeight", me.$widget)[0],
                url = $('#eduiVideoUrl', me.$widget)[0].value,
                poster = $('#eduiVideoPoster', me.$widget)[0].value,
                align = this.findFocus("eduiVideoFloat","name");

            if(!url) return false;
            if ( !me.checkNum( [ height] ) ) return false;
            this.editor.execCommand('insertvideo', {
                url: me.convert_url(url),
                // width: width.value,
                poster: poster,
                height: height.value,
                align: align
            });

        },
        /**
         * URL转换
         */
        convert_url: function(url){
            if ( !url ) return '';
            var matches = url.match(/youtu.be\/(\w+)$/) ||
                    url.match(/youtube\.com\/watch\?v=(\w+)/) ||
                    url.match(/youtube.com\/v\/(\w+)/),
                youku = url.match(/youku\.com\/v_show\/id_(\w+)/),
                youkuPlay = /player\.youku\.com/ig.test(url);

            if(youkuPlay){
                url = url.replace(/\?f=.*/, "");
            } else if (matches){
                url = "https://www.youtube.com/v/" + matches[1] + "?version=3&feature=player_embedded";
            }else if(youku){
                url = "http://player.youku.com/player.php/sid/"+youku[1]+"/v.swf"
            } else {
                url = url.replace(/http:\/\/www\.tudou\.com\/programs\/view\/([\w\-]+)\/?/i, "http://www.tudou.com/v/$1")
                    .replace(/http:\/\/www\.youtube\.com\/watch\?v=([\w\-]+)/i, "http://www.youtube.com/v/$1")
                    .replace(/http:\/\/v\.youku\.com\/v_show\/id_([\w\-=]+)\.html/i, "http://player.youku.com/player.php/sid/$1")
                    .replace(/http:\/\/www\.56\.com\/u\d+\/v_([\w\-]+)\.html/i, "http://player.56.com/v_$1.swf")
                    .replace(/http:\/\/www.56.com\/w\d+\/play_album\-aid\-\d+_vid\-([^.]+)\.html/i, "http://player.56.com/v_$1.swf")
                    .replace(/http:\/\/v\.ku6\.com\/.+\/([^.]+)\.html/i, "http://player.ku6.com/refer/$1/v.swf")
                    .replace(/\?f=.*/, "");
            }
            return url;
        },
        /**
         * 检测传入的所有input框中输入的长宽是否是正数
         */
        checkNum: function checkNum( nodes ) {

            var me = this;

            for ( var i = 0, ci; ci = nodes[i++]; ) {
                var value = ci.value;
                if ( !me.isNumber( value ) && value) {
                    alert( me.lang.numError );
                    ci.value = "";
                    ci.focus();
                    return false;
                }
            }
            return true;
        },
        /**
         * 数字判断
         * @param value
         */
        isNumber: function( value ) {
            return /(0|^[1-9]\d*$)/.test( value );
        },
        updateAlignButton: function( align ) {
            var aligns = $( "#eduiVideoFloat", this.$widget )[0].children;

            for ( var i = 0, ci; ci = aligns[i++]; ) {
                if ( ci.getAttribute( "name" ) == align ) {
                    if ( ci.className !="edui-video-focus" ) {
                        ci.className = "edui-video-focus";
                    }
                } else {
                    if ( ci.className =="edui-video-focus" ) {
                        ci.className = "";
                    }
                }
            }

        },
        /**
         * 创建图片浮动选择按钮
         * @param ids
         */
        createAlignButton: function( ids ) {
            var lang = this.lang,
                vidoe_home = UMEDITOR_CONFIG.UMEDITOR_HOME_URL + 'dialogs/video/';

            for ( var i = 0, ci; ci = ids[i++]; ) {
                var floatContainer = $( "#" + ci, this.$widget ) [0],
                    nameMaps = {"none":lang['default'], "left":lang.floatLeft, "right":lang.floatRight};
                for ( var j in nameMaps ) {
                    var div = document.createElement( "div" );
                    div.setAttribute( "name", j );
                    if ( j == "none" ) div.className="edui-video-focus";
                    div.style.cssText = "background:url("+ vidoe_home +"images/" + j + "_focus.jpg);";
                    div.setAttribute( "title", nameMaps[j] );
                    floatContainer.appendChild( div );
                }
                this.switchSelect( ci );
            }
        },
        /**
         * 选择切换
         */
        switchSelect: function( selectParentId ) {
            var selects = $( "#" + selectParentId, this.$widget )[0].children;
            for ( var i = 0, ci; ci = selects[i++]; ) {
               $(ci).on("click", function () {
                    for ( var j = 0, cj; cj = selects[j++]; ) {
                        cj.className = "";
                        cj.removeAttribute && cj.removeAttribute( "class" );
                    }
                    this.className = "edui-video-focus";
                } )
            }
        },
        /**
         * 找到id下具有focus类的节点并返回该节点下的某个属性
         * @param id
         * @param returnProperty
         */
        findFocus: function( id, returnProperty ) {
            var tabs = $( "#" + id , this.$widget)[0].children,
                property;
            for ( var i = 0, ci; ci = tabs[i++]; ) {
                if ( ci.className=="edui-video-focus" ) {
                    property = ci.getAttribute( returnProperty );
                    break;
                }
            }
            return property;
        },
        /**
         * 末尾字符检测
         */
        endWith: function(str,endStrArr){
            for(var i=0,len = endStrArr.length;i<len;i++){
                var tmp = endStrArr[i];
                if(str.length - tmp.length<0) return false;

                if(str.substring(str.length-tmp.length)==tmp){
                    return true;
                }
            }
            return false;
        },
        width:610,
        height:498,
        buttons: {
            ok: {
                exec: function( editor, $w ){
                    $("#eduiVideoPreview", $w).html("");
                    editor.getWidgetData(widgetName).insertSingle();
                }
            },
            cancel: {
                exec: function(){
                    //清除视频
                    $("#eduiVideoPreview").html("");
                }
            }
        }
    });

})();