changed to react-slides module

Author: markhuge

events/docker_and_node.json

@@ -5,7 +5,9 @@
     {
       "title": "Node.js OC - Docker and Node",
       "description": "How Zillow is using Docker with Node.js.",
-      "slides": "//www.slideshare.net/slideshow/embed_code/38980381",
+      "slides": {
+        "url": "//www.slideshare.net/slideshow/embed_code/38980381"
+      },
       "speaker": {
         "name": "Jeffrey Horn",
         "image": "https://avatars3.githubusercontent.com/u/1922957?v=2&s=460",

events/grunt.json

@@ -5,7 +5,9 @@
     {
       "title": "GruntJS",
       "description": "GruntJS",
-      "slides": "http://benwas.com/grunt/",
+      "slides": {
+        "url": "http://benwas.com/grunt/"
+      },
       "speaker": {
         "name": "Benjamin Wasilewski",
         "github": "bwasilewski",

events/intro.json

@@ -5,7 +5,9 @@
     {
       "title": "Intro To Node.JS",
       "description": "Intro To Node.JS",
-      "slides": "//www.slideshare.net/slideshow/embed_code/key/ncocU4wrfvCtfz",
+      "slides": {
+        "url": "//www.slideshare.net/slideshow/embed_code/key/ncocU4wrfvCtfz"
+      },
       "speaker": {
         "name": "Farsheed Atef",
         "twitter": "captainatef",

events/isomorphic_js.json

@@ -5,7 +5,9 @@
     {
       "title": "Isomorphic Javascript",
       "description": "Topic Bullet Points:\n\n• Introduce Divshot's need for code reuse between Node and browser\n\n• Introduce the solution and it's implication (namely Browserify and the numerous modules that solve isomorphic javascript problems)  \n\n• hyperquest  \n\n• through  \n\n• filereader-stream  \n\n• Introduce Divshot's solution using isomorphic Node-style code\n\n• Other various examples- Questions?",
-      "slides": "//slides.com/scottcorgan/like-a-glove/embed",
+      "slides": { 
+        "url": "//slides.com/scottcorgan/like-a-glove/embed"
+      },
       "speaker": {
         "bio": "Scott Corgan. Worked on Node since right before v0.6. Build E-commerce platforms, hosting platforms, and many many NPM modules. Currently working at Divshot as lead Node developer.",
         "name": "Scott Corgan",

events/node_devops.json

@@ -5,6 +5,10 @@
     {
       "title": "Node.js, the Universe and Everything",
       "description": "Greenfield projects are great, but how do you integrate Node.js with an existing stack?\n\nThis month Mark does a deep dive on what he and his team @ Hightail are doing to build, release, and integrate Node.js with a diverse infrastructure and a polyglot application stack.",
+      "slides": { 
+          "service": "speakerdeck",
+          "id": "5234f6475cc24d97ad34ee9459654b26"
+      },
       "speaker": {
         "name": "Mark Wilkerson",
         "image": "https://avatars1.githubusercontent.com/u/266110?v=3&s=460",

events/socketio.json

@@ -5,7 +5,9 @@
     {
       "title": "Intro to Socket IO",
       "description": "Intro to Socket IO",
-      "slides": "//www.slideshare.net/slideshow/embed_code/key/xwnormQ2tU1yjb",
+      "slides": {
+        "url": "//www.slideshare.net/slideshow/embed_code/key/xwnormQ2tU1yjb"
+      },
       "speaker": {
         "name": "Eddy Kim"
       }

package.json

@@ -23,7 +23,8 @@
   "homepage": "https://github.com/javascriptoc/jsoc.io",
   "dependencies": {
     "moment": "2.10.6",
-    "react": "0.13.3"
+    "react": "0.13.3",
+    "react-slides": "^1.0.0"
   },
   "devDependencies": {
     "css-loader": "0.16.0",

src/components/topic.ls

@@ -3,7 +3,7 @@
 require! {
   \./speaker
   './video-embed'
-  './speaker-deck': slides
+  'react-slides': slides
 }
 
 Slides  = create-factory slides
@@ -20,7 +20,7 @@ module.exports = React.create-class({
       if video
         Video url: video.url
       if slides
-        Slides url: slides
+        Slides url: slides.url, service: slides.service, id: slides.id
       footer null,
         if speaker
           Speaker data: speaker

src/sass/components/_topic.sass

@@ -8,15 +8,16 @@
     white-space: pre-wrap
 
 
-  .slide-frame
+  .react-slides iframe
     margin-top: 1em
     width: 700px
+    height: 390px;
     max-width: 100%
+    @include aspect-ratio('16:9')
 
-  .video-frame
+  .video-frame iframe
     margin-top: 1em
     width: 700px
+    height: 390px;
     max-width: 100%
-
-  iframe
-    overflow: hidden
+    @include aspect-ratio('16:9')

src/sass/modules/_aspect-ratio.sass

@@ -1,11 +1,26 @@
-[data-aspect-ratio] 
+
+// Seriously?
+$ratios: ('3:1': 'padding-top: 33.33%')
+$ratios: map-merge($ratios, ('2:1': '50%'))
+$ratios: map-merge($ratios, ('16:9': '56.25%'))
+$ratios: map-merge($ratios, ('3:2': '66.66%'))
+$ratios: map-merge($ratios, ('4:3': '75%'))
+$ratios: map-merge($ratios, ('1:1': '100%'))
+$ratios: map-merge($ratios, ('3:4': '133.33%'))
+$ratios: map-merge($ratios, ('2:3': '150%'))
+$ratios: map-merge($ratios, ('9:16': '177.77%'))
+$ratios: map-merge($ratios, ('1:2': '200%'))
+$ratios: map-merge($ratios, ('1:3': '300%'))
+
+@mixin aspect-ratio($ratio)
   display: block
   max-width: 100%
   position: relative
 
   &:before 
     content: ''
     display: block
+    padding-top: map-get($ratios,$ratio)
 
 
   > * 
@@ -15,37 +30,3 @@
     position: absolute
     top: 0
     width: 100%
-  
-
-[data-aspect-ratio="3:1"]:before 
-  padding-top: 33.33%
-
-[data-aspect-ratio="2:1"]:before 
-  padding-top: 50%
-
-[data-aspect-ratio="16:9"]:before 
-  padding-top: 56.25%
-
-[data-aspect-ratio="3:2"]:before 
-  padding-top: 66.66%
-
-[data-aspect-ratio="4:3"]:before 
-  padding-top: 75%
-
-[data-aspect-ratio="1:1"]:before 
-  padding-top: 100%
-
-[data-aspect-ratio="3:4"]:before 
-  padding-top: 133.33%
-
-[data-aspect-ratio="2:3"]:before 
-  padding-top: 150%
-
-[data-aspect-ratio="9:16"]:before 
-  padding-top: 177.77%
-
-[data-aspect-ratio="1:2"]:before 
-  padding-top: 200%
-
-[data-aspect-ratio="1:3"]:before 
-  padding-top: 300%