Renamer, movie searcher, Library scanning
New theme for UI and more..
This commit is contained in:
Ruud committed
1 parent
e0b3c27957
commit
98aafeaec3
37 files changed
+2407
-869
No files matched your search
@@ -0,0 +1,95 @@
|
||||
var MovieList = new Class({
|
||||
|
||||
Implements: [Options],
|
||||
|
||||
options: {
|
||||
navigation: true
|
||||
},
|
||||
|
||||
movies: [],
|
||||
|
||||
initialize: function(options){
|
||||
var self = this;
|
||||
self.setOptions(options);
|
||||
|
||||
self.el = new Element('div.movies');
|
||||
self.getMovies();
|
||||
},
|
||||
|
||||
create: function(){
|
||||
var self = this;
|
||||
|
||||
// Create the alphabet nav
|
||||
if(self.options.navigation)
|
||||
self.createNavigation();
|
||||
|
||||
Object.each(self.movies, function(info){
|
||||
var m = new Movie(self, {
|
||||
'actions': self.options.actions
|
||||
}, info);
|
||||
$(m).inject(self.el);
|
||||
m.fireEvent('injected');
|
||||
});
|
||||
|
||||
self.el.addEvents({
|
||||
'mouseenter:relay(.movie)': function(e, el){
|
||||
el.addClass('hover')
|
||||
},
|
||||
'mouseleave:relay(.movie)': function(e, el){
|
||||
el.removeClass('hover')
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
createNavigation: function(){
|
||||
var self = this;
|
||||
var chars = '#ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
var selected = 'Z';
|
||||
|
||||
self.navigation = new Element('div.alph_nav').adopt(
|
||||
self.alpha = new Element('ul.inlay'),
|
||||
self.input = new Element('input.inlay'),
|
||||
self.view = new Element('ul.inlay').adopt(
|
||||
new Element('li.list'),
|
||||
new Element('li.thumbnails'),
|
||||
new Element('li.text')
|
||||
)
|
||||
).inject(this.el, 'top')
|
||||
|
||||
chars.split('').each(function(c){
|
||||
new Element('li', {
|
||||
'text': c,
|
||||
'class': c == selected ? 'selected' : ''
|
||||
}).inject(self.alpha)
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
getMovies: function(status, onComplete){
|
||||
var self = this
|
||||
|
||||
if(self.movies.length == 0)
|
||||
Api.request('movie.list', {
|
||||
'data': {
|
||||
'status': self.options.status
|
||||
},
|
||||
'onComplete': function(json){
|
||||
self.store(json.movies);
|
||||
self.create();
|
||||
}
|
||||
})
|
||||
else
|
||||
self.list()
|
||||
},
|
||||
|
||||
store: function(movies){
|
||||
var self = this;
|
||||
|
||||
self.movies = movies;
|
||||
},
|
||||
|
||||
toElement: function(){
|
||||
return this.el;
|
||||
}
|
||||
|
||||
});
|
||||
@@ -0,0 +1,166 @@
|
||||
/* @override http://localhost:5000/static/movie_plugin/movie.css */
|
||||
|
||||
.movies {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.movies .movie {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.movies .movie:hover {
|
||||
border-color: #ddd #fff #fff #ddd;
|
||||
}
|
||||
.movies .movie:hover .data {
|
||||
}
|
||||
.movies .data {
|
||||
padding: 2%;
|
||||
position: absolute;
|
||||
width: 96.1%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
.movies .data:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
.movies .data .poster, .options .poster {
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
max-width: 10%;
|
||||
margin: 0 2% 0 0;
|
||||
border-radius:3px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.35);
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.35);
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35);
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.movies .info {
|
||||
float: right;
|
||||
width: 88%;
|
||||
}
|
||||
|
||||
.movies .info .title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
float: left;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.movies .info .year {
|
||||
font-size: 30px;
|
||||
margin-bottom: 10px;
|
||||
float: right;
|
||||
color: #bbb;
|
||||
width: 10%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.movies .info .rating {
|
||||
font-size: 30px;
|
||||
margin-bottom: 10px;
|
||||
color: #444;
|
||||
float: left;
|
||||
width: 5%;
|
||||
padding: 0 0 0 3%;
|
||||
background: url('../images/rating.png') no-repeat left center;
|
||||
}
|
||||
|
||||
.movies .info .description {
|
||||
clear: both;
|
||||
width: 95%;
|
||||
}
|
||||
.movies .data .actions {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
line-height: 0;
|
||||
}
|
||||
.movies .data:hover .action { opacity: 0.6; }
|
||||
.movies .data:hover .action:hover { opacity: 1; }
|
||||
|
||||
.movies .data .action {
|
||||
background: no-repeat center;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 3px;
|
||||
opacity: 0;
|
||||
}
|
||||
.movies .data .action.refresh { background-image: url('../images/reload.png'); }
|
||||
.movies .data .action.delete { background-image: url('../images/delete.png'); }
|
||||
.movies .data .action.edit { background-image: url('../images/edit.png'); }
|
||||
.movies .data .action.imdb { background-image: url('../images/imdb.png'); }
|
||||
|
||||
.movies .delete_container {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.movies .delete_container .cancel {
|
||||
}
|
||||
.movies .delete_container .or {
|
||||
padding: 10px;
|
||||
}
|
||||
.movies .delete_container .delete {
|
||||
background-color: #ff321c;
|
||||
font-weight: normal;
|
||||
}
|
||||
.movies .delete_container .delete:hover {
|
||||
color: #fff;
|
||||
background-color: #d32917;
|
||||
}
|
||||
|
||||
.movies .options .form {
|
||||
margin-top: -2%;
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.movies .options .form select {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.movies .options {
|
||||
padding: 2%;
|
||||
}
|
||||
|
||||
.movies .alph_nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.movies .alph_nav li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin: 0 -1px 0 0;
|
||||
}
|
||||
|
||||
.movies .alph_nav li:hover, .movies .alph_nav li.onlay {
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
var Movie = new Class({
|
||||
|
||||
Extends: BlockBase,
|
||||
|
||||
action: {},
|
||||
|
||||
initialize: function(self, options, data){
|
||||
var self = this;
|
||||
|
||||
self.data = data;
|
||||
|
||||
self.profile = Quality.getProfile(data.profile_id);
|
||||
self.parent(self, options);
|
||||
self.addEvent('injected', self.afterInject.bind(self))
|
||||
},
|
||||
|
||||
create: function(){
|
||||
var self = this;
|
||||
|
||||
self.el = new Element('div.movie.inlay').adopt(
|
||||
self.data_container = new Element('div.data.inlay.light', {
|
||||
'tween': {
|
||||
duration: 400,
|
||||
transition: 'quint:in:out'
|
||||
}
|
||||
}).adopt(
|
||||
self.thumbnail = File.Select.single('poster', self.data.library.files),
|
||||
self.info_container = new Element('div.info').adopt(
|
||||
self.title = new Element('div.title', {
|
||||
'text': self.getTitle()
|
||||
}),
|
||||
self.year = new Element('div.year', {
|
||||
'text': self.data.library.year || 'Unknown'
|
||||
}),
|
||||
self.rating = new Element('div.rating', {
|
||||
'text': self.data.library.rating
|
||||
}),
|
||||
self.description = new Element('div.description', {
|
||||
'text': self.data.library.plot
|
||||
}),
|
||||
self.quality = new Element('div.quality', {
|
||||
'text': self.profile ? self.profile.get('label') : ''
|
||||
})
|
||||
),
|
||||
self.actions = new Element('div.actions')
|
||||
)
|
||||
);
|
||||
|
||||
Object.each(self.options.actions, function(action, key){
|
||||
self.actions.adopt(
|
||||
self.action[key.toLowerCase()] = new self.options.actions[key](self)
|
||||
)
|
||||
});
|
||||
|
||||
if(!self.data.library.rating)
|
||||
self.rating.hide();
|
||||
|
||||
},
|
||||
|
||||
afterInject: function(){
|
||||
var self = this;
|
||||
|
||||
var height = self.getHeight();
|
||||
self.el.setStyle('height', height);
|
||||
},
|
||||
|
||||
getTitle: function(){
|
||||
var self = this;
|
||||
|
||||
var titles = self.data.library.titles;
|
||||
|
||||
var title = titles.filter(function(title){
|
||||
return title['default']
|
||||
}).pop()
|
||||
|
||||
if(title)
|
||||
return title.title
|
||||
else if(titles.length > 0)
|
||||
return titles[0].title
|
||||
|
||||
return 'Unknown movie'
|
||||
},
|
||||
|
||||
slide: function(direction){
|
||||
var self = this;
|
||||
|
||||
if(direction == 'in'){
|
||||
self.el.addEvent('outerClick', self.slide.bind(self, 'out'))
|
||||
self.data_container.tween('left', 0, self.getWidth());
|
||||
}
|
||||
else {
|
||||
self.el.removeEvents('outerClick')
|
||||
self.data_container.tween('left', self.getWidth(), 0);
|
||||
}
|
||||
},
|
||||
|
||||
getHeight: function(){
|
||||
var self = this;
|
||||
|
||||
if(!self.height)
|
||||
self.height = self.data_container.getCoordinates().height;
|
||||
|
||||
return self.height;
|
||||
},
|
||||
|
||||
getWidth: function(){
|
||||
var self = this;
|
||||
|
||||
if(!self.width)
|
||||
self.width = self.data_container.getCoordinates().width;
|
||||
|
||||
return self.width;
|
||||
},
|
||||
|
||||
get: function(attr){
|
||||
return this.data[attr] || this.data.library[attr]
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var MovieAction = new Class({
|
||||
|
||||
class_name: 'action',
|
||||
|
||||
initialize: function(movie){
|
||||
var self = this;
|
||||
self.movie = movie;
|
||||
|
||||
self.create();
|
||||
self.el.addClass(self.class_name)
|
||||
},
|
||||
|
||||
create: function(){},
|
||||
|
||||
disable: function(){
|
||||
this.el.addClass('disable')
|
||||
},
|
||||
|
||||
enable: function(){
|
||||
this.el.removeClass('disable')
|
||||
},
|
||||
|
||||
toElement: function(){
|
||||
return this.el
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var IMDBAction = new Class({
|
||||
|
||||
Extends: MovieAction,
|
||||
id: null,
|
||||
|
||||
create: function(){
|
||||
var self = this;
|
||||
|
||||
self.id = self.movie.get('identifier');
|
||||
|
||||
self.el = new Element('a.imdb', {
|
||||
'title': 'Go to the IMDB page of ' + self.movie.getTitle(),
|
||||
'events': {
|
||||
'click': self.gotoIMDB.bind(self)
|
||||
}
|
||||
});
|
||||
|
||||
if(!self.id) self.disable();
|
||||
},
|
||||
|
||||
gotoIMDB: function(e){
|
||||
var self = this;
|
||||
(e).stop();
|
||||
|
||||
window.open('http://www.imdb.com/title/'+self.id+'/');
|
||||
}
|
||||
|
||||
})
|
||||
@@ -1,4 +1,4 @@
|
||||
/* @override http://localhost:5000/static/style/plugin/movie_add.css */
|
||||
/* @override http://localhost:5000/static/movie_plugin/search.css */
|
||||
|
||||
.search_form {
|
||||
display: inline-block;
|
||||
@@ -7,52 +7,46 @@
|
||||
|
||||
.search_form input {
|
||||
padding-right: 25px;
|
||||
border: 1px solid #aaa;
|
||||
padding: 4px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
width: 90%;
|
||||
|
||||
border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
}
|
||||
.search_form .input a {
|
||||
width: 12px;
|
||||
width: 17px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
margin: 0 0 -5px -20px;
|
||||
top: 4px;
|
||||
right: 5px;
|
||||
background: url('../../images/close_button.png') 0 center no-repeat;
|
||||
background: url('../images/checks.png') right -36px no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search_form .input a:hover { background-position: -12px center; }
|
||||
|
||||
.search_form .results_container {
|
||||
padding: 10px 0;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
margin: 11px 0 0 -243px;
|
||||
background: #5c697b;
|
||||
margin: 6px 0 0 -246px;
|
||||
width: 470px;
|
||||
min-height: 140px;
|
||||
|
||||
box-shadow: 0 0 30px rgba(0,0,0,0.2);
|
||||
-moz-box-shadow: 0 0 30px rgba(0,0,0,0.2);
|
||||
-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.2);
|
||||
|
||||
border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
|
||||
box-shadow: 0 0 50px rgba(0,0,0,0.55);
|
||||
-moz-box-shadow: 0 0 50px rgba(0,0,0,0.55);
|
||||
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.55);
|
||||
}
|
||||
.search_form .spinner {
|
||||
background: #fff url('../../images/spinner.gif') no-repeat center 70px;
|
||||
background: rgba(0,0,0,0.8) url('../images/spinner.gif') no-repeat center 70px;
|
||||
}
|
||||
|
||||
.search_form .pointer {
|
||||
border-right: 10px solid transparent;
|
||||
border-left: 10px solid transparent;
|
||||
border-bottom: 10px solid #fff;
|
||||
border-bottom: 10px solid #5c697b;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0px;
|
||||
@@ -62,16 +56,24 @@
|
||||
|
||||
.search_form .results .movie {
|
||||
overflow: hidden;
|
||||
background: #666;
|
||||
min-height: 140px;
|
||||
}
|
||||
|
||||
.search_form .results .movie .options {
|
||||
height: 140px;
|
||||
height: 139px;
|
||||
border: 1px solid transparent;
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
box-shadow: inset 0 1px 8px rgba(0,0,0,0.25);
|
||||
-moz-box-shadow: inset 0 1px 8px rgba(0,0,0,0.25);
|
||||
-webkit-box-shadow: inset 0 1px 8px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.search_form .results .movie .options > div {
|
||||
padding: 0 15px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.search_form .results .movie .options .thumbnail {
|
||||
@@ -105,11 +107,17 @@
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
top: 0;
|
||||
margin: -140px 0 0 0;
|
||||
background: #fff;
|
||||
margin: -143px 0 0 0;
|
||||
min-height: 140px;
|
||||
background: #5c697b;
|
||||
|
||||
border-bottom: 1px solid #333;
|
||||
border-top: 1px solid rgba(255,255,255, 0.15);
|
||||
}
|
||||
|
||||
.search_form .results .movie:first-child .data { border-top: 0; }
|
||||
.search_form .results .movie:last-child .data { border-bottom: 0; }
|
||||
|
||||
.search_form .results .movie .thumbnail {
|
||||
width: 17%;
|
||||
display: inline-block;
|
||||
@@ -129,7 +137,6 @@
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 15px 0;
|
||||
background: #fff;
|
||||
}
|
||||
.search_form .results .movie .add +.info {
|
||||
margin-left: 20%;
|
||||
|
||||
@@ -9,7 +9,7 @@ Block.Search = new Class({
|
||||
|
||||
self.el = new Element('div.search_form').adopt(
|
||||
new Element('div.input').adopt(
|
||||
self.input = new Element('input', {
|
||||
self.input = new Element('input.inlay', {
|
||||
'events': {
|
||||
'keyup': self.keyup.bind(self),
|
||||
'focus': self.hideResults.bind(self, false)
|
||||
@@ -164,7 +164,7 @@ Block.Search.Item = new Class({
|
||||
self.el = new Element('div.movie', {
|
||||
'id': info.imdb
|
||||
}).adopt(
|
||||
self.options = new Element('div.options'),
|
||||
self.options = new Element('div.options.inlay'),
|
||||
self.data_container = new Element('div.data', {
|
||||
'tween': {
|
||||
duration: 400,
|
||||
|
||||
Reference in new issue
Block a user