Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

add buttons and improve UI #27

Merged
merged 2 commits into from

1 participant

OCHIAI Hiromu
OCHIAI Hiromu
Owner
  • add control buttons
  • improve UI such as ajax loader
OCHIAI Hiromu otiai10 merged commit 567f5d4 into from
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.
11 fuel/app/views/stream/index.php
View
@@ -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">
2  fuel/app/views/template.php
View
@@ -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>
5 fuel/app/views/top/index.php
View
@@ -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">
63 public/assets/css/common.css
View
@@ -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;
+ }
+}
BIN  public/assets/img/loader.gif
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 public/assets/js/player.js
View
@@ -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(){
24 public/assets/js/top.js
View
@@ -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.