Permalink
Browse files

implemented check to play m3u8 with flv fallback. various bug fixes

  • Loading branch information...
1 parent cf9d208 commit aca050fc44ca8e1dce8330fc72f5c3911616bbe9 @ericmatthys ericmatthys committed May 12, 2012
View

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -33,8 +33,11 @@ define(
dispatcher.trigger('command:ShowLoading', false);
}
- function onTranscodeSuccess(url, session) {
- item.set('url', url);
+ function onTranscodeSuccess(streaming, url, session) {
+ item.set({
+ streaming: streaming,
+ url: url
+ });
appModel.set({
showHeader: true,
@@ -45,8 +45,18 @@ define(
var user = appModel.get('user');
var token = server.get('accessToken') ? server.get('accessToken') : user.get('authentication_token');
+ var video = document.createElement('video');
+ var supportsM3U8 = video.canPlayType('application/x-mpegURL').replace(/^no$/,'');
+ var basePath;
+
+ if (supportsM3U8) {
+ basePath = m3u8Path;
+ } else {
+ basePath = flvPath;
+ }
+
var baseURL = 'http://' + server.get('host') + ':' + server.get('port') + '/video/:/transcode/segmented/';
- var transcodeURL = m3u8Path + 'offset=0&quality=5&url=http%3A%2F%2F127.0.0.1%3A32400' + encodeURIComponent(path) + '&3g=0&httpCookies=&userAgent=';
+ var transcodeURL = basePath + 'offset=0&quality=5&url=http%3A%2F%2F127.0.0.1%3A32400' + encodeURIComponent(path) + '&3g=0&httpCookies=&userAgent=';
var time = Math.round(new Date().getTime() / 1000);
HMAC_SHA256_init(privateKey);
@@ -55,35 +65,45 @@ define(
var mac = HMAC_SHA256_finalize();
var code = encode64(array_to_string(mac));
- var requestURL = '/api' + transcodeURL;
+ var requestURL = transcodeURL;
requestURL += '&X-Plex-Token=' + token;
requestURL += '&X-Plex-Access-Key=' + publicKey;
requestURL += '&X-Plex-Access-Code=' + encodeURIComponent(code);
requestURL += '&X-Plex-Access-Time=' + time;
- $.ajax({
- type: 'GET',
- url: requestURL,
- dataType: 'text',
- processData: false,
-
- headers: {
- 'X-Plex-Proxy-Host': server.get('host'),
- 'X-Plex-Proxy-Port': server.get('port')
- },
-
- success: function (response) {
- var m3u8Rel = response.replace(/[\s\S]+(session.+?\.m3u8)[\s\S]+/, '$1');
- var session = m3u8Rel.split('/')[1];
- var m3u8 = baseURL + m3u8Rel;
-
- successCallback(m3u8, session);
- },
-
- error: function (xhr, status, error) {
- errorCallback(xhr, status, error);
- }
- })
+ if (supportsM3U8) {
+ requestURL = '/api' + requestURL;
+
+ $.ajax({
+ type: 'GET',
+ url: requestURL,
+ dataType: 'text',
+ processData: false,
+
+ headers: {
+ 'X-Plex-Proxy-Host': server.get('host'),
+ 'X-Plex-Proxy-Port': server.get('port')
+ },
+
+ success: function (response) {
+ console.log(response);
+ var m3u8Rel = response.replace(/[\s\S]+(session.+?\.m3u8)[\s\S]+/, '$1');
+ var session = m3u8Rel.split('/')[1];
+ var m3u8 = baseURL + m3u8Rel;
+
+ successCallback(true, m3u8, session);
+ },
+
+ error: function (xhr, status, error) {
+ console.log(status);
+ errorCallback(xhr, status, error);
+ }
+ });
+ } else {
+ var flv = 'http://' + server.get('host') + ':' + server.get('port') + requestURL;
+
+ successCallback(false, flv);
+ }
}
}
}
@@ -68,9 +68,12 @@ define(
//
start: function () {
- if (this.loaded && !this.running && !this.animating) {
+ if (this.loaded && !this.running) {
this.running = true;
- this.addNextThumb();
+
+ if (!this.animating) {
+ this.addNextThumb();
+ }
}
},
@@ -89,9 +92,7 @@ define(
item.on('thumbnailLoaded', this.onNextThumbnailLoaded);
// Register the view so it will be cleaned up on destroy
- this.registerView(item);
-
- this.$list.append(item.render().el);
+ this.registerView(item.render());
},
itemWidth: function(item) {
@@ -129,12 +130,6 @@ define(
for (var i = 0; i < this.collection.length; i++) {
if (i < this.numVisibleItems) {
this.onAdd(this.collection.at(i));
- } else if (i < this.numVisibleItems + 1) {
- // Load the first off-screen thumbnail upfront to avoid some jankyness
- var thumb = this.collection.at(i);
- var img = new Image();
-
- $(img).attr('src', thumb.get('thumb'));
}
}
}
@@ -155,6 +150,8 @@ define(
onNextThumbnailLoaded: function (item) {
item.off('thumbnailLoaded', this.onThumbnailLoaded);
+ this.$list.append(item.el);
+
var self = this;
var containerWidth = 0;
var duration = this.speed * 1000;
@@ -26,6 +26,7 @@ define(
initialize: function () {
this.playerModel = new PlayerModel({
+ streaming: this.model.get('streaming'),
url: this.model.get('url'),
title: this.model.get('title')
});
@@ -91,7 +91,7 @@ define(
this.el.currentTime = time;
if (this.el.paused === false) {
- this.model.set({buffering: true});
+ this.model.set('buffering', true);
}
},
@@ -179,10 +179,12 @@ define(
},
onWaiting: function () {
+ console.log('waiting...');
this.model.set('buffering', true);
},
onPlaying: function () {
+ console.log('playing...');
this.model.set('buffering', false);
},
@@ -1,6 +1,7 @@
define(
[
'text!templates/players/core/VideoWrapperView.tpl',
+ 'plex/model/AppModel',
'plex/view/BaseView',
'plex/view/players/core/VideoView',
'plex/view/players/core/ControlsView',
@@ -9,7 +10,7 @@ define(
'use!backbone'
],
- function (template, BaseView, VideoView, ControlsView) {
+ function (template, appModel, BaseView, VideoView, ControlsView) {
//
// -------------------- Private --------------------
@@ -104,8 +105,9 @@ define(
if ($video.get(0).autoplay === true) {
this.$overlayPlayButton.hide();
+ //appModel.set({ loading: true });
} else {
- // hide buffering
+ //appModel.set({ loading: false });
}
// Match the width and height of the overlay buttons to the video
@@ -182,7 +184,9 @@ define(
onBufferingChange: function () {
if (this.model.get('buffering') === true) {
+ //appModel.set({ loading: true });
} else {
+ //appModel.set({ loading: false });
}
},
View
@@ -28,6 +28,11 @@ body {
&.music-player-active > section.content {
padding-top: 145px;
}
+
+ &.music-player-active > section.fatal {
+ padding-top: 345px;
+ background-position: center 145px;
+ }
}
section.content {
View
@@ -9,7 +9,10 @@
height: 60px;
border-bottom: 2px solid #4c4c4c;
#gradient > .vertical-three-colors(#5a5a5a, #5d5d5d, 25%, #363636);
- .box-shadow(0 5px 5px rgba(0, 0, 0, .3));
+
+ // Safari needs this hack for the dropdown list to work
+ @shadow: 0 5px 5px rgba(0, 0, 0, .3), 0 100px 100px rgba(0, 0, 0, 0);
+ .box-shadow(@shadow);
}
#home-btn {
View
@@ -15,10 +15,10 @@ h1.plex-icon {
.clearfix();
input[type=text], input[type=password] {
- padding: 18px 15px 15px;
+ padding: 12px 15px 10px;
.box-sizing(border-box);
height: 50px;
- line-height: 24px;
+ line-height: 30px;
font-size: 24px;
}
View
@@ -246,12 +246,12 @@ video.player-fullscreen {
z-index: 1;
background: #4a4a4a;
- background: -moz-linear-gradient(top, #4a4a4a 0%, #3a3a3a 50%, #222222 51%, #333333 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a4a4a), color-stop(50%,#3a3a3a), color-stop(51%,#222222), color-stop(100%,#333333));
- background: -webkit-linear-gradient(top, #4a4a4a 0%,#3a3a3a 50%,#222222 51%,#333333 100%);
- background: -o-linear-gradient(top, #4a4a4a 0%,#3a3a3a 50%,#222222 51%,#333333 100%);
- background: -ms-linear-gradient(top, #4a4a4a 0%,#3a3a3a 50%,#222222 51%,#333333 100%);
- background: linear-gradient(top, #4a4a4a 0%,#3a3a3a 50%,#222222 51%,#333333 100%);
+ background: -moz-linear-gradient(top, #4a4a4a 0%, #3a3a3a 50%, #2a2a2a 51%, #333333 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a4a4a), color-stop(50%,#3a3a3a), color-stop(51%,#2a2a2a), color-stop(100%,#333333));
+ background: -webkit-linear-gradient(top, #4a4a4a 0%,#3a3a3a 50%,#2a2a2a 51%,#333333 100%);
+ background: -o-linear-gradient(top, #4a4a4a 0%,#3a3a3a 50%,#2a2a2a 51%,#333333 100%);
+ background: -ms-linear-gradient(top, #4a4a4a 0%,#3a3a3a 50%,#2a2a2a 51%,#333333 100%);
+ background: linear-gradient(top, #4a4a4a 0%,#3a3a3a 50%,#2a2a2a 51%,#333333 100%);
}
.player-volume .player-slider-bar,
View
@@ -1,6 +1,5 @@
// Bootstrap
@import "bootstrap/bootstrap.less";
-@import "bootstrap/responsive.less";
// Application
@import "globals.less";
View
@@ -28,6 +28,8 @@
font-size: 14px;
line-height: 14px;
color: #eee;
+ @transition: background linear .2s, border linear .2s, box-shadow linear .2s;
+ .transition(@transition);
&:focus {
border-color: #ffc763;
@@ -1,4 +1,4 @@
-<video id="media-element-video" src="{{url}}" type="application/x-mpegURL" width="100%" autoplay></video>
+<video id="media-element-video" src="{{url}}" type="{{#if streaming}}application/x-mpegURL{{else}}video/flv{{/if}}" width="100%" autoplay></video>
<div class="player-overlay-play-button"></div>
<div class="player-overlay-replay-button"></div>

0 comments on commit aca050f

Please sign in to comment.