pig-media-server 0.3.2 → 2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1f32013836d4bf857c153d9c1637166e3cf261ca
-  data.tar.gz: 0bffdde44cb7536875cae6239a5b2014ab0f874d
+  metadata.gz: 03172c241d9a720259504c431a3f24d3226dae28
+  data.tar.gz: cbd95152cf18824e2898e32562d61942d1ac525a
 SHA512:
-  metadata.gz: 16333ea7be32edb98d89f82e1dbf7b37e9d3b407d810a09c66208ddf545c744ac7d4f020f66910c68601e56de6e29f5e381d63d8e0d4cb7b31c43a394b79f147
-  data.tar.gz: d84211f9cb6b5ea9bd351b6e8d6752fa3b9833602928ac17d2468c13ebffcaf4e6f7e373d84b7179976c77fc7e16d3f68805ef83968792eedfff24f4b59e07e1
+  metadata.gz: 3e086f8d14b480451cd612f665b3971862601eaae32c43bf7771337befc492653b68fd1d132873e10a6408896519956145bb331f76c0c0ef8273605cb0e7cf9a
+  data.tar.gz: a95b3789b246eff2c3a0937def42c8983793b36696eec54229d52c2cc6b37d3687b38fccbf1d776e758b4e121fa4e851b94b338698d85d6defac8723b7a021dd

data/.gitignore

@@ -17,3 +17,4 @@ test/version_tmp
 tmp
 config.yaml
 vendor/bundle
+node_modules

data/bin/pig-media-server

@@ -1,4 +1,7 @@
 #!/usr/bin/env ruby
-
+require 'bundler/setup'
+Bundler.require
 require 'pig-media-server'
 require 'pig-media-server/cli'
+PigMediaServer::CLI.start
+

data/gulpfile.js

@@ -0,0 +1,33 @@
+var gulp = require('gulp');
+var browserify = require('browserify');
+var babelify = require('babelify');
+var source = require('vinyl-source-stream');
+var uglify = require('gulp-uglify');
+var buffer = require('vinyl-buffer');
+var cssDir = 'stylesheets'
+
+gulp.task('browserify', function() {
+  browserify('./javascripts/application.js', { debug: true })
+    .transform(babelify)
+    .bundle()
+    .on("error", function (err) { console.log("Error : " + err.message); })
+    .pipe(source('bundle.js'))
+    .pipe(gulp.dest('./lib/pig-media-server/views/'))
+});
+
+gulp.task('build', function(){
+  browserify('./javascripts/application.js', { debug: true })
+    .transform(babelify)
+    .bundle()
+    .on("error", function (err) { console.log("Error : " + err.message); })
+    .pipe(source('bundle.js'))
+    .pipe(buffer())
+    .pipe(uglify())
+    .pipe(gulp.dest('./lib/pig-media-server/views/'))
+
+});
+
+
+gulp.task('watch', ['browserify'], function(){
+  gulp.watch('./javascripts/**/*.js', ['browserify']);
+});

data/javascripts/application.js

