efront 4.26.2 → 4.28.0

package/coms/frame/chat.js

@@ -25,6 +25,10 @@ function msg(elem, { m }, parentScopes) {
             elem.files = files;
             onclick(elem, clickfile);
             break;
+        case "rtc-video":
+            elem.setAttribute('rtc', 'video');
+            elem.innerHTML = "视频通话";
+            break;
         default:
             elem.innerText = m.content;
     }
@@ -101,6 +105,120 @@ var dragpage = {
         render.refresh();
     }
 }
+
+var rtcMap = Object.create(null);
+var getRtc = function (userid) {
+    var rtc = rtcMap[userid];
+    if (!rtc) rtc = rtcMap[userid] = new ChatRTC;
+    return rtc;
+}
+async function pullFileWithRTC(scope, file) {
+    var userid = scope.user.id;
+    var rtc = getRtc(userid);
+    var h = await window.showSaveFilePicker({ suggestedName: file.name });
+    var writable = await h.createWritable();
+    var channel = await rtc.createChannel();
+    channel.binaryType = 'arraybuffer';
+    var writed = 0;
+    var span = document.createElement('div');
+    span.style.textAlign = 'left';
+    span.innerText = '接收' + file.name;
+    var msg = document.createElement('span');
+    msg.style = 'font-size:10px;font-family: Consolas, "Courier New", monospace, sansif;'
+    appendChild(span, msg);
+    var tipbox = alert(span, false);
+    var report = lazy(function () {
+        // <!-- console.log("接收端发送",writed); -->
+        msg.innerText = ` (${size(file.size, 2)}\\${size(writed, 2)})`;
+        var a = new Uint8Array(16);
+        var high = writed / 0x100000000 | 0;
+        var low = writed & 0xffffffff;
+        a[0] = low & 0xff;
+        a[1] = low >>> 8 & 0xff;
+        a[2] = low >>> 16 & 0xff;
+        a[3] = low >>> 24 & 0xff;
+        a[4] = high & 0xff;
+        a[5] = high >>> 8 & 0xff;
+        a[6] = high >>> 16 & 0xff;
+        a[7] = high >>> 24 & 0xff;
+        channel.send(a);
+    }, -60);
+    channel.onopen = async function () {
+        // <!-- console.log('接收端打开') -->
+        report();
+    };
+    channel.onclose = function () {
+        // <!-- console.log('接收端关闭') -->
+        if (writed === file.size) tipbox.setText(`接收完成`, 'success');
+        else tipbox.setText('接收异常', "error");
+    };
+    channel.onerror = function (event) {
+        // <!-- console.log('接收端异常',event) -->
+    };
+    var ondate = function (date) {
+        scope.send("didate", date, userid);
+    };
+    var offer = await rtc.init(ondate);
+    scope.send('accept', { file: file.id, channel: channel.id, offer })
+    channel.onmessage = async function (event) {
+        var buff = new Uint8Array(event.data);
+        writed += buff.length;
+        // <!-- console.log('接收端收到', writed, file.size); -->
+        await writable.write(buff);
+        report();
+        if (writed >= file.size) {
+            writable.close();
+        }
+    }
+}
+/**
+ * @param {File} file
+ */
+async function pushFileWithRTC(scope, file, msg) {
+    var sender = msg.sender;
+    var rtc = getRtc(sender);
+    var reader = file.stream().getReader();
+    var ondate = function (date) {
+        scope.send("didate", date, sender);
+    }
+    var answer = await rtc.init(ondate, msg.offer);
+    scope.send('takeup', answer, sender);
+    var remote = await rtc.waitChannel();
+    remote.binaryType = 'arraybuffer';
+    var writed = 0, reported = 0;
+    var readed = reader.read();
+    var sizeLimit = 65536;
+    remote.onmessage = async function (event) {
+        var [low, high] = new Uint32Array(event.data);
+        reported = high * 0x100000000 + low;
+        // <!-- console.log('发送端收到', size(writed), size(reported)); -->
+        if (reported < writed) return;
+        var readed1 = readed;
+        readed = reader.read();
+        var { done, value } = await readed1;
+        if (done) {
+            if (writed < file.size) console.error('发送未完成', size(file.size), size(writed), value);
+            remote.close();
+            return;
+        }
+        // <!-- console.log("发送",size(value.length)); -->
+        writed += value.length;
+        for (var cx = 0, dx = value.length; cx < dx;) {
+            remote.send(value.slice(cx, cx += sizeLimit));
+        }
+    }
+    remote.onclose = function () {
+        // <!-- console.log("发送端关闭") -->
+    }
+    remote.onerror = function (event) {
+        // <!-- console.log("发送端异常",event) -->
+    }
+    remote.onopen = async function () {
+        // <!-- console.log("发送端打开") -->
+    };
+}
+
+
 function chat(title = '会话窗口') {
     var page = view();
     page.innerHTML = template;
@@ -122,12 +240,36 @@ function chat(title = '会话窗口') {
             ps.totalunread += msgs.length;
         }
     }
