4 |
8 |
--------------------------------------------------------------------------------
/website/src/app/app.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecreativelab/mix-lab/997448eeab2a5ef7ce94d89ec0eddd6116bec7aa/website/src/app/app.component.scss
--------------------------------------------------------------------------------
/website/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { TestBed, async } from '@angular/core/testing';
18 | import { RouterTestingModule } from '@angular/router/testing';
19 |
20 | import { AppComponent } from './app.component';
21 |
22 | describe('AppComponent', () => {
23 | beforeEach(async(() => {
24 | TestBed.configureTestingModule({
25 | imports: [
26 | RouterTestingModule
27 | ],
28 | declarations: [
29 | AppComponent
30 | ],
31 | }).compileComponents();
32 | }));
33 |
34 | it('should create the app', async(() => {
35 | const fixture = TestBed.createComponent(AppComponent);
36 | const app = fixture.debugElement.componentInstance;
37 | expect(app).toBeTruthy();
38 | }));
39 |
40 | it(`should have as title 'app'`, async(() => {
41 | const fixture = TestBed.createComponent(AppComponent);
42 | const app = fixture.debugElement.componentInstance;
43 | expect(app.title).toEqual('app');
44 | }));
45 |
46 | it('should render title in a h1 tag', async(() => {
47 | const fixture = TestBed.createComponent(AppComponent);
48 | fixture.detectChanges();
49 | const compiled = fixture.debugElement.nativeElement;
50 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
51 | }));
52 | });
53 |
--------------------------------------------------------------------------------
/website/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { Component, AfterViewInit, Renderer2, HostListener } from '@angular/core';
18 | import { NavigationEnd, Router } from '@angular/router';
19 | import { EventsService } from './services/events.service';
20 | import { FallbackService } from './services/fallback.service';
21 | import {Angulartics2GoogleAnalytics} from "angulartics2";
22 |
23 | @Component({
24 | selector: 'app-root',
25 | templateUrl: './app.component.html',
26 | styleUrls: ['./app.component.scss']
27 | })
28 | export class AppComponent implements AfterViewInit {
29 | containerClass: string;
30 | isTouch = false;
31 | fallback = {
32 | supported: true,
33 | message: 'This browser does not support the features included in this app.',
34 | };
35 |
36 | @HostListener('visibilitychange') onVisibilityChange() {
37 | this.checkFocus();
38 | }
39 |
40 | @HostListener('window:focus') onFocus() {
41 | this.checkFocus();
42 | }
43 |
44 | @HostListener('window:blur') onBlur() {
45 | this.checkFocus();
46 | }
47 |
48 | constructor(
49 | private _router: Router,
50 | private render: Renderer2,
51 | public eventsService: EventsService,
52 | private fallbackService: FallbackService,
53 | public angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics
54 | ) {
55 | this.isTouch = 'ontouchstart' in document.documentElement;
56 | this._router.events.subscribe((event: any) => {
57 | // On route change:
58 | // add page class for component-component styling
59 | if (event instanceof NavigationEnd ) {
60 | const slug = event.url.split('/').slice(1)[0];
61 | slug ? this.setPageClass(slug) : this.setPageClass('/');
62 | }
63 | });
64 |
65 | // Check browser support from service
66 | this.fallbackService.checkBrowserSupport().then(res => {
67 | this.fallback = ((res) ? res : null);
68 | });
69 | }
70 |
71 | setPageClass(slug) {
72 | if (slug === '/') {
73 | this.containerClass = 'state-home';
74 | } else {
75 | this.containerClass = `state-${slug.replace(/\//g, '-')}`;
76 | }
77 | }
78 |
79 | checkFocus() {
80 | this.eventsService.broadcast('songPause', document.hasFocus());
81 | }
82 |
83 | // Show/Hide controls based on location
84 | ngAfterViewInit() {
85 | const body = document.querySelector('.dg');
86 | this.render.setStyle(body, 'visibility', 'hidden');
87 |
88 | if (window.location.hostname === 'localhost') {
89 | this.render.removeStyle(body, 'visibility');
90 | }
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/website/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { BrowserModule } from '@angular/platform-browser';
18 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
19 | import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
20 |
21 | import { AppRoutingModule } from './app-routing.module';
22 | import { AppComponent } from './app.component';
23 | import { InlineSVGModule } from 'ng-inline-svg';
24 | import { HomeComponent } from './states/home/home.component';
25 | import { JamComponent } from './states/jam/jam.component';
26 | import { MultitrackEditorComponent } from './components/multitrack-editor/multitrack-editor.component';
27 | import { PolymerModule } from '@codebakery/origami';
28 | import { IntentService} from './services/intent.service';
29 | import { EventsService } from './services/events.service';
30 | import {HttpModule} from "@angular/http";
31 | import {StemService} from "./services/stem.service";
32 | import { AboutComponent } from './states/about/about.component';
33 | import { CloseButtonComponent } from './components/close-button/close-button.component';
34 | import { SocialComponent } from './components/social/social.component';
35 | import { TooltipComponent } from './components/tooltip/tooltip.component';
36 | import { JamResolveGuard } from './guards/jam-resolve.guard';
37 | import { VolumeButtonComponent } from './components/volume-button/volume-button.component';
38 | import {SuggestionService} from "./services/suggestion.service";
39 | import { FallbackComponent } from './components/fallback/fallback.component';
40 | import { ClipboardService } from 'ng2-clipboard/ng2-clipboard';
41 | import { LoaderComponent } from './components/loader/loader.component';
42 | import { Angulartics2Module, Angulartics2GoogleAnalytics } from 'angulartics2';
43 | import { FallbackService } from './services/fallback.service';
44 | import { LinkComponent } from './states/link/link.component';
45 | import { SafePipe } from './pipes/safe.pipe';
46 |
47 | @NgModule({
48 | declarations: [
49 | AppComponent,
50 | MultitrackEditorComponent,
51 | HomeComponent,
52 | JamComponent,
53 | AboutComponent,
54 | CloseButtonComponent,
55 | SocialComponent,
56 | TooltipComponent,
57 | VolumeButtonComponent,
58 | FallbackComponent,
59 | LoaderComponent,
60 | LinkComponent,
61 | SafePipe,
62 | ],
63 | imports: [
64 | BrowserModule,
65 | BrowserAnimationsModule,
66 | AppRoutingModule,
67 | InlineSVGModule,
68 | PolymerModule.forRoot(),
69 | HttpModule,
70 | Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ]),
71 | ],
72 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
73 | providers: [
74 | IntentService,
75 | EventsService,
76 | StemService,
77 | JamResolveGuard,
78 | SuggestionService,
79 | ClipboardService,
80 | FallbackService,
81 | ],
82 | bootstrap: [AppComponent]
83 | })
84 | export class AppModule { }
85 |
--------------------------------------------------------------------------------
/website/src/app/classes/stem-player.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import {Tone, Synth, Sampler, Sequence, Player, Transport, TransportTime, Analyser, Time, Master, now} from 'tone'
18 | import TweenMax from 'gsap';
19 | import {Stem} from "./stem"
20 |
21 | declare var window;
22 |
23 | export class StemPlayer {
24 |
25 | public synth;
26 | public stems: Object = {};
27 | private volumeTimeout;
28 |
29 | constructor() {
30 | this.synth = new Synth().toMaster();
31 | window.Storage = {ctx: this.synth.context};
32 | //this.synth.triggerAttackRelease('C4', 0.5);
33 | }
34 |
35 | loadTrack(stem: Stem) {
36 | return new Promise((resolve) => {
37 | let fft = new Analyser('waveform', 1024);
38 | stem.player = new Player(
39 | stem.url, () => {
40 | stem.player.loopStart = stem.loopStart;
41 | stem.player.loopEnd = stem.loopEnd;
42 | stem.player.loop = stem.loop;
43 | if (Transport.state === 'stopped') {
44 | Transport.start(now() + stem.loopStart, 0);
45 | stem.player.start(now(), 0);
46 | } else {
47 | stem.player.volume.value = -100;
48 | stem.player.volume.rampTo(stem.volume, 1);
49 | const offset = Transport.seconds % stem.loopDuration;
50 | stem.player.start(now(), offset + stem.loopStart);
51 | }
52 | this.stems[stem.slug] = stem;
53 | resolve({stem: stem, analyser: fft._analyser});
54 | }).fan(fft).toMaster();
55 | });
56 | }
57 |
58 | playOneOff(url: string) {
59 | return new Promise((resolve) => {
60 | let player = new Player({url: url, autostart: true, onload: () => {
61 | resolve(player.buffer.duration);
62 | }}).toMaster();
63 | });
64 | }
65 |
66 | remove(stem: Stem) {
67 | stem.setVolume(stem.MIN_VOLUME, 1.3).then(() => {
68 | stem.player.dispose();
69 | delete this.stems[stem.slug];
70 | });
71 | }
72 |
73 | getTracksByType(type, currentTrackSlug) {
74 | let matches = [];
75 | Object.entries(this.stems).forEach(([key, stem]) => {
76 | if (
77 | stem.type === type &&
78 | stem.slug !== currentTrackSlug
79 | ) {
80 | matches.push(stem);
81 | }
82 | });
83 | return matches;
84 | }
85 |
86 | setVolume(volume: number) {
87 | TweenMax.to(Master.volume, 0.5, {value: volume});
88 | }
89 |
90 | pause() {
91 | clearTimeout(this.volumeTimeout);
92 | Object.entries(this.stems).forEach(([key, stem]) => {
93 | stem.player.volume.rampTo(-100, 0.5);
94 | });
95 | this.volumeTimeout = setTimeout(() => {
96 | Object.entries(this.stems).forEach(([key, stem]) => {
97 | stem.player.stop();
98 | stem.playing = false;
99 | });
100 | }, 500);
101 | }
102 |
103 | resume() {
104 | clearTimeout(this.volumeTimeout);
105 | Object.entries(this.stems).forEach(([key, stem]) => {
106 | const offset = Transport.seconds % stem.loopDuration;
107 | stem.player.start(now(), offset + stem.loopStart);
108 | stem.player.volume.value = -100;
109 | stem.player.volume.rampTo(stem.volume, 0.5);
110 | });
111 | }
112 |
113 | }
114 |
--------------------------------------------------------------------------------
/website/src/app/components/close-button/close-button.component.html:
--------------------------------------------------------------------------------
1 |
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/website/src/app/components/close-button/close-button.component.scss:
--------------------------------------------------------------------------------
1 | @import "../../../assets/scss/shared";
2 |
3 | .close {
4 | @include padding($bumper $bumper-mobile null null);
5 | @include position(fixed, 0 0 null null);
6 | cursor: pointer;
7 | outline: none;
8 | transform: translate3d(0, 0, 0);
9 | z-index: 5;
10 |
11 | @include grid-media($m) {
12 | @include padding($bumper $bumper null null);
13 | @include position(fixed, 0 0 null null);
14 | }
15 | }
16 |
17 | .close-button {
18 | @include svg(17px, 17px, $white);
19 | display: block;
20 |
21 | @include grid-media($m) {
22 | @include svg(26px, 26px, $white);
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/website/src/app/components/close-button/close-button.component.spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
18 |
19 | import { CloseButtonComponent } from './close-button.component';
20 |
21 | describe('CloseButtonComponent', () => {
22 | let component: CloseButtonComponent;
23 | let fixture: ComponentFixture
4 |
10 |
11 |
--------------------------------------------------------------------------------
/website/src/app/components/fallback/fallback.component.scss:
--------------------------------------------------------------------------------
1 | @import "../../../assets/scss/shared";
2 |
3 | .fallback {
4 | @include position(fixed, 0 0 0 0);
5 | height: 100%;
6 | width: 100%;
7 | }
8 |
9 | .message {
10 | @extend %body-m;
11 | @include align-all(absolute);
12 | @include padding($spacing-l $spacing-s);
13 | color: $white;
14 | max-width: 800px;
15 | text-align: center;
16 | width: 80%;
17 | z-index: 2;
18 |
19 | a {
20 | color: $white;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/website/src/app/components/fallback/fallback.component.spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
18 |
19 | import { FallbackComponent } from './fallback.component';
20 |
21 | describe('FallbackComponent', () => {
22 | let component: FallbackComponent;
23 | let fixture: ComponentFixture
4 |
9 |
10 |
--------------------------------------------------------------------------------
/website/src/app/components/loader/loader.component.scss:
--------------------------------------------------------------------------------
1 | @import "../../../assets/scss/shared";
2 |
3 | .loader {
4 | @include align-all(absolute);
5 | @include svg(100%, 100%, currentColor);
6 | opacity: 0;
7 | pointer-events: none;
8 | max-width: 100px;
9 | transition: opacity $transition-speed;
10 | width: 100%;
11 |
12 | &.active {
13 | opacity: 1;
14 | }
15 |
16 | /deep/ circle {
17 | &:nth-child(1) {
18 | animation: 0.7s loader 0s infinite;
19 | }
20 |
21 | &:nth-child(2) {
22 | animation: 0.7s loader 0.3s infinite;
23 | }
24 |
25 | &:nth-child(3) {
26 | animation: 0.7s loader 0.5s infinite;
27 | }
28 | }
29 | }
30 |
31 | @keyframes loader {
32 | to {
33 | fill-opacity: 0;
34 | }
35 | from {
36 | fill-opacity: 1;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/website/src/app/components/loader/loader.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { LoaderComponent } from './loader.component';
4 |
5 | describe('LoaderComponent', () => {
6 | let component: LoaderComponent;
7 | let fixture: ComponentFixture
5 |
9 |
10 |
11 | {{mobileIntroText}}
12 |
13 | {{startCopy}}
14 |
17 |
26 |
27 |
28 |
31 |
--------------------------------------------------------------------------------
/website/src/app/components/multitrack-editor/multitrack-editor.component.scss:
--------------------------------------------------------------------------------
1 | @import "../../../assets/scss/shared";
2 |
3 | canvas {
4 | position: fixed;
5 | left: 0;
6 | top: 0;
7 | }
8 |
9 | .nav {
10 | position: absolute;
11 | bottom: 0;
12 | left: 0;
13 | z-index: 4;
14 | width: 30%;
15 | background: rgba(0, 0, 0, 0.3);
16 | padding: 10px;
17 | }
18 |
19 | a {
20 | text-decoration: none;
21 | border-bottom: 1px solid #fff;
22 | cursor: pointer;
23 | font-size: 13px;
24 | }
25 |
26 | .mic {
27 | @include position(relative, null null $bumper-mobile 50%);
28 | height: 100px;
29 | transform-origin: bottom center;
30 | transform: translateX(-50%) scale(0.5); // Scale is a hack to get the button smaller since `diameter` wasnt working
31 | width: 100px;
32 | z-index: 3;
33 |
34 | @include grid-media($m) {
35 | @include position(relative, null null $bumper 50%);
36 | transform: translateX(-50%) scale(1);
37 | }
38 | }
39 |
40 | .voice-wrap {
41 | @include position(fixed, null 0 0 0);
42 | @include margin(0 auto);
43 | @include size(50px auto);
44 | transform: translateY(30px);
45 | transition: all 0.25s ease-out;
46 | display: block;
47 | z-index: 10;
48 | opacity: 0;
49 | pointer-events: none;
50 |
51 | @include grid-media($m) {
52 | @include size(100px auto);
53 | }
54 |
55 | &.visible {
56 | transform: translateY(0);
57 | opacity: 1;
58 | pointer-events: auto;
59 | }
60 | }
61 |
62 | .mobile-play {
63 | @include position(fixed, 0 0 0 0);
64 | background-color: rgba($black, 0.6);
65 | display: block;
66 | height: 100%;
67 | opacity: 0;
68 | pointer-events: none;
69 | transition: all 0.5s 0s;
70 | width: 100%;
71 | z-index: 999;
72 |
73 | &.active {
74 | opacity: 1;
75 | pointer-events: auto;
76 | transition: all 0.5s;
77 | }
78 |
79 | @include grid-media($m) {
80 | display: none;
81 | }
82 | }
83 |
84 | .play-icon {
85 | @include position(absolute, 50% null null 50%);
86 | @include svg(78px, 78px, $white);
87 | display: block;
88 | transform: translate(-50%, -50%);
89 | }
90 |
91 | .mobileCTA {
92 | @extend %button-outline;
93 | position: fixed;
94 | bottom: 45px;
95 | left: 50%;
96 | transform: translateX(-50%);
97 | z-index: 1000;
98 | }
99 |
100 | .mobileIntro {
101 | position: fixed;
102 | left: 50%;
103 | top: 50%;
104 | transform: translate(-50%, -50%);
105 | z-index: 1000;
106 | text-align: center;
107 | width: 80%;
108 | color: $white;
109 |
110 | &.top {
111 | transform: translateX(-50%);
112 | top: 12%;
113 | }
114 | }
115 |
116 |
117 |
--------------------------------------------------------------------------------
/website/src/app/components/multitrack-editor/multitrack-editor.component.spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
18 |
19 | import { MultitrackEditorComponent } from './multitrack-editor.component';
20 |
21 | describe('MultitrackEditorComponent', () => {
22 | let component: MultitrackEditorComponent;
23 | let fixture: ComponentFixture
4 | ;
24 |
25 | beforeEach(async(() => {
26 | TestBed.configureTestingModule({
27 | declarations: [ ModalComponent ]
28 | })
29 | .compileComponents();
30 | }));
31 |
32 | beforeEach(() => {
33 | fixture = TestBed.createComponent(ModalComponent);
34 | component = fixture.componentInstance;
35 | fixture.detectChanges();
36 | });
37 |
38 | it('should create', () => {
39 | expect(component).toBeTruthy();
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/website/src/app/states/about/about.component.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
18 | import { trigger, state, style, transition, animate } from '@angular/animations';
19 | import { routerTransition } from '../../app-routing-transitions';
20 | import { EventsService } from '../../services/events.service';
21 |
22 | const DELAY = 0;
23 |
24 | @Component({
25 | selector: 'app-about',
26 | templateUrl: './about.component.html',
27 | styleUrls: ['./about.component.scss'],
28 | host: {'[@routerTransition]': ''},
29 | animations: [routerTransition()],
30 | })
31 | export class AboutComponent implements OnInit {
32 | @ViewChild('video') video: ElementRef;
33 | @Input() status: boolean;
34 | @Output() modalNotify: EventEmitter = new EventEmitter();
35 | fadeState = 'out';
36 | videoID = 'rSc3VoXWMHc';
37 |
38 | constructor(
39 | private el: ElementRef,
40 | private eventsService: EventsService
41 | ) { }
42 |
43 | ngOnInit() {
44 | setTimeout(() => {
45 | this.fadeState = 'in';
46 | }, DELAY);
47 |
48 | this.eventsService.broadcast('setTrackState', {
49 | state: 'intro',
50 | secondary: 'greyout'
51 | });
52 | }
53 |
54 | toggle($event) {
55 | this.fadeState = 'out';
56 |
57 | setTimeout(() => {
58 | this.status = $event;
59 | this.modalNotify.emit($event);
60 | }, DELAY);
61 | }
62 |
63 | }
64 |
--------------------------------------------------------------------------------
/website/src/app/states/home/home.component.html:
--------------------------------------------------------------------------------
1 |
80 |
81 |
--------------------------------------------------------------------------------
/website/src/app/states/home/home.component.spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
18 |
19 | import { HomeComponent } from './home.component';
20 |
21 | describe('HomeComponent', () => {
22 | let component: HomeComponent;
23 | let fixture: ComponentFixture;
24 |
25 | beforeEach(async(() => {
26 | TestBed.configureTestingModule({
27 | declarations: [ HomeComponent ]
28 | })
29 | .compileComponents();
30 | }));
31 |
32 | beforeEach(() => {
33 | fixture = TestBed.createComponent(HomeComponent);
34 | component = fixture.componentInstance;
35 | fixture.detectChanges();
36 | });
37 |
38 | it('should be created', () => {
39 | expect(component).toBeTruthy();
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/website/src/app/states/jam/jam.component.html:
--------------------------------------------------------------------------------
1 | ;
24 |
25 | beforeEach(async(() => {
26 | TestBed.configureTestingModule({
27 | declarations: [ JamComponent ]
28 | })
29 | .compileComponents();
30 | }));
31 |
32 | beforeEach(() => {
33 | fixture = TestBed.createComponent(JamComponent);
34 | component = fixture.componentInstance;
35 | fixture.detectChanges();
36 | });
37 |
38 | it('should be created', () => {
39 | expect(component).toBeTruthy();
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/website/src/app/states/link/link.component.html:
--------------------------------------------------------------------------------
1 | ;
24 |
25 | beforeEach(async(() => {
26 | TestBed.configureTestingModule({
27 | declarations: [ ModalComponent ]
28 | })
29 | .compileComponents();
30 | }));
31 |
32 | beforeEach(() => {
33 | fixture = TestBed.createComponent(ModalComponent);
34 | component = fixture.componentInstance;
35 | fixture.detectChanges();
36 | });
37 |
38 | it('should create', () => {
39 | expect(component).toBeTruthy();
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/website/src/app/states/link/link.component.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { Component, AfterViewInit } from '@angular/core';
18 | import { ActivatedRoute } from '@angular/router';
19 | import { EventsService } from "../../services/events.service";
20 |
21 | @Component({
22 | selector: 'app-link',
23 | templateUrl: './link.component.html',
24 | styleUrls: ['./link.component.scss'],
25 | })
26 | export class LinkComponent implements AfterViewInit {
27 | public url: string;
28 | public text = 'Copy to clipboard';
29 |
30 | constructor(
31 | private route: ActivatedRoute,
32 | public eventsService: EventsService,
33 | ) { }
34 |
35 | ngAfterViewInit() {
36 | this.eventsService.broadcast('hideCanvas', true);
37 | this.route.queryParams.subscribe(param => {
38 | if (param && param.song) {
39 | this.url = `${this.getURL() + param.song}`;
40 | }
41 | });
42 | }
43 |
44 | getURL() {
45 | let url;
46 | const port = window.location.port;
47 | const hostname = window.location.hostname;
48 | const protocol = window.location.protocol;
49 | if (protocol && protocol === 'https:') {
50 | url = `${protocol}//${hostname}/jam/`;
51 | } else if (port && port !== '') {
52 | url = `${protocol}//${hostname}:${port}/jam/`;
53 | } else {
54 | url = window.location.origin + '/';
55 | }
56 | return url;
57 | }
58 |
59 | copy(url) {
60 | let textArea,
61 | copy,
62 | range,
63 | selection;
64 |
65 | textArea = document.createElement('textArea');
66 | textArea.style.height = "0px";
67 | textArea.style.left = "-100px";
68 | textArea.style.opacity = "0";
69 | textArea.style.fontSize = "16px";
70 | textArea.style.position = "fixed";
71 | textArea.style.top = "-100px";
72 | textArea.style.width = "0px";
73 | textArea.value = url;
74 | document.body.appendChild(textArea);
75 |
76 | if (navigator.userAgent.match(/ipad|iphone/i)) {
77 | range = document.createRange();
78 | range.selectNodeContents(textArea);
79 | selection = window.getSelection();
80 | selection.removeAllRanges();
81 | selection.addRange(range);
82 | textArea.setSelectionRange(0, 999999);
83 | } else {
84 | textArea.select();
85 | }
86 |
87 | document.execCommand('copy');
88 | document.body.removeChild(textArea);
89 |
90 | this.text = 'Link copied to clipboard';
91 | }
92 |
93 | }
94 |
--------------------------------------------------------------------------------
/website/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecreativelab/mix-lab/997448eeab2a5ef7ce94d89ec0eddd6116bec7aa/website/src/assets/.gitkeep
--------------------------------------------------------------------------------
/website/src/assets/images/arrow-left.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/website/src/assets/images/bubble.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/website/src/assets/images/caret.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
--------------------------------------------------------------------------------
/website/src/assets/images/close.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/src/assets/images/fallback.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecreativelab/mix-lab/997448eeab2a5ef7ce94d89ec0eddd6116bec7aa/website/src/assets/images/fallback.jpg
--------------------------------------------------------------------------------
/website/src/assets/images/favicons/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecreativelab/mix-lab/997448eeab2a5ef7ce94d89ec0eddd6116bec7aa/website/src/assets/images/favicons/android-chrome-192x192.png
--------------------------------------------------------------------------------
/website/src/assets/images/favicons/android-chrome-256x256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecreativelab/mix-lab/997448eeab2a5ef7ce94d89ec0eddd6116bec7aa/website/src/assets/images/favicons/android-chrome-256x256.png
--------------------------------------------------------------------------------
/website/src/assets/images/favicons/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecreativelab/mix-lab/997448eeab2a5ef7ce94d89ec0eddd6116bec7aa/website/src/assets/images/favicons/apple-touch-icon.png
--------------------------------------------------------------------------------
/website/src/assets/images/favicons/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | #f7692b
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/website/src/assets/images/favicons/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecreativelab/mix-lab/997448eeab2a5ef7ce94d89ec0eddd6116bec7aa/website/src/assets/images/favicons/favicon-16x16.png
--------------------------------------------------------------------------------
/website/src/assets/images/favicons/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecreativelab/mix-lab/997448eeab2a5ef7ce94d89ec0eddd6116bec7aa/website/src/assets/images/favicons/favicon-32x32.png
--------------------------------------------------------------------------------
/website/src/assets/images/favicons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecreativelab/mix-lab/997448eeab2a5ef7ce94d89ec0eddd6116bec7aa/website/src/assets/images/favicons/favicon.ico
--------------------------------------------------------------------------------
/website/src/assets/images/favicons/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "MixLab",
3 | "icons": [
4 | {
5 | "src": "assets/images/favicons/android-chrome-192x192.png",
6 | "sizes": "192x192",
7 | "type": "image/png"
8 | }
9 | ],
10 | "theme_color": "#000000",
11 | "background_color": "#000000",
12 | "display": "standalone"
13 | }
14 |
--------------------------------------------------------------------------------
/website/src/assets/images/favicons/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecreativelab/mix-lab/997448eeab2a5ef7ce94d89ec0eddd6116bec7aa/website/src/assets/images/favicons/mstile-150x150.png
--------------------------------------------------------------------------------
/website/src/assets/images/google-home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecreativelab/mix-lab/997448eeab2a5ef7ce94d89ec0eddd6116bec7aa/website/src/assets/images/google-home.png
--------------------------------------------------------------------------------
/website/src/assets/images/icon-facebook.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/src/assets/images/icon-google.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/src/assets/images/icon-link.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/website/src/assets/images/icon-mic.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/src/assets/images/icon-twitter.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/src/assets/images/mic.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 |
--------------------------------------------------------------------------------
/website/src/assets/images/mixlab.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/website/src/assets/images/mute.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/website/src/assets/images/play.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/website/src/assets/images/share.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecreativelab/mix-lab/997448eeab2a5ef7ce94d89ec0eddd6116bec7aa/website/src/assets/images/share.jpg
--------------------------------------------------------------------------------
/website/src/assets/images/tagline.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/website/src/assets/images/volume.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/website/src/assets/scss/_colors.scss:
--------------------------------------------------------------------------------
1 | $gray: #8f8f90;
2 | $lightGray: #E0E0E0;
3 | $white: #ffffff;
4 | $black: #000000;
5 | $blue: #4285F4;
6 |
--------------------------------------------------------------------------------
/website/src/assets/scss/_grid.scss:
--------------------------------------------------------------------------------
1 | $bumper: 30px;
2 | $bumper-mobile: 20px;
3 |
4 | // Override default gutter
5 | $neat-grid: (
6 | gutter: $bumper,
7 | );
8 |
9 | $s: (
10 | media: 576px, // min-width
11 | gutter: $bumper-mobile
12 | );
13 |
14 | $m: (
15 | media: 768px, // min-width
16 | gutter: $bumper
17 | );
18 |
19 | $l: (
20 | media: 992px, // min-width
21 | gutter: $bumper
22 | );
23 |
24 | $xl: (
25 | media: 1200px, // min-width
26 | gutter: $bumper
27 | );
28 |
--------------------------------------------------------------------------------
/website/src/assets/scss/_mixins.scss:
--------------------------------------------------------------------------------
1 | @import '~bourbon/app/assets/stylesheets/bourbon';
2 | @import '~bourbon-neat/core/_neat';
3 |
4 | @mixin align-all($position: 'absolute') {
5 | @include position($position, 50% null null 50%);
6 | transform: translate(-50%, -50%);
7 | }
8 |
9 | @mixin align-reset($position: static) {
10 | @include position($position, auto);
11 | transform: none;
12 | }
13 |
14 | @mixin responsive-wrap($padding-bottom: 56.25%) {
15 | height: 0;
16 | padding-bottom: $padding-bottom;
17 | position: relative;
18 | }
19 |
20 | @mixin svg($width: 20px, $height: 20px, $fill: white) {
21 | @include size($width $height);
22 |
23 | /deep/ svg {
24 | @include size(100%);
25 | display: block;
26 | fill: $fill;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/website/src/assets/scss/_typography.scss:
--------------------------------------------------------------------------------
1 | @import "colors";
2 | @import "mixins";
3 |
4 | $poppins: 'Poppins', Helvetica, Arial, sans-serif;
5 |
6 | %body {
7 | font-size: 14px;
8 | font-weight: 500;
9 | line-height: 1;
10 | line-height: normal;
11 |
12 | @include grid-media($m) {
13 | font-size: 18px;
14 | }
15 | }
16 |
17 | %body-m {
18 | @extend %body;
19 | font-size: 16px;
20 |
21 | @include grid-media($m) {
22 | font-size: 20px;
23 | }
24 |
25 | @media (max-height: 850px) and (max-width: 768px) {
26 | font-size: 14px;
27 | }
28 |
29 | @media (max-height: 750px) and (min-width: 768px) {
30 | font-size: 14px;
31 | }
32 |
33 | @media (max-height: 575px) and (max-width: 768px) {
34 | font-size: 12px;
35 | }
36 | }
37 |
38 | %body-l {
39 | @extend %body;
40 | font-size: 16px;
41 |
42 | @include grid-media($m) {
43 | font-size: 28px;
44 | }
45 |
46 | @media (max-height: 700px) and (max-width: 768px) {
47 | font-size: 16px;
48 | }
49 |
50 | @media (max-height: 700px) and (min-width: 768px) {
51 | font-size: 18px;
52 | }
53 |
54 | @media (max-height: 575px) and (max-width: 768px) {
55 | font-size: 14px;
56 | }
57 | }
58 |
59 | %cta {
60 | font-size: 13px;
61 | font-weight: 600;
62 | letter-spacing: $letter-spacing;
63 | text-transform: uppercase;
64 | text-decoration: none;
65 |
66 | @include grid-media($m) {
67 | font-size: 16px;
68 | }
69 |
70 | @include grid-media($l) {
71 | font-size: 20px;
72 | }
73 | }
74 |
75 | %button-outline {
76 | @extend %cta;
77 | @include padding(10px 15px);
78 | border: 2px solid;
79 | border-color: $black;
80 | border-radius: $border-radius;
81 | color: $black;
82 | display: block;
83 | text-align: center;
84 | transition: all $transition-speed;
85 |
86 | /deep/ svg {
87 | fill: $black;
88 | }
89 |
90 | @include grid-media($m) {
91 | @include padding(15px 25px);
92 | background-color: rgba($white, 0.8);
93 | border: none;
94 | }
95 |
96 | &.inverted {
97 | background-color: rgba($white, 0.8);
98 | }
99 |
100 | &:active,
101 | &:focus,
102 | &:hover {
103 | color: $black;
104 | background-color: $white;
105 |
106 | /deep/ svg {
107 | fill: $black;
108 | transition: fill $transition-speed;
109 | }
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/website/src/assets/scss/_variables.scss:
--------------------------------------------------------------------------------
1 | // Spacing
2 | $spacing-s: 30px;
3 | $spacing-m: 40px;
4 | $spacing-l: 60px;
5 | $spacing-xl: 100px;
6 |
7 | // Borders
8 | $border-radius: 35px;
9 | $border-radius-l: $border-radius * 2;
10 |
11 | // Typography spacing
12 | $letter-spacing: 0.2em;
13 |
14 | // Transition
15 | $transition-speed: 0.3s;
16 | $transition-delay: 1s;
17 | $transition-ease: cubic-bezier(0.165, 0.840, 0.440, 1.000);
18 |
--------------------------------------------------------------------------------
/website/src/assets/scss/shared.scss:
--------------------------------------------------------------------------------
1 | @import '~bourbon/app/assets/stylesheets/bourbon';
2 | @import '~bourbon-neat/core/_neat';
3 | @import "colors";
4 | @import "variables";
5 | @import "grid";
6 | @import "typography";
7 | @import "mixins";
8 |
--------------------------------------------------------------------------------
/website/src/assets/share-jam.html:
--------------------------------------------------------------------------------
1 | Check out this jam I made with MixLab!
2 |
--------------------------------------------------------------------------------
/website/src/assets/silence.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecreativelab/mix-lab/997448eeab2a5ef7ce94d89ec0eddd6116bec7aa/website/src/assets/silence.mp3
--------------------------------------------------------------------------------
/website/src/assets/third_party/METADATA:
--------------------------------------------------------------------------------
1 | name: "webrtc-audio-recording"
2 | description:
3 | "A simple audio recorder which works in Safari 11"
4 |
5 | third_party {
6 | url {
7 | type: HOMEPAGE
8 | value: "https://danielstorey.github.io/webrtc-audio-recording/"
9 | }
10 | url {
11 | type: GIT
12 | value: "https://github.com/danielstorey/webrtc-audio-recording/"
13 | }
14 | version: "1.0.0"
15 | last_upgrade_date { year: 2017 month: 10 day: 24 }
16 | license_type: NOTICE
17 | }
18 |
--------------------------------------------------------------------------------
/website/src/assets/third_party/webrtc-audio-recording/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2017 [Daniel Storey](https://github.com/danielstorey/webrtc-audio-recording)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/website/src/assets/third_party/webrtc-audio-recording/README.md:
--------------------------------------------------------------------------------
1 | # Audio Recording Using WebRTC
2 |
3 | This repository demonstrates how it is possible to record and playback audio in most modern browsers, and most notably - Safari 11 on both Mac and IOS.
4 |
5 | #### [Click here](https://danielstorey.github.io/webrtc-audio-recording/) for the demo
6 |
7 |
8 | 9 | You can also serve and work on the files locally but please note this will not work unless the site is hosted using SSL (https://) 10 | 11 | I have included Open SSL certificates for convenience and once you have installed the necessary modules via `npm install` you can simply run `node server` and open `https://localhost:3000` in your browser to view. 12 | 13 |
14 | 15 | The most important thing to note about getting this to work in IOS is that the `AudioContext` must be created within an event handler and not within an automatically running script or a Promise. This is to do with the measures that Apple has put in place to prevent audio from automatically playing when you visit a site. So as long as you call `new AudioContext()` or `new webkitAudioContext()` from within an event handler you'll be fine. 16 | 17 | The other thing to watch out for is to make sure that this context not 'garbage collected', otherwise the audio processor will stop with no error or warning. In this example I have created a `Storage` object in the global scope and assigned the `AudioContext` as a property of this object. 18 | 19 |
20 | 21 | Finally I just want to say that much of my work on this has been based on, (and copied!) from [Muaz Khan's](https://github.com/muaz-khan) rather brilliant [RecordRTC](https://github.com/muaz-khan/RecordRTC) library, which includes video and gif recording as well. 22 | 23 | This is simply a lightweight example of how recording audio can work and not necessarily a reusable library in its current state. -------------------------------------------------------------------------------- /website/src/assets/third_party/webrtc-audio-recording/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |WebRTC Safari Test
7 |
8 |
9 |
10 |
11 |
12 |
13 | ",
19 | "license": "MIT",
20 | "homepage": "https://github.com/danielstorey/webrtc-audio-recording.git"
21 | }
22 |
--------------------------------------------------------------------------------
/website/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | export const environment = {
18 | production: true,
19 | //look_up_api_path: 'https://say-to-play.appspot.com/api/'
20 | look_up_api_path: 'https://lookup-dot-say-to-play.appspot.com/'
21 | };
22 |
--------------------------------------------------------------------------------
/website/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | // The file contents for the current environment will overwrite these during build.
18 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
19 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
20 | // The list of which env maps to which file can be found in `.angular-cli.json`.
21 |
22 | export const environment = {
23 | production: false,
24 | look_up_api_path: 'https://lookup-dot-say-to-play.appspot.com/'
25 | };
26 |
--------------------------------------------------------------------------------
/website/src/main.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { enableProdMode } from '@angular/core';
18 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
19 | import { webcomponentsReady} from '@codebakery/origami';
20 |
21 | import { AppModule } from './app/app.module';
22 | import { environment } from './environments/environment';
23 |
24 | if (environment.production) {
25 | enableProdMode();
26 | }
27 |
28 | webcomponentsReady().then(() => {
29 | platformBrowserDynamic().bootstrapModule(AppModule, {
30 | enableLegacyTemplate: false
31 | });
32 | }).catch(error => {
33 | // No WebComponent support and webcomponentsjs is not loaded
34 | console.error(error);
35 | });
36 |
37 |
--------------------------------------------------------------------------------
/website/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | /**
18 | * This file includes polyfills needed by Angular and is loaded before the app.
19 | * You can add your own extra polyfills to this file.
20 | *
21 | * This file is divided into 2 sections:
22 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
23 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
24 | * file.
25 | *
26 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
27 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
28 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
29 | *
30 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
31 | */
32 |
33 | /***************************************************************************************************
34 | * BROWSER POLYFILLS
35 | */
36 |
37 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
38 | import 'core-js/es6/symbol';
39 | import 'core-js/es6/object';
40 | import 'core-js/es6/function';
41 | import 'core-js/es6/parse-int';
42 | import 'core-js/es6/parse-float';
43 | import 'core-js/es6/number';
44 | import 'core-js/es6/math';
45 | import 'core-js/es6/string';
46 | import 'core-js/es6/date';
47 | import 'core-js/es6/array';
48 | import 'core-js/es6/regexp';
49 | import 'core-js/es6/map';
50 | import 'core-js/es6/weak-map';
51 | import 'core-js/es6/set';
52 |
53 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
54 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
55 |
56 | /** Evergreen browsers require these. **/
57 | import 'core-js/es6/reflect';
58 | import 'core-js/es7/reflect';
59 |
60 |
61 | /**
62 | * Required to support Web Animations `@angular/animation`.
63 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
64 | **/
65 | import 'web-animations-js'; // Run `npm install --save web-animations-js`.
66 |
67 |
68 |
69 | /***************************************************************************************************
70 | * Zone JS is required by Angular itself.
71 | */
72 | import 'zone.js/dist/zone'; // Included with Angular CLI.
73 |
74 |
75 |
76 | /***************************************************************************************************
77 | * APPLICATION IMPORTS
78 | */
79 |
80 | /**
81 | * Date, currency, decimal and percent pipes.
82 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
83 | */
84 | // import 'intl'; // Run `npm install --save intl`.
85 | /**
86 | * Need to import at least one locale-data with intl.
87 | */
88 | // import 'intl/locale-data/jsonp/en';
89 |
--------------------------------------------------------------------------------
/website/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | @import '~bourbon/app/assets/stylesheets/bourbon';
3 | @import 'assets/scss/colors';
4 |
5 | // Fonts
6 | @import url('https://fonts.googleapis.com/css?family=Poppins');
7 |
8 | *,
9 | *::before,
10 | *::after {
11 | box-sizing: border-box;
12 | }
13 |
14 | h1,
15 | h2,
16 | h3,
17 | h4,
18 | h5,
19 | h6 {
20 | font-size: 1em;
21 | font-weight: normal;
22 | -webkit-font-smoothing: antialiased;
23 | margin: 0;
24 | }
25 |
26 | html {
27 | @include prefixer(font-smoothing, antialiased, webkit);
28 | @include prefixer(osx-font-smoothing, grayscale, moz);
29 | @include prefixer(text-size-adjust, 100%, webkit);
30 | user-select: none;
31 | overflow: hidden;
32 | }
33 |
34 | body {
35 | background: $black;
36 | color: $gray;
37 | font-family: 'Poppins', sans-serif;
38 | font-weight: 500;
39 | margin: 0;
40 | }
41 |
42 | ul {
43 | list-style-type: none;
44 | padding: 0;
45 | }
46 |
47 | p {
48 | margin: 0;
49 | }
50 |
--------------------------------------------------------------------------------
/website/src/test.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
18 |
19 | import 'zone.js/dist/long-stack-trace-zone';
20 | import 'zone.js/dist/proxy.js';
21 | import 'zone.js/dist/sync-test';
22 | import 'zone.js/dist/jasmine-patch';
23 | import 'zone.js/dist/async-test';
24 | import 'zone.js/dist/fake-async-test';
25 | import { getTestBed } from '@angular/core/testing';
26 | import {
27 | BrowserDynamicTestingModule,
28 | platformBrowserDynamicTesting
29 | } from '@angular/platform-browser-dynamic/testing';
30 |
31 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
32 | declare const __karma__: any;
33 | declare const require: any;
34 |
35 | // Prevent Karma from running prematurely.
36 | __karma__.loaded = function () {};
37 |
38 | // First, initialize the Angular testing environment.
39 | getTestBed().initTestEnvironment(
40 | BrowserDynamicTestingModule,
41 | platformBrowserDynamicTesting()
42 | );
43 | // Then we find all the tests.
44 | const context = require.context('./', true, /\.spec\.ts$/);
45 | // And load the modules.
46 | context.keys().map(context);
47 | // Finally, start Karma to run the tests.
48 | __karma__.start();
49 |
--------------------------------------------------------------------------------
/website/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "baseUrl": "./",
6 | "module": "es2015",
7 | "types": []
8 | },
9 | "exclude": [
10 | "test.ts",
11 | "**/*.spec.ts"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/website/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "baseUrl": "./",
6 | "module": "commonjs",
7 | "target": "es5",
8 | "types": [
9 | "jasmine",
10 | "node"
11 | ]
12 | },
13 | "files": [
14 | "test.ts"
15 | ],
16 | "include": [
17 | "**/*.spec.ts",
18 | "**/*.d.ts"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/website/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | /* SystemJS module definition */
18 | declare var module: NodeModule;
19 | interface NodeModule {
20 | id: string;
21 | }
22 |
--------------------------------------------------------------------------------
/website/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "outDir": "./static/out-tsc",
5 | "sourceMap": true,
6 | "declaration": false,
7 | "moduleResolution": "node",
8 | "emitDecoratorMetadata": true,
9 | "experimentalDecorators": true,
10 | "target": "es5",
11 | "typeRoots": [
12 | "node_modules/@types"
13 | ],
14 | "lib": [
15 | "es2017",
16 | "dom"
17 | ]
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/website/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "eofline": true,
15 | "forin": true,
16 | "import-blacklist": [
17 | true,
18 | "rxjs"
19 | ],
20 | "import-spacing": true,
21 | "indent": [
22 | true,
23 | "spaces"
24 | ],
25 | "interface-over-type-literal": true,
26 | "label-position": true,
27 | "max-line-length": [
28 | true,
29 | 140
30 | ],
31 | "member-access": false,
32 | "member-ordering": [
33 | true,
34 | {
35 | "order": [
36 | "static-field",
37 | "instance-field",
38 | "static-method",
39 | "instance-method"
40 | ]
41 | }
42 | ],
43 | "no-arg": true,
44 | "no-bitwise": true,
45 | "no-console": [
46 | true,
47 | "debug",
48 | "info",
49 | "time",
50 | "timeEnd",
51 | "trace"
52 | ],
53 | "no-construct": true,
54 | "no-debugger": true,
55 | "no-duplicate-super": true,
56 | "no-empty": false,
57 | "no-empty-interface": true,
58 | "no-eval": true,
59 | "no-inferrable-types": [
60 | true,
61 | "ignore-params"
62 | ],
63 | "no-misused-new": true,
64 | "no-non-null-assertion": true,
65 | "no-shadowed-variable": true,
66 | "no-string-literal": false,
67 | "no-string-throw": true,
68 | "no-switch-case-fall-through": true,
69 | "no-trailing-whitespace": true,
70 | "no-unnecessary-initializer": true,
71 | "no-unused-expression": true,
72 | "no-use-before-declare": true,
73 | "no-var-keyword": true,
74 | "object-literal-sort-keys": false,
75 | "one-line": [
76 | true,
77 | "check-open-brace",
78 | "check-catch",
79 | "check-else",
80 | "check-whitespace"
81 | ],
82 | "prefer-const": true,
83 | "quotemark": [
84 | true,
85 | "single"
86 | ],
87 | "radix": true,
88 | "semicolon": [
89 | true,
90 | "always"
91 | ],
92 | "triple-equals": [
93 | true,
94 | "allow-null-check"
95 | ],
96 | "typedef-whitespace": [
97 | true,
98 | {
99 | "call-signature": "nospace",
100 | "index-signature": "nospace",
101 | "parameter": "nospace",
102 | "property-declaration": "nospace",
103 | "variable-declaration": "nospace"
104 | }
105 | ],
106 | "typeof-compare": true,
107 | "unified-signatures": true,
108 | "variable-name": false,
109 | "whitespace": [
110 | true,
111 | "check-branch",
112 | "check-decl",
113 | "check-operator",
114 | "check-separator",
115 | "check-type"
116 | ],
117 | "directive-selector": [
118 | true,
119 | "attribute",
120 | "app",
121 | "camelCase"
122 | ],
123 | "component-selector": [
124 | true,
125 | "element",
126 | "app",
127 | "kebab-case"
128 | ],
129 | "use-input-property-decorator": true,
130 | "use-output-property-decorator": true,
131 | "use-host-property-decorator": true,
132 | "no-input-rename": true,
133 | "no-output-rename": true,
134 | "use-life-cycle-interface": true,
135 | "use-pipe-transform-interface": true,
136 | "component-class-suffix": true,
137 | "directive-class-suffix": true,
138 | "no-access-missing-member": true,
139 | "templates-use-public": true,
140 | "invoke-injectable": true
141 | }
142 | }
143 |
--------------------------------------------------------------------------------
5 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/website/src/app/states/about/about.component.scss:
--------------------------------------------------------------------------------
1 | @import "../../../assets/scss/shared";
2 |
3 | .about {
4 | @include padding(null $bumper-mobile $bumper-mobile);
5 | @include position(fixed, 0 null null 0);
6 | background-color: rgba($black, 0.7);
7 | height: 100%;
8 | overflow-y: scroll;
9 | -webkit-overflow-scrolling: touch;
10 | width: 100%;
11 | z-index: 99999;
12 | user-select: text;
13 |
14 | @include grid-media($m) {
15 | @include padding(null $bumper $bumper);
16 | }
17 | }
18 |
19 | .about-inner {
20 | @include margin($bumper auto null);
21 | @include padding(null $bumper-mobile);
22 | max-width: 688px;
23 |
24 | @include grid-media($m) {
25 | @include margin($spacing-xl auto null);
26 | @include padding(null $bumper);
27 | }
28 | }
29 |
30 | .section {
31 | & + & {
32 | margin-top: $spacing-s;
33 | }
34 | }
35 |
36 | .header {
37 | @extend %cta;
38 | color: $white;
39 | margin-bottom: $bumper;
40 | text-align: center;
41 | }
42 |
43 | .description {
44 | @extend %body;
45 | color: $white;
46 |
47 | a {
48 | color: $white;
49 | text-decoration: underline;
50 | }
51 | }
52 |
53 | .video-wrap {
54 | @include responsive-wrap;
55 | background-color: $black;
56 | margin-bottom: $bumper;
57 | cursor: pointer;
58 |
59 | /deep/ iframe {
60 | @include position(absolute, 0 null null 0);
61 | height: 100%;
62 | width: 100%;
63 | }
64 | }
65 |
66 | .play-button {
67 | @include align-all(absolute);
68 | @include svg(80px, 80px, $white);
69 | align-items: center;
70 | background-color: $lightGray;
71 | border-radius: 50%;
72 | display: flex;
73 | height: $spacing-l;
74 | justify-content: center;
75 | padding: 7px;
76 | width: $spacing-l;
77 | z-index: 99;
78 |
79 | @include grid-media($s) {
80 | height: $spacing-xl;
81 | padding: 15px;
82 | width: $spacing-xl;
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/website/src/app/states/about/about.component.spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
18 |
19 | import { ModalComponent } from './modal.component';
20 |
21 | describe('ModalComponent', () => {
22 | let component: ModalComponent;
23 | let fixture: ComponentFixtureAbout MixLab
6 |
7 |
77 |
9 |
14 |
15 |
16 |
20 |
17 | MixLab is an experiment that makes it easier for anyone to create music, using simple voice commands. Just say things like "Play me a funky bass," or "Add some jazz drums." Or let MixLab surprise you by simply saying “Play me something." Try it on a Google Home by saying "Hey Google, talk to MixLab," or try it on this site.
18 |
19 |
21 |
76 | Credits
22 |
23 | Built by
24 | Anthony Tripaldi, LAD, Maya Man, Prit Patel, Yotam Mann, Use All Five, and friends at Google Creative Lab using 25 | Dialogflow 32 | and 33 | Actions on Google. 40 | Learn more on our 41 | Github page, 48 | and check out other 49 | Voice Experiments here.
56 | 57 | Music by
58 | Blake Straus: Composer & Musical Director
59 | Alek Fin: Producer/Engineer
60 | 61 | Musicians
62 | Blake Straus - Fretted instruments, basses, keyboards
63 | Dylan Meek - Keyboards
64 | Roland Gajate Garcia - Drumkit and percussion
65 | DD Horns - Brass and woodwinds
66 | Morgan Paros - Violins
67 | Andrew Synowiec - Fretted instruments
68 | Corbin Jones - Basses and sousaphone
69 | Alison Balbag - Harp
70 | Ian Mallitz - Didgeridoo
71 | Additional Production Assistance:
72 | Daniel Braunstein, Christopher Dwyer, Zac Sager, Mashadi Maximus
73 | Recorded, Mixed, and Mastered at Pro Audio LA
74 |
75 | 24 | Anthony Tripaldi, LAD, Maya Man, Prit Patel, Yotam Mann, Use All Five, and friends at Google Creative Lab using 25 | Dialogflow 32 | and 33 | Actions on Google. 40 | Learn more on our 41 | Github page, 48 | and check out other 49 | Voice Experiments here.
56 | 57 | Music by
58 | Blake Straus: Composer & Musical Director
59 | Alek Fin: Producer/Engineer
60 | 61 | Musicians
62 | Blake Straus - Fretted instruments, basses, keyboards
63 | Dylan Meek - Keyboards
64 | Roland Gajate Garcia - Drumkit and percussion
65 | DD Horns - Brass and woodwinds
66 | Morgan Paros - Violins
67 | Andrew Synowiec - Fretted instruments
68 | Corbin Jones - Basses and sousaphone
69 | Alison Balbag - Harp
70 | Ian Mallitz - Didgeridoo
71 | Additional Production Assistance:
72 | Daniel Braunstein, Christopher Dwyer, Zac Sager, Mashadi Maximus
73 | Recorded, Mixed, and Mastered at Pro Audio LA
74 |
5 |
75 |
76 |
9 |
22 |
10 | Hey Google, talk to
11 |
12 |
15 |
16 |
17 |
19 |
{{ command || ' '}} 20 |
21 | {{ command || ' '}} 20 |
23 | 
27 |
28 |
32 | About
33 |
34 |
42 | Privacy & Terms
43 |
44 |
53 |
54 |
63 |
66 |
67 | Preview it Here
68 |
69 |
27 |
73 |
74 |
4 |
11 |
12 |
44 |
--------------------------------------------------------------------------------
/website/src/app/states/jam/jam.component.spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
18 |
19 | import { JamComponent } from './jam.component';
20 |
21 | describe('JamComponent', () => {
22 | let component: JamComponent;
23 | let fixture: ComponentFixture
16 |
17 |
32 |
33 |
34 |
35 |
36 |
37 |
20 |
21 | Tap
22 | Click
23 | the mic and try saying:
24 |
25 |
26 |
27 | Listening...
28 |
29 |
30 |
31 |
2 | {{ url }}
5 |
6 |
7 |
--------------------------------------------------------------------------------
/website/src/app/states/link/link.component.scss:
--------------------------------------------------------------------------------
1 | @import "../../../assets/scss/shared";
2 |
3 | :host {
4 | @include position(fixed, 0 null null 0);
5 | background: url('/assets/images/fallback.jpg') center center no-repeat;
6 | background-size: cover;
7 | overflow: hidden;
8 | height: 100%;
9 | width: 100%;
10 | }
11 |
12 | .link {
13 | @include align-all(fixed);
14 | @include padding(null $bumper-mobile);
15 | overflow: hidden;
16 | text-align: center;
17 | color: $white;
18 | width: 100%;
19 | }
20 |
21 | #value {
22 | display: block;
23 | font-size: 16px;
24 | user-select: auto;
25 | }
26 |
27 | button {
28 | @extend %button-outline;
29 | background-color: rgba($white, 0.8);
30 | display: inline-block;
31 | outline: none;
32 | margin-top: $bumper-mobile;
33 | }
34 |
--------------------------------------------------------------------------------
/website/src/app/states/link/link.component.spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License');
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
18 |
19 | import { ModalComponent } from './modal.component';
20 |
21 | describe('ModalComponent', () => {
22 | let component: ModalComponent;
23 | let fixture: ComponentFixture8 | 9 | You can also serve and work on the files locally but please note this will not work unless the site is hosted using SSL (https://) 10 | 11 | I have included Open SSL certificates for convenience and once you have installed the necessary modules via `npm install` you can simply run `node server` and open `https://localhost:3000` in your browser to view. 12 | 13 |
14 | 15 | The most important thing to note about getting this to work in IOS is that the `AudioContext` must be created within an event handler and not within an automatically running script or a Promise. This is to do with the measures that Apple has put in place to prevent audio from automatically playing when you visit a site. So as long as you call `new AudioContext()` or `new webkitAudioContext()` from within an event handler you'll be fine. 16 | 17 | The other thing to watch out for is to make sure that this context not 'garbage collected', otherwise the audio processor will stop with no error or warning. In this example I have created a `Storage` object in the global scope and assigned the `AudioContext` as a property of this object. 18 | 19 |
20 | 21 | Finally I just want to say that much of my work on this has been based on, (and copied!) from [Muaz Khan's](https://github.com/muaz-khan) rather brilliant [RecordRTC](https://github.com/muaz-khan/RecordRTC) library, which includes video and gif recording as well. 22 | 23 | This is simply a lightweight example of how recording audio can work and not necessarily a reusable library in its current state. -------------------------------------------------------------------------------- /website/src/assets/third_party/webrtc-audio-recording/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
14 |
15 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/website/src/assets/third_party/webrtc-audio-recording/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "safari-audio-recording",
3 | "version": "1.0.0",
4 | "description": "A simple audio recorder which works in Safari 11",
5 | "main": "AudioRecorder.js",
6 | "dependencies": {},
7 | "devDependencies": {
8 | "browser-sync": "^2.18.13"
9 | },
10 | "scripts": {
11 | "test": "echo \"Error: no test specified\" && exit 1",
12 | "start": "node server.js"
13 | },
14 | "repository": {
15 | "type": "git",
16 | "url": "git+https://danstorey@bitbucket.org/danstorey/danstorey.bitbucket.io.git"
17 | },
18 | "author": "Dan Storey
16 |
17 |
21 | 22 | 23 | 24 |
25 | 26 |
27 | Audio Recording using RecordRTC
18 |Tested in Chrome, Firefox and Safari 11 (Mac and IOS)
19 | 20 |21 | 22 | 23 | 24 |
25 | 26 |