@@ -0,0 +1,117 @@
+window.React = require('react');
+window.ReactDOM = require('react-dom');
+window.$ = window.jQuery = require('jquery');
+window.moment = require('moment-timezone');
+
+require('./chromecast.js');
+
+require('./utils.js');
+require('./controller.js');
+
+require('./event_dispatcher.js');
+
+require('./recent.js');
+require('./video.js');
+require('./custom_list.js');
+
+require('./components/head.js');
+require('./components/sort.js');
+require('./components/list.js');
+require('./components/query_list.js');
+require('./components/new_flag.js');
+require('./components/watch.js');
+require('./components/player.js');
+
+class Application extends React.Component {
+  constructor(props){
+    super(props);
+    this.controller = new Controller();
+    this.recent = new Recent(this);
+    this.video = new Video();
+    this.custom_list = new CustomList(this);
+
+    this.state = {
+      config: {},
+      session: {},
+      items: [], 
+      recent: {},
+      video: null,
+
+      open: (link)=>{this.open(link)},
+      initialize: ()=>{this.initialize()},
+      update_state: ()=>{this.update_state()},
+
+      controller: this.controller,
+
+      models: {video: this.video, recent: this.recent, custom_list: this.custom_list}
+    }
+
+    this.state.models.video.addEventListener('videoUpdated', ()=>{ this.setState(this.state); });
+
+    window.addEventListener('popstate',(ev)=>{ this.initialize(); },false);
+  }
+
+  open(link){
+    history.pushState('', '', link);
+    this.initialize();
+  }
+
+  update_state(){ this.setState(this.state); }
+
+  load_from_api(url){ 
+    if(!!url){ 
+      $.get(url).done((data)=>{ this.state.items = data; this.update_state(); }); 
+    } else {
+      this.state.items = [];
+      this.update_state();
+    }
+  }
+
+  load_config(){ $.get("/api/r/config").done((data)=>{ this.state.config = data; this.update_state(); })}
+  load_session(){ 
+    $.get("/api/r/session").done((data)=>{ 
+      this.state.session = data; 
+      this.update_state(); 
+      this.load_recent();
+    }) 
+  }
+
+  load_recent(){ this.recent.load() }
+
+  routing(){
+    var route = this.controller.route();
+    switch(route.page){
+      case "list":
+        this.load_from_api(this.controller.route().api_url);
+        this.state.active_page = 'list';
+        this.update_state();
+        break;
+    }
+  }
+
+  initialize(){
+    this.load_config();
+    this.load_session();
+    this.custom_list.load();
+    this.routing()
+  }
+  
+  componentDidMount(){ this.initialize() }
+
+  render(){
+    return <div>
+      <Player state={this.state} />
+      <div id='all'>
+        <Head state={this.state} />
+        <SearchBox state={this.state}/>
+        <List state={this.state}/>
+        <QueryList state={this.state}/>
+      </div>
+    </div>
+  }
+}
+
+ReactDOM.render(<Application />, document.querySelector("#application"));
+
+
+

data/javascripts/chromecast.js

@@ -0,0 +1,57 @@
+var currentMedia = null;
+var currentVolume = 0.5;
+var progressFlag = 1;
+var mediaCurrentTime = 0;
+var session = null;
+
+var null_func = (obj)=>{''}
+
+var sessionListener = (e)=>{
+  console.log('New session ID: ' + e.sessionId)
+  session = e
+}
+
+var onRequestSessionSuccess = (e)=>{
+  console.log("session success: " + e.sessionId)
+  session = e
+  if(session.media.length != 0){
+    onMediaDiscovered('onRequestSession', session.media[0]) 
+  }
+  session.addMediaListener(
+    onMediaDiscovered.bind(this, 'addMediaListener'))
+}
+
+var onMediaDiscovered = (how, media)=>{
+  console.log("new media session ID:" + media.mediaSessionId)
+  currentMedia = media
+  mediaCurrentTime = currentMedia.currentTime
+}
+
+var initializeCastApi = ()=>{
+  var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID)
+  var apiConfig = new chrome.cast.ApiConfig(sessionRequest, sessionListener, null_func)
+  chrome.cast.initialize(apiConfig, null_func, null_func)
+  
+  console.log("launching app...")
+  chrome.cast.requestSession(onRequestSessionSuccess, null_func)
+  $('a.chromecast').show()
+}
+  
+window.chrome_cast = (mediaURL, key)=>{
+  if(mediaURL.match(/pig.ssig33.com/)){
+    mediaURL = mediaURL.replace(/pig.ssig33.com\/volume/, 'ashare.ssig33.com');
+    mediaURL = mediaURL.replace(/https/, 'http');
+    mediaURL = mediaURL.replace(/^\/\//, 'http://');
+    console.log(mediaURL);
+  }
+  var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL)
+  mediaInfo.contentType = 'video/mp4'
+  var request = new chrome.cast.media.LoadRequest(mediaInfo)
+  request.autoplay = true
+  request.currentTime = 0
+  session.loadMedia(request, onMediaDiscovered.bind(this, 'loadMedia'), null_func)
+}
+
+window['__onGCastApiAvailable'] = (loaded, errorInfo)=>{
+  if(loaded){ initializeCastApi() }
+}

