add preview player

pandora/config.pandora.jsonc

@@ -1197,6 +1197,7 @@ examples (config.SITENAME.jsonc) that are part of this pan.do/ra distribution.
                 "preferences": "",
                 "tv": ""
             },
+            "previewView": "poster",
             "section": "items",
             "sequenceMode": "shape",
             "sequenceSort": [{"key": "director", "operator": "+"}],

pandora/settings.py

@@ -103,8 +103,8 @@ MIDDLEWARE = (
     'django.contrib.messages.middleware.MessageMiddleware',
     'oxdjango.middleware.ExceptionMiddleware',
     'oxdjango.middleware.ChromeFrameMiddleware',
-    'user.middleware.TokenSession',
     'user.middleware.UpdateSession',
+    'user.middleware.TokenSession',
 )
 
 ROOT_URLCONF = 'urls'

pandora/user/middleware.py

@@ -8,9 +8,11 @@ class UpdateSession(MiddlewareMixin):
 
     def process_request(self, request):
         if request.user.is_authenticated:
-            expire_date = Session.objects.get(session_key=request.session.session_key).expire_date
-            if (request.session.get_expiry_date() - expire_date).total_seconds() > settings.SESSION_UPDATE:
-                request.session.modified = True
+            session = Session.objects.filter(session_key=request.session.session_key).first()
+            if session:
+                expire_date = session.expire_date
+                if (request.session.get_expiry_date() - expire_date).total_seconds() > settings.SESSION_UPDATE:
+                    request.session.modified = True
 
     def process_response(self, request, response):
         return response
@@ -28,7 +30,6 @@ class TokenSession(MiddlewareMixin):
         if value:
             token = models.AccessToken.objects.filter(value=value).first()
             if token:
-                #django.contrib.auth.login(request, token.user)
                 request.user = token.user
 
     def process_response(self, request, response):

static/js/previewDialog.js

