index.html

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

<script src="{% static 'js/loomhq/record-sdk/dist/cjs/index.js' %}"></script>
<script src="{% static 'js/loomhq/loom-embed/dist/cjs/index.js' %}"></script>

<div id="app">
  <label ref="targetDiv" id='loom_is_ready' class='hidden'></label>
    <label class="hidden" id="script1-url"></label>
    <label class="hidden" id="script2-url"></label>
  <span class="indicator-item badge">Record your Scripts!</span>
  <nav aria-label="Progress" class="my-8">
    <ol
      role="list"
      class="space-y-4 md:flex md:space-y-0 md:space-x-8 mt-2 mb-1"
    >
      <li class="md:flex-1">
        <a
          {% comment %} href="{% url 'new_campaign' %}" {% endcomment %}
          class="group flex flex-col border-l-4 border-gray-200 py-2 pl-4  md:border-l-0 md:border-t-4 md:pl-0 md:pt-4 md:pb-0"
        >
          <span
            class="text-sm font-medium text-indigo-600 group-hover:text-indigo-800"
            >Step 1</span
          >
          <span class="text-sm font-medium">Create Campaign</span>
        </a>
      </li>
      <li class="md:flex-1">
        <a
          {% comment %} href="{% url 'edit_script' %}" {% endcomment %}
          class="group flex flex-col border-l-4 border-gray-200 py-2 pl-4  md:border-l-0 md:border-t-4 md:pl-0 md:pt-4 md:pb-0"
        >
          <span
            class="text-sm font-medium text-indigo-600 group-hover:text-indigo-800"
            >Step 2</span
          >
          <span class="text-sm font-medium">Edit Script</span>
        </a>
      </li>

      <li class="md:flex-1">
        <a
          {% comment %} href="{% url 'recording' %}" {% endcomment %}
          class="group flex flex-col border-l-4 border-indigo-600 py-2 pl-4  md:border-l-0 md:border-t-4 md:pl-0 md:pt-4 md:pb-0"
          aria-current="step"
        >
          <span
            class="text-sm font-medium text-gray-500 group-hover:text-gray-700"
            >Step 3</span
          >
          <span class="text-sm font-medium">Record Script</span>
        </a>
      </li>

      {% comment %}
      <li class="md:flex-1">
        <!-- Upcoming Step -->
        <a
          href="#"
          class="group flex flex-col border-l-4 border-gray-200 py-2 pl-4 hover:border-gray-300 md:border-l-0 md:border-t-4 md:pl-0 md:pt-4 md:pb-0"
        >
          <span
            class="text-sm font-medium text-gray-500 group-hover:text-gray-700"
            >Step 4</span
          >
          <span class="text-sm font-medium">Preview Test Video</span>
        </a>
      </li>
      {% endcomment %}
    </ol>
  </nav>

  <div v-if="sequence_counter==0">
    <div class="flex my-4">
      <p class="text-xl font-bold my-2">First Script</p>

      <span
        class="inline-flex items-center rounded-full bg-blue-100 px-3 text-sm font-medium text-blue-800 h-1/4 my-3 mx-2"
        >Linkedin</span
      >
    </div>
    {% comment %} <p class="text-xl font-bold my-2">Record the first Video</p> {% endcomment %}

    <textarea
      id="article_content"
      rows="6"
      name="comment"
      placeholder="placeholder"
      class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
    > {{ script1 }}
</textarea>

    <div class="my-4" id="target"></div>
  </div>

  <div v-if="sequence_counter==1">
    <div class="flex my-4">
      <p class="text-xl font-bold my-2">Second Script</p>
      <span
        class="inline-flex items-center rounded-full bg-blue-100 px-3 text-sm font-medium text-blue-800 h-1/4 my-3 mx-2"
        >Your Website</span
      >
    </div>

    <textarea
      id="article_content"
      rows="6"
      name="comment"
      placeholder="placeholder"
      class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
    >
    {{ script2 }}