data/javascripts/components/head.js

@@ -0,0 +1,106 @@
+class LoginAs extends React.Component {
+  render(){
+    return <span>Login as {this.props.user_id}</span>
+  }
+}
+
+class LoginLink extends React.Component {
+  render(){
+    return <a href='/sessions'>Login</a>
+  }
+}
+
+class Session extends React.Component {
+  render(){
+    return <div>
+      {this.props.state.session.user_id ? 
+        <LoginAs user_id={this.props.state.session.user_id} /> :
+        <LoginLink />
+      }
+    </div>
+  }
+}
+
+class Head extends React.Component {
+  click(){
+    this.props.state.open('/'); 
+  }
+  render(){
+    return <div>
+      <Session state={this.props.state} />
+      <h2>
+        <a href='javascript:void(0)' onClick={()=> this.click()}>
+          {this.props.state.config.page_title}
+        </a>
+      </h2>
+    </div>
+  }
+}
+
+class CustomList extends React.Component{
+  click(){
+    this.props.state.open(`/custom?name=${encodeURIComponent(this.props.name)}`)
+  }
+  render(){
+    return <a href='javascript:void(0)' onClick={()=> this.click()}>{this.props.name}</a>
+  }
+}
+
+class Recommend extends React.Component{
+  click(){ this.props.state.open(`/recommend?name=${localStorage.user_id}`) }
+  render(){
+    return <span>
+      {!!localStorage.user_id ?  <a href='javascript:void(0)' onClick={()=> this.click()}><b>Recommend</b></a> : null}
+    </span>
+  }
+}
+
+class SearchBox extends React.Component {
+  submit(event){
+    event.preventDefault();
+    var query = this.refs.input.value;
+    var url = `/?query=${encodeURIComponent(query)}`
+    history.pushState(url, '', url);
+    this.props.state.initialize();
+  }
+  click(e){ this.props.state.open(e.target.dataset.url); }
+
+  full_screen(){
+    var elem = document.querySelector("body");
+    if (elem.requestFullScreen) {
+      elem.requestFullScreen();
+    } else if (elem.mozRequestFullScreen) {
+      elem.mozRequestFullScreen();
+    } else if (elem.webkitRequestFullScreen) {
+      elem.webkitRequestFullScreen();
+    }
+  }
+
+  componentDidUpdate(){
+    var query = decodeURIComponent(this.props.state.controller.query());
+    if(query == 'undefined' || query == 'null' || !query){query = ''}
+    this.refs.input.value = query;
+  }
+
+
+
+  change(){ }
+
+  render(){
+    var query = decodeURIComponent(this.props.state.controller.query());
+    if(query == 'undefined' || query == 'null' || !query){query = ''}
+    var custom_list = $.map(this.props.state.models.custom_list.list, (v,k)=>{return <CustomList key={k} name={k} state={this.props.state}/>});
+    return <form onSubmit={(e)=> this.submit(e)}>
+      <input ref='input' defaultValue={query} onChange={()=>{this.change()}}/><button>Search</button>
+      <a href='javascript:void(0)' onClick={(e)=>this.click(e)} data-url='/latest'>Latest</a>
+      <a href='/config'>Config</a>
+      <a href='javascript:void(0)' onClick={()=> this.full_screen()}>Full Screen</a>
+      <Recommend state={this.props.state} />
+      <br />
+      {custom_list}
+    </form>
+  }
+}
+
+window.Head = Head;
+window.SearchBox = SearchBox;

data/javascripts/components/list.js