@@ -1,104 +1,9 @@
 'use strict';
 
 pandora.ui.previewDialog = function() {
-
-    var $image,
-        $list = pandora.$ui.list,
-        item = Ox.last($list.options('selected')),
-        posterRatio = pandora.user.ui.showSitePosters
-            ? pandora.site.posters.ratio
-            : ($list.value(item, 'posterRatio') || pandora.site.posters.ratio),
-        size = getSize(posterRatio),
-
-        that = Ox.Dialog({
-                closeButton: true,
-                content: Ox.Element(),
-                fixedRatio: true,
-                focus: false,
-                height: size.height,
-                maximizeButton: true,
-                title: Ox._('Loading...'),
-                width: size.width
-            })
-            .bindEvent({
-                resize: function(data) {
-                    // FIXME: why doesn't that.options('content') work here?
-                    // (currently the only reason $image is in the outer scope)
-                    $image.css({
-                        width: data.width,
-                        height: data.height
-                    });
-                },
-                pandora_find: function() {
-                    that.close();
-                },
-                pandora_item: function() {
-                    that.close();
-                },
-                pandora_page: function() {
-                    that.close();
-                },
-                pandora_section: function() {
-                    that.close();
-                },
-                pandora_showsiteposters: function() {
-                    that.update();
-                }
-            });
-
-    function getSize(posterRatio) {
-        var windowWidth = window.innerWidth * 0.8,
-            windowHeight = window.innerHeight * 0.8,
-            windowRatio = windowWidth / windowHeight;
-        return {
-            width: Math.round(posterRatio > windowRatio ? windowWidth : windowHeight * posterRatio),
-            height: Math.round(posterRatio < windowRatio ? windowHeight : windowWidth / posterRatio)
-        };
+    if (pandora.user.ui.previewView == "poster") {
+        return pandora.ui.previewPoster()
+    } else if (pandora.user.ui.previewView == "player") {
+        return pandora.ui.previewPlayer()
     }
-
-    that.update = function() {
-        pandora.requests.preview && pandora.api.cancel(pandora.requests.preview);
-        pandora.requests.preview = pandora.api.find({
-            keys: [
-                'id', 'modified', 'posterRatio'
-            ].concat(pandora.site.itemTitleKeys),
-            query: {
-                conditions: [{
-                    key: 'id',
-                    operator: '==',
-                    value: Ox.last($list.options('selected'))
-                }],
-                operator: '&'
-            }
-        }, function(result) {
-            var item = result.data.items[0],
-                posterRatio = pandora.user.ui.showSitePosters
-                    ? pandora.site.posters.ratio
-                    : item.posterRatio,
-                size = getSize(posterRatio),
-                title = pandora.getItemTitle(item, true);
-            $image = $('<img>')
-                .attr({src: pandora.getMediaURL('/' + item.id + '/' + (
-                    pandora.user.ui.showSitePosters ? 'siteposter' : 'poster'
-                ) + '128.jpg?' + item.modified)})
-                .css({width: size.width + 'px', height: size.height + 'px'});
-            $('<img>')
-                .load(function() {
-                    $image.attr({src: $(this).attr('src')});
-                })
-                .attr({src: pandora.getMediaURL('/' + item.id + '/' + (
-                    pandora.user.ui.showSitePosters ? 'siteposter' : 'poster'
-                ) + '1024.jpg?' + item.modified)});
-            that.options({
-                    content: $image,
-                    title: title,
-                })
-                .setSize(size.width, size.height);
-        });
-        return that;
-    }
-
-    return that.update();
-
 };
-

static/js/previewPlayer.js

@@ -0,0 +1,178 @@
+'use strict';
+
+pandora.ui.previewPlayer = function() {
+
+    var $player,
+        $list = pandora.$ui.list,
+        item = Ox.last($list.options('selected')),
+        playerRatio = pandora.site.video.previewRatio,
+        size = getSize(playerRatio),
+        ui = pandora.user.ui,
+        options = {},
+        that = Ox.Dialog({
+                closeButton: true,
+                content: Ox.Element(),
+                fixedRatio: true,
+                focus: false,
+                height: size.height,
+                maximizeButton: true,
+                title: Ox._('Loading...'),
+                width: size.width
+            })
+            .bindEvent({
+                resize: function(data) {
+                    // FIXME: why doesn't that.options('content') work here?
+                    // (currently the only reason $image is in the outer scope)
+                    $player && $player.options({
+                        width: data.width,
+                        height: data.height
+                    });
+                },
+                pandora_find: function() {
+                    that.close();
+                },
+                pandora_item: function() {
+                    that.close();
+                },
+                pandora_page: function() {
+                    that.close();
+                },
+                pandora_section: function() {
+                    that.close();
+                },
+                close: function() {
+                    $player.options({paused: true});
+                },
+            });
+
+    function getSize(playerRatio) {
+        var windowWidth = window.innerWidth * 0.8,
+            windowHeight = window.innerHeight * 0.8,
+            windowRatio = windowWidth / windowHeight;
+        return {
+            width: Math.round(playerRatio > windowRatio ? windowWidth : windowHeight * playerRatio),
+            height: Math.round(playerRatio < windowRatio ? windowHeight : windowWidth / playerRatio)
+        };
+    }
+
+    that.update = function() {
+        pandora.requests.preview && pandora.api.cancel(pandora.requests.preview);
+        pandora.requests.preview = pandora.api.find({
+            keys: [
+                'id', 'modified', 'playerRatio'
+            ].concat(pandora.site.itemTitleKeys),
+            query: {
+                conditions: [{
+                    key: 'id',
+                    operator: '==',
+                    value: Ox.last($list.options('selected'))
+                }],
+                operator: '&'
+            }
+        }, function(result) {
+            var item = result.data.items[0],
+                size = getSize(playerRatio),
+                title = pandora.getItemTitle(item, true);
+            pandora.api.get({id: item.id, keys: pandora.VIDEO_OPTIONS_KEYS}, function(result) {
+                options = Ox.extend(
+                    {item: item.id},
+                    ui.videoPoints[item.id] || {},
+                    options
+                );
+                if (!options.position) {
+                    options.position = options['in'] || 0;
+                }
+                result.data.item = item.id
+                let video = Ox.extend(result.data, pandora.getVideoOptions(result.data));
+                if (!video.subtitles) {
+                    video.subtitles = pandora.getSubtitles(video);
+                }
+                $player = Ox.VideoPlayer({
+                        censored: video.censored,
+                        censoredIcon: pandora.site.cantPlay.icon,
+                        censoredTooltip: pandora.site.cantPlay.text,
+                        controlsBottom: [
+                            'play',
+                            'volume',
+                            'scale',
+                            'timeline',
+                            'position',
+                            'settings'
+                        ],
+                        controlsTooltips: {
+                            close: Ox._('Close'),
+                            open: Ox._('Open {0}', [pandora.site.itemName.singular])
+                        },
+                        controlsTop: [
+                            Ox.Fullscreen.available ? 'fullscreen' : 'space16',
+                            'title',
+                            'open'
+                        ],
+                        duration: video.duration,
+                        enableFullscreen: Ox.Fullscreen.available,
+                        enableKeyboard: true,
+                        enableMouse: true,
+                        enablePosition: true,
+                        enableSubtitles: ui.videoSubtitles,
+                        enableTimeline: true,
+                        enableVolume: true,
+                        height: size.height,
+                        muted: ui.videoMuted,
+                        paused: options.paused,
+                        loop: false,
+                        playInToOut: false,
+                        position: options.position,
+                        poster: pandora.getMediaURL('/' + options.item + '/' + '96p' + (
+                            options.position !== void 0 ? options.position
+                            : options['in'] !== void 0 ? options['in']
+                            : video.posterFrame
+                        ) +'.jpg'),
+                        resolution: ui.videoResolution,
+                        scaleToFill: ui.videoScale == 'fill',
+                        showIconOnLoad: true,
+                        subtitles: video.subtitles,
+                        subtitlesDefaultTrack: video.subtitlesDefaultTrack || Ox.getLanguageNameByCode(pandora.site.language),
+                        subtitlesLayer: video.subtitlesLayer,
+                        subtitlesOffset: ui.videoSubtitlesOffset,
+                        subtitlesTrack: video.subtitlesTrack || Ox.getLanguageNameByCode(pandora.site.language),
+                        timeline: pandora.getMediaURL('/' + options.item + '/' + 'timeline16p.png'),
+                        timelineType: '',
+                        timelineTypes: [],
+                        title: video.title,
+                        video: video.video,
+                        volume: ui.videoVolume,
+                        width: size.width
+                    })
+                    .bindEvent({
+                        fullscreen: function(data) {
+                            Ox.Fullscreen.toggle();
+                        },
+                        open: function() {
+                            $player.options({paused: true});
+                            var url = document.location.protocol + '//'
+                                + document.location.hostname + '/'
+                                + options.item + '/'
+                                + Ox.formatDuration($player.options('position'));
+                            pandora.openURL(url);
+                        },
+                        playing: function(data) {
+                            pandora.UI.set(
+                                'videoPoints.' + item.id + '.position',
+                                data.position
+                            );
+                        }
+                    });
+                that.options({content: $player});
+        });
+        that.options({
+                content: Ox.LoadingScreen(),
+                title: title,
+            })
+            .setSize(size.width, size.height);
+        });
+        return that;
+    }
+
+    return that.update();
+
+};

static/js/previewPoster.js

@@ -0,0 +1,105 @@
+'use strict';
+
+pandora.ui.previewPoster = function() {
+
+    var $image,
+        $list = pandora.$ui.list,
+        item = Ox.last($list.options('selected')),
+        posterRatio = pandora.user.ui.showSitePosters
+            ? pandora.site.posters.ratio
+            : ($list.value(item, 'posterRatio') || pandora.site.posters.ratio),
+        size = getSize(posterRatio),
+
+        that = Ox.Dialog({
+                closeButton: true,
+                content: Ox.Element(),
+                fixedRatio: true,
+                focus: false,
+                height: size.height,
+                maximizeButton: true,
+                title: Ox._('Loading...'),
+                width: size.width
+            })
+            .bindEvent({
+                resize: function(data) {
+                    // FIXME: why doesn't that.options('content') work here?
+                    // (currently the only reason $image is in the outer scope)
+                    $image.css({
+                        width: data.width,
+                        height: data.height
+                    });
+                },
+                pandora_find: function() {
+                    that.close();
+                },
+                pandora_item: function() {
+                    that.close();
+                },
+                pandora_page: function() {
+                    that.close();
+                },
+                pandora_section: function() {
+                    that.close();
+                },
+                pandora_showsiteposters: function() {
+                    that.update();
+                }
+            });
+
+    function getSize(posterRatio) {
+        var windowWidth = window.innerWidth * 0.8,
+            windowHeight = window.innerHeight * 0.8,
+            windowRatio = windowWidth / windowHeight;
+        return {
+            width: Math.round(posterRatio > windowRatio ? windowWidth : windowHeight * posterRatio),
+            height: Math.round(posterRatio < windowRatio ? windowHeight : windowWidth / posterRatio)
+        };
+    }
+
+    that.update = function() {
+        pandora.requests.preview && pandora.api.cancel(pandora.requests.preview);
+        pandora.requests.preview = pandora.api.find({
+            keys: [
+                'id', 'modified', 'posterRatio'
+            ].concat(pandora.site.itemTitleKeys),
+            query: {
+                conditions: [{
+                    key: 'id',
+                    operator: '==',
+                    value: Ox.last($list.options('selected'))
+                }],
+                operator: '&'
+            }
+        }, function(result) {
+            var item = result.data.items[0],
+                posterRatio = pandora.user.ui.showSitePosters
+                    ? pandora.site.posters.ratio
+                    : item.posterRatio,
+                size = getSize(posterRatio),
+                title = pandora.getItemTitle(item, true);
+            $image = $('<img>')
+                .attr({src: pandora.getMediaURL('/' + item.id + '/' + (
+                    pandora.user.ui.showSitePosters ? 'siteposter' : 'poster'
+                ) + '128.jpg?' + item.modified)})
+                .css({width: size.width + 'px', height: size.height + 'px'});
+            $('<img>')
+                .load(function() {
+                    $image.attr({src: $(this).attr('src')});
+                })
+                .attr({src: pandora.getMediaURL('/' + item.id + '/' + (
+                    pandora.user.ui.showSitePosters ? 'siteposter' : 'poster'
+                ) + '1024.jpg?' + item.modified)});
+            that.options({
+                    content: $image,
+                    title: title,
+                })
+                .setSize(size.width, size.height);
+        });
+        return that;
+    }
+
+    return that.update();
+
+};
+
+