diff --git a/pandora/app/oidc.py b/pandora/app/oidc.py index 7739e1ba..be397374 100644 --- a/pandora/app/oidc.py +++ b/pandora/app/oidc.py @@ -12,7 +12,11 @@ User = get_user_model() class OIDCAuthenticationBackend(mozilla_django_oidc.auth.OIDCAuthenticationBackend): def create_user(self, claims): user = super(OIDCAuthenticationBackend, self).create_user(claims) - username = claims.get("preferred_username") + username = None + for key in ('preferred_username', 'name'): + if claims.get(key): + username = claims[key] + break n = 1 if username and username != user.username: uname = username @@ -25,8 +29,6 @@ class OIDCAuthenticationBackend(mozilla_django_oidc.auth.OIDCAuthenticationBacke return user def update_user(self, user, claims): - print("update user", user, claims) - #user.save() return user diff --git a/pandora/templates/mobile/index.html b/pandora/templates/mobile/index.html index 5cda3d82..e274b941 100644 --- a/pandora/templates/mobile/index.html +++ b/pandora/templates/mobile/index.html @@ -22,8 +22,8 @@ {% endif %} {% compress css file m %} - - + + {% endcompress %} diff --git a/static/js/account.js b/static/js/account.js index 05b05321..e213330f 100644 --- a/static/js/account.js +++ b/static/js/account.js @@ -337,11 +337,7 @@ pandora.ui.accountSignoutDialog = function() { that.close(); pandora.UI.set({page: ''}); pandora.api.signout({}, function(result) { - if (pandora.site.site.oidc) { - pandora.oidcLogout(); - } else { - pandora.signout(result.data); - } + pandora.signout(result.data); }); } }) diff --git a/static/js/utils.js b/static/js/utils.js index 874e5d35..6c0bb43b 100644 --- a/static/js/utils.js +++ b/static/js/utils.js @@ -2655,15 +2655,6 @@ pandora.oidcLogin = function() { document.location.href = '/oidc/authenticate/'; }; -pandora.oidcLogout = function() { - Ox.LoadingScreen().css({zIndex: 100}).addClass('OxScreen').appendTo(document.body).show().start() - const form = document.createElement("form"); - form.setAttribute("method", "post"); - form.setAttribute("action", "/oidc/logout/"); - document.body.appendChild(form); - form.submit(); -}; - pandora.openLicenseDialog = function() { if (!Ox.Focus.focusedElementIsInput() && !pandora.hasDialogOrScreen()) { pandora.ui.licenseDialog().open().bindEvent({ diff --git a/static/mobile/css/style.css b/static/mobile/css/style.css index 2dd8e28c..1ca261f5 100644 --- a/static/mobile/css/style.css +++ b/static/mobile/css/style.css @@ -201,3 +201,75 @@ ol li { width: 64px; height: 64px; } + + +.seekbar { + padding: 12px 22px; + position: relative; + width: 100%; +} +.fullscreen .seekbar { + padding: 28px 22px; +} + +.seekbar-progress { + height: 10px; + border: solid 1px #B1B1B1; +} + +.seekbar-progress [role="progressbar"] { + height: 100%; + position: relative; + background-color: #B1B1B180; +} + +.seekbar-progress [role="progressbar"]:after { + content: " "; + display: block; + width: 14px; + height: 14px; + position: absolute; + top: -3px; + right: -7px; + border: 2px solid #B1B1B180; + background-color: #B1B1B180; +} + +.seekbar input[type="range"] { + -webkit-appearance: none; + width: 100%; + height: 100%; + margin: 0; + position: absolute; + top: 0; + left: 0; + z-index: 2; + background: transparent; + outline: 0; + border: 0; +} + +.seekbar input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + display: block; + width: 48px; + height: 48px; + background-color: transparent; +} + +.seekbar input[type="range"]::-moz-range-thumb { + display: block; + width: 48px; + height: 48px; + background: transparent; + border: 0; +} + +.seekbar input[type="range"]::-moz-range-track { + background: transparent; + border: 0; +} + +.seekbar input[type="range"]::-moz-focus-outer { + border: 0; +} diff --git a/static/mobile/js/VideoPlayer.js b/static/mobile/js/VideoPlayer.js index af219c54..f1503387 100644 --- a/static/mobile/js/VideoPlayer.js +++ b/static/mobile/js/VideoPlayer.js @@ -153,9 +153,11 @@ window.VideoPlayer = function(options) { ${icon.mute}
-
-
- +
+ +
+
+
@@ -223,15 +225,28 @@ window.VideoPlayer = function(options) { } } var showControls + function hideControlsLater() { + showControls = setTimeout(() => { + if (touching) { + hideControlsLater() + } else { + self.controls.style.opacity = that.paused ? '1' : '0' + showControls = null + } + }, 3000) + } var toggleControls = event => { + if (event.target.tagName == "INPUT") { + if (showControls) { + clearTimeout(showControls) + } + return + } if (self.controls.style.opacity == '0') { event.preventDefault() event.stopPropagation() self.controls.style.opacity = '1' - showControls = setTimeout(() => { - self.controls.style.opacity = that.paused ? '1' : '0' - showControls = null - }, 3000) + hideControlsLater() } else { self.controls.style.opacity = '0' } @@ -241,10 +256,7 @@ window.VideoPlayer = function(options) { clearTimeout(showControls) } self.controls.style.opacity = '1' - showControls = setTimeout(() => { - self.controls.style.opacity = that.paused ? '1' : '0' - showControls = null - }, 3000) + hideControlsLater() }) self.controls.addEventListener("mouseleave", event => { if (showControls) { @@ -253,7 +265,13 @@ window.VideoPlayer = function(options) { self.controls.style.opacity = that.paused ? '1' : '0' showControls = null }) + self.controls.addEventListener("touchstart", event => { + touching = true + }) self.controls.addEventListener("touchstart", toggleControls) + self.controls.addEventListener("touchend", event => { + touching = false + }) self.controls.querySelector('.toggle').addEventListener("click", toggleVideo) self.controls.querySelector('.volume').addEventListener("click", toggleSound) self.controls.querySelector('.fullscreen-btn').addEventListener("click", toggleFullscreen) @@ -310,6 +328,7 @@ window.VideoPlayer = function(options) { that.append(unblock) }) var loading = true + var touching = false that.brightness(0) that.addEventListener("loadedmetadata", event => { // @@ -331,34 +350,29 @@ window.VideoPlayer = function(options) { } }) - var time = that.querySelector('.controls .time div'), - progress = that.querySelector('.controls .position .progress') - that.querySelector('.controls .position').addEventListener("click", event => { - var bar = event.target - while (bar && !bar.classList.contains('bar')) { - bar = bar.parentElement - } - if (bar && bar.classList.contains('bar')) { - event.preventDefault() - event.stopPropagation() - var rect = bar.getBoundingClientRect() - var x = event.clientX - rect.x - var percent = x / rect.width - var position = percent * self.options.duration - if (self.options.position) { - position += self.options.position - } - progress.style.width = (100 * percent) + '%' - that.currentTime(position) - } + var time = that.querySelector('.controls .time div'); + const progressbar = that.querySelector('.seekbar div[role="progressbar"]'); + function setProgressPosition(value) { + progressbar.style.width = value + '%'; + progressbar.setAttribute('aria-valuenow', value); + + } + that.querySelector('.controls .position input').addEventListener('input', function(event){ + event.preventDefault() + event.stopPropagation() + setProgressPosition(this.value) + var position = this.value/100 * self.options.duration + that.currentTime(position) + hideControlsLater() }) + that.addEventListener("timeupdate", event => { var currentTime = that.currentTime(), duration = self.options.duration if (self.options.position) { currentTime -= self.options.position } - progress.style.width = (100 * currentTime / duration) + '%' + setProgressPosition(100 * currentTime / duration) duration = formatDuration(duration) currentTime = formatDuration(currentTime) while (duration && duration.startsWith('00:')) {