pandora/app/oidc.py

@@ -12,11 +12,7 @@ User = get_user_model()
 class OIDCAuthenticationBackend(mozilla_django_oidc.auth.OIDCAuthenticationBackend):
     def create_user(self, claims):
         user = super(OIDCAuthenticationBackend, self).create_user(claims)
-        username = None
+        username = claims.get("preferred_username")
-        for key in ('preferred_username', 'name'):
-            if claims.get(key):
-                username = claims[key]
-                break
         n = 1
         if username and username != user.username:
             uname = username
@@ -29,6 +25,8 @@ 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 rel="stylesheet" href="{% static 'mobile/css/reset.css' %}"></link>
-        <link rel="stylesheet" href="{% static 'mobile/css/style.css' %}">
+        <link rel="stylesheet" href="{% static 'mobile/css/style.css' %}"></link>
         {% endcompress %}
         <meta name="google" value="notranslate"/>
     </head>

static/js/account.js

@@ -337,7 +337,11 @@ 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);
+                        }
                     });
                 }
             })

static/js/utils.js

@@ -2655,6 +2655,15 @@ 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,75 +201,3 @@ 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,11 +153,9 @@ window.VideoPlayer = function(options) {
                     ${icon.mute}
                 </div>
                 <div class="position">
-                    <div class="seekbar">
+                    <div class="bar">
-                      <input type="range" value="0" min='0' max='100' step='.25' />
+                        <div class="progress"></div>
-                      <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">
@@ -225,28 +223,15 @@ 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'
-                hideControlsLater()
+                showControls = setTimeout(() => {
+                    self.controls.style.opacity = that.paused ? '1' : '0'
+                    showControls = null
+                }, 3000)
             } else {
                 self.controls.style.opacity = '0'
             }
@@ -256,7 +241,10 @@ window.VideoPlayer = function(options) {
                 clearTimeout(showControls)
             }
             self.controls.style.opacity = '1'
-            hideControlsLater()
+            showControls = setTimeout(() => {
+                self.controls.style.opacity = that.paused ? '1' : '0'
+                showControls = null
+            }, 3000)
         })
         self.controls.addEventListener("mouseleave", event => {
             if (showControls) {
@@ -265,13 +253,7 @@ 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)
@@ -328,7 +310,6 @@ window.VideoPlayer = function(options) {
         that.append(unblock)
     })
     var loading = true
-    var touching = false
     that.brightness(0)
     that.addEventListener("loadedmetadata", event => {
         //
@@ -350,29 +331,34 @@ window.VideoPlayer = function(options) {
         }
     })
 
-    var time = that.querySelector('.controls .time div');
+    var time = that.querySelector('.controls .time div'),
-    const progressbar = that.querySelector('.seekbar div[role="progressbar"]');
+        progress = that.querySelector('.controls .position .progress')
-    function setProgressPosition(value) {
+    that.querySelector('.controls .position').addEventListener("click", event => {
-        progressbar.style.width = value + '%';
+        var bar = event.target
-        progressbar.setAttribute('aria-valuenow', value);
+        while (bar && !bar.classList.contains('bar')) {
-
+            bar = bar.parentElement
         }
-    that.querySelector('.controls .position input').addEventListener('input', function(event){
+        if (bar && bar.classList.contains('bar')) {
             event.preventDefault()
             event.stopPropagation()
-        setProgressPosition(this.value)
+            var rect = bar.getBoundingClientRect()
-        var position = this.value/100 * self.options.duration
+            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)
-        hideControlsLater()
+        }
     })
-
     that.addEventListener("timeupdate", event => {
         var currentTime = that.currentTime(),
             duration = self.options.duration
         if (self.options.position) {
             currentTime -= self.options.position
         }
-        setProgressPosition(100 * currentTime / duration)
+        progress.style.width = (100 * currentTime / duration) + '%'
         duration = formatDuration(duration)
         currentTime = formatDuration(currentTime)
         while (duration && duration.startsWith('00:')) {