JSFiddle - React, Tailwind, and code Playground

by edwardsharp

HTML

<script src="https://content.jwplatform.com/libraries/IDzF9Zmk.js"></script>
<div class="player-container">
	<div id="player"></div>
	<div class="sidebar">
		<div id="searchbox" class="searchbox">
      <label for="search">Search</label>
      <span id="match" class="match">0 of 0</span>
		  <input id="search" type="search" class="search" />
		</div>
		<div id="transcript" class="transcript"></div>
	</div>
</div>

CSS

body{
  background-color: black;
  color: white;
}

.player-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.sidebar {
  width: 360px;
  height: 360px;
  background-color: #000;
  color: white;
  font-family: Arial, sans-serif;
}


@media screen and (max-width: 1080px) {
  .sidebar {
    width: 640px;
    margin-bottom: 20px;
  }
}

.sidebar h3 {
  padding: 20px;
  margin: 0;
  font-size: 14px;
  color: #fff;
  text-align: left;
}

.searchbox {
   margin: 10px 20px;
   display: block;
   position: relative;
}

.searchbox input {
  line-height: 20px;
  font-size: 16px;
  color: #000;
  width: 100%;
  padding: 5px 20px 5px 30px;
  background: #fff url('//s3.amazonaws.com/demo.jwplayer.com/interactive-transcript/search.png') no-repeat top left;
  border-radius: 3px;
  border: none;
}

.searchbox .match {
  position: absolute;
  right: 10px;
  /* top: 20px; */
  line-height: 20px;
  font-size: 14px;

}

.transcript {
  padding: 20px;
  max-height: 80%;
  overflow: auto;
}

.transcript p {
  font-size: 15px;
  overflow: hidden;
  text-align: left;
  color: #fff;
  line-height: 20px;
}

.transcript span {
  display: inline;
  padding: 4px 2px;
  line-height: 24px;
  cursor: pointer;
  color: #fff;
}

.transcript span.current {
  background: #ff6600;
  color: #000;
}

.transcript span:not(.current):hover {
  color: #ff6600;
}

.transcript span em {
  font-style: normal;
  background: #666;
  color: #FFF;
}

.transcript span em.current {
  background: #ff0046;
}

.transcript h4 {
  margin: 25px 0 15px 0;
  text-align: left;
  color: #fff;
  font-weight: bold;
}

JavaScript

var chapters = [];
var captions = [];
var caption = -1;
var matches = [];
var query = "";
var cycle = -1;

var transcript = document.getElementById('transcript');
var search = document.getElementById('search');
var match = document.getElementById('match');



// Setup JW Player
jwplayer("player").setup({
    file: '//content.jwplatform.com/manifests/3p683El7.m3u8',
    image: '//content.jwplatform.com/thumbs/3p683El7-640.jpg',
    tracks: [
      { file: "https://raw.githubusercontent.com/jwplayer/jwdeveloper-demos/master/demos/innovation/interactive-transcripts/assets/chapters.vtt", kind: "chapters" },
      { file: "https://raw.githubusercontent.com/jwplayer/jwdeveloper-demos/master/demos/innovation/interactive-transcripts/assets/captions.vtt", kind: "captions" },
      { file: "//content.jwplatform.com/strips/3p683El7-120.vtt", kind: "thumbnails" }

    ],
    displaytitle: false,
    width: 640,
    height: 360
});
jwplayer().addButton(
  "https://raw.githubusercontent.com/jwplayer/jwdeveloper-demos/master/demos/innovation/interactive-transcripts/assets/download.png",
  "Download Slides",
  function() {
    window.location.href = "https://raw.githubusercontent.com/jwplayer/jwdeveloper-demos/master/demos/innovation/interactive-transcripts/assets/state-html5-video.pdf";
  },
  "download"
);




// Load chapters / captions
jwplayer().on('ready', function(){
  var r = new XMLHttpRequest();
  r.onreadystatechange = function() {
    if (r.readyState == 4 && r.status == 200) {
      var t = r.responseText.split("\n\n");
      t.shift();
      for(var i=0; i<t.length; i++) {
        var c = parse(t[i]);
        chapters.push(c);
      }
      loadCaptions();
    }
  };
  r.open('GET','https://raw.githubusercontent.com/jwplayer/jwdeveloper-demos/master/demos/innovation/interactive-transcripts/assets/chapters.vtt',true);
  r.send();
});
function loadCaptions(){
  var r = new XMLHttpRequest();
  r.onreadystatechange = function() {
    if (r.readyState == 4 && r.status...