better mobile seek bar

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
 
 

pandora/templates/mobile/index.html

@@ -22,8 +22,8 @@
         {% endif %}
         <meta property="og:site_name" content="{{ settings.SITENAME }}"/>
         {% compress css file m %}
-        <link rel="stylesheet" href="{% static 'mobile/css/reset.css' %}"></link>
-        <link rel="stylesheet" href="{% static 'mobile/css/style.css' %}"></link>
+        <link rel="stylesheet" href="{% static 'mobile/css/reset.css' %}">
+        <link rel="stylesheet" href="{% static 'mobile/css/style.css' %}">
         {% endcompress %}
         <meta name="google" value="notranslate"/>
     </head>

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);
                     });
                 }
             })

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({

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;
+}

static/mobile/js/VideoPlayer.js

@@ -153,9 +153,11 @@ window.VideoPlayer = function(options) {
                     ${icon.mute}
                 </div>
                 <div class="position">
-                    <div class="bar">
-                        <div class="progress"></div>
-
+                    <div class="seekbar">
+                      <input type="range" value="0" min='0' max='100' step='.25' />
+                      <div class="seekbar-progress">
+                        <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="38" style="width: 0%;"></div>
+                      </div>
                     </div>
                 </div>
                 <div class="time">
@@ -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:')) {