add video player fix #18

happypeter · Nov 22, 2012 · b5eb49c · b5eb49c
1 parent 1d8bdfa
commit b5eb49c
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 15 deletions.
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -15,6 +15,7 @@
 @import "vendor/bootstrap";
 @import "global";
 @import "comment";
+@import "course";
 
 $main_width: 960px;
 

diff --git a/app/assets/stylesheets/course.css.scss b/app/assets/stylesheets/course.css.scss
@@ -0,0 +1,19 @@
+div#html5-player {
+  border: 1px solid $light-gray;
+  width: 768px;
+  margin: 0 auto;
+  video#videojs {
+    display: block;
+  }
+  #title_area {
+   padding: 10px;
+   border: 3px solid $light-blue;
+   h2 {
+     margin-bottom: -10px;
+   }
+   p.light {
+     font-size: 90%;
+     color: $light-green;
+   }
+  }
+}
diff --git a/app/assets/stylesheets/global.css.scss b/app/assets/stylesheets/global.css.scss
@@ -1,4 +1,6 @@
 $light-gray: #ececec;
+$light-green: #75AE07;
+$light-blue: #7ac9de;
 @mixin onestep-shadow {
   -webkit-box-shadow: 0 0 6px $light-gray;
   -moz-box-shadow: 0 0 6px $light-gray;

diff --git a/app/views/courses/_video_player.html.erb b/app/views/courses/_video_player.html.erb
@@ -0,0 +1,16 @@
+<div id="html5-player">
+  <video id="videojs" class="video-js vjs-default-skin" controls width="768" height="576" poster="" preload="auto" data-setup="{}">
+    <source src="http://media.happycasts.net/assets/episodes/videos/041-tmux.mov" type="video/mp4"/ >
+  </video>
+  <div id="title_area">
+    <h2><%= course.name %></h2>
+    <p class="light"><%=course.cat.titleize %><p>
+    <p><%=course.description %><p>
+    <p>
+    <% if can? :edit, :course %>
+      <%= link_to 'Edit', edit_course_path(@course) %>
+    <% end %>
+    </p>
+  </div>
+</div>
+
diff --git a/app/views/courses/show.html.erb b/app/views/courses/show.html.erb
@@ -1,20 +1,7 @@
 <p id="notice"><%= notice %></p>
+<script src="http://vjs.zencdn.net/c/video.js"></script>
 
-<p>
-<b><%= t('course_name') %>:</b>
-  <%= @course.name %>
-  <br>
-  <b><%= t('cat') %>:</b>
-  <%= @course.cat %>
-  <br>
-  <b><%= t('description') %>:</b>
-  <%= @course.description %>
-</p>
-
-<% if can? :edit, :course %>
-  <%= link_to 'Edit', edit_course_path(@course) %>
-<% end %>
-
+<%= render "video_player", :course => @course %>
 
 <div id="comments">
   <h3><%= t("comment") %></h3>
@@ -37,3 +24,4 @@
     </div>
     <br \>
   <% end %>
+
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -4,6 +4,7 @@
   <title>Onestep</title>
   <%= stylesheet_link_tag    "application", :media => "all" %>
   <%= javascript_include_tag "application" %>
+  <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
   <%= csrf_meta_tags %>
 </head>
 <body>