<pre></pre>
<p class="message"></p>
<p>Frames / requests: <span class="framecount">0</span></p>
<p>Data Sent (approx): <span class="datacount">0</span></p>
<button>Play the "video"</button>
<h1>Emoji Video using Supabase</h1>
<p>If you are confused, this is a video that is made entirely from these 5 emojis: 🟥🟩🟦⬜⬛.</p>
<p>Each frame of the video is stored in a database (with each of the 144 rows in the image stored separately and then joined together in a Postgres function)</p>
<p>We then request each frame one after the other using the Supabase client library by calling our Postgres function we created</p>
pre{
font-size: min(0.375vw, 5px);
}
button{
margin: 20px;
padding: 30px;
font-size: 2rem;
}
var SUPABASE_URL = 'https://nesrdcgvystesnmlqjwq.supabase.co'
var SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im5lc3JkY2d2eXN0ZXNubWxxandxIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTIyMzkzNzIsImV4cCI6MjAyNzgxNTM3Mn0.yvlPWBccetxbSB_2M-VCZ10Rt8pXsiaV14Z-Tyds4KQ'
var supabase = supabase.createClient(SUPABASE_URL, SUPABASE_KEY)
console.log("test");
// supabase.from('endpoint')
// .insert({ title: document.title, URL: window.location.href })
// .then((response) => {
// console.log("RES", response);
// alert("done");
// })
// .catch((err) => {
// alert(err.response.text)
// })
const preHolder = document.querySelector('pre');
const btn = document.querySelector("button");
const frameCount = document.querySelector(".framecount");
const dataCount = document.querySelector(".datacount");
var iterationCount = 0;
var playState = 0;
var num = 1;
var frameNo = 0;
var dataNo = 0;
function pausePlay(){
if(playState == 1){
playState = 0;
btn.innerHTML = "Play the video";
return;
}
playState = 1;
btn.innerHTML = "Pause the video";
getPage(num);
return;
}
btn.addEventListener('click', pausePlay);
function getPage(){
if(playState == 0){
return;
}
if(num > 100){
num = 1;
iterationCount++;
}
if(iterationCount < 2){
supabase.rpc('get_frames', { frame: num })
.then((data) => {
frameNo++;
frameCount.innerHTML = frameNo;
dataNo+= 96;
dataCount.innerHTML = dataNo + "kb";
preHolder.innerHTML = data.data[0].frametext;
num++;
getPage();
})
.catch((err) => {
alert(err.response.text)
})
}else{
document.querySelector(".message").innerHTML = "The video only loops 2 times to prevent too much bandwidth being used, if you want to watch it again then reload the pen.";
preHolder.innerHTML = "";
};
}
//getPage();
// function getPages(){
// supabase.rpc('get_all_frames')
// .then((data) => {
// console.log("here", data.data);
// })
// .catch((err) => {
// alert(err.response.text)
// })
// }
// getPages();
This Pen doesn't use any external CSS resources.