ScCN/scratch-gui
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor using static assets

Browse Source
This commit is contained in:
Paul Kaplan committed 2017-06-23 12:40:20 -04:00
1 parent 4d25a62cb6
commit a44eb158a4
8 files changed
+124 -119
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/record-modal/re-record-icon.svg → src/components/record-modal/icon--back.svg
View File
File renamed without changes.
src/components/record-modal/icon--play.svg
+27
View File
@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="44px" height="52px" viewBox="0 0 44 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>play</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M17.2214651,8.34499443 C19.7766419,4.08636653 23.9234057,4.09303946 26.4745787,8.34499443 L40.1520974,31.140859 C42.7072741,35.3994869 40.7489672,38.8517869 35.7726637,38.8517869 L7.92338006,38.8517869 C2.9495089,38.8517869 0.992773429,35.392814 3.54394641,31.140859 L17.2214651,8.34499443 Z" id="path-1"></path>
<filter x="-16.7%" y="-19.3%" width="133.5%" height="138.6%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="2.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 0.298039216 0 0 0 0 0.592156863 0 0 0 0 1 0 0 0 0.1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop---1280x720" transform="translate(-623.000000, -347.000000)">
<g id="Step-3---Altering-Suggested-Trim" transform="translate(0.000000, 42.000000)">
<g id="Play-/-Record-/-Stop" transform="translate(623.000000, 307.000000)">
<g id="play" transform="translate(21.849131, 22.002656) rotate(90.000000) translate(-21.849131, -22.002656) ">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use stroke="#4280D7" stroke-width="1" fill="#4C97FF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

src/components/record-modal/icon--stop-playback.svg
+28
View File
@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="52px" height="52px" viewBox="0 0 52 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>stop-playback</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="44" height="44" rx="4"></rect>
<filter x="-13.6%" y="-13.6%" width="127.3%" height="127.3%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="2" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 0.298039216 0 0 0 0 0.592156863 0 0 0 0 1 0 0 0 0.1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop---1280x720" transform="translate(-619.000000, -345.000000)">
<g id="Step-4---Playing-Trim" transform="translate(0.000000, 42.000000)">
<g id="Play-/-Record-/-Stop" transform="translate(623.000000, 307.000000)">
<g id="stop-playback">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#4C97FF" fill-rule="evenodd" xlink:href="#path-1"></use>
<rect stroke="#4280D7" stroke-width="1" x="0.5" y="0.5" width="43" height="43" rx="4"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

src/components/record-modal/icon--stop-recording.svg
+28
View File
@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="52px" height="52px" viewBox="0 0 52 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>stop-recording</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="20" y="0" width="44" height="44" rx="4"></rect>
<filter x="-13.6%" y="-13.6%" width="127.3%" height="127.3%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="2" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.4 0 0 0 0 0.101960784 0 0 0 0.1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop---1280x720" transform="translate(-619.000000, -345.000000)">
<g id="Step-2---Recording" transform="translate(0.000000, 42.000000)">
<g id="Play-/-Record-/-Stop" transform="translate(603.000000, 307.000000)">
<g id="stop-recording">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FF661A" fill-rule="evenodd" xlink:href="#path-1"></use>
<rect stroke="#E64D00" stroke-width="1" x="20.5" y="0.5" width="43" height="43" rx="4"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

