add book language ID fields

.gitignore

@@ -46,12 +46,14 @@ config/initializers/secret_token.rb
 bower.json
 
 # Node dependency directories
-node_modules
+node_modules/
 
 # Ignore pow environment settings
 .powenv
 
 # Ignore Byebug command history file.
 .byebug_history
 
-*~
+*~
+
+public/assets/css/app.css

README.md

@@ -86,6 +86,9 @@ To start the application locally, run:
 ```shell
 rails server
 ```
+
+You will also need to run `./local_dev.sh` to compile some stylesheets for the archive.
+
 Then, visit the app at [http://localhost:3000](http://localhost:3000).
 
 <!-- ## Alternative Workflow with Convox and Docker

app/assets/javascripts/components/archive/ArchiveApp.es6.jsx

@@ -0,0 +1,35 @@
+class ArchiveApp extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+  	var videoComponents = this.props.data.map(function(video) {
+      var re_url = /https:\/\/.*\.jpg/;
+      var url = video['Branded Thumbnail'];
+
+      // TODO: Refactor repetitive code
+      var language = video['Languages Used'].split(',')[0];
+      var speaker = video['Speakers'].split('_'); // Filter any null
+      speaker.splice(speaker.length - 1);
+      speaker = speaker.filter(name => !!name)
+      speaker = speaker.join(' ');
+
+      let video_id = video[Object.keys(video)[0]].split('_');
+      // video_id.splice(video_id.length - 1); // Removes languages at the end of ID
+      video_id = video_id.join('_');
+
+	    return (
+	       <ArchiveVideoCard
+	          video_id={video_id}
+	          video_title={speaker+ ' speaking ' + language}
+	          date={video["Date added"]}
+	          iso_codes={video["Languages Used"]}
+            img_url={url ? url.match(re_url)[0] : null} />
+	    );
+  	})
+    return (
+      <ArchiveLanding videos={videoComponents}/>
+    );
+  }
+}

app/assets/javascripts/components/archive/ArchiveLanding.es6.jsx

@@ -0,0 +1,25 @@
+class ArchiveLanding extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className='archive-page'>
+        <div className='archive-background'>
+          <div className='archive-bg-container'>
+            <img src="/assets/archive/landing.png" />
+            <h1 className='archive-title'> Wikitongues Archive </h1>
+            <div className='archive-subtitle'>
+              {'Empowering community activists, we introduce you the first public archive of every language in the world.'}
+            </div>
+          </div>
+        </div>
+
+        <div className="archive-video-container">
+          {this.props.videos}
+        </div>
+      </div>
+    );
+  }
+}

app/assets/javascripts/components/archive/ArchiveVideoApp.es6.jsx

@@ -0,0 +1,24 @@
+class ArchiveVideoApp extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+
+    return (
+      <div className='archive-page'>
+        <div className='archive-background'>
+          <div className='archive-bg-container'>
+            <img src="/assets/archive/landing.png" />
+          </div>
+        </div>
+
+        <div className="archive-watch-container">
+          <a className="archive-back-home" href="/videos/index">
+          </a>
+          {this.props.video}
+        </div>
+      </div>
+    );
+  }
+}

app/assets/javascripts/components/archive/ArchiveVideoFocus.es6.jsx

@@ -0,0 +1,30 @@
+class ArchiveVideoFocus extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let video = this.props.data;
+    let urls = this.props.urls
+    console.log(urls)
+
+    // TODO: Refactor repetitive code
+    var language = video['Languages Used'].split(',')[0];
+    var speaker = video['Speakers'].split('_'); // Filter any null
+    speaker.splice(speaker.length - 1);
+    speaker = speaker.filter(name => !!name)
+    speaker = speaker.join(' ');
+
+  	var videoData =
+	       <WatchVideo
+            id={this.props.data['IDv2']}
+            videoUrl={urls.video_url}
+            srtFile={urls.srt_url}
+            title={speaker+ ' speaking ' + language}
+            description={this.props.data['Demographics']}
+	          srtUrl={this.props.data['Caption File Link']}/>;
+    return (
+      <ArchiveVideoApp video={ videoData }/>
+    );
+  }
+jk }

app/assets/javascripts/components/archive/WatchVideo.es6.jsx

@@ -0,0 +1,32 @@
+class WatchVideo extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let srtElem = null;
+    if (this.props.srtFile) {
+      srtElem = <a href={this.props.srtFile}>Download subtitles</a>;
+    }
+    return (
+      <div className='watch-video-container'>
+        <h2 className='watch-video-title'> {this.props.title} </h2>
+        <video className="watch-video-component" autoPlay controls>
+          <source src={this.props.videoUrl} type="video/mp4" />
+        </video>
+        <div>{this.props.srtUrl}</div>
+        <div>{this.props.id}</div>
+        <div>{srtElem}</div>
+
+        <p className='watch-video-description'>
+          {this.props.description}
+        </p>
+      </div>
+    );
+  }
+}
+
+WatchVideo.propTypes = {
+  srt_url: React.PropTypes.string,
+  video_url: React.PropTypes.string,
+};

