history.html

{% extends "web/app/app_base.html" %} {% load static %} {% block app %}

<span class="indicator-item badge">Coming soon!</span>
<p class="text-xl font-bold">History</p>
<p class="text-sm">History of everything that you've generated.</p>

<div id='app'> 
    </div> 
    <div id='target'> </div>
<script
  src="{% static 'js/loomhq/record-sdk/dist/cjs/index.js' %}"
></script>
<script
  src="{% static 'js/loomhq/loom-embed/dist/cjs/index.js' %}"
></script>
<meta name="referrer" content="origin">
{% comment %} <div> {{jwt}}</div> {% endcomment %}
<script>
  const PUBLIC_APP_ID = "530b085e-ed69-4a79-bb49-038be0e2d445";
  const BUTTON_ID = "loom-record-sdk-button";

  function insertEmbedPlayer(html) {
    const target = document.getElementById("target");

    if (target) {
      target.innerHTML = html;
    }
  }

  async function init() {
    const { supported, error } = await loomSdk.isSupported();

    if (!supported) {
      console.warn(`Error setting up Loom: ${error}`);
      return;
    }

    const root = document.getElementById("app");

    if (!root) {
      return;
    }

    root.innerHTML = `<button id="${BUTTON_ID}">Record</button>`;

    const button = document.getElementById(BUTTON_ID);

    if (!button) {
      return;
    }
    console.log('{{ jws|safe }}')
    const { configureButton } = await loomSdk.setup({
      publicAppId: PUBLIC_APP_ID,
      jws: '{{ jws|safe }}'
    });

    const sdkButton = configureButton({ element: button });

    sdkButton.on("insert-click", async (video) => {
      const { html } = await loomEmbed.oembed(video.sharedUrl, { width: 400 });
      insertEmbedPlayer(html);
    });
  }

  init();
</script>

{% endblock %}