Merge pull request #6 from attach-live/master-m4

Master m4

Author: Oliver Hausler

README.md

@@ -38,7 +38,10 @@ class App extends React.Component {
 		return (
 			<>
 				<div>
-					<Reactions />
+					<Reactions item="https://developers.attach.live" />
+				</div>
+				<div>
+					<Reactions properties={{ services: 'videos' }} />
 				</div>
 				<div>
 					<Preview />
@@ -53,18 +56,18 @@ class App extends React.Component {
 
 Embeds API, convenient re-export from `attach-embeds`
 
-## Reactions
-
-React component.
+## Components
 
-Props:
+All components accept these common props:
 
-- `className`, `style` - forwarded to the iframe
+- `className`, `style`
+- `properties` - object, set [properties](https://github.com/attach-live/attach-properties) local to the embed
+- `item` - same as setting `properties={{ 'attach:item': '...' }}`
 
-## Preview
+### Reactions
 
-React component.
+Renders the reactions embed.
 
-Props:
+### Preview
 
-- `className`, `style` - forwarded to the iframe
+Renders the preview embed.

source/index.js

@@ -2,97 +2,55 @@
 import React from 'react'
 import uuid from 'nanoid'
 import * as attach from '@attach/attach-embeds'
-
-// utilities
-import units, { basePath } from './units'
 // endregion
 
 // region embed
-const embed = name => {
-	const path = units[name].path
-	const webrtcAttributes = units[name].webrtc
-		? {
-				allowusermedia: true,
-				allowfullscreen: true,
-				webkitallowfullscreen: true,
-				mozallowfullscreen: true,
-				allow: 'camera; microphone; autoplay; fullscreen',
-		  }
-		: {}
-
-	return class Embed extends React.Component {
+const embed = name =>
+	class Embed extends React.Component {
 		constructor(props) {
 			super(props)
-			this.state = { visibility: 'hidden' }
-			this.unitId = uuid()
-			this.iframeLoaded = false
-			this.iframeRef = React.createRef()
-			this.onLoad = this.onLoad.bind(this)
-			this.sendMessage = this.sendMessage.bind(this)
+			this.embedId = props.embedId || uuid()
 			this.updateProperties = this.updateProperties.bind(this)
+			this.getMergedProperties = this.getMergedProperties.bind(this)
+		}
+
+		componentDidMount() {
+			attach.render()
 		}
 
 		componentDidUpdate(prevProps, prevState) {
-			if (prevProps.properties !== this.props.properties) {
+			if (prevProps.properties !== this.props.properties || prevProps.item !== this.props.item) {
 				this.updateProperties()
 			}
 		}
 
-		sendMessage(type, data) {
-			const message = {
-				data,
-				meta: {
-					from: 'main',
-					to: name,
-					type,
-				},
+		getMergedProperties() {
+			const properties = { ...this.props.properties }
+			if (this.props.item) {
+				properties['attach:item'] = this.props.item
 			}
-
-			this.iframeRef.current.contentWindow.postMessage(JSON.stringify(message), basePath)
+			return properties
 		}
 
 		updateProperties() {
-			if (this.iframeLoaded) {
-				this.sendMessage('UPDATE_PROPERTIES', { properties: this.props.properties })
-			}
-		}
-
-		onLoad() {
-			this.setState({ visibility: 'visible' })
-			this.iframeLoaded = true
-			this.sendMessage('START_EMBED', {
-				unitId: this.unitId,
-				instanceId: window.attachInstanceId,
-				properties: this.props.properties,
-			})
+			attach.setEmbedProperties(this.embedId, this.getMergedProperties())
 		}
 
 		render() {
-			const { className = '', style = {} } = this.props
+			const { className = '', style = {}, properties = {}, item = '' } = this.props
 
 			return (
-				<iframe
-					ref={this.iframeRef}
-					data-unit-id={this.unitId}
-					className={`attach-embed ${className}`}
-					onLoad={this.onLoad}
-					src={path}
-					style={{
-						display: 'block',
-						width: '100%',
-						height: '100%',
-						padding: 0,
-						margin: 0,
-						border: 'none',
-						visibility: this.state.visibility,
-						...style,
-					}}
-					{...webrtcAttributes}
+				<div
+					data-embed-id={this.embedId}
+					data-property-item={item}
+					data-properties={JSON.stringify(properties)}
+					className={`attach-${name} ${className}`}
+					style={style}
 				/>
 			)
 		}
 	}
-}
+
 // endregion
 
 // region export