app/assets/javascripts/components/archive/video_card.jsx

@@ -0,0 +1,35 @@
+class ArchiveVideoCard extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  viewVideo() {
+    window.location = '/videos/' + this.props.video_id;
+  }
+
+  render() {
+    var defaultThumbnail = '/assets/archive/video_thumbnail_test.jpg';
+    return (
+      <div className="archive-video-card" onClick={this.viewVideo.bind(this)}>
+        <div className="archive-video-card-thumbnail">
+          <img src={this.props.img_url ? this.props.img_url : defaultThumbnail} />
+        </div>
+          <div className="archive-video-metadata">
+            <div className="archive-video-card-title">{this.props.video_title}</div>
+            <div className="archive-video-card-details">
+              <div>{this.props.iso_codes}</div>
+              <div>{this.props.date}</div>
+            </div>
+          </div>
+      </div>
+    );
+  }
+}
+
+ArchiveVideoCard.propTypes = {
+  video_id: React.PropTypes.number,
+  video_title: React.PropTypes.string,
+  date: React.PropTypes.string,
+  iso_codes: React.PropTypes.string,
+  img_url: React.PropTypes.string,
+};

app/assets/javascripts/videos.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/stylesheets/admin.styl

@@ -82,4 +82,4 @@
                 text-decoration none
 
             .right
-              text-align right
+              text-align right

app/assets/stylesheets/archive/app.styl

@@ -0,0 +1,3 @@
+@import "./landing.styl"
+@import "./video.styl"
+@import "./video-card.styl"

app/assets/stylesheets/archive/landing.styl

@@ -0,0 +1,79 @@
+.archive-page {
+  width: 100%;
+  position: relative;
+}
+
+.archive-background {
+  position: absolute;
+  left: 0;
+  right: 0;
+
+  .archive-bg-container {
+    position: relative;
+  }
+
+  img {
+    position: absolute;
+    width: 100%;
+    top: -100px;
+    left: 0px;
+    right: 0px;
+  }
+
+  .archive-title {
+    position: absolute;
+    margin: 0;
+    top: 110px;
+    width: 95%;
+    right: 5%;
+
+    color: #fff;
+    font-size: 42px;
+    font-weight: 700;
+    text-shadow: 0px 2px 4px rgba(82,70,70,.5);
+    text-align: right;
+  }
+
+  .archive-subtitle {
+    position: absolute;
+    width: 46%;
+    top: 175px;
+    right: 5%;
+
+    color: #fff;
+    font-size: 20px;
+    font-weight: 300;
+    text-shadow: 0px 2px 4px rgba(0,0,0,.64);
+    text-align: right;
+  }
+}
+
+.archive-video-container {
+  position: relative;
+  top: 280px;
+
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-content: flex-start;
+  display: flex;
+
+  margin: 0 auto 80px auto;
+  padding: 100px;
+  width: 90%;
+  height: auto;
+
+  background-color: white;
+  box-shadow: 0px 4px 4px rgba(0,0,0,.2);
+}
+
+.archive-video {
+  flex-basis: 200px;
+  flex-grow: 1;
+  height: 200px;
+  margin: 16px;
+
+  box-shadow: 0px 2px 4px rgba(0,0,0,.2);
+  border-radius: 4px;
+}

app/assets/stylesheets/archive/video-card.styl

@@ -0,0 +1,51 @@
+.archive-video-card {
+  flex-basis: 300px;
+  flex-grow: 1;
+  margin: 16px;
+
+  box-shadow: 0px 2px 4px rgba(0,0,0,.2);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: box-shadow 0.2s;
+}
+
+.archive-video-card:hover {
+  box-shadow: 0px 6px 6px rgba(0,0,0,.2);
+}
+
+.archive-video-card-thumbnail{
+  height: 230px;
+  overflow: hidden;
+
+  img {
+    max-width: 100%;
+  }
+}
+
+.archive-video-metadata{
+  margin-left: 24px;
+  margin-right: 24px;
+  padding-bottom: 16px;
+
+  .archive-video-card-title {
+    font-family: HelveticaNeue;
+    font-size: 24px;
+    text-align: left;
+    margin-top: 12px;
+    margin-bottom: 6px;
+  }
+
+  .archive-video-card-title:link,
+  .archive-video-card-title:visited {
+    text-decoration: none;
+    color: #000;
+  }
+
+
+
+  .archive-video-card-details{
+    font-family: HelveticaNeue;
+    font-size: 16px;
+    font-weight: 300;
+  }
+}