UNPKG

@webrtc-remote-control/vue

Version:

Thin abstraction layer above peerjs that will let you be more productive at making WebRTC data channels based apps.

126 lines (100 loc) 4.24 kB
var vue = require('vue'); var core = require('@webrtc-remote-control/core'); // eslint-disable-next-line import/no-extraneous-dependencies var MyContext = Symbol("context-webrtc-remote-control"); function provideWebTCRemoteControl(init, mode, _temp) { var _ref = _temp === void 0 ? {} : _temp, masterPeerId = _ref.masterPeerId, sessionStorageKey = _ref.sessionStorageKey, humanErrors = _ref.humanErrors; var allowedMode = ["master", "remote"]; if (!allowedMode.includes(mode)) { throw new Error("Unsupported \"" + mode + "\" mode. Only " + allowedMode.map(function (a) { return "\"" + a + "\""; }).join(", ") + " accepted."); } if (mode === "master" && masterPeerId) { console.log(typeof masterPeerId); throw new Error("`masterPeerId` prop not allowed in \"master\" mode - \"" + masterPeerId + "\" was passed."); } if (mode === "remote" && !masterPeerId) { throw new Error("`masterPeerId` prop required in \"remote\" mode."); } var utils = core.prepareUtils({ sessionStorageKey: sessionStorageKey, humanErrors: humanErrors }); var providerValue = vue.shallowRef({ peer: null, promise: null, mode: mode, masterPeerId: masterPeerId }); // expose providerValue so that it can be injected inside the hook vue.provide(MyContext, providerValue); vue.watchEffect(function (onCleanup) { console.log("Provider.watch"); providerValue.value.mode = mode; providerValue.value.humanizeError = utils.humanizeError; if (mode === "master") { providerValue.value.isConnectionFromRemote = utils.isConnectionFromRemote; } // init callback that should return a peer instance like: // `({ getPeerId }) => new Peer(getPeerId())` providerValue.value.peer = init({ humanizeError: utils.humanizeError, getPeerId: utils.getPeerId, isConnectionFromRemote: mode === "master" ? utils.isConnectionFromRemote : undefined }); providerValue.value.promise = (mode === "master" ? core.master : core.remote)["default"](utils).bindConnection(providerValue.value.peer, core.remote ? masterPeerId : undefined); // start resolving the promise as soon as possible (it will be used in `usePeer`) providerValue.value.promise.then(function (wrcApi) { console.log("Provider.then", wrcApi); }); // register cleanup onCleanup(function () { console.log("Provider.onInvalidate", providerValue.value); if (providerValue.value) { providerValue.value.peer.disconnect(); } }); }); } function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function usePeer() { console.log("usePeer"); // const ready = ref(false); var context = vue.inject(MyContext); // const resolvedWrcApi = shallowRef(null); console.log("context", context); var result = vue.reactive(_extends({}, vue.unref(context), { peerReady: false, ready: false, api: null })); vue.watchEffect(function () { // run on next tick (ensure the `then` of the Provider has executed + retrieve the api from the resolve promise) Promise.resolve().then(function () { var _context$value, _context$value$promis; console.log("hooks.Promise.resolve", context); result.peerReady = true; (_context$value = context.value) == null ? void 0 : (_context$value$promis = _context$value.promise) == null ? void 0 : _context$value$promis.then(function (wrcApi) { console.log("hooks.Promise.resolve - context.promise.then", wrcApi); // resolvedWrcApi.value = wrcApi; // ready.value = true; result.ready = true; result.api = wrcApi; }); }); }); // use toRefs ? https://vuejs.org/api/reactivity-utilities.html#torefs return vue.toRefs(result); // todo - is spread necessary ? } exports.provideWebTCRemoteControl = provideWebTCRemoteControl; exports.usePeer = usePeer; //# sourceMappingURL=vue.cjs.map