From: Ruben Beltran del Rio Date: Thu, 14 Sep 2023 09:00:18 +0000 (+0200) Subject: Format and update docs X-Git-Url: https://git.r.bdr.sh/rbdr/junction/commitdiff_plain/bab26a4da2a2a0fdc88ec3af56909b12d822113a?ds=sidebyside;hp=5685e249653cae8c2ba97c0c59c45e3221d8ffa2 Format and update docs --- diff --git a/Makefile b/Makefile index 75433ea..befc5f9 100644 --- a/Makefile +++ b/Makefile @@ -1,12 +1,12 @@ default: package start: - docker-compose up + podman-compose up -docker-build: - docker-compose build +install-extension-dependencies: + cd extension && pnpm install -build: create-build-folder +build: install-extansion-dependencies create-build-folder cd extension && pnpm build package: package-for-firefox package-for-chrome package-for-safari @@ -18,8 +18,12 @@ package-for-chrome: build cd extension && zip -r ../build/junction.zip manifest.json junction.js build/content_script.js icons/ sounds/ package-for-safari: build - xcodebuild build -project safari/Junction.xcodeproj -scheme Junction -configuration Release -derivedDataPath ./build/_xcode + xcodebuild build -project safari/Junction.xcodeproj -scheme Junction -configuration Release -derivedDataPath ./build/_xcode | xcbeautify cp -r ./build/_xcode/Build/Products/Release/Junction.app ./build/ create-build-folder: mkdir -p build + +format: + prettier . --write + xcodebuild -project safari/Junction.xcodeproj | xcbeautify diff --git a/README.md b/README.md index 44f490d..345fa6b 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,85 @@ # Junction -Connect people through any URL +Connect people through any URL. -## Extension +Junction is a web extension for Firefox, Chrome and Safari that lets you start +an audio call at any URL. -First, make sure to build the plugin. From the extension's root you can call: +## Building + +Running `make` or `make package` will regenerate the content script, and +package the extension for all browsers in the `./build/` directory with +the following outputs: + +- `junction.xpi`: The firefox extension +- `junction.zip`: The chrome extension +- `Junction.app`: The safari extension app + +## Developing + +The project is divided into three main parts: + +- `server`: A server that handles message passing to establish the WebRTC + connections. +- `extension`: The main code of the extension itself. +- `safari`: The safari app, it wraps the extension using symlinks. + +### Dependencies + +- `make` to run the build commands. +- `xcode` to build the safari extension. +- `node` and `pnpm` to build the extension, and if you want to run the server + directly. +- `podman` and `podman-compose` if you want to run the server as a container. +- `prettier` to format Javascript, JSON, Yaml, and Markdown. +- `xcbeautify` to format swift + +### Server + +The server is a socket.io server that relays messages between peers to help +establish a WebRTC connection. + +#### Configuration + +You can use environment variables to control the server. + +- `JUNCTION_SERVER_PORT` which port to listen on. Defaults to `8000`. + +### Extension + +The extension uses WebExtension manifest v2 and is compatible with Firefox, +Chrome and Safari. + +You can build all extensions using `make` in the root of the directory. + +If you want to run manually then you can run `pnpm install` from the +`extension` folder to install dependencies, and `pnpm build` to generate the +content script. ``` $ pnpm install && pnpm build ``` -### Testing on Firefox +#### Testing on Firefox In order to test on firefox, first go to `about:debugging`, then click on the `This Firefox` option. Then click on `Load Temporary Add-On` and -point the browser to the `extension/manifest.json` file. +point the browser to the `build/junction.xpi` file if you're using `make`, or +`extension/manifest.json` file if you're testing without packaging. -This will enable the extension and will allow you to use the inspector to debug. +This will enable the extension and will allow you to use the inspector to +debug. -### Testing on Chrome +#### Testing on Chrome In order to test on chrome, first go to `chrome://extensions/`. Make sure -`Developer mode` is enabled. Then click `Load Unpacked` and point the browser -to the `extension` directory. +`Developer mode` is enabled. You can drag the `build/junction.zip` file or +click `Load Unpacked` and point the browser to the `extension` directory. + +#### Testing on Safari + +Open `Junction.app` and then enable the extension in Safari. -### Packaging +### Formatting -The makefile includes scripts to create a distributable package. `make package` -should generate all supported files in the `build/` directory. +Running `make format` will format the code with prettify and xcbeautify diff --git a/docker-compose.yml b/docker-compose.yml index ec2cbed..ae342cf 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,4 +1,4 @@ -version: "3.8" +version: "3.9" services: server: diff --git a/extension/content_script.js b/extension/content_script.js index 9d46669..0c7012b 100644 --- a/extension/content_script.js +++ b/extension/content_script.js @@ -61,7 +61,7 @@ const internals = { shouldCreateOffer, mediaStream, onOffer: (data) => socket.emit("relayOffer", data), - socket + socket, }); playTada(); }); diff --git a/extension/junction.js b/extension/junction.js index 7760969..c3cb4e9 100644 --- a/extension/junction.js +++ b/extension/junction.js @@ -72,14 +72,15 @@ const internals = { internals.injectedScript = true; }, ); - } else { - internals.getRoot().tabs.connect(activeTabs[0].id) - } - if (execution && !execution[0]) { - internals.onDisconnect(); + if (execution && !execution[0]) { + internals.onDisconnect(); + } + } else { + internals.getRoot().tabs.connect(activeTabs[0].id); } }, + hangUp() { internals.getRoot().browserAction.disable(); internals.port.postMessage({ diff --git a/extension/peers.js b/extension/peers.js index be494b0..fced108 100644 --- a/extension/peers.js +++ b/extension/peers.js @@ -13,7 +13,13 @@ const internals = { }, }; -export function addPeer({ peerId, shouldCreateOffer, mediaStream, onOffer, socket }) { +export function addPeer({ + peerId, + shouldCreateOffer, + mediaStream, + onOffer, + socket, +}) { const peerConnection = new RTCPeerConnection( { iceServers: internals.kIceServers }, { optional: [{ DtlsSrtpKeyAgreement: true }] }, diff --git a/safari/Junction/Assets.xcassets/AccentColor.colorset/Contents.json b/safari/Junction/Assets.xcassets/AccentColor.colorset/Contents.json index eb87897..0afb3cf 100644 --- a/safari/Junction/Assets.xcassets/AccentColor.colorset/Contents.json +++ b/safari/Junction/Assets.xcassets/AccentColor.colorset/Contents.json @@ -1,11 +1,11 @@ { - "colors" : [ + "colors": [ { - "idiom" : "universal" + "idiom": "universal" } ], - "info" : { - "author" : "xcode", - "version" : 1 + "info": { + "author": "xcode", + "version": 1 } } diff --git a/safari/Junction/Assets.xcassets/AppIcon.appiconset/Contents.json b/safari/Junction/Assets.xcassets/AppIcon.appiconset/Contents.json index 64dc11e..8815e3e 100644 --- a/safari/Junction/Assets.xcassets/AppIcon.appiconset/Contents.json +++ b/safari/Junction/Assets.xcassets/AppIcon.appiconset/Contents.json @@ -1,68 +1,68 @@ { - "images" : [ + "images": [ { - "filename" : "icon_16x16.png", - "idiom" : "mac", - "scale" : "1x", - "size" : "16x16" + "filename": "icon_16x16.png", + "idiom": "mac", + "scale": "1x", + "size": "16x16" }, { - "filename" : "icon_16x16@2x.png", - "idiom" : "mac", - "scale" : "2x", - "size" : "16x16" + "filename": "icon_16x16@2x.png", + "idiom": "mac", + "scale": "2x", + "size": "16x16" }, { - "filename" : "icon_32x32.png", - "idiom" : "mac", - "scale" : "1x", - "size" : "32x32" + "filename": "icon_32x32.png", + "idiom": "mac", + "scale": "1x", + "size": "32x32" }, { - "filename" : "icon_32x32@2x.png", - "idiom" : "mac", - "scale" : "2x", - "size" : "32x32" + "filename": "icon_32x32@2x.png", + "idiom": "mac", + "scale": "2x", + "size": "32x32" }, { - "filename" : "icon_128x128.png", - "idiom" : "mac", - "scale" : "1x", - "size" : "128x128" + "filename": "icon_128x128.png", + "idiom": "mac", + "scale": "1x", + "size": "128x128" }, { - "filename" : "icon_128x128@2x.png", - "idiom" : "mac", - "scale" : "2x", - "size" : "128x128" + "filename": "icon_128x128@2x.png", + "idiom": "mac", + "scale": "2x", + "size": "128x128" }, { - "filename" : "icon_256x256.png", - "idiom" : "mac", - "scale" : "1x", - "size" : "256x256" + "filename": "icon_256x256.png", + "idiom": "mac", + "scale": "1x", + "size": "256x256" }, { - "filename" : "icon_256x256@2x.png", - "idiom" : "mac", - "scale" : "2x", - "size" : "256x256" + "filename": "icon_256x256@2x.png", + "idiom": "mac", + "scale": "2x", + "size": "256x256" }, { - "filename" : "icon_512x512.png", - "idiom" : "mac", - "scale" : "1x", - "size" : "512x512" + "filename": "icon_512x512.png", + "idiom": "mac", + "scale": "1x", + "size": "512x512" }, { - "filename" : "icon_512x512@2x.png", - "idiom" : "mac", - "scale" : "2x", - "size" : "512x512" + "filename": "icon_512x512@2x.png", + "idiom": "mac", + "scale": "2x", + "size": "512x512" } ], - "info" : { - "author" : "xcode", - "version" : 1 + "info": { + "author": "xcode", + "version": 1 } } diff --git a/safari/Junction/Assets.xcassets/Contents.json b/safari/Junction/Assets.xcassets/Contents.json index 73c0059..74d6a72 100644 --- a/safari/Junction/Assets.xcassets/Contents.json +++ b/safari/Junction/Assets.xcassets/Contents.json @@ -1,6 +1,6 @@ { - "info" : { - "author" : "xcode", - "version" : 1 + "info": { + "author": "xcode", + "version": 1 } } diff --git a/safari/Junction/Assets.xcassets/LargeIcon.imageset/Contents.json b/safari/Junction/Assets.xcassets/LargeIcon.imageset/Contents.json index a19a549..ae524e7 100644 --- a/safari/Junction/Assets.xcassets/LargeIcon.imageset/Contents.json +++ b/safari/Junction/Assets.xcassets/LargeIcon.imageset/Contents.json @@ -1,20 +1,20 @@ { - "images" : [ + "images": [ { - "idiom" : "universal", - "scale" : "1x" + "idiom": "universal", + "scale": "1x" }, { - "idiom" : "universal", - "scale" : "2x" + "idiom": "universal", + "scale": "2x" }, { - "idiom" : "universal", - "scale" : "3x" + "idiom": "universal", + "scale": "3x" } ], - "info" : { - "author" : "xcode", - "version" : 1 + "info": { + "author": "xcode", + "version": 1 } } diff --git a/safari/Junction/Base.lproj/Main.html b/safari/Junction/Base.lproj/Main.html index 081cc41..96adac3 100644 --- a/safari/Junction/Base.lproj/Main.html +++ b/safari/Junction/Base.lproj/Main.html @@ -1,19 +1,32 @@ - + - - - + + + - + - + - - - Junction Icon -

