Skip to content

Commit

Permalink
fix: rendering bug fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaydeepsingh25
jaydeepsingh25 committed Dec 16, 2024
1 parent a5f165b commit b0ae8da
Showing 1 changed file with 181 additions and 178 deletions.
359 changes: 181 additions & 178 deletions src/info/info.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,193 +70,196 @@ port.onMessage.addListener(async (message) => {
let label = browser.i18n.getMessage("renderingLabel");

let count = 1;
for (let rendering of renderings["renderings"]) {
let container = document.createElement("section");
container.classList.add("container");
container.classList.add("rendering");
let headerElement = document.createElement("h1");
let labelButton = document.createElement("button");
let contentId = "m-" + uuidv4();
labelButton.classList.add("btn", "btn-primary");
labelButton.setAttribute("type", "button");
labelButton.setAttribute("data-bs-toggle", "collapse");
labelButton.setAttribute("data-bs-target", "#" + contentId);
labelButton.setAttribute("aria-expanded", "false");
labelButton.setAttribute("aria-controls", contentId);
labelButton.textContent = label + " " + count + ": " + rendering["description"];
headerElement.append(labelButton);
container.append(headerElement);

if (rendering["type_id"] === RENDERERS.text) {
let contentDiv = utils.addRenderingContent(container, contentId);
const text = rendering["data"]["text"] as string;
const p = document.createElement("p");
p.textContent = text;
contentDiv.append(p);
if (rendering["metadata"] && rendering["metadata"]["homepage"]) {
utils.addRenderingExplanation(contentDiv, rendering["metadata"]["homepage"])
}
}
else if (rendering["type_id"] === RENDERERS.simpleAudio) {
let contentDiv = utils.addRenderingContent(container, contentId);
const audio = document.createElement("audio");
audio.setAttribute("controls", "");
audio.setAttribute("src", rendering["data"]["audio"] as string);
contentDiv.append(audio);
const download = document.createElement("a");
download.setAttribute("href", rendering["data"]["audio"] as string);
download.setAttribute("download", "rendering-" + count + "-" + request_uuid);
download.classList.add("localisation");
download.textContent = browser.i18n.getMessage("downloadAudioFile");
contentDiv.append(download);
if (rendering["metadata"] && rendering["metadata"]["homepage"]) {
utils.addRenderingExplanation(contentDiv, rendering["metadata"]["homepage"])
}
}
else if (rendering["type_id"] === RENDERERS.segmentAudio) {
let currentAudioIndex : number = -2;
let contentDiv = utils.addRenderingContent(container, contentId);
const selectDiv = document.createElement("div");
selectDiv.classList.add("form-floating");
const renderingsList = document.createElement("ul");
contentDiv.append(selectDiv);
const fullRenderingHeader = document.createElement("li");
const fullRenderingButton = document.createElement("button");
fullRenderingButton.id = "segmentAudioFullRendering";
fullRenderingButton.classList.add("btn","btn-secondary", "localisation");
fullRenderingButton.textContent = browser.i18n.getMessage("segmentAudioFullRendering")
fullRenderingButton.addEventListener("click", function(){
playPauseAudio(-1);
});
fullRenderingHeader.append(fullRenderingButton);
renderingsList.append(fullRenderingHeader);

const audioInfo = rendering["data"]["audioInfo"] as { "name": string, "offset": number, "duration": number }[];
// Set up audio controls
const audioCtx = new window.AudioContext();
const audioBuffer = await fetch(rendering["data"]["audioFile"] as string).then(resp => {
return resp.arrayBuffer();
}).then(buffer => {
return audioCtx.decodeAudioData(buffer);
}).catch(e => { console.error(e); throw e; });

let currentOffset: number | undefined;
let currentDuration: number | undefined;
let sourceNode: AudioBufferSourceNode | undefined;

function playPauseAudio(index: number, audioInfo?: any){
if (index == currentAudioIndex && sourceNode){
/** Do not create a new audio context, just pause/play the current audio*/
(sourceNode.playbackRate.value == 0)?(sourceNode.playbackRate.value = 1): (sourceNode.playbackRate.value = 0);
currentAudioIndex = index;
if(renderings){
for (let rendering of renderings["renderings"]) {
let container = document.createElement("section");
container.classList.add("container");
container.classList.add("rendering");
let headerElement = document.createElement("h1");
let labelButton = document.createElement("button");
let contentId = "m-" + uuidv4();
labelButton.classList.add("btn", "btn-primary");
labelButton.setAttribute("type", "button");
labelButton.setAttribute("data-bs-toggle", "collapse");
labelButton.setAttribute("data-bs-target", "#" + contentId);
labelButton.setAttribute("aria-expanded", "false");
labelButton.setAttribute("aria-controls", contentId);
labelButton.textContent = label + " " + count + ": " + rendering["description"];
headerElement.append(labelButton);
container.append(headerElement);

if (rendering["type_id"] === RENDERERS.text) {
let contentDiv = utils.addRenderingContent(container, contentId);
const text = rendering["data"]["text"] as string;
const p = document.createElement("p");
p.textContent = text;
contentDiv.append(p);
if (rendering["metadata"] && rendering["metadata"]["homepage"]) {
utils.addRenderingExplanation(contentDiv, rendering["metadata"]["homepage"])
}
else {
if (sourceNode){
sourceNode.stop();
}
setTimeout(function(){
currentAudioIndex = index;
const data = audioInfo;
currentOffset = data ? data["offset"] as number:undefined;
currentDuration = data ? data["duration"] as number: undefined;
sourceNode = audioCtx.createBufferSource();
sourceNode.addEventListener("ended", () => { sourceNode = undefined;});
sourceNode.buffer = audioBuffer;
sourceNode.connect(audioCtx.destination);
sourceNode.start(0, currentOffset, currentDuration);
},100);
}
else if (rendering["type_id"] === RENDERERS.simpleAudio) {
let contentDiv = utils.addRenderingContent(container, contentId);
const audio = document.createElement("audio");
audio.setAttribute("controls", "");
audio.setAttribute("src", rendering["data"]["audio"] as string);
contentDiv.append(audio);
const download = document.createElement("a");
download.setAttribute("href", rendering["data"]["audio"] as string);
download.setAttribute("download", "rendering-" + count + "-" + request_uuid);
download.classList.add("localisation");
download.textContent = browser.i18n.getMessage("downloadAudioFile");
contentDiv.append(download);
if (rendering["metadata"] && rendering["metadata"]["homepage"]) {
utils.addRenderingExplanation(contentDiv, rendering["metadata"]["homepage"])
}
}

for (let idx = 0; idx < audioInfo.length; idx++) {
const val = audioInfo[idx];
const headerElement = document.createElement("li");
const buttonElement = document.createElement("button");
buttonElement.classList.add("btn","btn-secondary");
buttonElement.textContent = val["name"]
headerElement.append(buttonElement);
buttonElement.addEventListener("click",function(){
playPauseAudio(idx,audioInfo[idx])
else if (rendering["type_id"] === RENDERERS.segmentAudio) {
let currentAudioIndex : number = -2;
let contentDiv = utils.addRenderingContent(container, contentId);
const selectDiv = document.createElement("div");
selectDiv.classList.add("form-floating");
const renderingsList = document.createElement("ul");
contentDiv.append(selectDiv);
const fullRenderingHeader = document.createElement("li");
const fullRenderingButton = document.createElement("button");
fullRenderingButton.id = "segmentAudioFullRendering";
fullRenderingButton.classList.add("btn","btn-secondary", "localisation");
fullRenderingButton.textContent = browser.i18n.getMessage("segmentAudioFullRendering")
fullRenderingButton.addEventListener("click", function(){
playPauseAudio(-1);
});
renderingsList.append(headerElement);
}
selectDiv.append(renderingsList);

const download = document.createElement("a");
download.setAttribute("href", rendering["data"]["audioFile"] as string);
download.setAttribute("download", "rendering-" + count + "-" + request_uuid);
download.textContent = browser.i18n.getMessage("downloadAudioFile");
download.id = "downloadAudioFile";
download.classList.add("localisation");
contentDiv.append(download);
if (rendering["metadata"] && rendering["metadata"]["homepage"]) {
utils.addRenderingExplanation(contentDiv, rendering["metadata"]["homepage"])
}
}

if (rendering["type_id"] === RENDERERS.photoAudioHaptics) {
hapiUtils.processHapticsRendering(rendering, graphic_url, container, contentId)
}

if(rendering["type_id"] === RENDERERS.svgLayers){
let contentDiv = utils.addRenderingContent(container, contentId);
const imgContainer = document.createElement("div");
imgContainer.classList.add("info-img-container");
// renderImg
const renderImg = document.createElement("img");
renderImg.id = "render-img";
renderImg.classList.add("render-img");
if(request.graphic){
renderImg.src = request.graphic;
fullRenderingHeader.append(fullRenderingButton);
renderingsList.append(fullRenderingHeader);

const audioInfo = rendering["data"]["audioInfo"] as { "name": string, "offset": number, "duration": number }[];
// Set up audio controls
const audioCtx = new window.AudioContext();
const audioBuffer = await fetch(rendering["data"]["audioFile"] as string).then(resp => {
return resp.arrayBuffer();
}).then(buffer => {
return audioCtx.decodeAudioData(buffer);
}).catch(e => { console.error(e); throw e; });

let currentOffset: number | undefined;
let currentDuration: number | undefined;
let sourceNode: AudioBufferSourceNode | undefined;

function playPauseAudio(index: number, audioInfo?: any){
if (index == currentAudioIndex && sourceNode){
/** Do not create a new audio context, just pause/play the current audio*/
(sourceNode.playbackRate.value == 0)?(sourceNode.playbackRate.value = 1): (sourceNode.playbackRate.value = 0);
currentAudioIndex = index;
}
else {
if (sourceNode){
sourceNode.stop();
}
setTimeout(function(){
currentAudioIndex = index;
const data = audioInfo;
currentOffset = data ? data["offset"] as number:undefined;
currentDuration = data ? data["duration"] as number: undefined;
sourceNode = audioCtx.createBufferSource();
sourceNode.addEventListener("ended", () => { sourceNode = undefined;});
sourceNode.buffer = audioBuffer;
sourceNode.connect(audioCtx.destination);
sourceNode.start(0, currentOffset, currentDuration);
},100);
}
}

for (let idx = 0; idx < audioInfo.length; idx++) {
const val = audioInfo[idx];
const headerElement = document.createElement("li");
const buttonElement = document.createElement("button");
buttonElement.classList.add("btn","btn-secondary");
buttonElement.textContent = val["name"]
headerElement.append(buttonElement);
buttonElement.addEventListener("click",function(){
playPauseAudio(idx,audioInfo[idx])
});
renderingsList.append(headerElement);
}
selectDiv.append(renderingsList);

const download = document.createElement("a");
download.setAttribute("href", rendering["data"]["audioFile"] as string);
download.setAttribute("download", "rendering-" + count + "-" + request_uuid);
download.textContent = browser.i18n.getMessage("downloadAudioFile");
download.id = "downloadAudioFile";
download.classList.add("localisation");
contentDiv.append(download);
if (rendering["metadata"] && rendering["metadata"]["homepage"]) {
utils.addRenderingExplanation(contentDiv, rendering["metadata"]["homepage"])
}
}

const svgContainer = document.createElement("div");
svgContainer.classList.add("svg-container");

// append renderImg and svgImg to imgContainer
imgContainer.append(renderImg);

const selectContainer = document.createElement("div");
selectContainer.style.display = "flex";
selectContainer.style.width = "50%";
const selectDesc = document.createElement("p");
// selectDesc.innerText = browser.i18n.getMessage("svgLayerSelection");
selectDesc.id = "svgLayerSelection";
selectDesc.classList.add("localisation");
const select = document.createElement("select");
select.classList.add("layer-select");
select.setAttribute("id", "svg-layer");
select.style.margin = "0 1rem 1rem 1rem";
let layers: any = rendering['data']['layers'];
for (let layer of layers){
let option = document.createElement("option");
option.setAttribute("value",layer["svg"]);
option.textContent = layer["label"];
select.append(option);

if (rendering["type_id"] === RENDERERS.photoAudioHaptics) {
hapiUtils.processHapticsRendering(rendering, graphic_url, container, contentId)
}
let svgData = layers[0]["svg"];
svgContainer.append(createSVG(svgData));

// append container to image container
imgContainer.append(svgContainer);


select.addEventListener("change", (event)=>{
const target = event.target as HTMLInputElement;
if(svgContainer.lastChild){
svgContainer.removeChild(svgContainer.lastChild);

if(rendering["type_id"] === RENDERERS.svgLayers){
let contentDiv = utils.addRenderingContent(container, contentId);
const imgContainer = document.createElement("div");
imgContainer.classList.add("info-img-container");
// renderImg
const renderImg = document.createElement("img");
renderImg.id = "render-img";
renderImg.classList.add("render-img");
if(request && request.graphic){
renderImg.src = request.graphic;
}

const svgContainer = document.createElement("div");
svgContainer.classList.add("svg-container");

// append renderImg and svgImg to imgContainer
imgContainer.append(renderImg);

const selectContainer = document.createElement("div");
selectContainer.style.display = "flex";
selectContainer.style.width = "50%";
const selectDesc = document.createElement("p");
// selectDesc.innerText = browser.i18n.getMessage("svgLayerSelection");
selectDesc.id = "svgLayerSelection";
selectDesc.classList.add("localisation");
const select = document.createElement("select");
select.classList.add("layer-select");
select.setAttribute("id", "svg-layer");
select.style.margin = "0 1rem 1rem 1rem";
let layers: any = rendering['data']['layers'];
for (let layer of layers){
let option = document.createElement("option");
option.setAttribute("value",layer["svg"]);
option.textContent = layer["label"];
select.append(option);
}
svgContainer.appendChild(createSVG(target.value));
});
selectContainer.append(selectDesc);
selectContainer.append(select)
contentDiv.append(selectContainer);
contentDiv.append(imgContainer);
let svgData = layers[0]["svg"];
svgContainer.append(createSVG(svgData));

// append container to image container
imgContainer.append(svgContainer);


select.addEventListener("change", (event)=>{
const target = event.target as HTMLInputElement;
if(svgContainer.lastChild){
svgContainer.removeChild(svgContainer.lastChild);
}
svgContainer.appendChild(createSVG(target.value));
});
selectContainer.append(selectDesc);
selectContainer.append(select)
contentDiv.append(selectContainer);
contentDiv.append(imgContainer);
}

document.getElementById("renderings-container")!.appendChild(container)
count++;
}

document.getElementById("renderings-container")!.appendChild(container)
count++;
}

//Array.from(document.getElementsByTagName("audio")).map(i => new Plyr(i));

const feedbackAnchor = document.getElementById("feedbackFormLink") as HTMLAnchorElement;
Expand Down

0 comments on commit b0ae8da

Please sign in to comment.