@cocreate/elements 1.34.5 → 1.35.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [1.35.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.35.0...v1.35.1) (2024-04-26)
+
+
+### Bug Fixes
+
+* convert base64 segments to to arrayBuffer ([710c55e](https://github.com/CoCreate-app/CoCreate-elements/commit/710c55e6402fffc65cf1a633c67c7499766964e8))
+* export setValueType ([bcc717c](https://github.com/CoCreate-app/CoCreate-elements/commit/bcc717caa541f406f1cb74fa97be6d651898f808))
+
+# [1.35.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.34.5...v1.35.0) (2024-03-18)
+
+
+### Features
+
+* observe form for new inputs and setAttribute ([527d1bd](https://github.com/CoCreate-app/CoCreate-elements/commit/527d1bd490ae28655006918fe8d8a99fb210cbde))
+
 ## [1.34.5](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.34.4...v1.34.5) (2024-02-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.34.5",
+  "version": "1.35.1",
   "description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
   "keywords": [
     "elements",

package/src/fetchSrc.js

@@ -33,27 +33,44 @@ async function initElements(elements) {
                             let sourceBuffer;
 
                             const mediaSource = new MediaSource();
-                            video.src = URL.createObjectURL(mediaSource);
+                            element.src = URL.createObjectURL(mediaSource);
                             mediaSource.addEventListener('sourceopen', async () => {
-                                const contentType = response.headers.get("Content-Type");
-                                sourceBuffer = mediaSource.addSourceBuffer(contentType);
+                                sourceBuffer = mediaSource.addSourceBuffer(`${mediaConfig['content-type']}; codecs="${mediaConfig.codecs}"`);
 
                                 sourceBuffer.addEventListener('updateend', () => {
+                                    console.log('Update ended, buffered ranges:', sourceBuffer.buffered)
                                     if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
                                         mediaSource.endOfStream();
 
-                                        video.addEventListener('ended', () => {
-                                            URL.revokeObjectURL(video.src);
+                                        element.addEventListener('ended', () => {
+                                            URL.revokeObjectURL(element.src);
                                         });
                                     }
                                 });
+                                sourceBuffer.addEventListener('error', (e) => {
+                                    console.error('SourceBuffer error event:', e);
+                                    console.log('MediaSource readyState:', mediaSource.readyState);
+                                    console.log('SourceBuffer updating:', sourceBuffer.updating);
+                                    console.log('SourceBuffer buffered ranges:', sourceBuffer.buffered);
+                                    // Any other state information you can log
+                                });
+
+
+                                getSegment(sourceBuffer, mediaConfig.segments[0])
+                            });
+
+                            mediaSource.addEventListener('sourceended', () => {
+                                console.log('MediaSource ended event fired');
+                            });
+
+                            mediaSource.addEventListener('sourceclose', () => {
+                                console.log('MediaSource close event fired');
                             });
 
                             // Event listener for seeking
                             element.addEventListener('seeking', () => {
                                 let currentTime = element.currentTime;
                                 let chunkIndex = Math.floor(currentTime / chunkDuration);
-
                             });
 
                             // Event listener for seeked
@@ -74,8 +91,8 @@ async function initElements(elements) {
                             });
 
                             element.addEventListener('timeupdate', function () {
-                                const bufferEnd = video.buffered.end(0);
-                                const currentTime = video.currentTime;
+                                const bufferEnd = element.buffered.end(0);
+                                const currentTime = element.currentTime;
                                 const threshold = 10; // seconds before buffer end to fetch the next segment
 
                                 if (bufferEnd - currentTime < threshold) {
@@ -83,8 +100,9 @@ async function initElements(elements) {
                                     getSegment(sourceBuffer, mediaConfig)
                                 }
                             });
+
                         } catch (error) {
-                            video.src = src
+                            element.src = src
                             // let blob = await response.json();
                             // URL.createObjectURL(blob);
                         }
@@ -106,14 +124,14 @@ async function initElements(elements) {
     }
 };
 
-async function getSegment(sourceBuffer, segmentConfig) {
+async function getSegment(sourceBuffer, segment) {
     // TODO: use socket/crud/file with room using the url to get one or more segments and append
     let segments = []
-
-    if (segmentConfig.array && segmentConfig.object) {
-        let data = { method: 'object.read', ...segmentConfig }
+    let data
+    if (segment.array && segment.object) {
+        data = { method: 'object.read', ...segment }
         data = await crud.send(data)
-        if (segmentConfig.key) {
+        if (segment.key) {
             // TODO: utils.getValuefromObject
             if (Array.isArray(data.object[0][key]))
                 segments.push(...data.object[0][key])
@@ -121,9 +139,15 @@ async function getSegment(sourceBuffer, segmentConfig) {
                 segments.push(data.object[0][key])
         } else
             segments.push(...data.object)
-    } else if (segmentConfig.src) {
-        data = await fetch(src);
+        segment.src = segments[0]
+        segment.src = await segment.src.text();
+        // TODO: handle segment array as
+    } else if (segment.src) {
+        // TODO: handle 404, or whether src was fetched or not
+        segment.src = await fetch(segment.src);
+        segment.src = await segment.src.text();
     }
+
     appendSegment(sourceBuffer, segment)
 }
 
@@ -140,13 +164,16 @@ async function appendSegment(sourceBuffer, segment) {
     } else if (segment.src instanceof Blob) {
         arrayBuffer = await segment.src.arrayBuffer();
     } else {
-        console.error("Unhandled segment data type");
+        arrayBuffer = base64ToArrayBuffer(segment.src);
+
+        // arrayBuffer = await segment.src.arrayBuffer();
     }
 
     // Wait for the source buffer to be ready for updates
     if (sourceBuffer.updating) await new Promise(resolve => sourceBuffer.addEventListener('updateend', resolve, { once: true }));
 
     sourceBuffer.appendBuffer(arrayBuffer);
+    console.log(sourceBuffer)
 }
 
 function isBuffered(element, currentTime) {
@@ -178,32 +205,6 @@ function base64ToArrayBuffer(base64) {
     return bytes.buffer; // Return ArrayBuffer
 }
 
-const videoStreamConfig = {
-    title: "Video Title",
-    totalDuration: 3600, // Total duration of the video in seconds
-    'content-type': "video/mp4",
-    segments: [
-        {
-            _id: 1,
-            src: "http://example.com/video/chunk1.mp4", // src stored using file path
-            storage: '', // src stored using crud path
-            array: '', // src stored using crud path
-            object: '', // src stored using crud path
-            key: '', // src stored using crud path
-            start: 0, // Start time of this chunk in seconds
-            end: 10, // End time of this chunk in seconds
-            duration: 10,
-            codec: "h.264",
-            resolution: {
-                width: 1920,
-                height: 1080
-            },
-            bitrate: "5000kbps",
-        },
-        // Repeat for each chunk
-    ]
-}
-
 observer.init({
     name: 'CoCreateSrc',
     observe: ['addedNodes'],

package/src/form.js

@@ -18,7 +18,18 @@ function init(elements) {
         elements = document.querySelectorAll('form');
     else if (!Array.isArray(elements))
         elements = [elements]
+
     for (let element of elements) {
+        Observer.init({
+            name: 'CoCreateFormElements',
+            observe: ['addedNodes'],
+            target: '[storage], [database], [array], [index], [object], [key]',
+            callback: function (mutation) {
+                if (element == mutation.target.form)
+                    setAttribute(element, [mutation.target])
+            }
+        });
+
         runObjectId(element);
         setAttribute(element);
         disableAutoFill(element);
@@ -43,7 +54,6 @@ function runObjectId(form) {
         // Add a array to the array list.
         if (array && !arrays.includes(array))
             arrays.push(array)
-
     }
     // Sets the object id for each array in the array.
     for (let i = 0; i < arrays.length; i++) {
@@ -55,8 +65,9 @@ function runObjectId(form) {
 /**
 * @param form
 */
-function setAttribute(form) {
-    let elements = form.querySelectorAll('[storage], [database], [array], [index], [object], [key]');
+function setAttribute(form, elements) {
+    if (!elements)
+        elements = form.querySelectorAll('[storage], [database], [array], [index], [object], [key]');
 
     for (let attribute of form.attributes) {
         let variable = window.CoCreateConfig.attributes[attribute.name]

package/src/index.js

@@ -1295,4 +1295,4 @@ Actions.init([
 
 init();
 
-export default { init, read, save, getData, getObject, reset, elements, keys, forms, debounce, getAttributes };
+export default { init, read, save, getData, getObject, reset, elements, keys, forms, debounce, getAttributes, setTypeValue };