63 index.html
View file
@@ -45,32 +45,31 @@

</head>
<body>
<!-- Login Modal -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<p class="modal-title" id="login-modal-title">Log in or Sign up</p>
</div>
<div id="firebaseui-auth-container" class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="wrapper">
<!-- Login View -->
<div id="loginView" class="container">
<div class="row">
<div class="col-12 text-center">
<h4 class="archivo">GIFClub = Music + GIFs</h4>
<div id="firebaseui-auth-container" class="modal-body">
</div>
<p>Signing in let's you create and share your own moods</p>
<p class="small">or <a id="no-login" href="#">browse moods</a> without signing in</p>
</div>
</div>
</div>
<ul class="list-inline ui-carousel d-sm-none mobile-nav">
<li data-target="#uiCarousel" data-slide-to="0" class="list-inline-item active"><i class="fa fa-heartbeat" aria-hidden="true"></i></li>
<li data-target="#uiCarousel" data-slide-to="1" class="list-inline-item d-none d-md-block"><i class="fa fa-music" aria-hidden="true"></i></li>
<li data-target="#uiCarousel" data-slide-to="2" class="list-inline-item"><i class="fa fa-smile-o" aria-hidden="true"></i></li>
<li data-target="#uiCarousel" data-slide-to="3" class="list-inline-item"><i class="fa fa-sliders" aria-hidden="true"></i></li>
</ul>
<div class="topbar">
<div id="topbar" class="topbar">
<div class="btn-mobile-search">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
<div id="user-info">
<p data-toggle="modal" data-target="#login-modal">Log in or Sign up</p>
<p><a id="topbar-login" href="#">Log in or Sign up</a></p>
</div>
<div class="input-group mobile-input">
<input id="giphy-search-mobile" type="text" class="form-control search-primary" placeholder="Visual search" aria-label="Search real quick">
@@ -97,24 +96,22 @@ <h4>Create a mood</h4>
<div class="row">
<div class="col-sm-4">
<!-- <a href="http://www.soundcloud.com"><img src="images/soundcloud-logo-white.png" class="responsive-img"></a> -->
<ul class="list-inline">
<li class="list-inline-item" onclick="ClearEditorTrack();" style="cursor: pointer; font-size: 12px"><i class="fa fa-chevron-left mr-5" aria-hidden="true"></i>Start over</li>
</ul>
</div>
<div class="col-sm-4">
<div class="col-sm-8">
<ul class="list-inline">
<li id="editorPlayPauseButton" style="cursor: pointer; margin-right: 10px;" class="list-inline-item"><i class="fa fa-play" aria-hidden="true"></i></li>
<li class="time-code active-time-code list-inline-item" style="margin-right: 0;"></li>
<li id="trackDurationContainer" class="list-inline-item mr-20"></li>
<li class="list-inline-item mr-20 mood-title-input-container"><a class="editable" href="#" id="mood-title-input" data-type="text" data-title="Enter title">Untitled Mood</a></li>
<li class="list-inline-item gpm-input-container">GPM: <a class="editable" href="#" id="mood-gpm-input" data-type="text" data-title="Enter GPM">1000</a></li>
</ul>
</div>
<div class="col-sm-4 text-right">
<ul class="list-inline">
<li id="autosave-container" class="list-inline-item">Autosaving enabled</li>
<li class="list-inline-item" onclick="ClearVisuals();"><button class="btn btn-editor" type="button">clear visuals</button></li>
<li class="list-inline-item" onclick="ClearEditorTrack();"><button class="btn btn-editor" type="button">clear track</button></li>

<li class="list-inline-item gpm-input-container">GPM <input type="range" id="gpmRangeEditor" min="300" max="3000" style="margin: 0 8px;" /><span class="gpm-readout" style="font-style: normal;">🔥</span></li>
<li id="autosave-container" class="list-inline-item ml-10">Autosaving enabled</li>
<li class="list-inline-item float-right"><a href="http://www.soundcloud.com"><img src="images/soundcloud-logo-white.png" class="responsive-img" style="margin-top: -18px;"></a></li>
</ul>
</div>

