noopkat/main.css

## main.css
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: rgba(0,0,0,0);
}

#transcriptContainer {
  background-color: rgba(0,0,0,0.6);
  width: 100%;
  position: fixed;
  bottom: 0px;
  overflow: hidden;
  clear: both;
}

#transcript {
  color: white;
  font-size: 18px;
  position: absolute;
  transform: translateY(0px);
  width: 100%;
  padding: 0 10px 0 10px;
  -webkit-transition: transform .3s;
  transition: transform .3s;
  line-height: 1.5em;
}

#measure {
  display: block;
}

## viewer.html
<html>
  <head>
    <title>twitch a11y captions frontend</title>
    <link rel="stylesheet" href="main.css"/>
  </head>
  <body>
    <div id="transcriptContainer">
      <div id="transcript">
        <span id="measure">LOADING<br/>...</span>
      </div>
    </div>
    <script src="viewer.js"></script>
  </body>
</html>

## viewer.js
const transcriptBox = document.getElementById('transcript');
const measure = document.getElementById('measure');

const tPadd = window.getComputedStyle(measure, null).getPropertyValue('height');
const tPadding = Number(tPadd.substr(0, tPadd.length-2));

// set height of the container dynamically
document.getElementById('transcriptContainer').style.height = tPadding + 'px';

// cache current height of transcript box
let prevHeight = transcriptBox.clientHeight;

// reset content after measuring height
transcriptBox.innerHTML = '';

// replaxce this with an on translation socket event
window.Twitch.ext.listen('broadcast',(target, contentType, message) => {
  console.log('message!', message, target, contentType);
  const parsedMessage = JSON.parse(message);
  if (target === 'broadcast' && parsedMessage.type === 'caption') {
    transcriptBox.innerHTML += `${parsedMessage.caption.toUpperCase()}<br/>`;
  }
});

// each time the transcript box receives new content, check if we need to scroll the text up
const observer = new MutationObserver((mutation) => {
  const nextHeight = transcriptBox.clientHeight;
  if (nextHeight > prevHeight) {
    prevHeight = nextHeight;
    transcriptBox.style.transform = `translateY(${tPadding - transcriptBox.clientHeight}px)`;
  };
});

// start observing mutations
observer.observe(transcriptBox, {childList: true});

// for testing
//  const i = setInterval(() => {transcript.innerHTML += "ANOTHER CAPTION HAS ARRIVED "}, 500);
	body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	background-color: rgba(0,0,0,0);
	}

	#transcriptContainer {
	background-color: rgba(0,0,0,0.6);
	width: 100%;
	position: fixed;
	bottom: 0px;
	overflow: hidden;
	clear: both;
	}

	#transcript {
	color: white;
	font-size: 18px;
	position: absolute;
	transform: translateY(0px);
	width: 100%;
	padding: 0 10px 0 10px;
	-webkit-transition: transform .3s;
	transition: transform .3s;
	line-height: 1.5em;
	}

	#measure {
	display: block;
	}
	<html>
	<head>
	<title>twitch a11y captions frontend</title>
	<link rel="stylesheet" href="main.css"/>
	</head>
	<body>
	<div id="transcriptContainer">
	<div id="transcript">
	<span id="measure">LOADING<br/>...</span>
	</div>
	</div>
	<script src="viewer.js"></script>
	</body>
	</html>
	const transcriptBox = document.getElementById('transcript');
	const measure = document.getElementById('measure');

	const tPadd = window.getComputedStyle(measure, null).getPropertyValue('height');
	const tPadding = Number(tPadd.substr(0, tPadd.length-2));

	// set height of the container dynamically
	document.getElementById('transcriptContainer').style.height = tPadding + 'px';

	// cache current height of transcript box
	let prevHeight = transcriptBox.clientHeight;

	// reset content after measuring height
	transcriptBox.innerHTML = '';

	// replaxce this with an on translation socket event
	window.Twitch.ext.listen('broadcast',(target, contentType, message) => {
	console.log('message!', message, target, contentType);
	const parsedMessage = JSON.parse(message);
	if (target === 'broadcast' && parsedMessage.type === 'caption') {
	transcriptBox.innerHTML += `${parsedMessage.caption.toUpperCase()}<br/>`;
	}
	});

	// each time the transcript box receives new content, check if we need to scroll the text up
	const observer = new MutationObserver((mutation) => {
	const nextHeight = transcriptBox.clientHeight;
	if (nextHeight > prevHeight) {
	prevHeight = nextHeight;
	transcriptBox.style.transform = `translateY(${tPadding - transcriptBox.clientHeight}px)`;
	};
	});

	// start observing mutations
	observer.observe(transcriptBox, {childList: true});

	// for testing
	// const i = setInterval(() => {transcript.innerHTML += "ANOTHER CAPTION HAS ARRIVED "}, 500);