pip/interface/PiPCall.js

/*
 * Copyright (c) 2023 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

const curves = requireNativeModule('ohos.curves');
const PiPWindow = requireNapi('PiPWindow');
const pip = requireNapi('pip');

const TAG = "PiPCall";
const TIMEOUT = 3e3;

export class PiPCall extends ViewPU {
    constructor(e, t, o, i = -1, n = void 0) {
        super(e, o, i);
        "function" == typeof n && (this.paramsGenerator_ = n);
        this.xComponentId = "pip";
        this.windowType = PiPWindow.PiPTemplateType.VIDEO_CALL;
        this.hideEventId = -1;
        this.__showControl = new ObservedPropertySimplePU(!1, this, "showControl");
        this.xComponentController = new XComponentController;
        this.surfaceId = "";
        this.controlTransEffect = TransitionEffect.OPACITY;
        this.__hideControlNow = new ObservedPropertySimplePU(!1, this, "hideControlNow");
        this.addProvidedVar("hideControlNow", this.__hideControlNow);
        this.__hideControlDelay = new ObservedPropertySimplePU(!1, this, "hideControlDelay");
        this.addProvidedVar("hideControlDelay", this.__hideControlDelay);
        this.setInitiallyProvidedValue(t);
        this.declareWatch("hideControlNow", this.onHideControlNow);
        this.declareWatch("hideControlDelay", this.onHideControlDelay)
    }

    setInitiallyProvidedValue(e) {
        void 0 !== e.xComponentId && (this.xComponentId = e.xComponentId);
        void 0 !== e.windowType && (this.windowType = e.windowType);
        void 0 !== e.hideEventId && (this.hideEventId = e.hideEventId);
        void 0 !== e.showControl && (this.showControl = e.showControl);
        void 0 !== e.xComponentController && (this.xComponentController = e.xComponentController);
        void 0 !== e.surfaceId && (this.surfaceId = e.surfaceId);
        void 0 !== e.controlTransEffect && (this.controlTransEffect = e.controlTransEffect);
        void 0 !== e.hideControlNow && (this.hideControlNow = e.hideControlNow);
        void 0 !== e.hideControlDelay && (this.hideControlDelay = e.hideControlDelay)
    }

    updateStateVars(e) {
    }

    purgeVariableDependenciesOnElmtId(e) {
        this.__showControl.purgeDependencyOnElmtId(e);
        this.__hideControlNow.purgeDependencyOnElmtId(e);
        this.__hideControlDelay.purgeDependencyOnElmtId(e)
    }

    aboutToBeDeleted() {
        this.__showControl.aboutToBeDeleted();
        this.__hideControlNow.aboutToBeDeleted();
        this.__hideControlDelay.aboutToBeDeleted();
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal()
    }

    get showControl() {
        return this.__showControl.get()
    }

    set showControl(e) {
        this.__showControl.set(e)
    }

    get hideControlNow() {
        return this.__hideControlNow.get()
    }

    set hideControlNow(e) {
        this.__hideControlNow.set(e)
    }

    get hideControlDelay() {
        return this.__hideControlDelay.get()
    }

    set hideControlDelay(e) {
        this.__hideControlDelay.set(e)
    }

    onHideControlNow() {
        this.hideControlNow && this.switchToHideWithoutAnime();
        this.hideControlNow = !1
    }

    onHideControlDelay() {
        this.hideControlDelay && this.delayHide();
        this.hideControlDelay = !1
    }

    switchToShow() {
        Context.animateTo({ curve: curves.responsiveSpringMotion(0.25, 1) }, (() => {
            this.showControl = !0
        }));
        this.delayHide()
    }

    switchToHide() {
        -1 !== this.hideEventId && clearTimeout(this.hideEventId);
        Context.animateTo({ curve: curves.responsiveSpringMotion(0.25, 1) }, (() => {
            this.showControl = !1
        }))
    }

    switchToHideWithoutAnime() {
        -1 !== this.hideEventId && clearTimeout(this.hideEventId);
        this.showControl = !1
    }

    delayHide() {
        -1 !== this.hideEventId && clearTimeout(this.hideEventId);
        this.hideEventId = this.showControl ? setTimeout((() => {
            Context.animateTo({ curve: curves.responsiveSpringMotion(0.25, 1) }, (() => {
                this.showControl = !1
            }))
        }), 3e3) : -1
    }

    initialRender() {
        this.observeComponentCreation2(((e, t) => {
            Stack.create();
            Stack.size({ width: "100%", height: "100%" })
        }), Stack);
        this.observeComponentCreation2(((e, t) => {
            XComponent.create({
                id: this.xComponentId,
                type: "surface",
                controller: this.xComponentController
            }, "pipXComponent");
            XComponent.onLoad((() => {
                pip.initXComponentController(this.xComponentController);
                console.debug(TAG, "XComponent onLoad done")
            }));
            XComponent.size({ width: "100%", height: "100%" })
        }), XComponent);
        this.observeComponentCreation2(((e, t) => {
            RelativeContainer.create();
            RelativeContainer.size({ width: "100%", height: "100%" });
            RelativeContainer.id("control");
            Gesture.create(GesturePriority.Low);
            GestureGroup.create(GestureMode.Exclusive);
            TapGesture.create({ count: 2 });
            TapGesture.onAction((e => {
                this.switchToHideWithoutAnime();
                pip.processScale()
            }));
            TapGesture.pop();
            TapGesture.create({ count: 1 });
            TapGesture.onAction((e => {
                this.showControl ? this.switchToHide() : this.switchToShow()
            }));
            TapGesture.pop();
            PanGesture.create();
            PanGesture.onActionStart((e => {
                this.switchToHide();
                pip.startMove()
            }));
            PanGesture.pop();
            GestureGroup.pop();
            Gesture.pop()
        }), RelativeContainer);
        this.observeComponentCreation2(((e, t) => {
            Stack.create();
            Stack.size({ width: "100%", height: "100%" });
            Stack.id("fill_stack")
        }), Stack);
        Stack.pop();
        this.observeComponentCreation2(((e, t) => {
            If.create();
            this.showControl ? this.ifElseBranchUpdateFunction(0, (() => {
                if (!If.canRetake("control_inner")) {
                    this.observeComponentCreation2(((e, t) => {
                        RelativeContainer.create();
                        RelativeContainer.size({ width: "100%", height: "100%" });
                        RelativeContainer.transition(this.controlTransEffect);
                        RelativeContainer.alignRules({
                            top: { anchor: "__container__", align: VerticalAlign.Top },
                            right: { anchor: "__container__", align: HorizontalAlign.End }
                        });
                        RelativeContainer.id("control_inner")
                    }), RelativeContainer);
                    this.observeComponentCreation2(((e, t) => {
                        if (t) {
                            let t = () => ({});
                            ViewPU.create(new DefaultControl(this, {}, void 0, e, t))
                        } else this.updateStateVarsOfChildByElmtId(e, {})
                    }), null);
                    this.observeComponentCreation2(((e, t) => {
                        if (t) {
                            let t = () => ({});
                            ViewPU.create(new CallControl(this, {}, void 0, e, t))
                        } else this.updateStateVarsOfChildByElmtId(e, {})
                    }), null);
                    RelativeContainer.pop()
                }
            })) : this.ifElseBranchUpdateFunction(1, (() => {
            }))
        }), If);
        If.pop();
        RelativeContainer.pop();
        Stack.pop()
    }

    rerender() {
        this.updateDirtyElements()
    }
}

class DefaultControl extends ViewPU {
    constructor(e, t, o, i = -1, n = void 0) {
        super(e, o, i);
        "function" == typeof n && (this.paramsGenerator_ = n);
        this.__hideControlNow = this.initializeConsume("hideControlNow", "hideControlNow");
        this.setInitiallyProvidedValue(t)
    }

    setInitiallyProvidedValue(e) {
    }

    updateStateVars(e) {
    }

    purgeVariableDependenciesOnElmtId(e) {
        this.__hideControlNow.purgeDependencyOnElmtId(e)
    }

    aboutToBeDeleted() {
        this.__hideControlNow.aboutToBeDeleted();
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal()
    }

    get hideControlNow() {
        return this.__hideControlNow.get()
    }

    set hideControlNow(e) {
        this.__hideControlNow.set(e)
    }

    initialRender() {
        this.observeComponentCreation2(((e, t) => {
            RelativeContainer.create();
            RelativeContainer.width("100%");
            RelativeContainer.height(48);
            RelativeContainer.linearGradient({ angle: 180, colors: [["#30000000", 0], ["#00000000", 1]] });
            RelativeContainer.alignRules({
                top: { anchor: "__container__", align: VerticalAlign.Top },
                left: { anchor: "__container__", align: HorizontalAlign.Start }
            });
            RelativeContainer.id("default_control")
        }), RelativeContainer);
        this.observeComponentCreation2(((e, t) => {
            Button.createWithChild({ type: ButtonType.Circle });
            Button.backgroundColor("#00FFFFFF");
            Button.size({ width: 24, height: 24 });
            Button.margin(12);
            Button.alignRules({
                center: { anchor: "__container__", align: VerticalAlign.Center },
                left: { anchor: "__container__", align: HorizontalAlign.Start }
            });
            Button.id("control_exit");
            Button.responseRegion({ x: "-50%", y: "-50%", width: "200%", height: "200%" });
            Button.onClick((() => {
                this.hideControlNow = !0;
                pip.close();
                console.debug(TAG, "action: exit")
            }))
        }), Button);
        this.observeComponentCreation2(((e, t) => {
            Image.create({
                id: -1,
                type: 2e4,
                params: ["sys.media.ohos_ic_public_close"],
                bundleName: "",
                moduleName: ""
            });
            Image.size({ width: 24, height: 24 });
            Image.fillColor({
                id: -1,
                type: 10001,
                params: ["sys.color.ohos_id_color_primary_contrary"],
                bundleName: "",
                moduleName: ""
            });
            Image.objectFit(ImageFit.Contain)
        }), Image);
        Button.pop();
        this.observeComponentCreation2(((e, t) => {
            Button.createWithChild({ type: ButtonType.Circle });
            Button.backgroundColor("#00FFFFFF");
            Button.size({ width: 24, height: 24 });
            Button.margin(12);
            Button.alignRules({
                center: { anchor: "__container__", align: VerticalAlign.Center },
                right: { anchor: "__container__", align: HorizontalAlign.End }
            });
            Button.id("control_restore");
            Button.responseRegion({ x: "-50%", y: "-50%", width: "200%", height: "200%" });
            Button.onClick((() => {
                this.hideControlNow = !0;
                pip.restore();
                console.debug(TAG, "action: restore")
            }))
        }), Button);
        this.observeComponentCreation2(((e, t) => {
            Image.create({
                id: -1,
                type: 2e4,
                params: ["sys.media.ohos_ic_public_restore"],
                bundleName: "",
                moduleName: ""
            });
            Image.fillColor({
                id: -1,
                type: 10001,
                params: ["sys.color.ohos_id_color_primary_contrary"],
                bundleName: "",
                moduleName: ""
            });
            Image.objectFit(ImageFit.Contain)
        }), Image);
        Button.pop();
        RelativeContainer.pop()
    }

    rerender() {
        this.updateDirtyElements()
    }
}

const sizeArray = [1, 1.5];

class CallControl extends ViewPU {
    constructor(e, t, o, i = -1, n = void 0) {
        super(e, o, i);
        "function" == typeof n && (this.paramsGenerator_ = n);
        this.__isMute = new ObservedPropertySimplePU(!0, this, "isMute");
        this.__isRecord = new ObservedPropertySimplePU(!0, this, "isRecord");
        this.__defaultMargin = new ObservedPropertySimplePU(8, this, "defaultMargin");
        this.__defaultSize = new ObservedPropertySimplePU(12, this, "defaultSize");
        this.__defaultBigSize = new ObservedPropertySimplePU(24, this, "defaultBigSize");
        this.__sizeIndex = new ObservedPropertySimplePU(0, this, "sizeIndex");
        this.__hideControlDelay = this.initializeConsume("hideControlDelay", "hideControlDelay");
        this.setInitiallyProvidedValue(t)
    }

    setInitiallyProvidedValue(e) {
        void 0 !== e.isMute && (this.isMute = e.isMute);
        void 0 !== e.isRecord && (this.isRecord = e.isRecord);
        void 0 !== e.defaultMargin && (this.defaultMargin = e.defaultMargin);
        void 0 !== e.defaultSize && (this.defaultSize = e.defaultSize);
        void 0 !== e.defaultBigSize && (this.defaultBigSize = e.defaultBigSize);
        void 0 !== e.sizeIndex && (this.sizeIndex = e.sizeIndex)
    }

    updateStateVars(e) {
    }

    purgeVariableDependenciesOnElmtId(e) {
        this.__isMute.purgeDependencyOnElmtId(e);
        this.__isRecord.purgeDependencyOnElmtId(e);
        this.__defaultMargin.purgeDependencyOnElmtId(e);
        this.__defaultSize.purgeDependencyOnElmtId(e);
        this.__defaultBigSize.purgeDependencyOnElmtId(e);
        this.__sizeIndex.purgeDependencyOnElmtId(e);
        this.__hideControlDelay.purgeDependencyOnElmtId(e)
    }

    aboutToBeDeleted() {
        this.__isMute.aboutToBeDeleted();
        this.__isRecord.aboutToBeDeleted();
        this.__defaultMargin.aboutToBeDeleted();
        this.__defaultSize.aboutToBeDeleted();
        this.__defaultBigSize.aboutToBeDeleted();
        this.__sizeIndex.aboutToBeDeleted();
        this.__hideControlDelay.aboutToBeDeleted();
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal()
    }

    get isMute() {
        return this.__isMute.get()
    }

    set isMute(e) {
        this.__isMute.set(e)
    }

    get isRecord() {
        return this.__isRecord.get()
    }

    set isRecord(e) {
        this.__isRecord.set(e)
    }

    get defaultMargin() {
        return this.__defaultMargin.get()
    }

    set defaultMargin(e) {
        this.__defaultMargin.set(e)
    }

    get defaultSize() {
        return this.__defaultSize.get()
    }

    set defaultSize(e) {
        this.__defaultSize.set(e)
    }

    get defaultBigSize() {
        return this.__defaultBigSize.get()
    }

    set defaultBigSize(e) {
        this.__defaultBigSize.set(e)
    }

    get sizeIndex() {
        return this.__sizeIndex.get()
    }

    set sizeIndex(e) {
        this.__sizeIndex.set(e)
    }

    get hideControlDelay() {
        return this.__hideControlDelay.get()
    }

    set hideControlDelay(e) {
        this.__hideControlDelay.set(e)
    }

    initialRender() {
        this.observeComponentCreation2(((e, t) => {
            RelativeContainer.create();
            RelativeContainer.width("100%");
            RelativeContainer.height(48);
            RelativeContainer.onAreaChange(((e, t) => {
                e.width != t.width && (this.sizeIndex = t.width >= 150 ? 1 : 0)
            }));
            RelativeContainer.alignRules({
                bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
                left: { anchor: "__container__", align: HorizontalAlign.Start }
            });
            RelativeContainer.id("call_control")
        }), RelativeContainer);
        this.observeComponentCreation2(((e, t) => {
            Button.createWithChild({ type: ButtonType.Circle });
            Button.backgroundColor({
                id: -1,
                type: 10001,
                params: ["sys.color.ohos_id_color_handup"],
                bundleName: "",
                moduleName: ""
            });
            Button.size({ width: 24 * sizeArray[this.sizeIndex], height: 24 * sizeArray[this.sizeIndex] });
            Button.margin({
                top: 12,
                bottom: 12
            });
            Button.alignRules({
                bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
                middle: { anchor: "__container__", align: HorizontalAlign.Center }
            });
            Button.id("control_hangup");
            Button.onClick((() => {
                this.hideControlDelay = !0;
                pip.triggerAction("hangUp");
                console.debug(TAG, "action: hangup")
            }))
        }), Button);
        this.observeComponentCreation2(((e, t) => {
            Image.create({
                id: -1,
                type: 2e4,
                params: ["sys.media.ohos_ic_public_hang_up"],
                bundleName: "",
                moduleName: ""
            });
            Image.size({ width: 12 * sizeArray[this.sizeIndex], height: 12 * sizeArray[this.sizeIndex] });
            Image.fillColor({
                id: -1,
                type: 10001,
                params: ["sys.color.ohos_id_color_primary_contrary"],
                bundleName: "",
                moduleName: ""
            });
            Image.objectFit(ImageFit.Contain)
        }), Image);
        Button.pop();
        this.observeComponentCreation2(((e, t) => {
            Button.createWithChild({ type: ButtonType.Circle });
            Button.backgroundColor({
                id: -1,
                type: 10001,
                params: ["sys.color.ohos_id_color_floating_button_icon"],
                bundleName: "",
                moduleName: ""
            });
            Button.size({ width: 16 * sizeArray[this.sizeIndex], height: 16 * sizeArray[this.sizeIndex] });
            Button.margin({
                left: 8 * sizeArray[this.sizeIndex],
                right: 8 * sizeArray[this.sizeIndex]
            });
            Button.alignRules({
                center: { anchor: "control_hangup", align: VerticalAlign.Center },
                right: { anchor: "control_hangup", align: HorizontalAlign.Start }
            });
            Button.id("control_mute");
            Button.onClick((() => {
                this.hideControlDelay = !0;
                this.isMute = !this.isMute;
                pip.triggerAction("micStateChanged");
                console.debug(TAG, "action: mic enable or disable")
            }))
        }), Button);
        this.observeComponentCreation2(((e, t) => {
            Image.create(this.isMute ? {
                id: -1,
                type: 2e4,
                params: ["sys.media.ohos_ic_public_voice"],
                bundleName: "",
                moduleName: ""
            } : {
                id: -1,
                type: 2e4,
                params: ["sys.media.ohos_ic_public_voice_off"],
                bundleName: "",
                moduleName: ""
            });
            Image.size({ width: 8 * sizeArray[this.sizeIndex], height: 8 * sizeArray[this.sizeIndex] });
            Image.fillColor({
                id: -1,
                type: 10001,
                params: ["sys.color.ohos_id_color_primary"],
                bundleName: "",
                moduleName: ""
            });
            Image.objectFit(ImageFit.Contain)
        }), Image);
        Button.pop();
        this.observeComponentCreation2(((e, t) => {
            Button.createWithChild({ type: ButtonType.Circle });
            Button.backgroundColor({
                id: -1,
                type: 10001,
                params: ["sys.color.ohos_id_color_floating_button_icon"],
                bundleName: "",
                moduleName: ""
            });
            Button.size({ width: 16 * sizeArray[this.sizeIndex], height: 16 * sizeArray[this.sizeIndex] });
            Button.margin({
                left: 8 * sizeArray[this.sizeIndex],
                right: 8 * sizeArray[this.sizeIndex]
            });
            Button.alignRules({
                center: { anchor: "control_hangup", align: VerticalAlign.Center },
                left: { anchor: "control_hangup", align: HorizontalAlign.End }
            });
            Button.id("control_record");
            Button.onClick((() => {
                this.hideControlDelay = !0;
                this.isRecord = !this.isRecord;
                pip.triggerAction("videoStateChanged");
                console.debug(TAG, "action: video enable or disable")
            }))
        }), Button);
        this.observeComponentCreation2(((e, t) => {
            Image.create(this.isRecord ? {
                id: -1,
                type: 2e4,
                params: ["sys.media.ohos_ic_public_video"],
                bundleName: "",
                moduleName: ""
            } : {
                id: -1,
                type: 2e4,
                params: ["sys.media.ohos_ic_public_video_off"],
                bundleName: "",
                moduleName: ""
            });
            Image.size({ width: 8 * sizeArray[this.sizeIndex], height: 8 * sizeArray[this.sizeIndex] });
            Image.fillColor({
                id: -1,
                type: 10001,
                params: ["sys.color.ohos_id_color_primary"],
                bundleName: "",
                moduleName: ""
            });
            Image.objectFit(ImageFit.Contain)
        }), Image);
        Button.pop();
        RelativeContainer.pop()
    }

    rerender() {
        this.updateDirtyElements()
    }
}

ViewStackProcessor.StartGetAccessRecordingFor(ViewStackProcessor.AllocateNewElmetIdForNextComponent());
loadDocument(new PiPCall(void 0, {}));
ViewStackProcessor.StopGetAccessRecording();