</div>
<div class="row align-items-center">
<div class="col-sm-4">
@@ -131,7 +128,7 @@ <h4>Create a mood</h4>
<div class="col-sm-8">
<div id="trackScrubber" class="editor-timeline">
<div id="scrubberButtonContainer">
<button id="scrubberButton" class="btn btn-editor" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
<button id="scrubberButton" class="btn btn-editor z-depth-1" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
<div id="scrubberInputContainer" class="input-field hidden">
<input id="scrubberInput" class="input-small" type="text" placeholder="Search GIPHY">
<div class="input-close"><i class="fa fa-times-circle"></i></div>
@@ -140,16 +137,6 @@ <h4>Create a mood</h4>
</div>
</div>
</div>
<div class="row" style="margin-top: 6px;">
<div class="col-sm-8 offset-sm-4">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Click the <i class="fa fa-search" aria-hidden="true"></i></strong> to add visuals to the timeline. <strong>Double click</strong> a visual to delete it.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
</div>
</div>
</span>
</div>
</div>
@@ -224,11 +211,11 @@ <h4>Create a mood</h4>
<div class="row align-items-center shadow-1 settings-row mb-10">
<p class="small mb-20 ui-header d-sm-none">Settings</p>
<div class="col-6">
<p class="mb-6"><strong>GPM:</strong> <span id="gpmContainer" style="font-style: normal;">🔥 🔥 🔥</span></p>
<p class="mb-6"><strong>GPM:</strong> <span class="gpm-readout" style="font-style: normal;">🔥</span></p>
<p class="small">GIFs per minute. Well not exactly, but you get it.</p>
</div>
<div class="col-6">
<input type="range" id="gpmRange" min="300" max="3000" style="margin-top: 8px;" />
<input id="gpmRangeSettings" type="range" min="300" max="3000" style="margin-top: 8px;" />
</div>
</div>
<div class="row align-items-center settings-row shadow-1 mb-10">
BIN +6 KB js/.DS_Store
View file
Binary file not shown.
23 js/app.js
View file
@@ -135,7 +135,7 @@ function GetMoods() {
$('#mood-loader').remove();

$('.mood-card').click(function() {
StopTimer();
//StopTimer();
var q = $(this).data("playlist");
LoadSoundToWidget(staffPicks[q].playlist, staffPicks[q].timeline, staffPicks[q].gpm);
StartVisuals(staffPicks, q);
@@ -144,6 +144,7 @@ function GetMoods() {
}

function StartVisuals(db, q){
StopTimer();
$('.btn-mobile-play-audio').addClass('hidden');
$('.mood-loaded-overlay').removeClass('hidden');

@@ -162,7 +163,7 @@ function StartVisuals(db, q){
$('.mood-loaded-play').html('<i class="fa fa-play btn-mobile-play-mood" aria-hidden="true"></i>');
$('.mood-loaded-info').html('<span class="title">' + db[q].mood_title + '</span><span class="info">Visuals by ' + db[q].visuals_by + '</span><span class="info">Sounds by ' + db[q].sounds_by + '</span><span class="info">' + db[q].duration + '</span>');
$('.btn-mobile-play-mood').click(function(){
StartTimer('mp4');
StartTimer();
$(staticContainer).css('background-image', 'url(images/static.gif)');
widget.play();
$(videoBackground).removeClass('hidden');
@@ -172,7 +173,7 @@ function StartVisuals(db, q){
});
}, 1800);
} else {
StartTimer('mp4');
StartTimer();
$(staticContainer).css('background-image', 'url(images/static.gif)');
}
}
@@ -208,6 +209,22 @@ function GetMoodPreviews(){

}

$('#no-login').click(function(){
$('#ui-container').show();
$('#topbar').show();
$('#loginView').hide();
});

$('#topbar-login').click(function(){
$('#ui-container').hide();
$('#topbar').hide();
$('#loginView').show();
});

function ext(url) {
return (url = url.substr(1 + url.lastIndexOf("/")).split('?')[0]).split('#')[0].substr(url.lastIndexOf("."))
}

//turn to inline mode
$.fn.editable.defaults.mode = 'inline';

51 js/gifclub.js
View file
@@ -154,30 +154,39 @@ $(playTapeButton).click(function(){

//gpmRange.value = 1400;

$(gpmRange).change(function(){
gpm = gpmRange.value;
});

$(gpmRange).on('input', function () {
var currentGpmRange = gpmRange.value;

if (currentGpmRange == 300) {
$(gpmContainer).html('💀 💀 💀');
} else if (currentGpmRange <= 600) {
$(gpmContainer).html('😰 😰 😰');
} else if (currentGpmRange <= 1000) {
$(gpmContainer).html('😮 😮 😮');
} else if (currentGpmRange <= 2000) {
$(gpmContainer).html('🔥 🔥 🔥');
} else if (currentGpmRange <= 2500) {
$(gpmContainer).html('🏝 🏝 🏝');
} else if (currentGpmRange <= 3000) {
$(gpmContainer).html('😴 😴 😴');
} else {
$(gpmContainer).html('Error');
$('#gpmRangeEditor, #gpmRangeSettings').change(function(){
StopTimer();
gpm = $(this).val();
StartTimer();

if ($(editor).hasClass('editor-open')) {
SaveMood();
}
});

$('#gpmRangeEditor, #gpmRangeSettings').on('input', function () {
var currentGpmRange = $(this).val();
$('.gpm-readout').html(UpdateGPMReadout(currentGpmRange));
});

function UpdateGPMReadout(newGPM){
if (newGPM == 300) {
return '💀';
} else if (newGPM <= 600) {
return '😰';
} else if (newGPM <= 1000) {
return '😮';
} else if (newGPM <= 2000) {
return '🔥';
} else if (newGPM <= 2500) {
return '🏝';
} else if (newGPM <= 3000) {
return '😴';
} else {
return 'Error';
}
}

// $(document).ready(function(){
// // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
// $('.modal').modal({
41 js/gifdisplay.js
View file
@@ -5,32 +5,33 @@ var hasStarted = false;
var recording = false;
var playback = false;
var gpm = 1400;
var clearRate = 10000;
var clearRate = 2;
var gifStreamTimeout;
var clearGifsTimeout;

var timer;
var clearTimer;
var timerOn = false;

function StartTimer(imageType){
function StartTimer(){
timerOn = true;
timer = setInterval(ShowGif, gpm, imageType);
clearTimer = setInterval(ClearPopups, clearRate);
// timer = setInterval(ShowGif, gpm, imageType);
// clearTimer = setInterval(ClearPopups, clearRate);
timer = setTimeout(ShowGif, gpm);
//clearTimer = setTimeout(ClearPopups, clearRate);
}

function StopTimer() {
clearTimeout(timer);
if (timerOn) {
$(videoBackground).html('').toggleClass('hidden');
$(popupGridWrapper).html(emptyPopupGrid).toggleClass('hidden');
}
if ($('#editor').hasClass('editor-open') == false) {
visuals = {};
//visuals = {};
}
timerOn = false;
//gifs = null;
clearInterval(timer);
clearInterval(clearTimer);
}

function CheckPlaybackStatus() {
@@ -53,7 +54,8 @@ function ShowStatic() {
$(staticContainer).css('background-image', 'url(' + staticGif + ')');
}

function ShowGif(imageType) {
function ShowGif() {

if (!hasStarted) {
hasStarted = true;
}
@@ -63,17 +65,18 @@ function ShowGif(imageType) {
var randomDepth = Math.floor((Math.random() * 5) + 1);
var randomNum = Math.floor((Math.random() * numResults));
var randomNum2 = Math.floor((Math.random() * numResults));

if (imageType == 'gif') {
videoBackground.innerHTML = '<img id="video-background" src="' + gifs[randomNum] + '" width="100%" />';
if (litMode && randomPopup) {
randomPopup.innerHTML = '<img class="video-popup z-depth-' + randomDepth +'" src="' + gifs[randomNum2] + '" width="100%" />';
}
} else if (imageType == 'mp4') {
var fileType = ext(gifs[randomNum]);

if (fileType == '.mp4') {
videoBackground.innerHTML = '<video autoplay loop playsinline id="video-background" muted><source src="' + gifs[randomNum] + '"></video>';

if (litMode && randomPopup) {
randomPopup.innerHTML = '<video autoplay loop playsinline id="video-background" class="video-popup z-depth-' + randomDepth +'" muted><source src="' + gifs[randomNum2] + '"></video>';
randomPopup.innerHTML = '<video autoplay loop playsinline id="video-background" class="video-popup" muted><source src="' + gifs[randomNum2] + '"></video>';
}
} else {
videoBackground.innerHTML = '<img id="video-background" src="' + gifs[randomNum] + '" width="100%" />';
if (litMode && randomPopup) {
randomPopup.innerHTML = '<img class="video-popup" src="' + gifs[randomNum2] + '" width="100%" />';
}
}
//old record tape code
@@ -104,4 +107,10 @@ function ShowGif(imageType) {
var randomAnimation = animations[Math.floor((Math.random() * animations.length) + 1)];
$(randomPopup).addClass(randomAnimation);
}

if (Math.floor(Math.random() * 10) < clearRate) {
ClearPopups();
}

StartTimer();
}
49 js/giphysearch.js
View file
@@ -12,8 +12,21 @@ var searchUrlPre = 'https://api.giphy.com/v1/gifs/search?q=';
var trendingUrl = 'https://api.giphy.com/v1/gifs/trending?api_key=' + config + '&limit=50';
var searchUrlPost = '&api_key=' + config + '&limit=';


function GetGifs(q) {
if (q.includes('#')) {
StopTimer();

if (q.startsWith('https://www.are.na')){
var lastSlash = q.lastIndexOf('/');
var channelTitle = q.slice(lastSlash + 1);
$.ajax({
url: 'http://api.are.na/v2/channels/' + channelTitle + '/contents',
type: 'GET',
success: function(data) {
gifs = ParseArenaChannel(data);
}
});
} else if (q.includes('#')) {
var queryWithLimit = q.split('#');
$.ajax({
url: searchUrlPre + queryWithLimit[0] + searchUrlPost + queryWithLimit[1],
@@ -31,35 +44,17 @@ function GetGifs(q) {
}
});
}
}

function GetTrending() {
$.ajax({
url: trendingUrl,
type: 'GET',
success: function(data) {
gifs = ParseGifs(data);
//console.log(channelgifs);
//StartGifStream();
}
});
if (!hasStarted) {
$(staticContainer).css('background-image', 'url(images/static.gif)');
}
if (playback) {
playback = false;
$(playTapeButton).children().html('play_arrow');
}
}

$(giphySearch).keydown(function( event ) {
if ( event.which == 13 ) {
CustomSearch();
}
});
StartTimer();
}

function CustomSearch(q) {
HideSearch();

StopTimer();
var customSearchLimit;

@@ -71,7 +66,7 @@ function CustomSearch(q) {
type: 'GET',
success: function(data) {
gifs = ParseArenaChannel(data);
StartTimer('gif');
StartTimer();
}
});
} else if (q.includes('#')) {
@@ -81,7 +76,7 @@ function CustomSearch(q) {
type: 'GET',
success: function(data) {
gifs = ParseGifs(data);
StartTimer('mp4');
StartTimer();
}
});
} else {
@@ -90,18 +85,14 @@ function CustomSearch(q) {
type: 'GET',
success: function(data) {
gifs = ParseGifs(data);
StartTimer('mp4');
StartTimer();
}
});
}

if (!hasStarted) {
$(staticContainer).css('background-image', 'url(images/static.gif)');
}
if (playback) {
playback = false;
$(playTapeButton).children().html('play_arrow');
}
}

function MoodSearch(q, limit) {
26 js/music.js
View file
@@ -127,7 +127,7 @@ widget.bind(SC.Widget.Events.READY, function() {
for (x in visuals) {
if (x == trackMillis && playing == true) {
console.log("Search: " + visuals[x]);
CustomSearch(visuals[x]);
GetGifs(visuals[x]);
}
}

@@ -151,7 +151,7 @@ widget.bind(SC.Widget.Events.READY, function() {
for (x in visuals) {
if (x < position) {
console.log("Seeking to: " + visuals[x]);
CustomSearch(visuals[x]);
GetGifs(visuals[x]);
}
}
});
@@ -233,26 +233,6 @@ function LoadTrackForEditor (q) {
StartTimer();
}

function PlayVisuals() {
StartGifStream();
counter = setInterval(function(){
if (!editorLoaded) {
for (x in visuals) {
if (x == millis) {
console.log("timestamp matched: " + visuals[x]);
GetGifs(visuals[x]);
}
}
}
millis = millis + 1000;
}, 1000);


clearGifsTimeout = setInterval(function(){
popupGridWrapper.innerHTML = emptyPopupGrid;
}, clearRate);
}

function ConvertTimestamp(timestamp) {
var a = timestamp.split(":");
var timeInMs = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);;
@@ -351,7 +331,7 @@ $(scrubberInput).keydown(function( event ) {
//create and populate the key value pair in timeline
var inputQuery = scrubberInput.value;
visuals[trackMillis] = inputQuery;
CustomSearch(inputQuery);
GetGifs(inputQuery);
$(pips).append(pipHtmlPre + trackProgress + '%;" data-millis="' + trackMillis + '" title="' + inputQuery + '">' + inputQuery + '</div>');
SaveMood();
CreateDraggable();
65 js/user-manager.js
View file
@@ -42,6 +42,7 @@ var ui = new firebaseui.auth.AuthUI(firebase.auth());
initApp = function() {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
$('#loginView').hide();
// User is signed in.
var displayName = user.displayName;
var email = user.email;
@@ -53,7 +54,7 @@ initApp = function() {
var providerData = user.providerData;

user.getIdToken().then(function(accessToken) {
$('#user-info').html('<div class="dropdown"><img class="user-photo dropdown-toggle" id="accountDropdownButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" src="' + photoURL + '"><div class="dropdown-menu" aria-labelledby="accountDropdownButton"><ul class="list-unstyled mb-0"><li><h6>' + displayName + '</h6></li><li><a href="#">Moods</a></li><li><a href="#">Settings</a></li><li><a href="#">Sign out</a></li></ul></div></div>');
$('#user-info').html('<div class="dropdown"><img class="user-photo dropdown-toggle" id="accountDropdownButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" src="' + photoURL + '"><div class="dropdown-menu" aria-labelledby="accountDropdownButton"><ul class="list-unstyled mb-0"><li><h6>' + displayName + '</h6></li><li><a href="#">Moods</a></li><li><a href="#">Settings</a></li><li><a id="sign-out" href="#">Sign out</a></li></ul></div></div>');

document.getElementById('welcome-message').innerHTML = 'Your moods <button class="float-right btn btn-new-mood editor-button">create new mood</button>';

@@ -96,47 +97,14 @@ initApp = function() {
} else {
// User is signed out.
// The start method will wait until the DOM is loaded.
$('#user-info').html('<p data-toggle="modal" data-target="#login-modal">Log in or Sign up</p>');
ui.start('#firebaseui-auth-container', uiConfig);
$('#user-moods-list').html('');

}
}, function(error) {
console.log(error);
});
};

// function saveMood(user_id, visuals_by) {
// var editorIsOpen = $('#editor').hasClass('editor-open');
// var newMoodKey = null;
// var newMoodRef = null;

// if (editorIsOpen) {
// if (!hasSaved) {
// var moodsListRef = firebase.database().ref('users/' + user_id + '/moods/');
// newMoodRef = moodsListRef.push();
// newMoodKey = moodsListRef.push().key;

// newMoodRef.set({
// mood_title: document.getElementById('mood-title-input').textContent,
// track_url: document.getElementById("trackTitle").firstChild.getAttribute('href'),
// gpm: document.getElementById('mood-gpm-input').textContent,
// timeline: visuals,
// visuals_by: visuals_by,
// sounds_by: document.getElementById('trackCreator').textContent,
// duration: msDuration,
// track_art: document.getElementById("trackArt").firstChild.getAttribute('src')
// });
// hasSaved = true;
// } else {
// newMoodRef.update({
// mood_title: document.getElementById('mood-title-input').textContent,
// gpm: document.getElementById('mood-gpm-input').textContent,
// timeline: visuals
// });
// }
// }
// }

function ShowAutoSave() {
$('#autosave-container').html('<span class="pulse">Saving...</span>');
setTimeout(function(){
@@ -146,23 +114,30 @@ function ShowAutoSave() {

function SaveMood() {
ShowAutoSave();

if (!hasSaved) {
currentMoodKey = firebase.database().ref().child('users/' + currentUser.uid + '/moods/').push().key;
var moodId = CreateID();
hasSaved = true;
}

var moodData = {
mood_title: document.getElementById('mood-title-input').textContent,
track_url: document.getElementById("trackTitle").firstChild.getAttribute('href'),
gpm: document.getElementById('mood-gpm-input').textContent,
gpm: document.getElementById('gpmRangeEditor').value,
timeline: visuals,
visuals_by: currentUser.displayName,
sounds_by: document.getElementById('trackCreator').textContent,
duration: msDuration,
track_art: document.getElementById("trackArt").firstChild.getAttribute('src')
};

if (!hasSaved) {
currentMoodKey = firebase.database().ref().child('users/' + currentUser.uid + '/moods/').push().key;
hasSaved = true;
if (moodData.timeline == {}) {
moodData.timeline = {0: "double click to delete"};
}

var updates = {};
updates['public_moods/' + currentMoodKey] = moodData;
updates['users/' + currentUser.uid + '/moods/' + currentMoodKey] = moodData;

firebase.database().ref().update(updates);
@@ -196,10 +171,11 @@ $('#user-moods-list').on('click', '.edit-user-mood', function() {
$(pips).append(pipHtmlPre + msToPercent(x, moodObj[currentMoodKey].duration) + '%;" data-millis="' + x + '" title="' + visuals[x] + '">' + visuals[x] + '</div>');
CreateDraggable();
}

hasSaved = true;
$('#mood-title-input').text(moodObj[currentMoodKey].mood_title);
$('#mood-gpm-input').text(moodObj[currentMoodKey].gpm);
gpm = moodObj[currentMoodKey].gpm;
$('#gpmRangeEditor').val(moodObj[currentMoodKey].gpm);
$('.gpm-readout').html(UpdateGPMReadout(moodObj[currentMoodKey].gpm));
hasSaved = true;
});
});

@@ -210,6 +186,7 @@ $('#user-moods-list').on('click', '.edit-user-mood', function() {
function SignOut(){
firebase.auth().signOut().then(function() {
console.log('Signed Out');
window.location.replace('index.html');
}, function(error) {
console.error('Sign Out Error', error);
});
@@ -224,6 +201,6 @@ function GetUserMoods() {
}

//create unique ID for moods
var ID = function () {
return '_' + Math.random().toString(36).substr(2, 9);
function CreateID() {
return Math.random().toString(36).substr(2, 9);
};
82 login.html
View file

This file was deleted.