プレビュー画面の基本処理をreactで実装

app/controllers/encodings_controller.rb

@@ -3,7 +3,7 @@ class EncodingsController < ApplicationController
 
   def show
     if @pasokara.movie_url.present?
-      render json: {movie_url: @pasokara.movie_url}
+      render json: {movie_url: @pasokara.movie_url, progress: nil}
     else
       redis = Redis::Namespace.new(:seirenes_pasokara_encoding, redis: Redis.new)
       progress = redis[@pasokara.id.to_s]

app/views/pasokaras/show.html.haml

@@ -0,0 +1 @@
+#app

frontend/assets/javascripts/flux/actions/pasokara_actions.js

@@ -1,6 +1,7 @@
 import { Actions } from 'flummox';
+import _ from 'lodash';
 import request from 'superagent';
-import {getRouteNameFromPath} from '../route';
+import getCsrfToken from '../get_csrf_token';
 
 export default class PasokaraActions extends Actions {
   constructor(router) {
@@ -10,7 +11,7 @@ export default class PasokaraActions extends Actions {
 
   async load(path) {
     try {
-      let res = await this.loadPasokara(path);
+      let res = await this.loadPasokaras(path);
       return {
         pasokaras: res.body.pasokaras,
         meta: res.body.meta,
@@ -26,7 +27,46 @@ export default class PasokaraActions extends Actions {
     }
   }
 
-  loadPasokara(path) {
+  async loadSingle(id) {
+    try {
+      let res = await this.loadSinglePasokara(id);
+      return res.body;
+    } catch (e) {
+      console.log(e);
+      return null;
+    }
+  }
+
+  async encode(id) {
+    try {
+      let res = await this.encodeRequest(id);
+      let checker = () => {
+        setTimeout(async () => {
+          let {id: _id, movie_url, progress} = await this.checkEncodeProgress(id);
+          if (!movie_url) {
+            checker();
+          }
+        }, 3000);
+      };
+      checker();
+      return id;
+    } catch (e) {
+      console.log(e);
+      return null;
+    }
+  }
+
+  async checkEncodeProgress(id) {
+    try {
+      let res = await this.fetchEncodeProgress(id);
+      return Object.assign({}, res.body, {id: id});
+    } catch (e) {
+      console.log(e);
+      return null;
+    }
+  }
+
+  loadPasokaras(path) {
     return new Promise((resolve, reject) => {
       request.get(path)
         .set('Accept', 'application/json')
@@ -39,8 +79,50 @@ export default class PasokaraActions extends Actions {
     });
   }
 
+  loadSinglePasokara(id) {
+    return new Promise((resolve, reject) => {
+      request.get(`/pasokaras/${id}`)
+        .set('Accept', 'application/json')
+        .end((err, res) => {
+          if (err)
+            return reject(err);
+
+          return resolve(res);
+        });
+    });
+  }
+
+  encodeRequest(id) {
+    return new Promise((resolve, reject) => {
+      request.post(`/pasokaras/${id}/encoding`)
+        .set('Accept', 'application/json')
+        .set('X-CSRF-Token', getCsrfToken())
+        .end((err, res) => {
+          if (err)
+            return reject(err);
+
+          return resolve(res);
+        });
+    });
+  }
+
+  fetchEncodeProgress(id) {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        request.get(`/pasokaras/${id}/encoding`)
+          .set('Accept', 'application/json')
+          .end((err, res) => {
+            if (err)
+              return reject(err);
+
+            return resolve(res);
+          });
+      }, 3000);
+    });
+  }
+
   changeOrderBy(orderBy) {
-    let currentRouteName = getRouteNameFromPath(this.router.getCurrentPathname());
+    let currentRouteName = _.last(this.router.getCurrentRoutes()).name;
     let query = Object.assign({}, this.router.getCurrentQuery(), {page: 1, order_by: orderBy});
     this.router.transitionTo(currentRouteName, {}, query);
   }

frontend/assets/javascripts/flux/app.js

@@ -9,14 +9,6 @@ var flux = new Flux();
 
 window.addEventListener("DOMContentLoaded", () => {
   flux.router.run((Handler, state) => {
-    let loadPasokaras = _.some(state.routes, (r) => {
-      return r.handler.loadPasokaras;
-    });
-    if (loadPasokaras) {
-      flux.getActions('pasokaras').load(state.path);
-    }
-    flux.getActions('filter_tags').init(state.query.filter_tags);
-
     React.render(
       <FluxComponent flux={flux}>
         <Handler />

frontend/assets/javascripts/flux/components/current_filter_tags.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import _ from 'lodash';
 import {Link} from 'react-router';
 import {getRouteNameFromPath} from '../route';
 
@@ -18,7 +19,8 @@ export default class CurrentFilterTags extends React.Component {
 
 class FilterTag extends React.Component {
   render() {
-    let routeName = getRouteNameFromPath(this.props.flux.router.getCurrentPathname());
+    let currentRoute = _.last(this.props.flux.router.getCurrentRoutes());
+    let routeName = currentRoute.name;
     let idx = this.props.filterTags.indexOf(this.props.tag);
     let q = this.props.flux.router.getCurrentQuery()["q"];
     let query = {

frontend/assets/javascripts/flux/components/facet_tags.jsx

@@ -7,7 +7,7 @@ import CurrentFilterTags from './current_filter_tags.jsx';
 
 export default class FacetTags extends React.Component {
   render() {
-    let routeName = getRouteNameFromPath(this.props.flux.router.getCurrentPathname());
+    let routeName = _.last(this.props.flux.router.getCurrentRoutes()).name;
     let facets = this.props.facets
     let tags = []
     let q = this.props.flux.router.getCurrentQuery()["q"]

frontend/assets/javascripts/flux/components/pagination.jsx

@@ -5,7 +5,7 @@ import {getRouteNameFromPath} from '../route';
 
 export default class Pagination extends React.Component {
   render() {
-    let routeName = getRouteNameFromPath(this.props.flux.router.getCurrentPathname());
+    let routeName = _.last(this.props.flux.router.getCurrentRoutes()).name;
 
     if (_.isEmpty(this.props.meta))
       return <div />;
@@ -105,7 +105,7 @@ export default class Pagination extends React.Component {
       }
     }
 
-    for (let i=1; (meta.current_page + i) < meta.total_pages && i <= windowLimit; ++i) {
+    for (let i=1; (meta.current_page + i) <= meta.total_pages && i <= windowLimit; ++i) {
       let key = `page-${meta.current_page + i}`
       pages.push(
 
@@ -116,7 +116,7 @@ export default class Pagination extends React.Component {
         </li>
       );
 
-      if ((meta.current_page + i) < meta.total_pages && i === windowLimit) {
+      if ((meta.current_page + i) <= meta.total_pages && i === windowLimit) {
         pages.push(
           <li key="forward-disabled" className="disabled">
             <a>...</a>

frontend/assets/javascripts/flux/components/pasokara_list_item.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {Link} from 'react-router';
 import FluxComponent from 'flummox/component';
 import PasokaraTag from './pasokara_tag.jsx';
 import moment from 'moment';
@@ -24,7 +25,7 @@ export default class PasokaraListItem extends React.Component {
     return (
       <div className="pasokara">
         <div className="title">
-          <a href={pasokara.url}>{pasokara.title}</a>
+          <Link to="pasokara_show" params={{pasokaraId: pasokara.id}}>{pasokara.title}</Link>
           <a className="btn btn-primary">予約する</a>
         </div>
         <div className="info-box">

frontend/assets/javascripts/flux/components/pasokara_preview.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import FluxComponent from 'flummox/component';
+import PreviewPlayer from './preview_player.jsx';
+
+export default class PasokaraPreview extends React.Component {
+  render() {
+    let pasokaraId = this.props.params.pasokaraId;
+    let pasokara = this.props.pasokaraStore.find(pasokaraId);
+    let component = <div />;
+    if (pasokara) {
+      component = (
+        <div>
+          <h3 id="pasokara-preview-title">{pasokara.title}</h3>
+          <FluxComponent connectToStores={{
+            encodings: store => ({
+              encoding: store.find(pasokara.id)
+            })
+          }}>
+            <PreviewPlayer pasokara={pasokara} />
+          </FluxComponent>
+        </div>
+      );
+    } else {
+      this.props.flux.getActions('pasokaras').loadSingle(pasokaraId);
+    }
+
+    return component;
+  }
+};
+
+PasokaraPreview.contextTypes = {
+  router: React.PropTypes.func.isRequired
+};

frontend/assets/javascripts/flux/components/pasokara_tag.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
+import _ from 'lodash';
 import {Link} from 'react-router';
 import {getRouteNameFromPath} from '../route';
 import URI from 'URIjs';
 
 export default class PasokaraTag extends React.Component {
   render() {
-    let routeName = getRouteNameFromPath(this.props.flux.router.getCurrentPathname())
+    let routeName = _.last(this.props.flux.router.getCurrentRoutes()).name;
+    if (!routeName)
+      return <span key={tag} />;
     let tag = this.props.tag;
     let q = this.props.flux.router.getCurrentQuery()["q"]
     let query = {

frontend/assets/javascripts/flux/components/preview_player.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+export default class PreviewPlayer extends React.Component {
+  render() {
+    let pasokara = this.props.pasokara;
+    let encoding = this.props.encoding;
+    let encodingProgress = encoding ? encoding.progress : 0;
+
+    let previewPlayer;
+    if (pasokara.movie_url) {
+      previewPlayer = (
+        <div id="pasokara-movie-area">
+          <div id="pasokara-preview">
+            <video id="preview-player" className="preview" controls>
+              <source type="video/mp4" src={pasokara.movie_url}></source>
+            </video>
+          </div>
+          <div id="record-control">
+            <button>Start Rec</button>
+            <button>Stop Rec</button>
+            <div id="recorded">
+              <audio src={pasokara.recordedUrl} controls></audio>
+            </div>
+          </div>
+        </div>
+      );
+    } else {
+      previewPlayer = (
+        <div id="pasokara-movie-area">
+          <div id="pasokara-preview">
+            <div className="progress">
+              <div className="progress-bar" role="progressbar" aria-valuenow={encodingProgress} aria-valuemin="0" aria-valuemax="100" style={{width: `${encodingProgress}%`}}>
+                {encodingProgress}%
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+
+      // 何故かこうしないと動かない
+      setTimeout(() => {
+        if (!encoding)
+          this.props.flux.getActions('pasokaras').encode(pasokara.id);
+      }, 1);
+    }
+
+    return (
+      <div id="pasokara-preview-player">
+        {previewPlayer}
+      </div>
+    );
+  }
+}

frontend/assets/javascripts/flux/flux.js

@@ -7,6 +7,8 @@ import PasokaraStore from './stores/pasokara_store';
 import FilterTagActions from './actions/filter_tag_actions';
 import CurrentFilterTagsStore from './stores/current_filter_tags_store';
 
+import EncodingStore from './stores/encoding_store';
+
 import {routes} from './route';
 
 export default class SeirenesApp extends Flummox {
@@ -21,5 +23,6 @@ export default class SeirenesApp extends Flummox {
     this.createStore('pasokaras', PasokaraStore, this);
     this.createActions('filter_tags', FilterTagActions);
     this.createStore('filter_tags', CurrentFilterTagsStore, this);
+    this.createStore('encodings', EncodingStore, this);
   }
 }

frontend/assets/javascripts/flux/get_csrf_token.js

@@ -0,0 +1,8 @@
+export default function getCsrfToken() {
+  let metaTag = document.querySelector('meta[name="csrf-token"]')
+  if (metaTag) {
+    return metaTag.content;
+  } else {
+    return null;
+  }
+}

frontend/assets/javascripts/flux/route.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Router from 'react-router';
 import _ from 'lodash';
 import PasokarasRoute from './routes/pasokaras_route.jsx';
+import PasokaraShowRoute from './routes/pasokara_show_route.jsx';
 import App from './routes/app.jsx';
 
 var Route = Router.Route;
@@ -11,6 +12,7 @@ export var routes = (
     <Route name="root" path="/" handler={PasokarasRoute} />
     <Route name="pasokaras" path="/pasokaras" handler={PasokarasRoute} />
     <Route name="favorites" path="/favorites" handler={PasokarasRoute} />
+    <Route name="pasokara_show" path="/pasokaras/:pasokaraId" handler={PasokaraShowRoute} />
   </Route>
 );
 

frontend/assets/javascripts/flux/routes/pasokara_show_route.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import FluxComponent from 'flummox/component';
+import PasokaraPreview from '../components/pasokara_preview.jsx';
+
+export default class PasokaraShowRoute extends React.Component {
+  render() {
+    return (
+      <FluxComponent connectToStores={{
+        pasokaras: store => ({
+          pasokaraStore: store,
+        })
+      }}>
+        <PasokaraPreview params={this.props.params} />
+      </FluxComponent>
+    );
+  }
+}

frontend/assets/javascripts/flux/routes/pasokaras_route.jsx

@@ -7,6 +7,15 @@ import FacetTags from '../components/facet_tags.jsx';
 import SearchField from '../components/search_field.jsx';
 
 export default class PasokarasRoute extends React.Component {
+  componentDidMount() {
+    this.props.flux.getActions('pasokaras').load(this.context.router.getCurrentPath());
+    this.props.flux.getActions('filter_tags').init(this.props.query.filter_tags);
+  }
+  componentWillReceiveProps() {
+    this.props.flux.getActions('pasokaras').load(this.context.router.getCurrentPath());
+    this.props.flux.getActions('filter_tags').init(this.props.query.filter_tags);
+  }
+
   render() {
     return(
       <div>
@@ -52,4 +61,6 @@ export default class PasokarasRoute extends React.Component {
   }
 }
 
-PasokarasRoute.loadPasokaras = true;
+PasokarasRoute.contextTypes = {
+  router: React.PropTypes.func.isRequired
+};