efront 4.26.1 → 4.27.0

package/coms/frame/chat-rtc.xht

@@ -0,0 +1,275 @@
+<style>
+    & {
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background: #111;
+    }
+
+    dv {
+        border: 1px solid;
+        width: 240px;
+        height: 180px;
+        right: 10px;
+        bottom: 10px;
+        display: block;
+        position: absolute;
+        color: #fff9;
+        background: #222;
+        z-index: 1;
+
+        >span {
+            position: relative;
+        }
+
+        &[full] {
+            z-index: 0 !important;
+            width: auto !important;
+            height: auto !important;
+            left: 0 !important;
+            right: 0 !important;
+            bottom: 0 !important;
+            top: 0 !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            border: none;
+        }
+
+        &:after {
+            display: block;
+            content: "";
+            left: 0;
+            bottom: 0;
+            right: 0;
+            top: 0;
+            position: absolute;
+        }
+
+        >video {
+            display: block;
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    btn.button {
+        display: block;
+        position: absolute;
+        width: 60px;
+        line-height: 60px;
+        height: 60px;
+        border-radius: 30px;
+        margin: -23px;
+        z-index: 2;
+    }
+
+    [accept] {
+        left: 50%;
+        top: 50%;
+        background: #fff2;
+    }
+
+    [hangup] {
+        left: 50%;
+        bottom: 30px;
+        background: #913;
+    }
+
+    [info],
+    [error] {
+        display: block;
+        position: absolute;
+        top: 50%;
+        z-index: 1;
+        left: 0;
+        right: 0;
+        text-align: center;
+        line-height: 40px;
+        margin-top: -20px;
+        color: #fff;
+    }
+
+    [error] {
+        display: none;
+    }
+
+    &[error] {
+
+        [info],
+        [accept] {
+            display: none;
+        }
+
+        [error] {
+            display: block;
+        }
+    }
+</style>
+<div>
+    <dv full>
+        <video playsinline autoplay webkit-playsinline ondblclick="preventDefault"></video>
+        <span -bind="remoteUser.name"></span>
+    </dv>
+    <dv style="opacity: 0">
+        <video muted playsinline webkit-playsinline ondblclick="preventDefault"></video>
+        <span></span>
+    </dv>
+    <btn danger hangup @click="hangup">挂断</btn>
+    <btn accept -show="isRemote&&!started" @click="accept()">接听</btn>
+    <span error>${i18n`无法打开媒体设备`}</span>
+    <span info -show="started">
+        <span -bind="status()"></span>
+        &nbsp;<time></time>
+    </span>
+</div>
+<script>
+    var chatrtc = new ChatRTC;
+    // fullscreen.open();
+    var status = function () {
+        return acceptTime ? i18n`通话中` : rejectTime ? i18n`无应答` : i18n`正在呼叫`
+    };
+    var btn = button;
+    var dvs;
+    var callingStart = new Date, acceptTime = 0;
+    var started = false;
+    var interval = 0;
+    var timeNode = document.createTextNode("");
+    var rejectTime = 0;
+    care(this, function ([type, sender, data]) {
+        if (sender !== remoteUser.id) return;
+        switch (type) {
+            case "rtc-close":
+                if (acceptTime) return remove(this);
+                rejectTime = new Date;
+                if (remoteOffer) return remove(this);
+                break;
+            case "rtc-accept":
+                acceptTime = new Date;
+                chatrtc.setAnswer(data);
+                break;
+            case "rtc-didate":
+                chatrtc.addDidate(data);
+                break;
+        }
+    });
+    interval = setInterval(function () {
+        var toNum2 = a => a < 10 ? "0" + a : a;
+        var now = new Date;
+        var time = callingStart;
+        if (acceptTime) time = acceptTime;
+        var time = (new Date - time) / 1000 | 0;
+        if (time > 60 && !acceptTime && !rejectTime) {
+            rejectTime = time;
+        }
+        if (rejectTime && now - rejectTime > 16 * 1000) {
+            remove(page);
+        }
+        var value = [0, 0, 0, 0];
+        if (time >= 86400) {
+            value[0] = time / 86400 | 0;
+            time -= value[0] * 86400;
+        }
+        if (time >= 3600) {
+            value[1] = time / 3600 | 0;
+            time -= value[1] * 3600;
+        }
+        if (time >= 60) {
+            value[2] = time / 60 | 0;
+            time -= value[2] * 60;
+        }
+        value[3] = time;
+        var [date, ...time] = value;
+        if (date) timeNode.nodeValue = i18n`${date}天 ` + time.map(toNum2).join(":");
+        else if (time[0]) timeNode.nodeValue = time.map(toNum2).join(":");
+        else timeNode.nodeValue = time.slice(1).map(toNum2).join(":");
+
+    }, 20);
+    var time = function (elem) {
+        elem.appendChild(timeNode);
+    };
+    on('remove')(this, async function () {
+        await chatrtc.hangup();
+        chatrtc.send = null;
+        fullscreen.close();
+        chatrtc.remote = null;
+        chatrtc.local = null;
+        clearInterval(interval);
+    })
+    var canplay = function () {
+        var dv = this.parentNode;
+        var ratio = Math.min(dv.clientWidth / this.videoWidth, dv.clientHeight / this.videoHeight);
+        if (ratio) {
+            move.setSize(dv, [this.videoWidth * ratio, this.videoHeight * ratio]);
+            dv.style.opacity = 1;
+        }
+    }
+    once('mounted')(this, function () {
+        var [dv1, dv2, hangup, accept] = this.children;
+        dvs = [dv1, dv2];
+        drag.on(dv1, false);
+        drag.on(dv2, false);
+        drag.on(hangup, false);
+        drag.on(accept, false);
+        on("dblclick")(dv1, dblclick);
+        on("dblclick")(dv2, dblclick);
+        var v1 = chatrtc.remote = dv1.firstElementChild;
+        var v2 = chatrtc.local = dv2.firstElementChild;
+        v1.oncanplay = canplay;
+        v2.oncanplay = canplay;
+        if (!isRemote) start();
+    });
+    var accept = async function () {
+        await start();
+        acceptTime = new Date;
+    };
+    var onCandidate = function (candidate) {
+        cast(page, ["didate", candidate]);
+    };
+    var start = async function () {
+        try {
+            if (!remoteOffer) {
+                var offer = await chatrtc.call(onCandidate, remoteOffer);
+                cast(page, ['offer', offer]);
+            }
+            else {
+                var answer = await chatrtc.call(onCandidate, remoteOffer);
+                cast(page, ['accept', answer]);
+            }
+        }
+        catch {
+            page.setAttribute('error', '');
+        }
+        finally {
+            started = true;
+        }
+        render.refresh();
+    }
+    var page = this;
+    var hangup = async function () {
+        cast(page, ['hangup']);
+        remove(page);
+    };
+    var dblclick = function (a) {
+        if (this.hasAttribute('full')) return;
+        var style = this.getAttribute('style');
+        if (dvs.length !== 2) style = '';
+        dvs.forEach(v => {
+            if (v === this) v.setAttribute('full', ''), v.nodrag = true;
+            else v.removeAttribute('full'), v.nodrag = false, v.setAttribute('style', style), canplay.call(v);
+        });
+    };
+    this.onback = e => false;
+    var preventDefault = e => e.preventDefault();
+    var [remoteUser, localUser, remoteOffer] = arguments;
+    var isRemote = !!remoteOffer;
+
+</script>

package/coms/frame/chat.html

@@ -1,3 +1,8 @@
+<style>
+    [left] {
+        float: left;
+    }
+</style>
 <div head mount>
     <btn -if="users.length>0" class="menubtn" @click="showList=!showList" type_="showList?'default':'white'">
         <i></i>
@@ -7,6 +12,7 @@
     <template -if="user">
         <span -bind="user.name"></span>
         &nbsp;<span class="id">(<span -bind="user.id"></span>)</span>
+        <a left -if="user.id!==localid" @click="call()">呼叫</a>
     </template>
     <template -elseif="title" -src="title"> </template>
     <close @click="remove()"></close>

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/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);
 };