MS DC; youtube videos now display thumbnail, and sound cloud embeds are not total train wrecks;

app/assets/javascripts/app/views/small_frame.js

@@ -9,6 +9,14 @@ app.views.SmallFrame = app.views.Base.extend({
     "click .fav" : "goToPost"
   },
 
+  subviews : {
+    '.embed-frame' : "oEmbedView"
+  },
+
+  oEmbedView : function(){
+    return new app.views.OEmbed({model : this.model})
+  },
+
   presenter : function(){
     //todo : we need to have something better for small frame text, probably using the headline() scenario.
     return _.extend(this.defaultPresenter(),
@@ -28,7 +36,7 @@ app.views.SmallFrame = app.views.Base.extend({
     var text = this.model.get("text")
       , baseClass = $.trim(text).length == 0 ? "no-text" : 'has-text';
 
-    if(baseClass == "no-text" || this.model.get("photos").length > 0) { return baseClass }
+    if(baseClass == "no-text" || this.model.get("photos").length > 0 || this.model.get("o_embed_cache")) { return baseClass }
 
     var randomColor = _.first(_.shuffle(['cyan', 'green', 'yellow', 'purple', 'lime-green', 'orange', 'red', 'turquoise', 'sand']));
 
@@ -48,14 +56,7 @@ app.views.SmallFrame = app.views.Base.extend({
 
 
   dimensionsClass : function() {
-    /* by default, make it big if it's a fav */
+    return (this.model.get("favorite")) ?  "x2 width height" : ""
-    if(this.model.get("favorite")) { return "x2 width height" }
-
-    if(this.model.get("o_embed_cache")) {
-      return("x2 width")
-    }
-    return ''
-
   },
 
   favoritePost : function(evt) {

app/assets/stylesheets/_mixins.css.scss

@@ -88,4 +88,15 @@ $default-border-radius: 3px;
   -webkit-animation: $name $speed $easing;
   -moz-animation: $name $speed $easing;
   -ms-animation: $name $speed $easing;
-}
+}
+
+@mixin video-overlay(){
+  .video-overlay {
+    background : image-url('video-overlay.png') no-repeat center center;
+    position : absolute;
+    top : 0;
+    left : 0;
+    right : 0;
+    bottom : 0;
+  }
+}

app/assets/stylesheets/application.css.sass

@@ -1843,14 +1843,10 @@ ul#press_logos
       .thumb
         :position relative
         :cursor pointer
+        @include video-overlay()
+
+
 
-        .video-overlay
-          :background image-url('video-overlay.png') no-repeat center center
-          :position absolute
-          :top 0
-          :left 0
-          :right 0
-          :bottom 0
 
 .conversation_participants
   :z-index 3

app/assets/stylesheets/new-templates.css.scss

@@ -12,4 +12,7 @@
 @import 'new_styles/profile';
 
 /* font overrides */
-@import 'new_styles/typography';
+@import 'new_styles/typography';
+
+
+@include video-overlay();

app/assets/stylesheets/new_styles/_base.scss

@@ -14,9 +14,6 @@ a { color : rgb(42,156,235) !important; }
     }
   }
 
-img {
-  max-height: 70%;
-}
 
 .photoset {
   @include center(horizontal);
@@ -169,6 +166,10 @@ article { //mood posts
   width: 960px;
   margin: 0 auto;
 
+  img {
+    max-height: 70%;
+  }
+
   @include centered-frame();
   .container {
     padding: 70px 0;

app/assets/stylesheets/new_styles/_canvas.scss

@@ -87,15 +87,18 @@ body {
   }
 
   .embed-frame {
-    position : absolute;
+
-    top : 0;
+    .thumb {
-    left : 0;
+      position : relative;
-    width : 100%;
+    }
-    height : 100%;
+    img  {
+      width: 100%;
+    }
 
     iframe {
       height : 100%;
       width : 100%;
+      max-height: 222px;
     }
   }
 

app/assets/templates/small-frame.jst.hbs

@@ -18,11 +18,7 @@
         </div>
     {{/if}}
 
-    {{#if o_embed_cache.data}}
+    <div class="embed-frame" />
-        <div class="embed-frame">
-            {{{o_embed_cache.data.html}}}
-        </div>
-    {{/if}}
 
     {{#if text}}
         <div class="text-content">

spec/javascripts/app/views/small_frame_view_spec.js

@@ -4,15 +4,30 @@ describe("app.views.SmallFrame", function(){
       photos : [
         factory.photoAttrs({sizes : {large : "http://tieguy.org/me.jpg"}}),
         factory.photoAttrs({sizes : {large : "http://whatthefuckiselizabethstarkupto.com/none_knows.gif"}}) //SIC
-      ]
+      ],
+
+      "o_embed_cache":{
+        "data":{
+          "html":"this is a crazy oemebed lol"
+        }
+      }
     })
+
     this.view = new app.views.SmallFrame({model : this.model})
   })
 
+  it("passes the model down to the oembed view", function(){
+    expect(this.view.oEmbedView().model).toBe(this.model)
+  })
+
   describe("rendering", function(){
     beforeEach(function(){
       this.view.render()
     });
+
+    it("has the oembed", function(){ //integration test
+      expect($.trim(this.view.$(".embed-frame").text())).toContain("this is a crazy oemebed lol")
+    })
   })
 
   describe("photos", function() {