From 7548fa0e0111c0a89e8c9794a07e0689b1a3a70b Mon Sep 17 00:00:00 2001
From: Yotam Mann <yotammann@gmail.com>
Date: Fri, 13 Jan 2017 16:47:58 -0500
Subject: [PATCH] adding about screen with video
---
static/images/play_button.svg | 17 +++
static/src/interface/About.js | 118 ++++++++++++++++++
static/{app => src}/interface/Splash.js | 39 +++++-
static/style/about.css | 155 ++++++++++++++++++++++++
static/style/splash.css | 120 ++++++++++++------
5 files changed, 410 insertions(+), 39 deletions(-)
create mode 100644 static/images/play_button.svg
create mode 100644 static/src/interface/About.js
rename static/{app => src}/interface/Splash.js (71%)
create mode 100644 static/style/about.css
diff --git a/static/images/play_button.svg b/static/images/play_button.svg
new file mode 100644
index 0000000..541085c
--- /dev/null
+++ b/static/images/play_button.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="-335 665 180 180" enable-background="new -335 665 180 180" xml:space="preserve">
+<path d="M-245,669c-47.5,0-86,38.5-86,86s38.5,86,86,86s86-38.5,86-86S-197.5,669-245,669z"/>
+<g>
+ <g>
+ <g>
+ <path fill="#FFFFFF" d="M-261.9,720.9c-0.5-0.3-0.8-0.1-0.8,0.4v67.2c0,0.5,0.4,0.7,0.8,0.4l49.9-33.5c0.5-0.3,0.5-0.8,0-1.1
+ L-261.9,720.9z"/>
+ </g>
+ <g>
+ <path fill="#FFFFFF" d="M-262.8,789.6v-69.2"/>
+ </g>
+ </g>
+</g>
+</svg>
diff --git a/static/src/interface/About.js b/static/src/interface/About.js
new file mode 100644
index 0000000..ac6042e
--- /dev/null
+++ b/static/src/interface/About.js
@@ -0,0 +1,118 @@
+/**
+ * Copyright 2016 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'style/about.css'
+import YouTubeIframeLoader from 'youtube-iframe'
+import events from 'events'
+
+const magentaLink = 'https://github.com/tensorflow/magenta'
+const sourceCode = 'https://github.com/googlecreativelab/aiexperiments-ai-duet'
+const toneLink = 'https://github.com/Tonejs/Tone.js'
+
+const blurbCopy = `Built by Yotam Mann with friends on the Magenta and Creative Lab teams at Google.
+ It uses <a target='_blank' href='${toneLink}'>Tone.js</a> and tools
+ from the <a target='_blank' href='${magentaLink}'>Magenta project</a>.
+ The open-source code is <a target='_blank' href='${sourceCode}'>available here</a>.`
+
+export class About extends events.EventEmitter{
+ constructor(container){
+
+ super()
+
+ this._container = document.createElement('div')
+ this._container.id = 'about'
+ container.appendChild(this._container)
+
+ this._toggleButton = document.createElement('div')
+ this._toggleButton.id = 'aboutButton'
+ this._toggleButton.classList.add('open')
+ container.appendChild(this._toggleButton)
+ this._toggleButton.addEventListener('click', (e) => {
+ e.preventDefault()
+ if (this.isOpen()){
+ this.close()
+ } else {
+ this.open()
+ }
+ })
+
+ const content = document.createElement('div')
+ content.id = 'content'
+ this._container.appendChild(content)
+
+ const title = document.createElement('div')
+ title.id = 'title'
+ title.textContent = 'A.I. Duet'
+ content.appendChild(title)
+
+ const video = document.createElement('div')
+ video.id = 'video'
+ //vid YT0k99hCY5I
+ video.innerHTML = `<iframe id='youtube-iframe' src="https://www.youtube.com/embed/0ZE1bfPtvZo?modestbranding=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>`
+ content.appendChild(video)
+
+ this._ytplayer = null
+
+ this._playButton = document.createElement('div')
+ this._playButton.id = 'playButton'
+ this._playButton.classList.add('visible')
+ video.appendChild(this._playButton)
+
+ YouTubeIframeLoader.load((YT) => {
+ this._ytplayer = new YT.Player('youtube-iframe', {
+ events : {
+ onStateChange : (state) => {
+ this._playButton.classList.remove('visible')
+ }
+ }
+ })
+ })
+
+ const blurb = document.createElement('div')
+ blurb.id = 'blurb'
+ content.appendChild(blurb)
+ blurb.innerHTML = blurbCopy
+
+ }
+ close(){
+ this._toggleButton.classList.remove('close')
+ this._toggleButton.classList.add('open')
+
+ this._container.classList.remove('visible')
+
+ if (this._ytplayer){
+ this._ytplayer.stopVideo()
+ }
+ this.emit('close')
+ if (window.ga){
+ ga('send', 'event', 'AI-Duet', 'Click', 'About - Close')
+ }
+ }
+ open(){
+ this._toggleButton.classList.add('close')
+ this._toggleButton.classList.remove('open')
+
+ this._playButton.classList.add('visible')
+ this._container.classList.add('visible')
+ this.emit('open')
+ if (window.ga){
+ ga('send', 'event', 'AI-Duet', 'Click', 'About - Open')
+ }
+ }
+ isOpen(){
+ return this._container.classList.contains('visible')
+ }
+}
\ No newline at end of file
diff --git a/static/app/interface/Splash.js b/static/src/interface/Splash.js
similarity index 71%
rename from static/app/interface/Splash.js
rename to static/src/interface/Splash.js
index 8649099..6ed7123 100644
--- a/static/app/interface/Splash.js
+++ b/static/src/interface/Splash.js
@@ -23,7 +23,7 @@ class Splash extends events.EventEmitter{
constructor(container){
super()
- const splash = document.createElement('div')
+ const splash = this._splash = document.createElement('div')
splash.id = 'splash'
container.appendChild(splash)
@@ -42,26 +42,39 @@ class Splash extends events.EventEmitter{
titleContainer.appendChild(subTitle)
subTitle.textContent = 'Trade melodies with a neural network.'
- const loader = new Loader(titleContainer)
+ this._clicked = false
+ const loader = this._loader = new Loader(titleContainer)
loader.on('click', () => {
splash.classList.add('disappear')
+ this._clicked = true
this.emit('click')
})
+ const magenta = document.createElement('div')
+ magenta.id = 'magentaLink'
+ titleContainer.appendChild(magenta)
+ magenta.innerHTML = 'Built using <a href="https://github.com/tensorflow/magenta" target="_blank">Magenta</a>'
+
+ const badges = document.createElement('div')
+ badges.id = 'badges'
+ splash.appendChild(badges)
+
const aiExperiments = document.createElement('a')
aiExperiments.id = 'aiExperiments'
aiExperiments.href = 'https://aiexperiments.withgoogle.com'
aiExperiments.target = '_blank'
- splash.appendChild(aiExperiments)
+ aiExperiments.classList.add('badge')
+ badges.appendChild(aiExperiments)
// break
const badgeBreak = document.createElement('div')
badgeBreak.id = 'badgeBreak'
- splash.appendChild(badgeBreak)
+ badges.appendChild(badgeBreak)
const googleFriends = document.createElement('a')
googleFriends.id = 'googleFriends'
- splash.appendChild(googleFriends)
+ googleFriends.classList.add('badge')
+ badges.appendChild(googleFriends)
const privacyAndTerms = document.createElement('div')
privacyAndTerms.id = 'privacyAndTerms'
@@ -69,6 +82,22 @@ class Splash extends events.EventEmitter{
splash.appendChild(privacyAndTerms)
}
+
+ get loaded(){
+ return this._loader.loaded
+ }
+
+ isOpen(){
+ return !this._clicked
+ }
+
+ show(){
+ this._splash.classList.remove('disappear')
+ }
+
+ hide(){
+ this._splash.classList.add('disappear')
+ }
}
export {Splash}
\ No newline at end of file
diff --git a/static/style/about.css b/static/style/about.css
new file mode 100644
index 0000000..72b3af3
--- /dev/null
+++ b/static/style/about.css
@@ -0,0 +1,155 @@
+/**
+ * Copyright 2016 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import 'common.scss';
+
+#aboutButton {
+ $closeSize : 30px;
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ width: $closeSize;
+ height: $closeSize;
+ cursor: pointer;
+ z-index: 1000;
+ transition: transform 0.1s;
+ text-align: center;
+
+ &:hover {
+ transform: scale(1.1);
+ }
+
+ &:before{
+ font-family: $font-family;
+ font-weight: bold;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ line-height: $closeSize;
+ }
+
+ &.close:before{
+ content: "✕";
+ font-size: 25px;
+ color: white;
+ background-color: transparent;
+
+ }
+ &.open:before{
+ content: "?";
+ background-color: white;
+ border-radius: 50%;
+
+ }
+}
+
+#about {
+ width: 100%;
+ height: 100%;
+ z-index: 10;
+ top: 0px;
+ left: 0px;
+ position: absolute;
+ overflow-y: auto;
+ display: none;
+
+ &.visible {
+ display: initial;
+ }
+
+ #content {
+ width: 90%;
+ margin: 50px auto 30px auto;
+ min-width: 300px;
+ max-width: 800px;
+ height: auto;
+ position: relative;
+ color: white;
+ font-family: $font-family;
+ position: relative;
+
+ #title {
+ font-family: $font-family;
+ font-size: 40px;
+ line-height: 30px;
+ margin: 20px 0px 30px 0px;
+ position: relative;
+ }
+
+ $smallScreen : 450px;
+ $mediumScreen : 700px;
+
+ #video {
+ width: 100%;
+ cursor: pointer;
+ position: relative;
+
+ @media (max-width: $smallScreen) {
+ height: 200px;
+ }
+
+ @media (min-width: $smallScreen) and (max-width: $mediumScreen) {
+ height: 380px;
+ }
+
+ @media (min-width: $mediumScreen){
+ height: 450px;
+ }
+
+ iframe {
+ width: 100%;
+ height: 100%;
+ }
+
+ #playButton {
+ pointer-events: none;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100px;
+ height: 100px;
+ background-image: url(../images/play_button.svg);
+ background-size: 100% 100%;
+ display: none;
+
+ &.visible {
+ display: initial;
+ }
+ }
+
+ &:hover #playButton svg{
+ fill: blue;
+ }
+ }
+
+ #blurb {
+
+ position: relative;
+ text-transform: none;
+ margin-top: 30px;
+ font-size: 16px;
+ line-height: 25px;
+
+ a {
+ color: $orange;
+ }
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/static/style/splash.css b/static/style/splash.css
index ffe10d9..e145519 100644
--- a/static/style/splash.css
+++ b/static/style/splash.css
@@ -1,6 +1,6 @@
@import 'common.scss';
-$topMargin: 50px;
+$topMargin: 40px;
#splash {
position: absolute;
@@ -9,7 +9,7 @@ $topMargin: 50px;
top: 0px;
left: 0px;
z-index: 100;
- font-family: 'Quicksand', sans-serif;
+ font-family: $font-family;
font-weight: bold;
color: white;
transition: opacity 0.2s;
@@ -54,6 +54,30 @@ $topMargin: 50px;
font-weight: normal;
}
+ #magentaLink {
+ margin-top: $topMargin * 0.8;
+ letter-spacing: 0.8px;
+ line-height: 30px;
+ font-size: 20px;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: center;
+ font-weight: normal;
+ color: #aaa;
+ font-size: 14px;
+
+ a {
+ color: $orange;
+ text-decoration: underline;
+ cursor: pointer;
+ &:hover:active {
+ color: white;
+ }
+ }
+
+ }
+
$loaderWidth: 200px;
$loaderHeight: 60px;
@@ -144,50 +168,78 @@ $topMargin: 50px;
margin-top: $topMargin;
}
- $badgeWidth : 80px;
- $badgeHeight: 50px;
+ $badgeWidth : 110px;
+ $badgeHeight: 60px;
$badgeMargin : 20px;
$badegOpacity: 0.7;
- #aiExperiments, #googleFriends {
- width: $badgeWidth;
- height: $badgeHeight;
+ $smallScreen : 500px;
+ $smallBadgeWidth : 70px;
+ $smallBadgeHeight: 40px;
+
+ #badges {
+
position: absolute;
+ display: inline-block;
bottom: $badgeMargin;
- opacity: $badegOpacity;
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
-
- #aiExperiments {
left: $badgeMargin;
- background-image: url(../images/badgeAI_master.svg);
- &:hover {
- opacity: 1;
+ @media (max-width: $smallScreen) {
+ // bottom: $badgeMargin * 0.5;
+ }
- &:active {
- opacity: 0.3;
+ .badge {
+ display: inline-block;
+ position: relative;
+ margin-right: $badgeMargin;
+ width: $badgeWidth;
+ height: $badgeHeight;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ opacity: $badegOpacity;
+
+ @media (max-width: $smallScreen) {
+ width: $smallBadgeWidth;
+ height: $smallBadgeHeight;
+ }
+ }
+
+ #aiExperiments {
+ background-image: url(../images/badgeAI_master.svg);
+ &:hover {
+ opacity: 1;
+ &:active {
+ opacity: 0.3;
+ }
+ }
+ }
+
+ #googleFriends {
+ cursor: initial;
+ background-image: url(../images/badgeFriends_master.svg);
+ }
+
+ #badgeBreak{
+ display: inline-block;
+ position: relative;
+ margin-right: $badgeMargin;
+
+ $breakScale : 0.95;
+
+ $breakHeight: $badgeHeight * $breakScale;
+ height: $breakHeight;
+ background-color: white;
+ opacity: $badegOpacity / 2;
+ width: 1px;
+
+ @media (max-width: $smallScreen) {
+ $smallBreakHeight: $smallBadgeHeight * $breakScale;
+ height: $smallBreakHeight;
}
}
}
- #googleFriends {
- cursor: initial;
- left: $badgeWidth + $badgeMargin * 3;
- background-image: url(../images/badgeFriends_master.svg);
- }
- #badgeBreak{
- $breakHeight: $badgeHeight * 0.8;
- height: $breakHeight;
- left: $badgeWidth + $badgeMargin * 1.8;
- background-color: white;
- opacity: $badegOpacity / 2;
- position: absolute;
- width: 1px;
- bottom: $badgeMargin + ($badgeHeight - $breakHeight) / 2;
- }
#privacyAndTerms {
position: absolute;
@@ -199,7 +251,7 @@ $topMargin: 50px;
* {
height: 14px;
line-height: 14px;
- font-size: 14px;
+ font-size: 10px;
color: white;
display: inline;
opacity: $badegOpacity;