<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();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.42.0/dist/umd/supabase.min.js