[FEATURE] More video embed types (Loom & Wistia)

Is this a unique feature?

[X] I have checked "open" AND "closed" issues and this is not a duplicate

Is your feature request related to a problem/unavailable functionality? Please describe.

At the moment, it is only possible to upload YouTube or Vimeo videos, Since Yoopta would be part of other software products, it would be interesting I think to be able to add Wistia videos and Loom videos by adding Loom or Wistia urls.

CleanShot 2024-11-11 at 00 29 19

Proposed Solution

For example to detect wistia & loom urls, we can use this regex:

wistia: [%r{(?:https?://)?(?:www.)?wistia.com/medias/(.+)}] loom: [%r{(?:https?://)?(?:www.)?loom.com/share/(.+)}]

The Wistia embed would look like this:

<div style="height: 100%; max-height: 100%; margin-bottom: 6rem;">
  <script src="https://fast.wistia.com/embed/medias/[EMBEDCODE].jsonp" async></script>
  <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
  <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
    <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
      <div class="wistia_embed wistia_async_[EMBEDCODE] videoFoam=true" style="height:100%;position:relative;width:100%">
        <div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
          <img src="https://fast.wistia.com/embed/medias/[EMBEDCODE]/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" />
        </div>
      </div>
    </div>
  </div>
</div>

The Loom embed would look like this:

<div style="position: relative; padding-bottom: 53.90625%; height: 0;"><iframe src="https://www.loom.com/embed/[EMBEDCODE]?hide_owner-true&hide_share=true&hide_title=true&hideEmbedTopBar=true" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

Screenshots

No response

Do you want to work on this issue?

Yes

If "yes" to the above, please explain how you would technically implement this (issue will not be assigned if this is skipped)

I would implement the proposed solution by adding new embed providers, I might be a bit slow though while I get used to Typescript.

Darginec05 / Yoopta-Editor