+    var msgTemp = Object.create(null);
     page.push = function (msgs) {
         var { msglist } = ps;
         var userMap = null;
+        var cached = [], cachedi = 0;
         msgs = msgs.filter(m => {
             if (!m) return false;
-            if (isString(m)) return true;
+            if (isString(m)) {
+                if (/^\|/.test(m)) {
+                    var a = /^\|(\d+)\|(\d+)\|(\d+)\|/.exec(m);
+                    if (a) var [, msgid, total, index] = a;
+                    total = +total, index = +index, msgid = +msgid;
+                    var tmp = msgTemp[msgid];
+                    if (!tmp) {
+                        tmp = msgTemp[msgid] = Array(total);
+                        tmp.count = 0;
+                    }
+                    if (!tmp[index]) {
+                        tmp[index] = m.slice(a.index + a[0].length);
+                        tmp.count++;
+                    }
+                    if (tmp.count === total) {
+                        cached.push([cachedi, tmp.join('')]);
+                        delete msgTemp[msgid];
+                    }
+                    return false;
+                }
+                cachedi++;
+                return true;
+            }
             switch (m.type) {
                 case 'user':
                     if (!userMap) userMap = Object.create(null);
@@ -136,7 +278,11 @@ function chat(title = '会话窗口') {
                     break;
             }
             return false;
-        }).map(m => JSAM.parse(encode62.packdecode(m))).filter(m => {
+        });
+        backEach(cached, function ([i, m]) {
+            msgs.splice(i, 0, m);
+        });
+        msgs = msgs.map(m => JSAM.parse(encode62.packdecode(m))).filter(m => {
             if (m.type === 'accept') {
                 ps.pushFile(m.content);
                 return false;
@@ -152,6 +298,30 @@ function chat(title = '会话窗口') {
             var msgMap = Object.create(null);
             for (var m of msgs) {
                 var { sender } = m;
+                if (m.type === 'rtc-video') {
+                }
+                switch (m.type) {
+                    case "rtc-close":
+                    case "rtc-accept":
+                    case "rtc-didate":
+                        if (ps.calling) cast(ps.calling, [m.type, m.sender, m.content]);
+                        continue;
+                    case "didate":
+                        var rtc = rtcMap[m.sender];
+                        if (rtc) rtc.addDidate(m.content);
+                        continue;
+                    case "takeup":
+                        var rtc = rtcMap[m.sender];
+                        if (rtc) rtc.setAnswer(m.content);
+                        continue;
+                    case "rtc-video":
+                        if (ps.calling) {
+                            ps.send("rtc-close", i18n`正在通话中..`, m.sender);
+                            continue;
+                        }
+                        ps.call(sender, m.content);
+                        break;
+                }
                 if (sender) {
                     if (!msgMap[sender]) msgMap[sender] = [];
                     msgMap[sender].push(m);
@@ -181,6 +351,25 @@ function chat(title = '会话窗口') {
     page.setAttribute('ng-class', "{showList:showList}");
     var fid = 0;
     var filesMap = Object.create(null);
+    function rtcMessage([type, data]) {
+        switch (type) {
+            case "offer":
+                ps.send('rtc-video', data);
+                break;
+            case "hangup":
+                ps.send('rtc-close', "", ps.remote);
+                break;
+            case "accept":
+                ps.send('rtc-accept', data, ps.remote);
+                break;
+            case "didate":
+                ps.send('rtc-didate', data, ps.remote);
+                break;
+        }
+    }
+    function send1(msg, sendto) {
+        cast(page, 'send', [sendto, msg]);
+    }
     var ps = {
         chat: zimoli$list,
         title,
@@ -188,9 +377,33 @@ function chat(title = '会话窗口') {
         showList: 0,
         users,
         text: '',
+        calling: null,
+        remote: null,
         localid,
         totalunread: 0,
         _user: null,
+        call(remote = this.user, offer) {
+            if (this.calling) return;
+            this.remote = isObject(remote) ? remote.id : remote;
+            if (typeof remote === 'string') {
+                for (var u of this.users) {
+                    if (u.id === remote) {
+                        remote = u;
+                        break;
+                    }
+                }
+            }
+            if (!remote) return;
+            var c = chatRtc(remote, this.localid, offer);
+            this.calling = c;
+
+            on('remove')(c, function () {
+                ps.calling = null;
+                ps.remote = null;
+            })
+            care(c, rtcMessage);
+            popup(c);
+        },
         fileIcon: shapes$file,
         set user(v) {
             if (!v.msglist) v.msglist = []
@@ -209,9 +422,14 @@ function chat(title = '会话窗口') {
             remove(page);
         },
         async pullFile(f) {
+            if (!f) return;
+            if (f.rtc && ChatRTC.enabled && window.showSaveFilePicker) {
+                return pullFileWithRTC(this, f);
+            }
             cast(page, 'pullfile', f);
         },
         async pushFile(msg) {
+            if (msg.offer && ChatRTC.enabled) return pushFileWithRTC(this, filesMap[msg.file], msg);
             cast(page, 'pushfile', [msg.channel, filesMap[msg.file]]);
         },
         async chooseFile() {
@@ -239,7 +457,7 @@ function chat(title = '会话窗口') {
                     f.icon = canvas.toDataURL();
                     URL.revokeObjectURL(u);
                 }
-                flist.push({ name: f.name, icon: f.icon, size: f.size, id: ++fid, mtime: +f.lastModified });
+                flist.push({ name: f.name, rtc: ChatRTC.enabled, icon: f.icon, size: f.size, id: ++fid, mtime: +f.lastModified });
                 filesMap[fid] = f;
             }
             return this.send('file', flist);
@@ -252,22 +470,41 @@ function chat(title = '会话窗口') {
             body.resizeCell(textarea, 'top', textarea.clientHeight - targetHeight - 2);
         },
 
-        send(type, content) {
-            if (!content) return;
+        send(type, content, sendto = page.userid) {
             var msg = {
                 type,
                 sender: this.localid,
                 content,
             };
             var data = JSAM.stringify(msg);
-            if (data.length > 2000) {
+            data = encode62.packencode(data);
+            if (data.length > 16000) {
                 return alert("信息太长，无法发送！");
             }
-            if (this.user && this.user.id !== this.localid && type !== "accept") {
+            if (this.user && this.user.id !== this.localid) a: {
+                switch (type) {
+                    case "accept":
+                    case "didate":
+                    case "takeup":
+                    case "rtc-close":
+                    case "rtc-accept":
+                    case "rtc-didate":
+                        break a;
+                }
+                if (!content) return;
                 addToMsgList(this.msglist, [msg]);
             }
-            data = encode62.packencode(data);
-            cast(page, "send", data);
+            if (data.length > 2000) {
+                var count = Math.ceil(data.length / 2000);
+                var msgid = Date.now().toString().slice(-8) + "|" + count + "|";
+                for (var cx = 0, ci = 0, dx = data.length; cx < dx;) {
+                    var d = data.slice(cx, cx += 2000);
+                    send1("|" + msgid + ci++ + "|" + d, sendto);
+                }
+            }
+            else {
+                send1(data, sendto);
+            }
             this.body.lastElementChild.focus();
             this.text = '';
         }

package/coms/frame/chat.less

@@ -166,6 +166,10 @@ msg {
         background-color: #77ddaa;
         color: #333;
     }
+
+    &[rtc] {
+        color: #0006;
+    }
 }
 
 msg[files] {

package/coms/zimoli/alert.js

@@ -1,3 +1,9 @@
+// 早上梦到我的小学同学，我知道那不是真的她。
+// 因为真的她长什么样，我已十分模糊了。
+// 梦中的她只是集合了我所有喜欢过的人的优点，然后被扣上了她的身份和名字。
+// 然而，当她没带手机充电线，我想要把充电线借给她时，看到她那厌恶的眼神。
+// 我知道，那是真的厌恶，不是调皮。
+// 离开时，她为了避开我，还故意将她的物品托付给另一个男的。
 var styles = {
     blue: "#2a83cd",
     green: "#228B22",

package/coms/zimoli/drag.js

@@ -17,7 +17,6 @@ var getOffset = function (e) {
 };
 
 var getMouse = function (e) {
-    console.log(e)
     return [e.clientX, e.clientY];
 };
 var z;
@@ -63,6 +62,7 @@ function drag(target, initialEvent, preventOverflow, isMovingSource) {
         var saved_height = target.outerHeight;
     }
     var extraClones;
+    var tgz = target.style?.zIndex;
     var mousemove = function (event) {
         if (+event.moveLocked === 1) return;
         if (/resize/i.test(getComputedStyle(document.body).cursor)) return;
@@ -76,10 +76,12 @@ function drag(target, initialEvent, preventOverflow, isMovingSource) {
                 z = zIndex(0) + 1;
                 addZIndex(clone);
                 appendChild(document.body, clone);
+                tgz = null;
             } else {
                 clone = target;
                 extraTargets = [];
                 if (target.style) css(target, { zIndex: z });
+                else tgz = null;
             }
             drag.shadow = clone;
             var [clone_left, clone_top] = getOffset(clone);
@@ -112,6 +114,7 @@ function drag(target, initialEvent, preventOverflow, isMovingSource) {
         if (clone !== target) remove(clone), css(target, { opacity: saved_opacity, filter: saved_filter });
         remove(extraClones);
         extraTargets.map((target, cx) => css(target, extraStyles[cx]));
+        if (tgz != null) css(target, { zIndex: tgz });
         if (saved_delta.ing) target.removeAttribute("dragging"), dispatch("dragend", target);
         drag.target = null;
         saved_delta = null;
@@ -151,9 +154,11 @@ drag.on = function (target, actionTarget = target.dragTarget) {
         var _mousedrag = mousedrag;
         var _touchdrag = touchdrag;
     }
-    onmousedown(actionTarget || target, setZIndex);
-    ontouchstart(actionTarget || target, setZIndex);
-    on("drop")(actionTarget || target, setZIndex);
+    if (actionTarget !== false) {
+        onmousedown(actionTarget || target, setZIndex);
+        ontouchstart(actionTarget || target, setZIndex);
+        on("drop")(actionTarget || target, setZIndex);
+    }
     onmousedown(target, _mousedrag);
     ontouchstart(target, _touchdrag);
 };

package/coms/zimoli/fullscreen.js

@@ -13,7 +13,7 @@ var fullscreen = {
         return hasTarget();
     }(),
     is() {
-        if(/Android|iPad|iPhone/i.test(navigator.userAgent)){
+        if (/Android|iPad|iPhone/i.test(navigator.userAgent)) {
             return hasTarget();
         }
         if (/chrome/i.test(navigator.userAgent)) {//webkit
@@ -31,6 +31,12 @@ var fullscreen = {
     exec(element) {
         requestFullScreen(element);
     },
+    open() {
+        if (!this.is()) this.change();
+    },
+    close() {
+        this.exit();
+    },
     change() {
         if (this.is()) this.exit(alert);
         else this.exec(arguments[0] || document.documentElement);

package/coms/zimoli/move.js

@@ -94,7 +94,7 @@ function move(offsetLeft, offsetTop, preventOverflow, keepOriginIfPosible) {
     }
     return [offsetLeft, offsetTop];
 }
-move.getPosition = function (target) {
+var getPosition = move.getPosition = function (target) {
     var {
         offsetLeft,
         offsetTop,
@@ -132,7 +132,11 @@ var setPosition = move.setPosition = function (target, [x, y]) {
     var offsetTop = getOffsetLeft(y, offsetHeight, clientHeight);
     move.call(target, offsetLeft, offsetTop, undefined, false);
 };
-
+var setSize = move.setSize = function (target, [w, h]) {
+    var p = getPosition(target);
+    css(target, { width: w, height: h });
+    setPosition(target, p);
+};
 var fixPosition = move.fixPosition = function (target) {
     var computed = getComputedStyle(target);
     var {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "efront",
-    "version": "4.26.2",
+    "version": "4.28.0",
     "description": "一个开发环境，提供一种自由的前端开发模式，也可作为辅助工具使用。",
     "main": "public/efront.js",
     "directories": {