@@ -0,0 +1,104 @@
+class CustomLinks extends React.Component{
+  render(){
+    return <span dangerouslySetInnerHTML={{__html: this.props.item.custom_links}}/>
+  }
+}
+
+class Item extends React.Component {
+  mtime(){ 
+    //moment(this.props.item.mtime)
+    return this.props.item.mtime;
+  }
+
+  render(){
+    var item = this.props.item;
+    var meta = `/meta/${this.props.item.key}`;
+    var sub = `/sub/${this.props.item.key}`;
+    return <span className='main_span'>
+      <NewFlag 
+        item={this.props.item}
+        state={this.props.state}
+      />
+      <a href={item.url} className='main_link'>{item.name}</a>&nbsp;
+
+      <Watch 
+        item={this.props.item}
+        state={this.props.state}
+      />
+      <ChromeCast
+        item={this.props.item}
+        state={this.props.state}
+      />
+      <span className='mtime'>{this.mtime()}</span>&nbsp;
+      <span className='size'>{size_pretty(item.size)}</span>&nbsp;
+      <a className='meta' href={meta}>Meta</a>
+      <a className='meta' href={sub}>Sub</a>
+      <CustomLinks item={this.props.item} />
+    </span>
+  }
+}
+
+class Pager extends React.Component {
+  constructor(props){
+    super(props);
+    this.page = 1;
+    var page = this.props.state.controller.params().page;
+    if(page){ this.page = parseInt(page)}
+    this.bind();
+  }
+
+  bind(){
+    $(window).on("scroll",()=>{
+      var scrollHeight = $(document).height();
+      var scrollPosition = $(window).height() + $(window).scrollTop();
+      if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
+        if(this.props.state.controller.can_sort_and_paging()|| location.pathname == '/latest'){
+          this.click();
+        }
+      }
+    });
+  }
+  click(){
+    this.page ++;
+    if(location.pathname == '/latest'){
+      var url = this.props.state.controller.route().api_url += `?page=${this.page}`;
+    } else {
+      var url = this.props.state.controller.route().api_url += `&page=${this.page}`;
+    }
+    $.get(url).done((data)=>{
+      this.props.state.items = this.props.state.items.concat(data);
+      this.props.state.update_state();
+      if(location.pathname == '/latest'){
+        var new_url = `/latest?page=${this.page}`;
+      } else {
+        var new_url = `/?query=${this.props.state.controller.query()}&page=${this.page}`;
+      }
+      history.pushState('', '', new_url);
+    });
+  }
+
+  render(){ return <a href='javascript:void(0)' onClick={()=> this.click()}>Next</a> }
+}
+
+
+class List extends React.Component {
+  can_sort(){ return this.props.state.controller.can_sort_and_paging()} 
+  render(){
+
+    var items = $.map(this.props.state.items, (item)=>{
+      return <Item
+        key={item.key}
+        state={this.props.state}
+        item={item}
+      />
+    });
+
+    return <div>
+      {this.can_sort() ?  <Sort state={this.props.state} /> : null }
+      <p>{items}</p>
+      <p>{this.can_sort() || location.pathname == '/latest' ?  <Pager state={this.props.state} /> : null }</p>
+    </div>
+  }
+}
+
+window.List = List;

data/javascripts/components/new_flag.js

