Как запускать java script в Bubble

Начнём с того, что я абсолютный нуб в js и коде впринципе. Поэтому этот мини гайд о том, как работает JS в Bubble будет с позиции человека, который поковырялся немного в теории, скопипастил код, код не работал, сделал пару попыток реализации и всё заработало.

Какая задача стояла

Нужно определить длительность видео, которое загружает пользователь. И если видео длиннее 30 секунд, то не дать пользователю загрузить это видео в свой аккаунт.

Как это работает

Никакие плагины не решали эту задачу, поэтому было принято решение попробовать реализовать это всё при помощи JS.

Пошел в Google, спустя минут 15-20 нашел вроде как простой код, который нужно было реализовать при помощи HTML и JS.

Далее пошаговый алгоритм действий с объяснением

Вставляю на страницу элемент HTML и копирую вот этот код

<video style="display: none;" id="myvid">

<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">

</video>

Для чего это нужно: при помощи этого кода мы определяем на странице загруженное пользователем видео(ссылка на него хранится в кастом стейте Group Upload pitch's uploadedLink) и затем сможем работать с ним в JS коде.

Затем устанавливаю элемент File Uploader и настраиваю рабочий процесс When input is changed. Далее у меня идет цепочка действий из записи ссылки на загруженное видео в кастом стейт и запуск JS для проверки загруженного файла.

Теперь к самому интересному - как работает Run javascript в Bubble.
Вот так выглядит сам код

Красным цветом объявляем функцию при помощи function и задаём название функции dur() дальше идут {} между которыми будет находиться код функции. Сам код я просто скопировал с источника в начале статьи.
Оранжевым цветом выделен код функции. Объявляем переменную myvid - var myvid. Далее мы получаем видео, длительность которого нам нужно узнать через getElementById('myvid); Id myvid мы прописывали в HTML элементе несколько шагов назад. Потом объявляем переменную duration и получаем длительность видео, которое мы указали в HTML элементе. При помощи команды return и указания переменной(duration), которую нужно вернуть в ответе получаем ответ на выполнение скрипта.

Как же теперь получить данные в Bubble и использовать их?
Для этого нужно разместить на странице элемент javacsriptToBubble

Дальше указываем название функции для Bubble, указываем тип ответа (number) и возвращаемся к нашему коду в run javascript.

Синим цветом объявляем новую переменную, которая вызывает нашу основную и единственную функцию dur()

И затем прописываем строку(выделено зелёным), которая говорит Bubble выполнить функцию и сообщает ответ. Функцию обязательно прописывать в формате bubble_fn_(название функции из первого поля элемента javasriptToBubble). В нашем случае будет bubble_fn_duration, а в скобках указываем переменную, которая вызывает функцию(dr).

Результат выполнения

После этого можем использовать значение из javascriptToBubble в рабочих процессах. В моём случае, если длительность(значение из javascriptToBubble) больше 30 секунд, то я вывожу пользователю уведомление об этом.

А вот так это выглядит в действии