JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="setup">
    <div style="display:none;" class="alert alert-danger">Enter Name!</div>
    <input class="form-control" type='text' id='nameInput' placeholder='Name' />
    <br />
    <button class="setup-finish btn btn-primary btn-block">Enter Room</button>
</div>
<div id='messagesDiv'>
</div>
<div class="form-froup">
 <input class="form-control" type='text' id='messageInput' placeholder='Message' />
</div>
<div class="mask"></div>

CSS

#messagesDiv{
    height:300px;
    overflow-y:scroll;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    padding:20px;
    border-bottom:2px #ddd solid;
    margin-bottom:20px;
}
.setup{
    position:fixed;
    top:50%;
    left:50%;
    width:200px;
    margin-left:-70px;
    margin-top:-40px;
    padding:20px;
    background-color:#fff;
    z-index:9999;
    border-radius:10px;
}
.mask{
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.6);
    position:fixed;
    top:0;
    z-index:8888;
}
.form-froup{
    padding:20px;
}

JavaScript

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'https://raw.githubusercontent.com/IonDen/ion.sound/master/sounds/button_tiny.mp3');


var myDataRef = new Firebase('https://yc1ey40f59l.firebaseio-demo.com/');
      //setup
    $(".setup-finish").click(function(){
        if($("#nameInput").val() != ""){
            $(".setup").fadeOut(function(){
                $(".mask").fadeOut();
            });
        }else{
            $(".alert").fadeIn();
        }
    });

      $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var name = $('#nameInput').val();
          var text = $('#messageInput').val();
          myDataRef.push({name: name, text: text});
          $('#messageInput').val('');
          audioElement.play();
        }
      });
      myDataRef.on('child_added', function(snapshot) {
        var message = snapshot.val();
        displayChatMessage(message.name, message.text);
      });
      function displayChatMessage(name, text) {
        $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
        $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
          audioElement.play();
          scanForVids();
      };

// Videos
function scanForVids(){
		jQuery('#messagesDiv div').contents()
		.filter(function(){
			return this.nodeType === 3;
		})
		.map(function(index, text){
			jQuery(text).replaceWith(
			                         text.textContent.replace(/(?:https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<br /><iframe class="video-iframe" width="420" height="250px" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe><br/>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>')
			                         );
		})
}