@@ -0,0 +1,23 @@
+class NewFlag extends React.Component{
+  is_new(){
+    if(!!this.props.state.recents){
+      var ext = window.ext(this.props.item.name);
+      if(ext == 'mp4' || ext == 'flv'){
+        var result = true;
+        $.each(this.props.state.recents, (k,v)=>{ if(k == `movie/${this.props.item.key}`){ result = false } });
+        return result
+      } else {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+
+  render(){
+    var is_new = this.is_new();
+    return <span>{is_new ? <span className='new_flag' style={{color:'lime', "fontWeight":'bold'}}>New</span> : null }</span>
+  }
+}
+
+window.NewFlag = NewFlag;

data/javascripts/components/player.js

@@ -0,0 +1,171 @@
+class Player extends React.Component {
+  constructor(props){
+    super(props);
+    this.current_url = '';
+  }
+  close(){ this.props.state.models.video.set(null); }
+  dom(){ return this.refs.video; }
+
+  video(){ return this.props.state.models.video.item; }
+
+  video_url(){
+    var url = null;
+    if(!!this.video()){ url = this.video().url; }
+    return url;
+  }
+
+  to_play(url){
+    if(!!url){
+      if(url != this.current_url){
+        this.current_url = url;
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+
+  next(){
+    var next = false;
+    var result;
+    var index = $.map(this.props.state.items, (e,i)=>{return e.key}).indexOf(this.props.state.models.video.item.key);
+    this.props.state.models.video.set(this.props.state.items[index-1]);
+  }
+
+  play(prev){
+    if(this.to_play(this.video_url())){
+      var node = this.dom();
+      node.addEventListener('canplay', (e)=>{ 
+        var target = e.target;
+        target.play(); 
+        this.props.state.models.recent.use(`movie/${this.video().key}`);
+        
+      });
+      node.addEventListener('ended', (e)=>{ this.next(); });
+      node.load();
+    }
+  }
+
+  size_loop(){
+    if(!!this.video_url()){
+      var video_width = this.dom().videoWidth;
+      var video_height = this.dom().videoHeight;
+      
+      var width = $(window).width();
+      var height = $(window).height();
+
+      var new_w, new_h;
+
+      if(parseFloat(video_height) / parseFloat(video_width) < parseFloat(height) / parseFloat(width)){
+        new_w = width;
+        new_h = parseInt((parseFloat(video_height) * (parseFloat(width) / parseFloat(video_width))));
+      } else {
+        new_w = parseInt((parseFloat(video_width) * (parseFloat(height) / parseFloat(video_height))));
+        new_h = height;
+      }
+      new_w = new_w - 10;
+      new_h = new_h - 10;
+
+      var spacer = (height - new_h) / 2;
+
+      $(this.dom()).css({width: new_w, height: new_h});
+      $(this.refs.spacer).css({height: spacer});
+    }
+    setTimeout(()=>{ this.size_loop()}, 200)
+  }
+
+  capture(){
+    var c = this.refs.canvas;
+    var v = this.dom();
+    var context = c.getContext('2d');
+    c.width = v.videoWidth;
+    c.height = v.videoHeight;
+    context.drawImage(v, 0, 0);
+    return c.toDataURL();
+  }
+
+  seek(count){ this.dom().currentTime += count; }
+  pause(){
+    this.dom().paused ? this.dom().play() : this.dom().pause();
+  }
+  gyazo(){
+    var url = this.capture();
+    $.post('/gyazo', {url: url, point: localStorage.gyazo}).done((data)=>{
+      window.open(data.url, "", "width=500,height=400");
+    });
+  }
+  tweet(){ $.post('/gyazo/tweet', {url: this.capture()}).success((data)=>{return true}); }
+  comment_tweet(){
+    var url = this.capture();
+    var comment = prompt('tweet');
+    if(!!comment){
+      $.post('/gyazo/tweet', {url: url, comment: comment}).success((data)=>{return true});
+    }
+  }
+
+
+  bind(){
+    $(window).keyup((e)=>{
+      if(!!$(this.dom()).attr('src')){
+        if(document.activeElement.tagName != 'INPUT'){
+          switch(e.keyCode){
+            case 74:
+              this.seek(14);
+              break;
+            case 75:
+              this.seek(-15);
+              break;
+            case 80:
+              this.pause();
+              break;
+            case 71:
+              this.gyazo();
+              break;
+            case 78:
+              this.next();
+              break;
+            case 67:
+              this.comment_tweet();
+              break;
+            case 84:
+              this.tweet();
+              break;
+          }
+        }
+      }
+    });
+  }
+
+  componentDidMount(){ this.size_loop(); this.bind(); }
+  componentDidUpdate(prev, prevState){ this.play(prev); }
+  video_name(){
+    if(!!this.video_url()){
+      return this.video().name;
+    } else {
+      return null;
+    }
+  }
+  
+  class_name(){ if(!!this.video_url()){ return "" } else { return "none" } }
+
+  render(){
+    return <div className={this.class_name()} id='area'>
+      <div ref='spacer' />
+      <video 
+        ref='video'
+        src={this.video_url()} 
+        controls='controls'
+        onClick={()=> this.pause()}   
+      />
+      <canvas className='none' ref='canvas' />
+      <div style={{height: '300px'}}/>
+      <a href='javascript:void(0)' onClick={()=> this.close()}>Close Video</a>
+      <br />
+      <span>{this.video_name()}</span>
+    </div>
+  }
+}
+
+window.Player = Player;