Skip to content

Commit

Permalink
Audio blocked overlay
Browse files Browse the repository at this point in the history 
And minor things.
  • Loading branch information
@villermen
villermen committed Dec 9, 2018
1 parent 0374131 commit 592932e
Show file tree
Hide file tree
Showing 18 changed files with 287 additions and 181 deletions.
4 changes: 3 additions & 1 deletion .babelrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread"
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-async-to-generator",
"@babel/plugin-proposal-optional-chaining"
]
}
26 changes: 20 additions & 6 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" sizes="192x192" href="icon.png">

<link rel="stylesheet" href="build/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="build/style.css">

<script src="build/script.js" defer></script>
</head>
Expand All @@ -38,11 +38,17 @@
</div>
</header>

<div class="audio-blocked-overlay">
<div class="audio-blocked-overlay__icon material-icons">play_arrow</div>
<div class="audio-blocked-overlay__text">Alright let's do this</div>
</div>

<div class="sample-container">
<div class="sample-container__empty">
<div class="sample-container__empty-icon material-icons">search</div>
<div class="sample-container__empty-label">
Whether&nbsp;you're&nbsp;looking&nbsp;for things&nbsp;that&nbsp;do&nbsp;what ...
Whether&nbsp;you're&nbsp;looking&nbsp;for
things&nbsp;that&nbsp;do&nbsp;what ...
</div>
</div>
</div>
Expand All @@ -61,10 +67,18 @@
<div class="button button--primary" data-action="save">Save</div>
</div>
<div class="modal__footer modal__footer--align-center">
<span class="version">
<span class="version__link" data-action="show-changelog-modal">Soundboard <span class="version__number" data-content="version-number"></span></span>
<span class="version__link" data-action="play-version-sample" data-content="version-name"></span>
</span>
<span class="version">
<span class="version__link" data-action="show-changelog-modal">
Soundboard
<span class="version__number" data-content="version-number"></span>
</span>
<span
class="version__link"
data-action="play-version-sample"
data-content="version-name"
>
</span>
</span>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion gulpfile.babel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ gulp.task('watch:styles', () => {
gulp.task('clean:scripts', () => del([`${buildDir}/*.{js,js.map}`]));

function createBundler(options = {}) {
return browserify(Object.assign({}, browserifyOptions, options))
return browserify({...browserifyOptions, ...options})
.transform(babelify)
.transform(svgify);
}
Expand Down
25 changes: 22 additions & 3 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@
"@babel/core": "^7.1.6",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-proposal-optional-chaining": "^7.2.0",
"@babel/plugin-transform-async-to-generator": "^7.2.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.1.6",
"@babel/register": "^7.0.0",
Expand Down
4 changes: 2 additions & 2 deletions src/scripts/components/Sample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,8 @@ class Sample {
this.$sample.append(this.$progress);
}

play(spam = false, loop = false) {
Player.instance.play(this.playerId, spam, loop);
async play(spam = false, loop = false) {
return Player.instance.play(this.playerId, spam, loop);
}

stop() {
Expand Down
96 changes: 45 additions & 51 deletions src/scripts/components/SampleContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,18 @@ import $ from 'jquery';
import 'jquery-contextmenu';
import copy from 'copy-to-clipboard';

class SampleContainer {

export default class SampleContainer {
/** @type jQuery */
$sampleContainer;

/** @type Sample[] */
samples = [];

/** @type string */
sortType = 'recent';

/** @type string */
query = '';

constructor() {
this.$sampleContainer = $('.sample-container');
this.$empty = $('.sample-container__empty');

// Play/stop on click
this.$sampleContainer.on('click', '.sample', (e) => {
Expand Down Expand Up @@ -101,6 +96,8 @@ class SampleContainer {
}

const $prev = this.$sampleContainer.prev();

// Updating the container in detached state is quicker
this.$sampleContainer.detach();

let empty = true;
Expand All @@ -114,35 +111,43 @@ class SampleContainer {
} else {
// Prepare regex
const terms = this.query
.replace(/[^\w\s|]/g, '') // Strip non-alphanumeric characters (will be done in target as well)
.replace(/\s+\|\s+/g, '|') // Enable OR-searching when whitespace is around the pipe character "|"
.split(/[\s+&]+/g); // Split by any combination of whitespace characters
// Strip non-alphanumeric characters (will be done in target as well)
.replace(/[^\w\s|]/g, '')
// Enable OR-searching when whitespace is around the pipe character "|"
.replace(/\s+\|\s+/g, '|')
// Split by any combination of whitespace characters
.split(/[\s+&]+/g);
const regex = new RegExp(`.*${terms.map(term => `(?=.*${term}.*)`).join('')}.*`, 'i');

// Filter samples
this.samples.forEach((sample) => {
const visible = regex.test(
`${sample.name.replace(/[^\w\s|]/g, '')
} ${
sample.categories.map(category => category.replace(/[^\w\s|]/g, '')).join(' ')}`,
);

sample.$sample.toggleClass('sample--filtered', !visible);
if (visible) {
let filterString = sample.name.replace(/[^\w\s|]/g, '');
sample.categories.forEach((category) => {
filterString += ' ' + category.replace(/[^\w\s|]/g, '');
});

const isVisible = regex.test(filterString);
sample.$sample.toggleClass('sample--filtered', !isVisible);

if (isVisible) {
empty = false;
}
});
}

this.$sampleContainer.toggleClass('sample-container--empty', empty);

this.$sampleContainer.insertAfter($prev);

if (!empty) {
this.updateLines();
}

this.$sampleContainer.insertAfter($prev);
}

/**
* Updates line classes on visible samples so they can be made awesome by
* themes.
*/
updateLines() {
let row = -1;
let lastTop = 0;
Expand All @@ -159,64 +164,53 @@ class SampleContainer {
.toggleClass('sample--line-1', row % 3 === 1)
.toggleClass('sample--line-2', row % 3 === 2);
});

const $prev = this.$sampleContainer.prev();
this.$sampleContainer.detach();
this.$sampleContainer.insertAfter($prev);
}

// Returns the sample object that has been played, or null
// eslint-disable-next-line class-methods-use-this
playRandomWithId(id, spam = false, loop = false, scroll = false) {
/**
* Returns the sample object that has been played, or null.
*
* @param {string} id
* @param {boolean} [spam]
* @param {boolean} [loop]
* @param {boolean} [scroll]
* @returns {Promise<boolean>}
*/
async playRandomWithId(id, spam = false, loop = false, scroll = false) {
// Obtain a sample
const $filteredSamples = $('.sample').filter(function() {
return $(this).data('sample').id === id;
});

if ($filteredSamples.length === 0) {
return null;
return false;
}

const index = Math.floor(Math.random() * $filteredSamples.length);
const $sample = $filteredSamples.eq(index);

// Play the sample
$sample.data('sample').play(spam, loop);

// Scroll
if (scroll) {
SampleContainer.scrollToSample($sample);
}

return $sample;
return this.playSample($sample, spam, loop, scroll);
}

static playRandomVisible(spam = false, loop = false, scroll = false) {
async playRandomVisible(spam = false, loop = false, scroll = false) {
const $visibleSamples = $('.sample:not(.sample--filtered)');

if ($visibleSamples.length === 0) {
return null;
return false;
}

const index = Math.floor(Math.random() * $visibleSamples.length);
const $sample = $visibleSamples.eq(index);

$sample.data('sample').play(spam, loop);
return this.playSample($sample, spam, loop, scroll);
}

async playSample($sample, spam, loop, scroll) {
if (scroll) {
SampleContainer.scrollToSample($sample);
$('html, body').animate({
scrollTop: ($sample.offset().top - 100),
});
}

return $sample;
}

static scrollToSample($sample) {
const sampleTop = $sample.offset().top;

$('html, body').animate({
scrollTop: sampleTop - 100,
});
return $sample.data('sample').play(spam, loop);
}
}

export default SampleContainer;
13 changes: 0 additions & 13 deletions src/scripts/config.js
View file

This file was deleted.

Loading

0 comments on commit 592932e

Please sign in to comment.