src/components/record-modal/playback-step.jsx
+5 -56
View File
@@ -5,7 +5,9 @@ const Waveform = require('../waveform/waveform.jsx');
const Meter = require('../meter/meter.jsx');
const styles = require('./record-modal.css');
const reRecordIcon = require('./re-record-icon.svg');
const backIcon = require('./icon--back.svg');
const stopIcon = require('./icon--stop-playback.svg');
const playIcon = require('./icon--play.svg');
const PlaybackStep = props => (
<Box>
@@ -32,60 +34,7 @@ const PlaybackStep = props => (
className={styles.mainButton}
onClick={props.playing ? props.onStopPlaying : props.onPlay}
>
<svg
height={70}
style={{
overflow: 'visible'
}}
width={70}
>
<g transform="translate(-35,-35) scale(1.5) translate(23, 23)">
{props.playing ? (
<g>
<rect
fill="#4C97FF"
height={30}
rx={3}
ry={3}
stroke="#4280D7"
width={30}
x={10}
y={10}
/>
<rect
className={styles.pulser}
fill="#4C97FF"
height={30}
rx={3}
ry={3}
stroke="#4280D7"
width={30}
x={10}
y={10}
/>
</g>
) : (
<g>
<polygon
fill="#4280D7"
points="15 15 35 25 15 35"
stroke="#4280D7"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="7"
/>
<polygon
fill="#4C97FF"
points="15 15 35 25 15 35"
stroke="#4C97FF"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="5"
/>
</g>
)}
</g>
</svg>
<img src={props.playing ? stopIcon : playIcon} />
<div className={styles.helpText}>
<span className={styles.playingText}>
{props.playing ? 'Stop' : 'Play'}
@@ -98,7 +47,7 @@ const PlaybackStep = props => (
className={styles.cancelButton}
onClick={props.onBack}
>
<img src={reRecordIcon} /> Re-record
<img src={backIcon} /> Re-record
</button>
<button
className={styles.okButton}
src/components/record-modal/record-modal.css
+12 -14
View File
@@ -93,6 +93,7 @@ $sides: 5rem;
}
.help-text {
margin: 10px auto 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: rgb(167, 170, 181);
font-size: 0.95rem;
@@ -170,20 +171,17 @@ $sides: 5rem;
height: 180px;
}
/* SVG styling */
.pulser {
transform: scale(1.0);
transform-origin: center center;
animation: pulse-me 0.5s ease-in-out infinite alternate;
.record-button {
overflow: visible;
}
@keyframes pulse-me {
0% {
transform: scale(1.05);
opacity: 0.05;
}
100% {
opacity: 0.2;
transform: scale(1.25);
}
.record-button-circle {
fill: #FF661A;
stroke: #E64D00;
}
.record-button-circle-outline {
fill: #FF661A;
opacity: 0.2;
transition: 0.1s;
}
src/components/record-modal/recording-step.jsx
+23 -49
View File
@@ -5,6 +5,7 @@ const Meter = require('../meter/meter.jsx');
const Waveform = require('../waveform/waveform.jsx');
const styles = require('./record-modal.css');
const stopIcon = require('./icon--stop-recording.svg');
const RecordingStep = props => (
<Box>
@@ -36,55 +37,28 @@ const RecordingStep = props => (
className={styles.mainButton}
onClick={props.recording ? props.onStopRecording : props.onRecord}
>
<svg
height={70}
width={70}
>
<g transform="translate(-35,-35) scale(1.5) translate(23, 23)">
{props.recording ? (
<g>
<rect
fill="#FF661A"
height={30}
rx={3}
ry={3}
stroke="#E64D00"
width={30}
x={10}
y={10}
/>
<rect
className={styles.pulser}
fill="#FF661A"
height={30}
rx={3}
ry={3}
stroke="#E64D00"
width={30}
x={10}
y={10}
/>
</g>
) : (
<g>
<circle
cx={25}
cy={25}
fill="#FF661A"
r={15}
stroke="#E64D00"
/>
<circle
cx={25}
cy={25}
fill="#FF661A"
r={18 + props.level * 10}
style={{opacity: 0.15, transition: '0.1s'}}
/>
</g>
)}
</g>
</svg>
{props.recording ? (
<img src={stopIcon} />
) : (
<svg
className={styles.recordButton}
height="52"
width="52"
>
<circle
className={styles.recordButtonCircle}
cx="26"
cy="26"
r="25"
/>
<circle
className={styles.recordButtonCircleOutline}
cx="26"
cy="26"
r={27 + props.level * 5}
/>
</svg>
)}
<div className={styles.helpText}>
<span className={styles.recordingText}>
{props.recording ? 'Stop recording' : 'Record'}
src/lib/audio/audio-recorder.js
+1
View File
@@ -135,6 +135,7 @@ AudioRecorder.prototype.stop = function () {
AudioRecorder.prototype.dispose = function () {
this.scriptProcessorNode.onaudioprocess = null;
this.scriptProcessorNode.disconnect();
this.analyserNode.disconnect();
this.sourceNode.disconnect();
this.mediaStreamSource.disconnect();
this.userMediaStream.getAudioTracks()[0].stop();