Hello,
I am working on a plugin which requires a multi-select option field with the list of drop down option and search feature.
To achieve that I used the default HTML select with commonOptions and registerVideoField as provided by PeerTube. The registereVideoField will inject the HTML in the update page of the video so that on updating the video the plugin server hook 'action:api.video.updated' will get the data of the field in it’s body.pluginData.
I was able to inject the multiselect option with search feature but on updating the video the plugin server hook 'action:api.video.updated' only gets one element from the list of selected items from the dropdown in to its body.pluginData. Since I have made the field multi-select with setting its attribute to multiple it is not behaving like one.
Here is my implementation:
On updating the video the body.pluginData gets only the first item.
Here is my code:
async function formFieldElement() {
let commonOptions = {
name: "allowed-users",
label: "Allow Users",
descriptionHTML: "",
type: "select",
options: [],
default: "",
};
let response = await fetch(
peertubeHelpers.getBaseRouterRoute() + "/userlist",
{
method: "GET",
headers: peertubeHelpers.getAuthHeader(),
}
);
let data = await response.json();
data.forEach((user) => {
commonOptions.options.push({
value: user.username,
label: user.username,
});
});
return commonOptions;
}
const videoFormOptions = {
tab: "main",
};
const commonOptions = await formFieldElement()
for (const type of [
"upload",
"import-url",
"import-torrent",
"update",
"go-live",
]) {
registerVideoField(commonOptions, { type, ...videoFormOptions });
}
function waitForElm(selector) {
return new Promise((resolve) => {
if (document.getElementById(selector)) {
return resolve(document.getElementById(selector));
}
const observer = new MutationObserver((mutations) => {
if (document.getElementById(selector)) {
resolve(document.getElementById(selector));
observer.disconnect();
}
});
observer.observe(document.querySelector("my-dynamic-form-field"), {
childList: true,
subtree: true,
attributes: true,
});
});
}
function addElem(elem) {
elem.setAttribute("multiple", "");
elem.setAttribute("multiselect-search", "true");
elem.setAttribute("multiselect-select-all", "true");
elem.setAttribute("multiselect-max-items", "3");
MultiselectDropdown(window.MultiselectDropdownOptions);
}
registerHook({
target: "action:video-edit.init",
handler: () => {
waitForElm("allowed-users").then((elem) => {
addElem(elem);
});
const tabElem = document.querySelector("div.nav-tabs.nav");
tabElem.onclick = function () {
const checkActiveClass =
tabElem.children[0].classList.contains("active");
if (checkActiveClass) {
waitForElm("allowed-users").then((elem) => {
addElem(elem);
});
}
};
},
});
