@cocreate/elements 1.33.2 → 1.34.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [1.34.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.33.2...v1.34.0) (2024-02-13)
+
+
+### Bug Fixes
+
+* add audio to src ignore ([80ce64c](https://github.com/CoCreate-app/CoCreate-elements/commit/80ce64cae35a0e6d0932beccebbecc69babb143a))
+* crud="false" ([6c92490](https://github.com/CoCreate-app/CoCreate-elements/commit/6c92490ab389a1813e10cfd1207b2061b8ef0ce1))
+* getValue using getAttribute() in order to handle operators ([798227d](https://github.com/CoCreate-app/CoCreate-elements/commit/798227d28efc1613b2ce4b90012131e990c8ab60))
+
+
+### Features
+
+* $length operator for for key ([777cf3b](https://github.com/CoCreate-app/CoCreate-elements/commit/777cf3bd4ee2ac8031d890d1df21879df1aa22e6))
+* stream="" attribute dynimaclly handles streaming ([67d0bbb](https://github.com/CoCreate-app/CoCreate-elements/commit/67d0bbba0c119b86ee095a78dc093c047758b91a))
+
 ## [1.33.2](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.33.1...v1.33.2) (2024-01-30)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.33.2",
+  "version": "1.34.0",
   "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

@@ -1,51 +1,215 @@
 import observer from '@cocreate/observer';
 
-const selector = '[src]:not(img, video, script, input, iframe, frame, link, source)'
+const selector = '[src]:not(img, video, audio, script, input, iframe, frame, link, source), [source], [stream]'
 const initializing = new Map();
 
 
-function init() {
-    var elements = document.querySelectorAll(selector);
+function init(elements) {
+    if (elements && !Array.isArray(elements))
+        elements = [elements]
+
+    if (!elements)
+        elements = document.querySelectorAll(selector);
+
     initElements(elements);
 };
 
-function initElements(elements) {
-    for (let element of elements)
-        initElement(element);
-};
+async function initElements(elements) {
+    for (let element of elements) {
+        let src = element.getAttribute('src') || element.getAttribute('source') || element.getAttribute('stream');
+
+        if (!src || /{{\s*([\w\W]+)\s*}}/g.test(src))
+            return;
+
+        let initialize = initializing.get(element)
+        if (!initialize || initialize.src != src) {
+            initializing.set(element, { src });
+            if (src) {
+                try {
+                    let response = await fetch(src);
+                    if (element.tagName === 'AUDIO' || element.tagName === 'VIDEO') {
+                        try {
+                            let mediaConfig = await response.json();
+                            let sourceBuffer;
+
+                            const mediaSource = new MediaSource();
+                            video.src = URL.createObjectURL(mediaSource);
+                            mediaSource.addEventListener('sourceopen', async () => {
+                                const contentType = response.headers.get("Content-Type");
+                                sourceBuffer = mediaSource.addSourceBuffer(contentType);
+
+                                sourceBuffer.addEventListener('updateend', () => {
+                                    if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
+                                        mediaSource.endOfStream();
+
+                                        video.addEventListener('ended', () => {
+                                            URL.revokeObjectURL(video.src);
+                                        });
+                                    }
+                                });
+                            });
 
-async function initElement(element) {
-    let src = element.getAttribute('src');
-
-    if (!src || /{{\s*([\w\W]+)\s*}}/g.test(src))
-        return;
-    let initialize = initializing.get(element)
-    if (!initialize || initialize.src != src) {
-        initializing.set(element, { src });
-        if (src) {
-            try {
-                let response = await fetch(src);
-                let text = await response.text();
-                if (text) {
-                    let path = element.getAttribute('path')
-                    if (path)
-                        text = text.replaceAll('{{path}}', path)
-                    element.setValue(text);
-                    initializing.delete(element)
+                            // Event listener for seeking
+                            element.addEventListener('seeking', () => {
+                                let currentTime = element.currentTime;
+                                let chunkIndex = Math.floor(currentTime / chunkDuration);
+
+                            });
+
+                            // Event listener for seeked
+                            element.addEventListener('seeked', () => {
+                                let currentTime = element.currentTime;
+                                if (isBuffered(element, currentTime))
+                                    return
+
+                                let query = {
+                                    "start": { $lte: currentTime },
+                                    "end": { $gte: currentTime }
+                                };
+
+                                let segments = queryData(mediaConfig.segments, query);
+                                for (let segment of segments) {
+                                    getSegment(sourceBuffer, segment)
+                                }
+                            });
+
+                            element.addEventListener('timeupdate', function () {
+                                const bufferEnd = video.buffered.end(0);
+                                const currentTime = video.currentTime;
+                                const threshold = 10; // seconds before buffer end to fetch the next segment
+
+                                if (bufferEnd - currentTime < threshold) {
+                                    // Time to fetch the next segment
+                                    getSegment(sourceBuffer, mediaConfig)
+                                }
+                            });
+                        } catch (error) {
+                            video.src = src
+                            // let blob = await response.json();
+                            // URL.createObjectURL(blob);
+                        }
+                    } else {
+                        let text = await response.text();
+                        if (text) {
+                            let path = element.getAttribute('path')
+                            if (path)
+                                text = text.replaceAll('{{path}}', path)
+                            element.setValue(text);
+                            initializing.delete(element)
+                        }
+                    }
+                } catch (err) {
+                    console.log('FetchSrc error:' + err);
                 }
-            } catch (err) {
-                console.log('FetchSrc error:' + err);
             }
         }
     }
 };
 
+async function getSegment(sourceBuffer, segmentConfig) {
+    // 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 }
+        data = await crud.send(data)
+        if (segmentConfig.key) {
+            // TODO: utils.getValuefromObject
+            if (Array.isArray(data.object[0][key]))
+                segments.push(...data.object[0][key])
+            else
+                segments.push(data.object[0][key])
+        } else
+            segments.push(...data.object)
+    } else if (segmentConfig.src) {
+        data = await fetch(src);
+    }
+    appendSegment(sourceBuffer, segment)
+}
+
+async function appendSegment(sourceBuffer, segment) {
+    let arrayBuffer = segment.src
+    if (typeof segment.src === 'string') {
+        try {
+            arrayBuffer = base64ToArrayBuffer(segment.src);
+        } catch (e) {
+            console.error("Base64 decode error:", e);
+        }
+    } else if (segment.src instanceof ArrayBuffer) {
+        arrayBuffer = segment.src
+    } else if (segment.src instanceof Blob) {
+        arrayBuffer = await segment.src.arrayBuffer();
+    } else {
+        console.error("Unhandled segment data type");
+    }
+
+    // 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);
+}
+
+function isBuffered(element, currentTime) {
+    for (let i = 0; i < element.buffered.length; i++) {
+        if (currentTime >= element.buffered.start(i) && currentTime <= element.buffered.end(i)) {
+            return true; // The currentTime is within a buffered range
+        }
+    }
+    return false; // The currentTime is not buffered
+}
+
+function base64ToBlob(base64, contentType = '') {
+    const binaryString = atob(base64.split(',')[1]);
+    const len = binaryString.length;
+    const uint8Array = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+        uint8Array[i] = binaryString.charCodeAt(i);
+    }
+    return new Blob([uint8Array], { type: contentType });
+}
+
+function base64ToArrayBuffer(base64) {
+    const binaryString = window.atob(base64.split(',')[1]); // Decode base64
+    const len = binaryString.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+    }
+    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'],
     target: selector,
     callback: function (mutation) {
-        initElement(mutation.target);
+        init(mutation.target);
     }
 });
 
@@ -55,9 +219,8 @@ observer.init({
     attributeName: ['src'],
     target: selector,
     callback: function (mutation) {
-        initElement(mutation.target);
+        init(mutation.target);
     }
 });
 
 init()
-

package/src/form.js

@@ -66,7 +66,7 @@ function setAttribute(form) {
             for (let el of elements) {
                 // Set the value of the attribute.
                 if (!el.getAttribute(attribute.name)) {
-                    el.setAttribute(attribute.name, attribute.value);
+                    el.setAttribute(attribute.name, form.getAttribute(attribute.name));
                 }
             }
         }

package/src/index.js

@@ -62,7 +62,7 @@ async function init(element) {
 
     let dataObjects = new Map();
     for (let i = 0; i < element.length; i++) {
-        if (elements.has(element[i]) || element[i].tagName === 'FORM')
+        if (elements.has(element[i]) || element[i].tagName === 'FORM' || element[i].getAttribute('crud') === 'false')
             continue
 
         let data = await initElement(element[i]);
@@ -346,14 +346,25 @@ async function setData(element, data) {
         if (el.getFilter || el.renderValue)
             await filterData(el, data, type, key)
         else {
-            let value = CRUD.getValueFromObject(data[type][0], key);
             if (key) {
+                let value
+                if (key.includes('$length')) {
+                    value = CRUD.getValueFromObject(data[type][0], key.replace(/\.\$length$/, ''))
+                    if (value)
+                        value = value.length
+                    else
+                        value = 0
+                } else {
+                    value = CRUD.getValueFromObject(data[type][0], key)
+                }
+
                 if (!data[type].length) continue;
                 if (isRead == "false" || isCrdt == "true") continue;
                 if (isListen == "false" && !data.method.endsWith('.read')) continue;
+                // TODO: object.update data returned from server will not include $operator
+                el.setValue(value);
+
             }
-            // TODO: object.update data returned from server will not include $operator
-            el.setValue(value);
         }
     }
 }
@@ -361,7 +372,8 @@ async function setData(element, data) {
 async function filterData(element, data, type, key) {
     let operator = '', value
 
-    if (key && key !== '$length') {
+    // if (key && key !== '$length') {
+    if (key && !key.includes('$length')) {
         if (!data || !type) return
 
         if (key.startsWith('$')) {
@@ -410,6 +422,9 @@ async function filterData(element, data, type, key) {
         await element.renderValue(data);
     } else if (key === '$length') {
         element.setValue(data[type].length);
+    } else if (key.includes('$length')) {
+        let value = CRUD.getValueFromObject(data[type][0], key.replace(/\.\$length$/, ''))
+        element.setValue(value.length);
     } else if (data)
         element.setValue(data)