⬆️ updagrade ar.js to 1.6.0 🚀 deploy scripts and some

puria · puria · commit 2d66232a28a8 · 2018-05-08T00:58:07.000+02:00
💄 to the instant app
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@ pids
 *.pid
 *.seed
 *.pid.lock
+dist
 
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
diff --git a/package.json b/package.json
@@ -4,7 +4,6 @@
   "description": "Post-Internet Era is a multimedia and documentary long-form narrative analyzing post-internet democracies, documenting the rising of new e-models, the ways big datas and technologies are challenging the democratic process from the inside and their impact on environment.",
   "keywords": [
     "ar",
-    "vr",
     "photography",
     "post-internet",
     "e-democracy",
@@ -17,7 +16,7 @@
   "license": "AGPL-3.0",
   "author": {
     "name": "Puria Nafisi Azizi",
-    "email": "puria@achemenide.com"
+    "email": "puria@dyne.org"
   },
   "dependencies": {
     "babel-core": "6",
@@ -30,7 +29,8 @@
   },
   "scripts": {
     "start": "webpack-dev-server --mode development",
-    "build": "webpack --mode production"
+    "build": "webpack --mode production",
+    "deploy": "yarn build && scp -r dist/* pie:www/ar && scp -r src/markup/glint/* pie:www/"
   },
   "devDependencies": {
     "autoprefixer": "^8.2.0",
diff --git a/src/css/style.scss b/src/css/style.scss
@@ -1,6 +1,24 @@
-@import 'theme';
-@import '~bootstrap/scss/bootstrap';
+.popup {
+    position:absolute;
+    z-index:2;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    background:rgba(0,0,0,0.7);
+    opacity:0;
+    visibility:hidden;
+    transition:.3s ease;
 
-.puria {
-    color: $primary;
-}
+    .show-popup & {
+        opacity:1;
+        visibility: visible;
+    }
+
+    & > iframe {
+        position:absolute;
+        top:50px;
+        left:50%;
+        margin-left:-280px;
+    }
+}
diff --git a/src/index.js b/src/index.js
@@ -1,27 +1,32 @@
-import $ from 'jquery'
 import 'bootstrap'
+import $ from 'jquery'
 import style from './css/style.scss'
 
 let found = false
 
 $(() => {
-    const goto_video = () => {
+    const isMarkerFound = () => found
+    const setMarkerFound = (s) => { found = s }
+    const gotoVideo = () => {
         const marker = document.body.querySelector("a-marker")
         if (marker.object3D.visible) {
-            if (found) return
-            found = true
+            if (isMarkerFound()) return
+            setMarkerFound(true)
             $("#media-popup").find("iframe").attr("src", $('a-marker').data('video'))
             $("body").addClass("show-popup")
         }
-        requestAnimationFrame(goto_video)
+        requestAnimationFrame(gotoVideo)
     }
 
-    requestAnimationFrame(goto_video)    
+    requestAnimationFrame(gotoVideo)
 
     $(".popup").on("click", e => {
         e.preventDefault()
         e.stopPropagation()
         $("body").removeClass("show-popup")
+        $("#media-popup").find("iframe").attr("src", '')
+        setMarkerFound(false)
+        requestAnimationFrame(gotoVideo)
     })
     $(".popup > iframe").on("click", e => { e.stopPropagation() })
-})
+})
diff --git a/src/markup/index.html b/src/markup/index.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
     <title>PIE</title>
-    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.5/aframe/examples/vendor/aframe/build/aframe.min.js"></script>
-    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.5/aframe/build/aframe-ar.js"></script>
+    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
+    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.min.js"></script>
 </head>
 <body>
     <div class="popup" id="media-popup">
@@ -16,4 +16,4 @@
         <a-marker preset="hiro" data-video="//www.youtube.com/embed/W_dyqGHBHck?autoplay=1"></a-marker>
     </a-scene>
 </body>
-</html>
+</html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -16,7 +16,7 @@ module.exports = (env, argv) => {
     const images_path = 'img/'
 
     const extract_scss = new wp_extract_text({
-        filename: '[name].[contenthash].css',
+        filename: '[name].css',
         disable: !is_production,
     });
 
@@ -30,14 +30,14 @@ module.exports = (env, argv) => {
             // ]
         },
         output: {
-            filename: is_production? '[chunkhash].js' : '[name].js',
+            filename: is_production? 'index.[hash].js' : '[name].js',
             path: build,
             pathinfo: !is_production, 
         },
         devtool: is_production? '' : 'eval-cheap-module-source-map',
         devServer: { contentBase: build, hot: !is_production, https: true },
         bail: is_production,
-        resolve: { extensions: ['.js'] },    
+        resolve: { extensions: ['.js'] },
 
         module: {
             rules: [
@@ -68,7 +68,7 @@ module.exports = (env, argv) => {
                 },
             ],
         },
-        
+
         plugins: [
             new wp_copy([{ from: images_path, to: images_path }]),
             new wp_image_min({
@@ -88,4 +88,4 @@ module.exports = (env, argv) => {
             new webpack.HotModuleReplacementPlugin()
         ],
     }
-}
+}
diff --git a/yarn.lock b/yarn.lock
