aboutsummaryrefslogtreecommitdiffstats
path: root/mediagoblin/static
diff options
context:
space:
mode:
Diffstat (limited to 'mediagoblin/static')
-rw-r--r--mediagoblin/static/css/audio.css84
-rw-r--r--mediagoblin/static/css/base.css89
-rw-r--r--mediagoblin/static/js/audio.js229
-rw-r--r--mediagoblin/static/js/geolocation-map.js5
-rw-r--r--mediagoblin/static/js/header_dropdown.js30
-rw-r--r--mediagoblin/static/js/show_password.js1
6 files changed, 423 insertions, 15 deletions
diff --git a/mediagoblin/static/css/audio.css b/mediagoblin/static/css/audio.css
new file mode 100644
index 00000000..387278ec
--- /dev/null
+++ b/mediagoblin/static/css/audio.css
@@ -0,0 +1,84 @@
+.audio-spectrogram {
+ position: relative;
+}
+.playhead {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: rgba(134, 212, 177, 0.3);
+ border-right: thin solid #ffaa00;
+ height: 100%;
+ -webkit-transition: width .1s ease-out;
+ -moz-transition: width .1s ease-out;
+ transition: width .1s ease-out;
+}
+.audio-control-play-pause {
+ position: absolute;
+ bottom: 0;
+ left: 5px;
+ cursor: pointer;
+ /* background: rgba(0, 0, 0, 0.7); */
+ font-size: 40px;
+ width: 50px;
+ text-shadow: 0 0 10px black;
+}
+ .audio-control-play-pause.playing {
+ color: #b71500;
+ letter-spacing: -17px;
+ margin-left: -7px;
+ }
+ .audio-control-play-pause.paused {
+ /* Warning: this means the the play button shows! */
+ color: rgb(134, 212, 177);
+ }
+
+.buffered-indicators {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+}
+ .buffered-indicators div {
+ position: absolute;
+ height: 2px;
+ left: 0;
+ background: rgba(134, 177, 212, 1);
+
+ -webkit-transition: left 1s ease-out;
+ -moz-transition: left 1s ease-out;
+ transition: left 1s ease-out;
+
+ -webkit-transition: width 1s ease-out;
+ -moz-transition: width 1s ease-out;
+ transition: width 1s ease-out;
+
+ cursor: pointer;
+ }
+
+.seekbar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.audio-currentTime {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ background: rgba(0, 0, 0, 0.7);
+}
+
+.audio-volume {
+ position: absolute;
+ left: 50px;
+ bottom: 10px;
+ opacity: 0.3;
+ -moz-transition: opacity .1s ease-in-out;
+ -webkit-transition: opacity .1s ease-in-out;
+ transition: opacity .1s ease-in-out;
+}
+ .audio-spectrogram:hover .audio-volume {
+ opacity: 1;
+ }
diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 34be4f16..e4cd91ca 100644
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -26,8 +26,7 @@
}
body {
- background-color: #111;
- background-image: url("../images/background.png");
+ background-color: #161616;
color: #C3C3C3;
padding: 0;
margin: 0px;
@@ -113,25 +112,71 @@ input, textarea {
}
header {
- width: 98%;
- padding: 6px 1% 0;
- margin-bottom: 20px;
- background-color: #222;
+ width: 100%;
+ padding: 0;
+ margin-bottom: 42px;
+ background-color: #303030;
+ border-bottom: 1px solid #252525;
}
.header_right {
+ margin: 8px;
+ display: inline-block;
float: right;
- margin: 8px 0px 8px 8px;
+}
+
+.header_right ul {
+ display: none;
+ position: absolute;
+ top: 42px;
+ right: 0px;
+ background: #252525;
+ padding: 20px;
+}
+
+.header_right li {
+ list-style: none;
+}
+
+.dropdown {
+ display: inline-block;
+ color: #c3c3c3;
+ background-color: #424242;
+ border: 1px solid;
+ border-color: #464646 #2B2B2B #252525;
+ border-radius: 4px;
+ padding: 3px 8px;
+ font-size: 16px;
+ text-decoration: none;
+ font-style: normal;
+ font-weight: bold;
+ cursor: pointer;
+ position: relative;
+}
+
+.dropdown_items {
+ position: absolute;
+ right: 0px;
+ top: 25px;
+ background-color: #424242;
+ padding: 10px;
+ width: 160px;
+ border-radius: 5px 0 5px 5px;
+ box-shadow: 0 2px 1px black;
+}
+
+.dropdown_items a {
+ display: block;
}
a.logo {
color: #fff;
font-weight: bold;
- margin: 8px 8px 8px 0;
}
.logo img {
vertical-align: middle;
+ margin: 6px 8px;
}
.mediagoblin_content {
@@ -241,7 +286,7 @@ text-align: center;
}
.media_sidebar p {
- padding-left: 8px;
+ margin-left: 8px;
}
/* forms */
@@ -310,18 +355,23 @@ textarea#description, textarea#bio {
/* comments */
+.comment_wrapper {
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
+.comment_wrapper p {
+ margin-bottom: 2px;
+}
+
.comment_author {
- margin-bottom: 40px;
padding-top: 4px;
font-size: 0.9em;
}
.comment_content {
- margin-bottom: 30px;
-}
-
-.comment_content p {
- margin-bottom: 0px;
+ margin-left: 8px;
+ margin-top: 8px;
}
textarea#comment_content {
@@ -563,6 +613,15 @@ table.media_panel th {
header {
text-align: center;
}
+
+ .header_right {
+ margin-right: 2%;
+ float: none;
+ }
+
+ a.logo {
+ margin-left: 2%;
+ }
}
@media screen and (max-width: 570px) {
diff --git a/mediagoblin/static/js/audio.js b/mediagoblin/static/js/audio.js
new file mode 100644
index 00000000..f50908a1
--- /dev/null
+++ b/mediagoblin/static/js/audio.js
@@ -0,0 +1,229 @@
+/**
+ * GNU MediaGoblin -- federated, autonomous media hosting
+ * Copyright (C) 2011, 2012 MediaGoblin contributors. See AUTHORS.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+var audioPlayer = new Object();
+
+(function (audioPlayer) {
+ audioPlayer.init = function (audioElement) {
+ audioPlayer.audioElement = audioElement;
+
+ console.log(audioElement);
+
+ attachEvents();
+
+ $(audioElement).hide();
+ };
+
+ function attachEvents () {
+ audioPlayer.audioElement.addEventListener(
+ 'durationchange', audioPlayer.durationChange, true);
+ audioPlayer.audioElement.addEventListener(
+ 'timeupdate', audioPlayer.timeUpdate, true);
+ audioPlayer.audioElement.addEventListener(
+ 'progress', audioPlayer.onProgress, true);
+ audioPlayer.audioElement.addEventListener(
+ 'ended', audioPlayer.onEnded, true);
+
+ $(document).ready( function () {
+ $('.audio-spectrogram').delegate(
+ '.seekbar', 'click', audioPlayer.onSeek);
+ $('.audio-spectrogram').delegate(
+ '.audio-control-play-pause', 'click', audioPlayer.playPause);
+ $('.audio-spectrogram').delegate(
+ '.audio-volume', 'change', audioPlayer.onVolumeChange);
+ $('.audio-media').delegate(
+ '.audio-spectrogram', 'attachedControls',
+ audioPlayer.onControlsAttached);
+ });
+ }
+
+ audioPlayer.onVolumeChange = function(e) {
+ console.log('volume change', e);
+ audioPlayer.audioElement.volume = e.target.value;
+ }
+
+ audioPlayer.onControlsAttached = function(e) {
+ console.log('Controls attached', e);
+ $('.audio-spectrogram .audio-volume').val(
+ Math.round(audioPlayer.audioElement.volume, 2));
+ }
+
+ audioPlayer.onProgress = function(e) {
+ /**
+ * Handler for file download progress
+ */
+ console.log(e);
+
+ var buffered = audioPlayer.audioElement.buffered;
+
+ ranges = new Array();
+
+ var indicators = $('.audio-spectrogram .buffered-indicators div');
+
+ for (var i = 0; i < buffered.length; i++) {
+ if (!(i in indicators)) {
+ $('<div style="display: none;"></div>')
+ .appendTo($('.audio-spectrogram .buffered-indicators'))
+ .fadeIn(500);
+ indicators = $('.audio-spectrogram .buffered-indicators div');
+ }
+ var posStart = ((buffered.start(i) / audioPlayer.audioElement.duration)
+ * audioPlayer.imageElement.width());
+ var posStop = ((buffered.end(i) / audioPlayer.audioElement.duration)
+ * audioPlayer.imageElement.width());
+ console.log('indicators', indicators);
+
+ var indicator = $(indicators[i]);
+
+ indicator.css('left', posStart);
+ indicator.css('width', posStop - posStart);
+ }
+
+ /*
+ * Clean up unused indicators
+ */
+ if (indicators.length > buffered.length) {
+ for (var i = buffered.length; i < indicators.length; i++) {
+ $(indicators[i]).fadeOut(500, function () {
+ this.remove();
+ });
+ }
+ }
+ };
+
+ audioPlayer.onSeek = function (e) {
+ /**
+ * Callback handler for seek event, which is a .click() event on the
+ * .seekbar element
+ */
+ console.log('onSeek', e);
+
+ var im = audioPlayer.imageElement;
+ var pos = (e.offsetX || e.originalEvent.layerX) / im.width();
+
+ audioPlayer.audioElement.currentTime = pos * audioPlayer.audioElement.duration;
+ audioPlayer.audioElement.play();
+ audioPlayer.setState(audioPlayer.PLAYING);
+ };
+
+ audioPlayer.onEnded = function (e) {
+ audioPlayer.setState(audioPlayer.PAUSED);
+ }
+
+ audioPlayer.playPause = function (e) {
+ console.log('playPause', e);
+ if (audioPlayer.audioElement.paused) {
+ audioPlayer.audioElement.play();
+ audioPlayer.setState(audioPlayer.PLAYING);
+ } else {
+ audioPlayer.audioElement.pause();
+ audioPlayer.setState(audioPlayer.PAUSED);
+ }
+ };
+
+ audioPlayer.NULL = null;
+ audioPlayer.PLAYING = 2;
+ audioPlayer.PAUSED = 4;
+
+ audioPlayer.state = audioPlayer.NULL;
+
+ audioPlayer.setState = function (state) {
+ if (state == audioPlayer.state) {
+ return;
+ } else {
+ audioPlayer.state = state;
+ }
+
+ switch (state) {
+ case audioPlayer.PLAYING:
+ $('.audio-spectrogram .audio-control-play-pause')
+ .removeClass('paused').addClass('playing')
+ .text('▮▮');
+ break;
+ case audioPlayer.PAUSED:
+ $('.audio-spectrogram .audio-control-play-pause')
+ .removeClass('playing').addClass('paused')
+ .text('▶');
+ break;
+ }
+ };
+
+ audioPlayer.durationChange = function () {
+ // ???
+ };
+
+ audioPlayer.timeUpdate = function () {
+ /**
+ * Callback handler for the timeupdate event, responsible for
+ * updating the playhead
+ */
+ var currentTime = audioPlayer.audioElement.currentTime;
+ var playhead = audioPlayer.imageElement.parent().find('.playhead');
+ playhead.css('width', (currentTime / audioPlayer.audioElement.duration)
+ * audioPlayer.imageElement.width());
+ var time = formatTime(currentTime);
+ var duration = formatTime(audioPlayer.audioElement.duration);
+ audioPlayer.imageElement.parent()
+ .find('.audio-currentTime')
+ .text(time + '/' + duration);
+ };
+
+ function formatTime(seconds) {
+ /**
+ * Format a time duration in (hh:)?mm:ss manner
+ */
+ var h = Math.floor(seconds / (60 * 60));
+ var m = Math.floor((seconds - h * 60 * 60) / 60);
+ var s = Math.round(seconds - h * 60 * 60 - m * 60);
+ return '' + (h ? (h < 10 ? '0' + h : h) + ':' : '') + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
+ }
+
+ audioPlayer.formatTime = formatTime;
+
+ audioPlayer.attachToImage = function (imageElement) {
+ /**
+ * Attach the player to an image element
+ */
+ console.log(imageElement);
+
+ var im = $(imageElement);
+
+ audioPlayer.imageElement = im;
+
+ $('<div class="playhead"></div>').appendTo(im.parent());
+ $('<div class="buffered-indicators"></div>').appendTo(im.parent());
+ $('<div class="seekbar"></div>').appendTo(im.parent());
+ $('<div class="audio-control-play-pause paused">▶</div>').appendTo(im.parent());
+ $('<div class="audio-currentTime">00:00</div>').appendTo(im.parent());
+ $('<input placeholder="Range input not supported" class="audio-volume"'
+ +'type="range" min="0" max="1" step="0.01" />').appendTo(im.parent());
+ $('.audio-spectrogram').trigger('attachedControls');
+ };
+})(audioPlayer);
+
+$(document).ready(function () {
+ if (!$('.audio-media').length) {
+ return;
+ }
+
+ console.log('Initializing audio player');
+
+ audioElements = $('.audio-media .audio-player');
+ audioPlayer.init(audioElements[0]);
+ audioPlayer.attachToImage($('.audio-spectrogram img')[0]);
+});
diff --git a/mediagoblin/static/js/geolocation-map.js b/mediagoblin/static/js/geolocation-map.js
index a2c62045..de49a37d 100644
--- a/mediagoblin/static/js/geolocation-map.js
+++ b/mediagoblin/static/js/geolocation-map.js
@@ -17,6 +17,11 @@
*/
$(document).ready(function () {
+ if (!$('#tile-map').length) {
+ return;
+ }
+ console.log('Initializing map');
+
var longitude = Number(
$('#tile-map #gps-longitude').val());
var latitude = Number(
diff --git a/mediagoblin/static/js/header_dropdown.js b/mediagoblin/static/js/header_dropdown.js
new file mode 100644
index 00000000..643bafa4
--- /dev/null
+++ b/mediagoblin/static/js/header_dropdown.js
@@ -0,0 +1,30 @@
+/**
+ * GNU MediaGoblin -- federated, autonomous media hosting
+ * Copyright (C) 2011, 2012 MediaGoblin contributors. See AUTHORS.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+$(document).ready(function() {
+ $(".dropdown_items").hide();
+ $(document).mouseup(function(e) {
+ if($(e.target).is(".dropdown")) {
+ $(".dropdown_items").toggle();
+ } else if($(e.target).is(".dropdown_items")) {
+ return;
+ } else {
+ $(".dropdown_items").hide();
+ }
+ });
+});
diff --git a/mediagoblin/static/js/show_password.js b/mediagoblin/static/js/show_password.js
index e42d44ea..b3fbc862 100644
--- a/mediagoblin/static/js/show_password.js
+++ b/mediagoblin/static/js/show_password.js
@@ -17,6 +17,7 @@
*/
$(document).ready(function(){
+ //Create a duplicate password field. We could change the input type dynamically, but this angers the IE gods (not just IE6).
$("#password").after('<input type="text" value="" name="password_clear" id="password_clear" /><label><input type="checkbox" id="password_boolean" />Show password</label>');
$('#password_clear').hide();
$('#password_boolean').click(function(){
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-12 06:41:21 +0000