You can turn on Junction’s extension in Safari Extensions preferences.

-

Junction’s extension is currently on. You can turn it off in Safari Extensions preferences.

-

Junction’s extension is currently off. You can turn it on in Safari Extensions preferences.

- - + + + Junction Icon +

+ You can turn on Junction’s extension in Safari Extensions preferences. +

+

+ Junction’s extension is currently on. You can turn it off in Safari + Extensions preferences. +

+

+ Junction’s extension is currently off. You can turn it on in Safari + Extensions preferences. +

+ + diff --git a/safari/Junction/Resources/Script.js b/safari/Junction/Resources/Script.js index f551e6b..9bdbda7 100644 --- a/safari/Junction/Resources/Script.js +++ b/safari/Junction/Resources/Script.js @@ -1,22 +1,28 @@ function show(enabled, useSettingsInsteadOfPreferences) { - if (useSettingsInsteadOfPreferences) { - document.getElementsByClassName('state-on')[0].innerText = "Junction’s extension is currently on. You can turn it off in the Extensions section of Safari Settings."; - document.getElementsByClassName('state-off')[0].innerText = "Junction’s extension is currently off. You can turn it on in the Extensions section of Safari Settings."; - document.getElementsByClassName('state-unknown')[0].innerText = "You can turn on Junction’s extension in the Extensions section of Safari Settings."; - document.getElementsByClassName('open-preferences')[0].innerText = "Quit and Open Safari Settings…"; - } + if (useSettingsInsteadOfPreferences) { + document.getElementsByClassName("state-on")[0].innerText = + "Junction’s extension is currently on. You can turn it off in the Extensions section of Safari Settings."; + document.getElementsByClassName("state-off")[0].innerText = + "Junction’s extension is currently off. You can turn it on in the Extensions section of Safari Settings."; + document.getElementsByClassName("state-unknown")[0].innerText = + "You can turn on Junction’s extension in the Extensions section of Safari Settings."; + document.getElementsByClassName("open-preferences")[0].innerText = + "Quit and Open Safari Settings…"; + } - if (typeof enabled === "boolean") { - document.body.classList.toggle(`state-on`, enabled); - document.body.classList.toggle(`state-off`, !enabled); - } else { - document.body.classList.remove(`state-on`); - document.body.classList.remove(`state-off`); - } + if (typeof enabled === "boolean") { + document.body.classList.toggle(`state-on`, enabled); + document.body.classList.toggle(`state-off`, !enabled); + } else { + document.body.classList.remove(`state-on`); + document.body.classList.remove(`state-off`); + } } function openPreferences() { - webkit.messageHandlers.controller.postMessage("open-preferences"); + webkit.messageHandlers.controller.postMessage("open-preferences"); } -document.querySelector("button.open-preferences").addEventListener("click", openPreferences); +document + .querySelector("button.open-preferences") + .addEventListener("click", openPreferences); diff --git a/safari/Junction/Resources/Style.css b/safari/Junction/Resources/Style.css index cbde9e6..ef4dcde 100644 --- a/safari/Junction/Resources/Style.css +++ b/safari/Junction/Resources/Style.css @@ -1,45 +1,45 @@ * { - -webkit-user-select: none; - -webkit-user-drag: none; - cursor: default; + -webkit-user-select: none; + -webkit-user-drag: none; + cursor: default; } :root { - color-scheme: light dark; + color-scheme: light dark; - --spacing: 20px; + --spacing: 20px; } html { - height: 100%; + height: 100%; } body { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; - gap: var(--spacing); - margin: 0 calc(var(--spacing) * 2); - height: 100%; + gap: var(--spacing); + margin: 0 calc(var(--spacing) * 2); + height: 100%; - font: -apple-system-short-body; - text-align: center; + font: -apple-system-short-body; + text-align: center; } body:not(.state-on, .state-off) :is(.state-on, .state-off) { - display: none; + display: none; } body.state-on :is(.state-off, .state-unknown) { - display: none; + display: none; } body.state-off :is(.state-on, .state-unknown) { - display: none; + display: none; } button { - font-size: 1em; + font-size: 1em; } diff --git a/server/events.js b/server/events.js index 18b9dd4..e8094d5 100644 --- a/server/events.js +++ b/server/events.js @@ -25,7 +25,7 @@ export const types = { export function addPeer(peerId, shouldCreateOffer) { return internals.emitter.bind(null, types.ADD_PEER, { peerId, - shouldCreateOffer + shouldCreateOffer, }); }