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.css92
-rw-r--r--mediagoblin/static/css/vjs-mg-skin.css415
-rw-r--r--mediagoblin/static/images/video-js.pngbin0 -> 4459 bytes
-rw-r--r--mediagoblin/static/js/audio.js229
-rw-r--r--mediagoblin/static/js/autofilledin_password.js25
l---------mediagoblin/static/js/extlib/html5slider.js1
-rw-r--r--mediagoblin/static/js/geolocation-map.js5
-rw-r--r--mediagoblin/static/js/header_dropdown.js30
-rw-r--r--mediagoblin/static/js/keyboard_navigation.js10
-rw-r--r--mediagoblin/static/js/show_password.js1
11 files changed, 872 insertions, 20 deletions
diff --git a/mediagoblin/static/css/audio.css b/mediagoblin/static/css/audio.css
new file mode 100644
index 00000000..e007a0e1
--- /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: 0.7;
+ }
diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 0a0d0dcd..e4cd91ca 100644
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -26,10 +26,9 @@
}
body {
- background-color: #111;
- background-image: url("../images/background.png");
+ background-color: #161616;
color: #C3C3C3;
- padding: none;
+ padding: 0;
margin: 0px;
height: 100%;
font: 16px 'Lato', 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
@@ -114,24 +113,70 @@ input, textarea {
header {
width: 100%;
- padding-top: 14px;
- margin-bottom: 20px;
- border-bottom: 1px solid #333;
+ 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 {
@@ -144,7 +189,7 @@ footer {
height: 30px;
border-top: 1px solid #333;
bottom: 0px;
- padding-top: 8px;
+ padding: 8px 0;
text-align: center;
font-size: 0.875em;
clear: both;
@@ -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 {
@@ -560,13 +610,17 @@ table.media_panel th {
padding: 9px 14px;
}
+ header {
+ text-align: center;
+ }
+
.header_right {
+ margin-right: 2%;
float: none;
- display: inline-block;
}
- header {
- text-align: center;
+ a.logo {
+ margin-left: 2%;
}
}
diff --git a/mediagoblin/static/css/vjs-mg-skin.css b/mediagoblin/static/css/vjs-mg-skin.css
new file mode 100644
index 00000000..98c4eb95
--- /dev/null
+++ b/mediagoblin/static/css/vjs-mg-skin.css
@@ -0,0 +1,415 @@
+.video-js {
+ background-color: #000; position: relative; padding: 0; outline: none;
+
+ /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
+ font-size: 10px;
+
+ width: 650px !important;
+ height: 366px !important;
+
+
+ /* Allow poster to be vertially aligned. */
+ vertical-align: middle;
+ /* display: table-cell; */ /*This works in Safari but not Firefox.*/
+}
+
+/* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
+.video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
+/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
+.video-js:-moz-full-screen { position: absolute; }
+
+/* Fullscreen Styles */
+body.vjs-full-window {
+ padding: 0; margin: 0;
+ height: 100%; overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
+}
+.video-js.vjs-fullscreen {
+ position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important;
+ _position: absolute; /* IE6 Full-window (underscore hack) */
+}
+.video-js:-webkit-full-screen {
+ width: 100% !important; height: 100% !important;
+}
+
+/* Poster Styles */
+.vjs-poster {
+ margin: 0 auto; padding: 0; cursor: pointer;
+
+ /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
+ position: relative; width: 100%; max-height: 100%;
+}
+
+/* Subtiles Styles */
+.video-js .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; }
+
+/* Fading sytles, used to fade control bar. */
+.vjs-fade-in {
+ visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
+ opacity: 0.9 !important;
+
+ -webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
+ -moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
+ -ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
+ -o-transition: visibility 0s linear 0s, opacity 0.3s linear;
+ transition: visibility 0s linear 0s, opacity 0.3s linear;
+}
+.vjs-fade-out {
+ visibility: hidden !important;
+ opacity: 0 !important;
+
+ -webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+ -moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+ -ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+ -o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+ transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+}
+
+/* The control bar
+---------------------------------------------------------------------------------- */
+.vjs-mg-skin .vjs-controls {
+ position: absolute;
+ bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
+ left: 0; right: 0; /* 100% width of div */
+ margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */
+ height: 30px; /* Including any margin you want above or below control items */
+ color: #fff; border-top: 1px solid #404040; border-bottom: 1px solid #1f1f1f;
+
+ /* CSS Gradient */
+ /* Can use the Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/ */
+ background: #242424; /* Old browsers */
+ background: -moz-linear-gradient(top, #242424 50%, #1f1f1f 50%, #171717 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */
+ background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */
+ /* Filter was causing a lot of weird issues in IE. Elements would stop showing up, or other styles would break. */
+ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#171717',GradientType=0 );*/ /* IE6-9 */
+ background: linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* W3C */
+
+ /* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
+ /* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
+ visibility: hidden;
+ opacity: 0;
+}
+
+/* General styles for individual controls. */
+.vjs-mg-skin .vjs-control {
+ position: relative; float: left;
+ text-align: center; margin: 0; padding: 0;
+}
+
+.vjs-mg-skin .vjs-control:focus {
+ outline: 0;
+}
+
+/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
+.vjs-mg-skin .vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+
+
+
+/* Play/Pause
+-------------------------------------------------------------------------------- */
+.vjs-mg-skin .vjs-play-control { width: 38px; height: 30px; border-right: 1px solid #101010; cursor: pointer !important; border-left: 1px solid #333; border-bottom: 1px solid #1F1F1F; }
+/* Play Icon */
+.vjs-mg-skin.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('../images/video-js.png'); margin: 0; margin-left: 13px; margin-top: 7px; }
+.vjs-mg-skin.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('../images/video-js.png') -25px 0; margin: 0; margin-left: 13px; margin-top: 7px; }
+
+
+/* Rewind
+-------------------------------------------------------------------------------- */
+.vjs-mg-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
+.vjs-mg-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('../images/video-js.png'); margin: 0.5em auto 0; }
+
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.vjs-mg-skin .vjs-mute-control { width: 38px; height: 30px; border-left: 1px solid #333; cursor: pointer !important; float: right; }
+.vjs-mg-skin .vjs-mute-control div { width: 22px; height: 16px; background: url('../images/video-js.png') -75px -25px; margin:0; margin-left: 8px; margin-top: 8px; }
+.vjs-mg-skin .vjs-mute-control.vjs-vol-0 div { background: url('../images/video-js.png') 0 -25px; }
+.vjs-mg-skin .vjs-mute-control.vjs-vol-1 div { background: url('../images/video-js.png') -25px -25px; }
+.vjs-mg-skin .vjs-mute-control.vjs-vol-2 div { background: url('../images/video-js.png') -50px -25px; }
+
+
+.vjs-mg-skin .vjs-volume-control { width: 85px; height: 30px; float: right; border-right: 1px solid #333; }
+.vjs-mg-skin .vjs-volume-bar {
+ position: relative; width: 70px; height: 0.6em; margin:0; margin-left: 2px; margin-top: 11px; cursor: pointer !important;
+
+ /* -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; */
+
+ background: #666;
+ background: -moz-linear-gradient(top, #333, #666);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666));
+ background: -webkit-linear-gradient(top, #333, #666);
+ background: -o-linear-gradient(top, #333, #666);
+ background: -ms-linear-gradient(top, #333, #666);
+ background: linear-gradient(top, #333, #666);
+}
+
+.video-js:-moz .vjs-volume-bar { margin-top: 12px; }
+
+.vjs-mg-skin .vjs-volume-level {
+ position: absolute; top: 0; left: 0; height: 0.6em;
+
+ /* -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; */
+ /* CSS Gradient. */
+ background: #86D4B1; /* Old browsers */
+ background: -moz-linear-gradient(top, #86D4B1 0%, #5d937a 50%, #86D4B1 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#86D4B1), color-stop(50%,#5d937a), color-stop(100%,#86D4B1));
+ background: -webkit-linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+ background: -o-linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+ background: -ms-linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+ background: linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+
+
+}
+.vjs-mg-skin .vjs-volume-handle {
+ position: absolute; top: -4px; width: 14px; height: 14px; left: 0;
+ background: url('../images/video-js.png') 0 -50px;
+}
+
+.video-js:-moz .vjs-volume-handle { top: -1px;}
+
+
+
+
+/* Progress
+-------------------------------------------------------------------------------- */
+.vjs-mg-skin div.vjs-progress-control {
+ position: absolute;
+ top: -15px;
+ width: 100%;
+ height: 12px;
+}
+
+/* Box containing play and load progresses. Also acts as seek scrubber. */
+.vjs-mg-skin .vjs-progress-holder {
+ position: relative; cursor: pointer !important; /*overflow: hidden;*/
+ padding: 0; margin: 0; /* Placement within the progress control item */
+ height: 12px;
+ border-top: 1px solid #333;
+ border-bottom: 1px solid #111;
+
+
+/* -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em; */
+
+ /* CSS Gradient */
+ background: #111;
+ background: -moz-linear-gradient(top, #111, #262626);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
+ background: -webkit-linear-gradient(top, #111, #262626);
+ background: -o-linear-gradient(top, #111, #262626);
+ background: -ms-linear-gradient(top, #111, #262626);
+ background: linear-gradient(top, #111, #262626);
+}
+.vjs-mg-skin .vjs-progress-holder .vjs-play-progress,
+.vjs-mg-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
+ position: absolute; display: block; height: 12px; margin: 0; padding: 0;
+ left: 0; top: 0; /*Needed for IE6*/
+ /* -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em; */
+
+ /*width: 0;*/
+}
+
+.vjs-mg-skin .vjs-play-progress {
+ /* CSS Gradient. */
+ background: #86D4B1; /* Old browsers */
+ background: -moz-linear-gradient(top, #86D4B1 0%, #5d937a 50%, #86D4B1 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#86D4B1), color-stop(50%,#5d937a), color-stop(100%,#86D4B1));
+ background: -webkit-linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+ background: -o-linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+ background: -ms-linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+ background: linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+
+ background: #86D4B1;
+ background: -moz-linear-gradient(top, #5d937a 0%, #5d937a 50%, #86D4B1 50%, #5d937a 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#5d937a), color-stop(50%,#86D4B1), color-stop(50%,#86D4B1), color-stop(100%,#5d937a));
+ background: -webkit-linear-gradient(top, #5d937a 0%,#86D4B1 50%,#86D4B1 50%,#5d937a 100%);
+ background: -o-linear-gradient(top, #5d937a 0%,#86D4B1 50%,#5d937a 50%, 100%);
+ background: -ms-linear-gradient(top, #5d937a 0%,#86D4B1 50%,#86D4B1 50%,#5d937a 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86D4B1', endColorstr='#5d937a',GradientType=0 );
+ background: linear-gradient(top, #5d937a 0%,#86D4B1 50%,#86D4B1 50%,#5d937a 100%);
+}
+.vjs-mg-skin .vjs-load-progress {
+ opacity: 0.8;
+
+ /* CSS Gradient */
+ background: #666;
+ background: -moz-linear-gradient(top, #666, #333);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333));
+ background: -webkit-linear-gradient(top, #666, #333);
+ background: -o-linear-gradient(top, #666, #333);
+ background: -ms-linear-gradient(top, #666, #333);
+ background: linear-gradient(top, #666, #333);
+}
+
+.vjs-mg-skin div.vjs-seek-handle {
+ position: absolute;
+ width: 16px; height: 16px; /* Match img pixles */
+ margin-top: -0.2em;
+ left: 0; top: 0; /*Needed for IE6*/
+
+ background: url('../images/video-js.png') 0 -50px;
+ /* CSS Curved Corners. Needed to make shadows curved. */
+ -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
+ /* CSS Shadows */
+ -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
+}
+/* Time Display
+-------------------------------------------------------------------------------- */
+.vjs-mg-skin .vjs-time-controls {
+ height: 18px; width: 45px;
+ margin-top: 5px;
+ margin-left: 5px;
+ font-size: 14px; line-height: 18px; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
+ border-left: 1px solid #000000;
+ border-top: 1px solid #000;
+ border-bottom: 1px solid #333;
+ border-right: 1px solid #333;
+ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
+
+ /* CSS Gradient */
+ background: #111;
+ background: -moz-linear-gradient(top, #111, #262626);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
+ background: -webkit-linear-gradient(top, #111, #262626);
+ background: -o-linear-gradient(top, #111, #262626);
+ background: -ms-linear-gradient(top, #111, #262626);
+ background: linear-gradient(top, #111, #262626);
+
+
+}
+
+.vjs-mg-skin .vjs-current-time { }
+
+.vjs-mg-skin .vjs-duration { right: 0; display: none; }
+.vjs-mg-skin .vjs-remaining-time { display: block; }
+
+.vjs-time-divider { }
+
+.vjs-mg-skin .vjs-time-control { font-size: 12px; line-height: 16px; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
+.vjs-mg-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ }
+
+.vjs-mg-skin .vjs-time-divider { display: none; visibility: hidden; }
+
+/* Fullscreen
+-------------------------------------------------------------------------------- */
+.vjs-secondary-controls { float: right; }
+
+.vjs-mg-skin .vjs-fullscreen-control { height: 30px; width: 38px; cursor: pointer !important; float: right; border-left: 1px solid #111; }
+.vjs-mg-skin .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('../images/video-js.png') -50px 0; margin: 0; margin-left: 11px; margin-top: 8px; }
+
+.video-js.vjs-fullscreen .vjs-fullscreen-control div { background: url('../images/video-js.png') -75px 0; }
+.video-js:-webkit-full-screen .vjs-fullscreen-control div { background: url('../images/video-js.png') -75px 0; }
+
+
+
+/* Big Play Button (at start)
+---------------------------------------------------------*/
+.vjs-mg-skin .vjs-big-play-button {
+ display: block; /* Start hidden */ z-index: 2;
+ position: absolute; top: 50%; left: 50%; width: 8.0em; height: 8.0em; margin: -43px 0 0 -43px; text-align: center; vertical-align: center; cursor: pointer !important;
+ border: 0.3em solid #86D4B1; opacity: 0.95;
+ -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
+
+ background: #454545;
+ background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
+ background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+ background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+ background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
+ background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+
+ /* CSS Shadows */
+ -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
+}
+
+.vjs-mg-skin div.vjs-big-play-button:hover {
+ -webkit-box-shadow: 0 0 80px #fff; -moz-box-shadow: 0 0 80px #fff; box-shadow: 0 0 80px #fff;
+}
+
+.vjs-mg-skin div.vjs-big-play-button span {
+ position: absolute; top: 50%; left: 50%;
+ display: block; width: 35px; height: 42px;
+ margin: -20px 0 0 -15px; /* Using negative margin to center image. */
+ background: url('../images/video-js.png') -100px 0;
+}
+
+/* Loading Spinner
+---------------------------------------------------------*/
+/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
+.vjs-loading-spinner {
+ display: none;
+ position: absolute; top: 50%; left: 50%; width: 55px; height: 55px;
+ margin: -28px 0 0 -28px;
+ -webkit-animation-name: rotatethis;
+ -webkit-animation-duration:1s;
+ -webkit-animation-iteration-count:infinite;
+ -webkit-animation-timing-function:linear;
+ -moz-animation-name: rotatethis;
+ -moz-animation-duration:1s;
+ -moz-animation-iteration-count:infinite;
+ -moz-animation-timing-function:linear;
+}
+
+@-webkit-keyframes rotatethis {
+ 0% {-webkit-transform:scale(0.6) rotate(0deg); }
+ 12.5% {-webkit-transform:scale(0.6) rotate(0deg); }
+ 12.51% {-webkit-transform:scale(0.6) rotate(45deg); }
+ 25% {-webkit-transform:scale(0.6) rotate(45deg); }
+ 25.01% {-webkit-transform:scale(0.6) rotate(90deg);}
+ 37.5% {-webkit-transform:scale(0.6) rotate(90deg);}
+ 37.51% {-webkit-transform:scale(0.6) rotate(135deg);}
+ 50% {-webkit-transform:scale(0.6) rotate(135deg);}
+ 50.01% {-webkit-transform:scale(0.6) rotate(180deg);}
+ 62.5% {-webkit-transform:scale(0.6) rotate(180deg);}
+ 62.51% {-webkit-transform:scale(0.6) rotate(225deg);}
+ 75% {-webkit-transform:scale(0.6) rotate(225deg);}
+ 75.01% {-webkit-transform:scale(0.6) rotate(270deg);}
+ 87.5% {-webkit-transform:scale(0.6) rotate(270deg);}
+ 87.51% {-webkit-transform:scale(0.6) rotate(315deg);}
+ 100% {-webkit-transform:scale(0.6) rotate(315deg);}
+}
+
+@-moz-keyframes rotatethis {
+ 0% {-moz-transform:scale(0.6) rotate(0deg);}
+ 12.5% {-moz-transform:scale(0.6) rotate(0deg);}
+ 12.51% {-moz-transform:scale(0.6) rotate(45deg);}
+ 25% {-moz-transform:scale(0.6) rotate(45deg);}
+ 25.01% {-moz-transform:scale(0.6) rotate(90deg);}
+ 37.5% {-moz-transform:scale(0.6) rotate(90deg);}
+ 37.51% {-moz-transform:scale(0.6) rotate(135deg);}
+ 50% {-moz-transform:scale(0.6) rotate(135deg);}
+ 50.01% {-moz-transform:scale(0.6) rotate(180deg);}
+ 62.5% {-moz-transform:scale(0.6) rotate(180deg);}
+ 62.51% {-moz-transform:scale(0.6) rotate(225deg);}
+ 75% {-moz-transform:scale(0.6) rotate(225deg);}
+ 75.01% {-moz-transform:scale(0.6) rotate(270deg);}
+ 87.5% {-moz-transform:scale(0.6) rotate(270deg);}
+ 87.51% {-moz-transform:scale(0.6) rotate(315deg);}
+ 100% {-moz-transform:scale(0.6) rotate(315deg);}
+}
+/* Each circle */
+div.vjs-loading-spinner .ball1 { opacity: 0.12; position:absolute; left: 20px; top: 0px; width: 13px; height: 13px; background: #fff;
+ border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball2 { opacity: 0.25; position:absolute; left: 34px; top: 6px; width: 13px; height: 13px; background: #fff;
+ border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball3 { opacity: 0.37; position:absolute; left: 40px; top: 20px; width: 13px; height: 13px; background: #fff;
+ border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball4 { opacity: 0.50; position:absolute; left: 34px; top: 34px; width: 13px; height: 13px; background: #fff;
+ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 15px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball5 { opacity: 0.62; position:absolute; left: 20px; top: 40px; width: 13px; height: 13px; background: #fff;
+ border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball6 { opacity: 0.75; position:absolute; left: 6px; top: 34px; width: 13px; height: 13px; background: #fff;
+ border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; top: 20px; width: 13px; height: 13px; background: #fff;
+ border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
+ border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
diff --git a/mediagoblin/static/images/video-js.png b/mediagoblin/static/images/video-js.png
new file mode 100644
index 00000000..58cd813d
--- /dev/null
+++ b/mediagoblin/static/images/video-js.png
Binary files differ
diff --git a/mediagoblin/static/js/audio.js b/mediagoblin/static/js/audio.js
new file mode 100644
index 00000000..50d58cd9
--- /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 type="range" class="audio-volume"'
+ +'value="1" min="0" max="1" step="0.001" />').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/autofilledin_password.js b/mediagoblin/static/js/autofilledin_password.js
new file mode 100644
index 00000000..45e867fe
--- /dev/null
+++ b/mediagoblin/static/js/autofilledin_password.js
@@ -0,0 +1,25 @@
+/**
+ * GNU MediaGoblin -- federated, autonomous media hosting
+ * Copyright (C) 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(){
+ $('#forgot_password').click(function(event){
+ event.preventDefault();
+ window.location.pathname = $(this).attr('href') + '?username=' +
+ $('#username').val();
+ });
+});
diff --git a/mediagoblin/static/js/extlib/html5slider.js b/mediagoblin/static/js/extlib/html5slider.js
new file mode 120000
index 00000000..feae2cb8
--- /dev/null
+++ b/mediagoblin/static/js/extlib/html5slider.js
@@ -0,0 +1 @@
+../../../../extlib/html5slider/html5slider.js \ No newline at end of file
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/keyboard_navigation.js b/mediagoblin/static/js/keyboard_navigation.js
index d4039a3c..7401e4d8 100644
--- a/mediagoblin/static/js/keyboard_navigation.js
+++ b/mediagoblin/static/js/keyboard_navigation.js
@@ -16,6 +16,15 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
+/* It must be wrapped into a function and you also cannot use
+ * $(':not(textarea, input)') because of some reason. */
+
+$(document).ready(function(){
+ $('textarea, input').keydown(function(event){
+ event.stopPropagation();
+ });
+});
+
$(document).keydown(function(event){
switch(event.which){
case 37:
@@ -30,4 +39,3 @@ $(document).keydown(function(event){
break;
}
});
-
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-08-02 00:32:13 +0000