Need help with a plugin builder

mbyashas4 · 2024-09-15T07:52:25.519Z

I am creating a video player.
As i have written the code in update function area, multiple instances of the video player gets popped every second when I test it…

If I write the code in initialize section, I wont be able to access the elements I create over there, eg video player, in the update section The update function is taking a encrypted file from the element’s property and decrypting it using multiple connected functions revolving around AES GCM.
The output of the above would be converted into a blob of mp4 type. A url is created of the blob, which is then fed to the source of the videoplayer function(instance, properties, context) {

        const rootelement=instance.canvas[0];
rootelement.innerHTML='';
	const fileUrl = properties.source;
	let mainKey='QUJDREVGR0hJSktMTU5PUA==';
	let decrCont;
    let decryptBlob;
    let urll;


	        //converting base64 to binary of acsii
    function base64ToBinary(someKey){
    const binaryString= window.atob(someKey);
        const len= binaryString.length;
        const bytes=new Uint8Array(len);
        for (let i=0; i<len; i++){
            bytes[i]=binaryString.charCodeAt(i);
        }
        return bytes.buffer;
        }

    //get Key
    async function getFixedAesKey(){
        const rawKey=base64ToBinary(mainKey);
        return await crypto.subtle.importKey(
        'raw',
            rawKey,
            {name: 'AES-GCM'},
            false,
            ['decrypt']
            );
    }

	        async function fetchFileAsArrayBuffer(url) {
        try {
            // Fetch the file from the URL
            const response = await fetch(url);
            // Convert the response to a Blob
            const blob = await response.blob();
            // Convert the Blob to ArrayBuffer
            const arrayBuffer = await blob.arrayBuffer();
            return arrayBuffer;
        } catch (error) {
            console.error('Error fetching or converting file:', error);
            return null;
        }
    }

	        //decrypt the file
    async function decryptFile(){
        console.log('getting key...');
        const key=await getFixedAesKey();
        await console.log('getting url');
        const fileBuffer= await fetchFileAsArrayBuffer(fileUrl);
		if (!fileBuffer) throw new Error('Failed to fetch file');
        const iv= await fileBuffer.slice(0,16);
        const encrypted= await fileBuffer.slice(16);
        const decryptedContent= await crypto.subtle.decrypt(
            { name: 'AES-GCM', iv: new Uint8Array(iv)},// 
            key,
            new Uint8Array(encrypted)
            );
        await console.log('content decrypted');
        return decryptedContent;
        
    }


	    	rootelement.innerHTML='';
			const mainVid=document.createElement('video');
    		mainVid.controls=true;
			rootelement.appendChild(mainVid);
    
    		const clickButton= document.createElement('button');
			clickButton.innerHTML='Click me';
			clickButton.style.height='20px';
    		clickButton.style.width='20px';
    		rootelement.appendChild(clickButton);
			
    


    	   





clickButton.addEventListener('click',async()=>{
	console.log('okay') ;
	async function decriptyfy (){
    decrCont= await decryptFile();
        await console.log('received file');
    decryptBlob=  new Blob([decrCont],{type: 'video/mp4'});
        await console.log('blob created');
	urll=URL.createObjectURL(decryptBlob);  
        mainVid.src=urll;
        mainVid.load();
        mainVid.style.display='block';

    }
    await decriptyfy();
    console.log('done');
})

} IDK where I am goin wrong… please help

dorilama · 2024-09-15T09:12:43.155Z

mbyashas4:

As i have written the code in update function area, multiple instances of the video player gets popped every second when I test it…

If I write the code in initialize section, I wont be able to access the elements I create over there

update function runs multiple times. what you need to do is to check that you have all tge properties you need and that your function was never executed (remember that you can add properties to instance.data).

edit: it’s instance.data

mbyashas4 · 2024-09-15T09:23:01.778Z

thank you for the response @dorilama . Can u pls guide me on how to load the property named ‘source’, which takes the video from the user…,to context.data? because source is dynamic, i dont know how to load

dorilama · 2024-09-15T09:52:27.341Z

it’s not necessarely about loading properties in instance.data. it’s about adding a flag in there when you execute the action you want to run only once.
something like

function update(instance,properties,context){
if(!instance.data.done){
//do your thing here

instance.data.done = true
}