JSFiddle - React, Tailwind, and code Playground

by heriberto perez

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

<!-- We execute the VidyoConnectorApp library on page load 
to hook up all of the events to elements. -->
<div id="vidyoConnector">
  <div id="options" class="optionsHide">    
    <form>
    <div id="optionsParameters">
    <p>
      <!-- The host of our backend service. -->
      <label>Host</label>
      <input type="text" id="host" value="prod.vidyo.io">
    </p>
    <p>
      <!-- A token that is derived from the deveoper key assigned to your account which will allow access for this particular instance.
      The token will contain user ID, expiration date and an optional vCard of the user.
      For test purposes, you can skip this and just insert anything you like, but your video sessions will be limited by duration. 
      For more information visit the developer section of http://vidyo.io -->
      <label>Token</label>
      <input type="text" id="token" placeholder="ACCESS-TOKEN" value="cHJvdmlzaW9uAGhlcmliZXJ0b0BmNDc2ZDQudmlkeW8uaW8ANjYzMzQyMDIxODYAADAyYzI3NWNjYzhlYjQ0ZjhlNTdjYjQ1ZjNhZDQ2MWI4NDNhN2FkOTdkYzgyODY5MDQ0MTc4NmI3OGI5ZmUzZGFkNTQ4YzEwM2Q0MDljNjI5YzMxZTY3NzQ2NWUxYjQ2Mg==">
    </p>
    <p>
      <!-- This is the display name that other users will see.
      -->
      <label for="displayName">Display Name</label>
      <input id="displayName" type="text" placeholder="Display Name" value="Guest">
    </p>
    <p>
      <!-- This is the "room" or "space" to which you're connecting
      the user. Other users who join this same Resource will be able to see and hear each other.
      -->
      <label for="resourceId">Resource ID</label>
      <input id="resourceId" type="text" placeholder="Conference Reference" value="SomeSecureKey89383RoomID">
    </p>
    </div>
    <p>
      <!-- On page load, this input is filled with a list of all the available cameras on the user's system. -->
      <label...

CSS

* {
	margin:       0;
	padding:      0;
}
html, body {
	width:        100%;
	height:       100%;
	font-family: 'robotolight', 'Open Sans', 'Helvetica', 'Arial', sans-serif;
}
#vidyoConnectorApp {
}
#options {
	position:     absolute;
	top:          0px;
	left:         0px;
	bottom:       60px;
	width:        350px;
	text-align: center;
}
#renderer {
	position:     absolute;
	top:          0px;
	right:        0px;
	bottom:       60px;
}
#helper {
	position:     absolute;
	top:          0px;
	left:         0px;
	width:        100%;
	height:       100%;
	background:   white;
	color:        #5d5d5d;
	font-weight:  300;
}
#helper table {
	max-width: 1200px;
	height: 100%;
	margin: auto;
}
#helper td {
	vertical-align: middle;
	text-align:     center;
	width:          800px;
	padding:        10px;
}
#helper img {
	vertical-align: middle;
}
.helperCheck {
	vertical-align: middle;
	text-align:		left;
	padding: 		10px;
}
.helperHeader, .helperFooter {
	padding:        30px 0px;
}
#helperText {
	font-size:  36px;
}
#helperText p {
	font-size:  16px;
}

.helperFooter a {
	font-size: 18px;
	text-align: center;
	text-decoration: none;
	background-color: #83C36D;
	display: inline-block;
	padding: 14px 0px 14px 0px;
	color: white;
	font-weight: normal;
	width: 200px;
	margin: auto;
	border-radius: 5px;
}
#helper ul {
	display:         inline-block;
	list-style-type: none;
}

#toolbar {
	position:          absolute;
	left:              0px;
	right:             0px;
	bottom:            0px;
	height:            60px;
	text-align:        center;
	background-color:  rgb(19, 38, 58);
}
.rendererWithOptions {
	left:         350px;
}
.rendererFullScreen {
	left:         0px;
}
.rendererFullScreenPermanent {
	left:         0px;
}
.hidden {
	display:      none;
}
.optionsHide {
	display:      none;
}
.optionsHidePermanent {
	display:      none;
}
#error {
	color:        red;
	font-size:    50%;
}
#message {
	font-size:    50%;
}

#participantStatus {
	color:        white;
	line-height: ...

JavaScript

window.onVidyoClientLoaded = function(status) {
  console.log("Status: " + status.state + "Description: " + status.description);
  switch (status.state) {
    case "READY":    // The library is operating normally
      $("#connectionStatus").html("Ready");
    $("#helper").addClass("hidden");
    // After the VidyoClient is successfully initialized a global VC object will become available 
    // All of the VidyoConnector gui and logic is implemented in VidyoConnector.js
    window.StartVidyoConnector(VC);
    break;
    case "RETRYING": // The library operating is temporarily paused
      $("#connectionStatus").html("Temporarily unavailable retrying in " + status.nextTimeout/1000 + " seconds");
    break;
    case "FAILED":   // The library operating has stopped
      ShowFailed(status); 
    $("#connectionStatus").html("Failed: " + status.description);
    break;
    case "FAILEDVERSION":   // The library operating has stopped
      UpdateHelperPaths(status); 
    ShowFailedVersion(status); 
    $("#connectionStatus").html("Failed: " + status.description);
    break;
    case "NOTAVAILABLE": // The library is not available
      UpdateHelperPaths(status); 
    $("#connectionStatus").html(status.description);
    break;
  }
  return true; // Return true to reload the plugins if not available
}
window.UpdateHelperPaths = function(status) {
  $("#helperPlugInDownload").attr("href", status.downloadPathPlugIn);
  $("#helperAppDownload").attr("href", status.downloadPathApp);
}
window.ShowFailed = function(status) {
  var helperText = '';	
  // Display the error
  helperText += '<h2>An error occurred, please reload</h2>';
  helperText += '<p>' + status.description + '</p>';

  $("#helperText").html(helperText);
  $("#failedText").html(helperText);
  $("#failed").removeClass("hidden");	
}
window.ShowFailedVersion = function(status) {
  var helperText = '';	
  // Display the error
  helperText += '<h4>Please Download a new plugIn and restart the browser</h4>';
 ...