</textarea
    >
    <div class="my-4" id="target" v-html="htmlContent"></div>
  </div>
  <div class="">
    <div v-if="sequence_counter==4">
      <button
        @click="submitCampaign()"
        type="button"
        class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 my-8 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
      >
        Create Campaign!
        <svg
          viewBox="0 0 24 24"
          width="1.2em"
          height="1.2em"
          class="w-6 h-6 ml-2"
        >
          <path
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="m14 5l7 7m0 0l-7 7m7-7H3"
          ></path>
        </svg>
      </button>
    </div>
    <div id="button-group" v-show='showButton'>
      <div id="target"></div>
      <button
        type="button"
        id="first-script-record"
        class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 my-8 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
      >
        Start Recording!
        <svg
          viewBox="0 0 24 24"
          width="1.2em"
          height="1.2em"
          class="w-6 h-6 ml-2"
        >
          <path
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="m14 5l7 7m0 0l-7 7m7-7H3"
          ></path>
        </svg>
      </button>
      <button
        v-show="sequence_counter==0"
        @click="incrementCounter()"
        type="button"
        class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 my-8 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
      >
        Recording Looks Good!
        <svg
          viewBox="0 0 24 24"
          width="1.2em"
          height="1.2em"
          class="w-6 h-6 ml-2"
        >
          <path
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="m14 5l7 7m0 0l-7 7m7-7H3"
          ></path>
        </svg>
      </button>
      <button
        v-show="sequence_counter==1"
        @click="submitCampaign()"
        type="button"
        class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 my-8 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
      >
        Create Campaign!
        <svg
          viewBox="0 0 24 24"
          width="1.2em"
          height="1.2em"
          class="w-6 h-6 ml-2"
        >
          <path
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="m14 5l7 7m0 0l-7 7m7-7H3"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>



<script>
  const { createApp } = Vue;
  var app = new Vue({
    delimiters: ["[[", "]]"],
    el: "#app",
    data: {
      sequence_counter: 0,
      htmlContent: "",
      script1_url:"", 
      script2_url:"",
      showButton: false,
    },
    computed: {

    },
    methods: {
      incrementCounter() {
        this.htmlContent = "";

        document.getElementById("target").innerHTML = "";
        this.sequence_counter++;
      },
      decrementCounter() {
        this.sequence_counter--;
      },
      submitCampaign() {
        let script1_url = document.getElementById("script1-url").innerHTML;
        let script2_url = document.getElementById("script2-url").innerHTML;
        
      axios({
          method: "post",
          url: "/api/create_campaign",
          data: {
            script1_url: script1_url,
            script2_url: script2_url,
          },
          headers: {
            "X-CSRFToken": "{{ csrf_token }}",
          },
        }).then((response) => {
          const uuid = response.data.uuid;
          window.location.href = `/campaign/${uuid}`; // redirect to the /campaign/uuid route              .catch((error) => {
        });
      },
    },
    created() {
      setTimeout(() => {
        this.showButton = true
    }, 3000);
    },
  });
</script>

<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) {
      alert(`Error setting up Loom: ${error}`);
      return;
    }

    const button = document.getElementById("first-script-record");

    if (!button) {
      return;
    }

loomSdk.setup({
    publicAppId: PUBLIC_APP_ID,
    jws: "{{ jws|safe }}",
    config: { defaultRecordingType: "cam", allowedRecordingTypes: ["cam"] },
  }).then((setup) => {
    const { configureButton } = setup
    const sdkButton = configureButton({ element: button });
    return sdkButton
  }).then((sdkButton) => {
      sdkButton.on("insert-click", async (video) => {
      const { html } = await loomEmbed.oembed(video.sharedUrl, { width: 400 });
      insertEmbedPlayer(html);
      axios({
          method: "post",
          url: "/api/update_session",
          data: {
            script: video.sharedUrl,
          },
          headers: {
            "X-CSRFToken": "{{ csrf_token }}",
          },
        }).then((response) => {});
    });
  });
  }

  init();
</script>

{% endblock %}