rtyler
/
reddit.tv
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Basic channel stuff, but no thumbnails yet

This commit is contained in:
SQ 2013-10-02 20:47:41 -04:00
parent 06cb1c7003
commit 228217e8d4
4 changed files with 76 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/layout.css
View File

@ -103,6 +103,7 @@ header .grid-container {
background-size: 100%;
background-position: center center;
display: inline-block;
cursor: pointer;
}
#video-list .thumbnail.focus {
@ -121,6 +122,7 @@ header .grid-container {
#video-view {
background-color: #252525;
min-height:660px;
margin-bottom: 30px;
overflow: hidden;
}
@ -194,4 +196,35 @@ header .grid-container {
#options label span {
float: left;
}
#channels a.channel {
display: block;
color: #013f79;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 10px;
}
#channels .channel .thumbnail {
background: #5f99cf none center center no-repeat;
background-size: cover;
width: 100%;
height: 120px;
}
#channels .channel.loading {
background: none;
}
#channels .channel.loading .thumbnail {
background-image: url(../img/channel-loader.gif);
background-size: auto;
}
#channels .channel.focus .thumbnail {
background-size: calc(100% + 12px);
border: 6px solid #5f99cf;
}

BIN
img/channel-loader.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

15
index.html
View File

@ -129,10 +129,6 @@
<input type="checkbox" id="sfw" checked/>
</label>
<ul id="css" class="right">
<li><a href="#" rel="light">light</a></li>
<li><a href="#" rel="dark">dark</a></li>
</ul>
</form>
</div>
</div>
@ -157,13 +153,10 @@
</div>
</div>
<div id="channels" class="grid-container">
<div class="grid-100">
<h1>My Channels</h1>
</div>
<div class="grid-25"></div>
<div class="grid-25"></div>
<div class="grid-25"></div>
<div class="grid-25"></div>
<a class="grid-25 channel loading" href="/#/r/subreddit">
<div class="thumbnail"></div>
<span class="name"></span>
</a>
</div>
</body>
</html>

50
js/tv.js
View File

@ -12,6 +12,7 @@ var Globals = {
/* Channels Object */
channels: [
{channel: 'Add Channel', type: 'new', feed: '/function/add_channel/'},
{channel: 'All', type: 'search', feed: '/r/all/'},
{channel: 'Videos', type: 'normal', feed: '/r/videos/'},
{channel: 'Funny', type: 'search', feed: '/r/funny/'},
@ -270,21 +271,27 @@ function loadTheme(id, save) {
}
function displayChannels() {
var $channel_list = $('#channel-list'), $list = $('<ul></ul>');
$channel_list.html($list);
var $channel_list = $('#channel-list'),
$list = $('<ul></ul>'),
$channel_base = $('#channels a.channel:first');
$channel_base.hide();
// $channel_list.html($list);
for(var x in Globals.channels){
displayChannel(x);
}
}
function displayChannel(chan){
var title, display_title, class_str='', remove_str='';
var title, display_title, class_str='', remove_str='',
$channel_base = $('#channels a.channel:first'),
$channel = $channel_base.clone();
title = Globals.channels[chan].feed.split("/");
title = "/"+title[1]+"/"+title[2];
chan_title = Globals.channels[chan].feed.split("/");
chan_title = "/"+chan_title[1]+"/"+chan_title[2];
display_title = Globals.channels[chan].channel.length > 8 ?
Globals.channels[chan].channel.replace(/[aeiou]/gi,'').substr(0,7) :
display_title = Globals.channels[chan].channel.length > 20 ?
Globals.channels[chan].channel.replace(/[aeiou]/gi,'').substr(0,20) :
Globals.channels[chan].channel;
if(isUserChan(Globals.channels[chan].channel)){
@ -292,15 +299,37 @@ function displayChannel(chan){
remove_str = '<a id="remove-'+chan+'" class="remove-chan">-</a>';
}
$('#channel-list>ul').append('<li id="channel-'+chan+'" title="'+title+'" '+class_str+'>'+display_title+remove_str+'</li>');
$('#channel-'+chan).bind(
$channel
.show()
.appendTo('#channels')
.attr({
id: 'channel-' + chan,
href: '/#' + Globals.channels[chan].feed,
title: chan_title
})
// .find('.thumbnail')
/*.css({
'background-image': 'url(http://i2.ytimg.com/vi/NUkwaiJgDGY/hqdefault.jpg)'
})*/
// .parent()
.find('.name')
.html(display_title);
/* <a class="grid-25 channel" href="/#/r/subreddit">
<div class="thumbnail"></div>
<span class="name">channel</span>
</a>*/
$('#channel>ul').append('<li id="channel-'+chan+'" title="'+title+'" '+class_str+'><img src="http://i2.ytimg.com/vi/NUkwaiJgDGY/hqdefault.jpg" />'+display_title+remove_str+'</li>');
// $('#channel-list>ul').append('<li id="channel-'+chan+'" title="'+title+'" '+class_str+'><img src="http://i2.ytimg.com/vi/NUkwaiJgDGY/hqdefault.jpg" />'+display_title+remove_str+'</li>');
/*$('#channel-'+chan).bind(
'click',
{channel: Globals.channels[chan].channel, feed: Globals.channels[chan].feed},
function(event) {
var parts = event.data.feed.split("/");
window.location.hash = "/"+parts[1]+"/"+parts[2]+"/";
}
);
);*/
$('#remove-'+chan).bind(
'click',
{channel: chan},
@ -344,7 +373,6 @@ function loadChannel(channel, video_id) {
$('#now-playing-title').empty().append(Globals.channels[Globals.cur_chan].channel+" - "+Globals.channels[Globals.cur_chan].feed);
if(Globals.videos[this_chan] === undefined){
var feed = getFeedURI(channel);
Globals.cur_chan_req = $.ajax({