@tonejs/ui - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

src/page/start-context.js

+import { LitElement, html } from '@polymer/lit-element'
+import { resume } from '../util/resume'
+
+const playSvg = html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>`
+
+class ToneStartContext extends LitElement {
+
+	static get properties(){
+		return {
+			running : { type : Boolean },
+			disabled : { type : Boolean },
+		}
+	}
+
+	constructor(){
+		super()
+		this.running = false
+	}
+
+	firstUpdated(){
+		const interval = setInterval(() => {
+			this.running = Tone.context.state === 'running'
+			if (this.running){
+				clearInterval(interval)
+			}
+		}, 100)
+	}
+
+	async _clicked(e){
+		await resume(e)
+		this.running = Tone.context.state === 'running'
+	}
+	
+	render(){
+		return html`
+			<style>
+				:host {
+					display: block;
+					position: fixed;
+					top: 10px;
+					right: 10px;
+				}
+
+				#container {
+					position: absolute;
+					width: 44px;
+					height: 44px;
+					right: 0px;
+					top: 0px;
+					opacity: 1;
+					transition: opacity 0.2s;
+				}
+
+				#container[running]{
+					opacity: 0;
+					pointer-events: none;
+				}
+
+				button {
+					box-sizing: border-box;
+					width: 100%;
+					height: 44px;
+					outline-color: var(--outline-color);
+					border: 2px solid black;
+					border-radius: 22px;
+					padding: 0px;
+					font-size: 30px;
+					text-align: center;
+					cursor: pointer;
+					transition: box-shadow 0.1s;
+					box-shadow: var(--shadow-low);
+				}
+
+				button:hover, button:focus {
+					box-shadow: var(--shadow-medium);
+				}
+
+				button svg {
+					margin-top: 4px;
+					width: 30px;
+					height: 30px;
+				}
+
+			</style>
+			<div id="container" ?running=${this.running}>
+				<button 
+					@click=${this._clicked.bind(this)}
+					aria-label="Start">
+					${playSvg}
+				</button>
+			</div>
+		`
+	}
+
+}
+
+customElements.define('tone-start-context', ToneStartContext)

package.json

 {
   "name": "@tonejs/ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Web Component interfaces for Tone.js",
@@ -5,0 +5,0 @@ "main": "build/tonejs-ui.js",

src/page/demo.js

 import { LitElement, html } from '@polymer/lit-element'
 import '../viz/waveform'
+import './start-context'
 
@@ -57,6 +58,12 @@ class ToneDemo extends LitElement {
 
+				tone-start-context {
+					position: fixed;
+					top: 10px;
+					right: 10px;
+				}
+
 			</style>
 			<div id="container">
 				<tone-waveform></tone-waveform>
-				${this.autoplay ? html`<tone-unmute novolume></tone-unmute>` : html``}
+				${this.autoplay ? html`<tone-start-context></tone-start-context>` : html``}
 				<div id="content">
@@ -63,0 +70,0 @@ <slot></slot>

No alert changes

Improved metrics

Total package byte prevSize

1588755

0.23%

Number of package files

200

0.5%

Lines of code

10868

1.36%

No dependency changes