Add code for embedding

vorons · Apr 15, 2021 · ad717e6 · ad717e6
1 parent 3957ae6
commit ad717e6
Show file tree

Hide file tree

Showing 39 changed files with 253 additions and 45 deletions.
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -1,4 +1,4 @@
-(C)opyright 2020 Dirk Holtwick, <holtwick.de>
+(C)opyright 2020-2021 Dirk Holtwick, <holtwick.de>
 
 The following license applies.
 

diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ The difference between Briefing and most similar projects is, that it does not u
 
 _Why starting another video conference tool?_
 
-During the Corona pandemic 2020, I tried to create a peer-to-peer solution for homeschooling called [peer.school](https://peer.school/?referrer=peer.school). Although the project has been retired for various reasons, I learned so much about WebRTC and video/audio communication, that I did want to reuse this knowledge in this project.
+During the Corona pandemic 2020-2021, I tried to create a peer-to-peer solution for homeschooling called [peer.school](https://peer.school/?referrer=peer.school). Although the project has been retired for various reasons, I learned so much about WebRTC and video/audio communication, that I did want to reuse this knowledge in this project.
 
 _Why is it free and Open Source?_
 

diff --git a/app/src/components/app-embed.vue b/app/src/components/app-embed.vue
@@ -0,0 +1,123 @@
+<template>
+ <div class="-scroll">
+ <div class="app-welcome">
+ <h1>Embed Briefing</h1>
+ <iframe class="iframe" :src="url"></iframe>
+ <div class="url">
+ <a :href="url" targe="_blank">{{ url }}</a>
+ </div>
+ <div class="options">
+ <sea-switch v-model="presetAudio">Audio</sea-switch>
+ <sea-switch v-model="presetVideo">Video</sea-switch>
+ </div>
+ <div><br />HTML code to be used in client</div>
+ <pre class="code">{{ code }}</pre>
+
+ <div><br />Status sent from iframe</div>
+ <pre class="code">{{ status }}</pre>
+ </div>
+ </div>
+</template>
+
+<style lang="scss">
+.app-welcome {
+ margin: 2rem;
+ padding-bottom: 4rem;
+ text-align: center;
+
+ h1 {
+ font-size: 2rem;
+ margin-bottom: 1rem;
+ }
+
+ a {
+ color: rgba(43, 184, 255, 1);
+ user-select: text;
+ }
+
+ .url {
+ margin-bottom: 1rem;
+ }
+
+ .options {
+ display: inline-block;
+ margin-bottom: 1rem;
+
+ .form-group {
+ margin-bottom: 0.5rem;
+ }
+ }
+
+ .code {
+ display: inline-block;
+ text-align: left;
+ user-select: text;
+ width: 75vw;
+
+ background: #ccc;
+ color: black;
+ padding: 1rem;
+ border-radius: 0.25rem;
+ }
+}
+</style>
+
+<style>
+.iframe {
+ border: 1px solid #ccc;
+ width: Min(90vh, 90vw);
+ height: Calc(0.75 * Min(90vh, 90vw));
+ margin-bottom: 1rem;
+}
+</style>
+
+<script>
+import { DEBUG, ROOM_PATH, ROOM_URL } from "../config"
+import { generateName } from "../lib/names"
+import SeaSwitch from "../ui/sea-switch"
+import { onMessageFromFrame } from "../lib/iframe"
+
+export default {
+ components: {
+ SeaSwitch,
+ },
+ data() {
+ let defaultName = DEBUG
+ ? process.env.VUE_APP_DEBUG_DEFAULT_ROOM || "development"
+ : generateName()
+ return {
+ defaultName,
+ room: defaultName,
+ presetAudio: false,
+ presetVideo: false,
+ status: {},
+ }
+ },
+ computed: {
+ url() {
+ let prefix = DEBUG ? ROOM_PATH : ROOM_URL
+ return (
+ prefix +
+ this.defaultName +
+ "?audio=" +
+ Number(this.presetAudio) +
+ "&video=" +
+ Number(this.presetVideo)
+ )
+ },
+ code() {
+ return `\
+<iframe
+ src="${this.url}"
+></ iframe>
+`
+ },
+ },
+ mounted() {
+ onMessageFromFrame("status", (data) => {
+ console.log("new guest count", data)
+ this.status = data
+ })
+ },
+}
+</script>
diff --git a/app/src/components/app-help.vue b/app/src/components/app-help.vue
@@ -78,7 +78,7 @@
  </p>
  <p>---</p>
  <p>
- (C)opyright 2020 by
+ (C)opyright 2020-2021 by
  <a href="/goto/holtwick">Dirk Holtwick</a> |
  <a href="/goto/privacy">Privacy Policy</a> |
  <a href="/goto/imprint">Imprint</a>

diff --git a/app/src/components/app-main.vue b/app/src/components/app-main.vue
@@ -272,14 +272,6 @@
  >
  <app-share></app-share>
  </sea-modal>
-
- <!-- <sea-modal :active.sync="share" close :title="l.share.title">-->
- <!-- <app-share></app-share>-->
- <!-- </sea-modal>-->
-
- <!-- <sea-modal :active.sync="settings" close :title="l.settings.title" class="text">-->
- <!-- <app-settings></app-settings>-->
- <!-- </sea-modal>-->
  </div>
 </template>
 

diff --git a/app/src/css/_html.scss b/app/src/css/_html.scss
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 @import "variables";
 @import "reset";

diff --git a/app/src/css/_macros.scss b/app/src/css/_macros.scss
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 // Mixins
 

diff --git a/app/src/css/_reset.scss b/app/src/css/_reset.scss
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 // Inspired by https://github.com/jgthms/minireset.css/blob/master/minireset.css
 

diff --git a/app/src/css/_units.scss b/app/src/css/_units.scss
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 // Unit sizes
 

diff --git a/app/src/css/_variables.scss b/app/src/css/_variables.scss
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 @import "units";
 @import "macros";

diff --git a/app/src/css/forms.scss b/app/src/css/forms.scss
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 // Forms
 //.form-group {

diff --git a/app/src/css/index.scss b/app/src/css/index.scss
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 // units, macros
 @import "variables";

diff --git a/app/src/css/stack.scss b/app/src/css/stack.scss
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 @import "variables";
 

diff --git a/app/src/css/text.scss b/app/src/css/text.scss
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 @import "variables";
 

diff --git a/app/src/lib/assert.js b/app/src/lib/assert.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 const log = require("debug")("test:assert")
 

diff --git a/app/src/lib/base.js b/app/src/lib/base.js
@@ -1,5 +1,26 @@
 import { trackSilentException } from "../bugs"
 
+const replacer = (key, value) =>
+ value instanceof Object && !(value instanceof Array)
+ ? Object.keys(value)
+ .sort()
+ .filter((key) => value[key] != null) // Remove null and undefined
+ .reduce((sorted, key) => {
+ // Sorted copy
+ sorted[key] = value[key]
+ return sorted
+ }, {})
+ : value
+
+// https://gist.github.com/davidfurlong/463a83a33b70a3b6618e97ec9679e490
+export function JSONSortedStringify(obj, indent = 2) {
+ return JSON.stringify(obj, replacer, indent)
+}
+
+export function objectSnapshot(obj) {
+ return JSON.stringify(obj, replacer)
+}
+
 export function cloneObject(obj) {
  try {
  if (typeof obj === "object") {

diff --git a/app/src/lib/iframe.js b/app/src/lib/iframe.js
@@ -0,0 +1,21 @@
+const source = "briefing"
+
+export function postMessageToParent(name, data = {}) {
+ let info = {
+ source,
+ name,
+ data,
+ }
+ console.log("postMessageToParent", info)
+ window.parent.postMessage(info)
+}
+
+export function onMessageFromFrame(name, fn) {
+ window.addEventListener("message", (e) => {
+ let info = e.data
+ console.log("onMessageFromFrame", info)
+ if (info.source === source && info.name === name) {
+ fn(info.data)
+ }
+ })
+}
diff --git a/app/src/lib/uuid.js b/app/src/lib/uuid.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 import { v4 } from "uuid"
 

diff --git a/app/src/lib/uuid.spec.js b/app/src/lib/uuid.spec.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 import { base32Encode, UUID, UUID_length } from "./uuid"
 

diff --git a/app/src/logic/webrtc-peer.js b/app/src/logic/webrtc-peer.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 import SimplePeer from "simple-peer"
 import { cloneObject } from "../lib/base"

diff --git a/app/src/logic/webrtc.js b/app/src/logic/webrtc.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 import io from "socket.io-client"
 import { UUID } from "../lib/uuid.js"

diff --git a/app/src/main.js b/app/src/main.js
@@ -7,7 +7,7 @@ import it from "./locales/it.json"
 import zh from "./locales/zh.json"
 import fr from "./locales/fr.json"
 import App from "./pwa-app.vue"
-import { state } from "./state"
+import { postUpdateToIframeParent, state } from "./state"
 import { setupBugTracker } from "./bugs"
 
 // This will be done privacy conform, see bugs/README-BUGTRACKER.md
@@ -33,7 +33,15 @@ Vue.config.productionTip = false
 
 Vue.mixin({
  data() {
- return { state }
+ return {
+ state,
+ }
+ },
+ watch: {
+ state: {
+ handler: postUpdateToIframeParent,
+ deep: true,
+ },
  },
  methods: {
  openExternalLink(event) {
@@ -61,7 +69,13 @@ Vue.mixin({
 })
 
 Vue.use(locale, {
- locales: { en, de, it, zh, fr },
+ locales: {
+ en,
+ de,
+ it,
+ zh,
+ fr,
+ },
 })
 
 new Vue({

diff --git a/app/src/state.js b/app/src/state.js
@@ -11,7 +11,8 @@ import {
 import { trackException, trackSilentException } from "./bugs"
 import { PRODUCTION, ROOM_PATH } from "./config"
 import { normalizeName } from "./lib/names"
-
+import { postMessageToParent } from "./lib/iframe.js"
+import { objectSnapshot } from "./lib/base.js"
 const log = require("debug")("app:state")
 
 const screenshots = false
@@ -265,3 +266,39 @@ export async function setup() {
  },
  }
 }
+
+// Communicate to parent
+
+let lastUpdateSnapshot = ""
+let counter = 0
+
+export function postUpdateToIframeParent() {
+ // setTimeout(() => {
+ try {
+ let update = {
+ room: state.room,
+ error: state.error,
+ peers: Array.from(state.status || []).map((info) => ({
+ id: info.id,
+ active: info.active,
+ initiator: info.initiator,
+ error: info.error,
+ fingerprint: info.fingerprint,
+ })),
+ backgroundMode: state.backgroundMode,
+ muteVideo: state.muteVideo,
+ muteAudio: state.muteAudio,
+ maximized: state.maximized,
+ }
+ let snapshot = objectSnapshot(update)
+ console.log("snapshot", snapshot)
+ if (snapshot !== lastUpdateSnapshot) {
+ lastUpdateSnapshot = snapshot
+ update.counter = counter++
+ postMessageToParent("status", update)
+ }
+ } catch (err) {
+ console.error(err)
+ }
+ // }, 0)
+}
diff --git a/app/src/ui/lib/directives/trapFocus.js b/app/src/ui/lib/directives/trapFocus.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 const log = require("debug")("app:trapFocus")
 

diff --git a/app/src/ui/lib/helpers.js b/app/src/ui/lib/helpers.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2020 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
+// Copyright (c) 2020-2021 Dirk Holtwick. All rights reserved. https://holtwick.de/copyright
 
 export function removeElement(el) {
  try {