개요

• 채팅내용이 뜨는곳 위에 div 를 생성하여 유튜브 띄울 자리를 마련합니다.
• 관리권한이 부관리자 이상이 유저가 !youtube 주소 를 채팅방에 입력하면 모든 유저들의 div 에 유튜브가 보입니다.

 

사용된 API

• events
• room.plugin
• room.skin.dom
• room.skin.menubar

 

소스

<script> // youtubePlay 플러그인
var uchat_youtube = {min_auth : 1}; // 플러그인 설정 부분입니다.
U.chat('*').on('after.create#youtube', function(room, data) { // youtubePlay 라는 아이디를 가지는 after.create 이벤트를 등록합니다./
    var dom = $('<div />').css({'position': 'absolute', 'top':0, left:0, right:0, zIndex:11}); // 유튜브가 표시될 객체입니다.
    var contentDom = room.skin.dom.content;//$('.middle .contentWrap', room.skin.document); // 스킨내부에서 대화가 보이는 부분을 가져옵니다.
    var channel = room.plugin.add('youtube'); // 채널을 가져옵니다.
    // install
    contentDom.append(dom); // dom 을 스킨 내부에 설치합니다.

    function isAble(auth) { // 최소한의 권한이 있는 자가 보내온것인지 확인하는 함수입니다.
        return uchat_youtube['min_auth'] <= auth;
    }

    function display(room, data) { // dom 에 youtube 를 설치하는 함수입니다.
        if(data.data) {
            var parse = /^(.{11})$/.exec(data.data[0]); // 데이터가 11자리이인지 검증합니다.
            if(parse) {
                if(isAble(data.user && data.user.auth)) { //유저의 권한이 잇는지 확인합니다.
                    var width = contentDom.width();
                    var height = contentDom.width()/16*9; // 높이는 16:9 로 설정됩니다.
                    dom.width(width).height(height).html('<iframe src="https://www.youtube.com/embed/'+parse.pop()+'" style="width:100%; height:100%;" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'); // 아이프레임을 dom 안에 설치합니다.
                }
            }
        }
    }

    function parseCommand(data) { // 채팅입력칸에서 보내는 내용을 감지합니다.
        if(data[0]) {
            var parse = /(https?:\/\/|\/\/)?(www\.)?youtu(be\.com|\.be)(\/\watch\?v\=|\/embed\/|\/)(.{11})/.exec(data[0]); // 정규식을 이용하여 youtube 주소 인지 판단합니다.
            if(parse) {
                if(isAble(room.my.auth)) { // 내 권한이 보낼 권한이 되는지 확인합니다.
                    channel.send(parse.pop()); // 채널에 전파합니다.
                }
            }
        } else { // 주소 없이 !youtube 만 실행됐을경우입니다.
            room.skin.popup.prompt('유튜브', '주소를 입력해주세요.', '', function( data ) { // 주소를 물어봅니다.
                if (data) { // 주소가 있다면
                    room.action.plugin('youtube', [data]); // plugin을 실행합니다.
                }
            });
        }
    }

    channel.onReceived(display); // 채널 listener 콜백함수를 등록해줍니다.
    channel.addParser(parseCommand);
    room.skin.menubar.add( { // menubar 에 메뉴를 추가합니다.
        id : 'youtube',
        title : '유튜브',
        html : '<div>유튜브</div>',
        condition:function( room, data ) {
            return isAble(room.my.auth);
        },
        onClick: function( room, data ) {
            room.action.plugin('youtube', []); // 빈주소가 들어오면 주소를 다시한번 더 물어보게 작동합니다. ( parser 에서 )
        }
    });
    room.on('after.join#youtube', function(room, data) { // 유저가 채팅방에 접속하면 플러그인이 작동한다는 사실을 알려줍니다.
        room.print('유튜브 플러그인 작동');
    });
});
</script>