Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

add buttons and improve UI #27

Merged
merged 2 commits into from

1 participant

@otiai10
Owner
  • add control buttons
  • improve UI such as ajax loader
@otiai10 otiai10 merged commit 567f5d4 into master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 2, 2013
  1. add controller btns

    authored
  2. improve misc UI

    authored
This page is out of date. Refresh to see the latest.
View
11 fuel/app/views/stream/index.php
@@ -11,14 +11,16 @@
<small><a id="video-url">hgoe</a></small>
</blockquote>
<div>
- <a class="btn btn-large btn-primary">好き</a>
- <a class="btn btn-large btn-inverse">これ今期アニメじゃない</a>
+ <a tabindex='1' class="btn btn-large btn-primary">好き</a>
+ <a tabindex='1' class="btn btn-large btn-inverse">これ今期アニメじゃない</a>
</div>
</div>
</div>
<div class="row">
<div class="span12">
- hoge
+ <a tabindex='1' id="cont-prev" class="play-prev btn btn-large">Prev</a>
+ <!-- a tabindex='1' id="cont-pause" class="switch-pause btn btn-large">Pause</a -->
+ <a tabindex='1' id="cont-next" class="play-next btn btn-large">Next</a>
</div>
</div>
<div class="row">
@@ -27,8 +29,9 @@
<table class="table">
<?php for($i=0; $i<count($animes); $i++){
echo '<tr id="index_'.$i.'" class="animetr"><td>' . $animes[$i]['title'] .'</td>';
- echo '<td><a class="anime" seq="'.$i.'" hash="'.$animes[$i]['hash'].'" atitle="'.$animes[$i]['title'].'" aurl="' .$animes[$i]['url'].'">'.$animes[$i]['vtitle'] . '</a></td></tr>';
+ echo '<td><a tabindex="1" class="anime play-direct" seq="'.$i.'" hash="'.$animes[$i]['hash'].'" atitle="'.$animes[$i]['title'].'" aurl="' .$animes[$i]['url'].'">'.$animes[$i]['vtitle'] . '</a></td></tr>';
} ?>
+ <tr><td colspan="2" style="text-align:center">&lt&lt PagingHere &gt&gt</td></tr>
</table>
</div>
<div class="span4">
View
2  fuel/app/views/template.php
@@ -13,7 +13,7 @@
<div id="header">
<div class="row">
<div id="logo">
- <h1><a href="/" class="logo">あにきゃっち.net</a><small><i> - closed β - </i></small></h1>
+ <h1><a tabindex='1' href="/" class="logo">あにきゃっち.net</a><small><i> - closed β - </i></small></h1>
</div>
</div>
</div>
View
5 fuel/app/views/top/index.php
@@ -6,8 +6,9 @@
<title>あにきゃっち.net</title>
<?php echo Asset::css('bootstrap.css'); ?>
<?php echo Asset::css('common.css'); ?>
+ <?php echo Asset::js('top.js'); ?>
</head>
-<body>
+<body onload="init()">
<div id="header">
<div class="row">
<div id="logo">
@@ -21,7 +22,7 @@
<h1>今期アニメ、</h1>
<h1>ちゃんと見てる?</h1>
</div>
- <div class="pull-right"><p><a class="btn btn-primary btn-large" href="/stream">or Catch Up Now ></a></p></div>
+ <div class="pull-right"><p><a class="replace-loader btn btn-primary btn-large" href="/stream">or Catch Up Now ></a></p></div>
</div>
<div class="row">
<div class="span4">
View
63 public/assets/css/common.css
@@ -71,3 +71,66 @@ tr.nowplaying {
font-weight: bold;
background-color: #eee;
}
+
+.play-next,.play-prev,.switch-pause,.play-direct {
+ cursor: pointer;
+}
+
+div.loader.middle {
+ float: right;
+ width: 25px;
+ height: 25px;
+ border: thin solid #aaa;
+ border-radius: 25px;
+ -webkit-animation-name: loader;
+ -webkit-animation-timing-function: linear;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-duration: 1s;
+}
+
+@-webkit-keyframes loader {
+ 0% {
+ -webkit-transform : rotate(0deg);
+ border-radius: 30px;
+ }
+ 10% {
+ -webkit-transform : rotate(36deg);
+ border-radius: 25px;
+ }
+ 20% {
+ -webkit-transform : rotate(72deg);
+ border-radius: 20px;
+ }
+ 30% {
+ -webkit-transform : rotate(108deg);
+ border-radius: 15px;
+ }
+ 40% {
+ -webkit-transform : rotate(144deg);
+ border-radius: 10px;
+ }
+ 50% {
+ -webkit-transform : rotate(180deg);
+ border-radius: 5px;
+ }
+ 60% {
+ -webkit-transform : rotate(216deg);
+ border-radius: 10px;
+ }
+ 70% {
+ -webkit-transform : rotate(252deg);
+ border-radius: 15px;
+ }
+ 80% {
+ -webkit-transform : rotate(288deg);
+ border-radius: 20px;
+ }
+ 90% {
+ -webkit-transform : rotate(324deg);
+ border-radius: 25px;
+ }
+ 100% {
+ -webkit-transform : rotate(360deg);
+ border-radius: 30px;
+ }
+}
View
BIN  public/assets/img/loader.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
41 public/assets/js/player.js
@@ -19,6 +19,28 @@ function init(){
initPlaylist(__playlist);
initPlayer(__playlist[__index]['hash']);
displayInfo();
+ registControleButtons();
+}
+
+function registControleButtons(){
+
+ var prevBtns = document.getElementsByClassName('play-prev');
+ for(var i=0; i<prevBtns.length; i++){
+ prevBtns[i].addEventListener('click', playPrev);
+ }
+ var nextBtns = document.getElementsByClassName('play-next');
+ for(var i=0; i<nextBtns.length; i++){
+ nextBtns[i].addEventListener("click", playNext);
+ }
+
+ var directBtns = document.getElementsByClassName('play-direct');
+ for(var i=0; i<directBtns.length; i++){
+ directBtns[i].addEventListener("click", function(){
+ var seq = this.getAttribute('seq');
+ playDirect(seq);
+ });
+ }
+
}
function initPlaylist(__playlist, is_sub){
@@ -84,7 +106,9 @@ function stateDispatcher(state){
}
function errorHandler(){
- playNext();
+ setTimeout(function(){
+ playNext();
+ },800);
}
function displayInfo(){
@@ -132,7 +156,22 @@ function playNext(){
}
function playPrev(){
+ var is_first = false;
+ if(__index < 1){
+ is_first = true;
+ }
+ if(is_first){
+ __index = (__playlist.length - 1);
+ }else{
+ __index = __index - 1;
+ }
+ _playThis();
+}
+function playDirect(seq){
+ console.log(seq);
+ __index = parseInt(seq);
+ _playThis();
}
function switchPause(){
View
24 public/assets/js/top.js
@@ -0,0 +1,24 @@
+/**
+ * top
+**/
+
+function init(){
+ registEffectiveBtns();
+}
+
+function registEffectiveBtns(){
+ var replaceBtns = document.getElementsByClassName('replace-loader');
+ for(var i=0; i<replaceBtns.length; i++){
+ replaceBtns[i].addEventListener('click', function(){
+ replaceLoader(this);
+ });
+ }
+}
+
+function replaceLoader(dom){
+ dom.className = (' ' + dom.className + ' ')
+ .replace(' btn ','')
+ .replace(' btn-primary ','')
+ .replace(' btn-large ','');
+ dom.innerHTML = '<div class="loader middle"></div>Now Loading...';
+}
Something went wrong with that request. Please try again.