Omniperium improvements

service-worker.js

@@ -27,10 +27,10 @@ var LOAD_FILES_USEFUL = ["/src/fonts/normative/index.css"].concat(["illusion.jpg
 var LOAD_FILES_STATIC = ["sfx/md/hero_decorative-celebration-02", "sfx/md/navigation_selection-complete-celebration", "sfx/md/navigation_transition-left", "sfx/md/state-change_confirm-down", "sfx/md/ui_lock", "sfx/md/ui_unlock", "sfx/md/ui_scan", "sfx/md/alert_high-intensity", "sfx/md/navigation_transition-right", "voice/cn/accessing_memory", "voice/cn/complete", "voice/cn/please_wait", "voice/cn/data_upload", "voice/cn/processing", "voice/cn/enhanced", "voice/cn/rewriting_deep_layer_protocols", "voice/cn/vision_activated", "voice/cn/vision_deactivated", "voice/cn/filtering", "music/redeclipse/track_09"].map(F_SND).concat(["presentation", "tutorial", "create", "enhanced", "pixelated", "upload", "share1", "joke1", "create", "enhanced", "pixelated", "presentation", "presentation2", "sponsors", "tutorial", "upload", "labintro", "share2", "share3", "share4", "share5", "share6", "share7", "joke2", "joke3", "joke4", "joke5", "joke6", "joke7", "joke8", "joke9", "joke10", "joke11"].map(F_VID));
 
 // Cache names
-var REQUIRED_CACHE = "unless-update-cache-v1079-required";
-var USEFUL_CACHE = "unless-update-cache-v1079-useful";
-var STATIC_CACHE = "unless-update-cache-v1079-static";
-var OTHER_CACHE = "unless-update-cache-v1079-other";
+var REQUIRED_CACHE = "unless-update-cache-v1080-required";
+var USEFUL_CACHE = "unless-update-cache-v1080-useful";
+var STATIC_CACHE = "unless-update-cache-v1080-static";
+var OTHER_CACHE = "unless-update-cache-v1080-other";
 
 // Regular expressions for chunk matching
 var MAIN_CHILD_CHUNK_REGEX = /chunk_(main_[a-z0-9]+)\.min\.js$/i;

src/js/components/NaviguateOmniperium.js

@@ -4,7 +4,8 @@ import withStyles from "@material-ui/core/styles/withStyles";
 import Dialog from "@material-ui/core/Dialog";
 import OmniperiumMenu from "../icons/OmniperiumMenu";
 import actions from "../actions/utils";
-import RestrictedArea from "../icons/RestrictedArea";
+import InfoIcon from "@material-ui/icons/Info";
+import IconButton from "@material-ui/core/IconButton";
 
 const styles = theme => ({
     dialogMobileFullscreen: {
@@ -17,7 +18,7 @@ const styles = theme => ({
             overflow: "hidden"
         },
         "& .MuiBackdrop-root": {
-            background: "rgba(1,3,15,0.9)",
+            background: "rgba(1,3,15,0.57)",
         },
         "& svg:first-child": {
             //filter: "drop-shadow(0px 0px 24px #0c00ffaa) drop-shadow(0px 0px 12px #0a00db55) drop-shadow(0px 0px 6px #0900bb66) drop-shadow(0px 0px 3px #07008f77)"
@@ -34,11 +35,11 @@ const styles = theme => ({
         cursor: "pointer",
         animationFillMode: "both",
         animationName: "$glitch",
-        animationDuration: "500ms",
+        animationDuration: "750ms",
         animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
         animationDirection: "alternate",
         animationIterationCount: "1",
-        animationDelay: "350ms",
+        animationDelay: "750ms",
     },
     restrictedSVG: {
         animationFillMode: "both",
@@ -60,12 +61,14 @@ const styles = theme => ({
 });
 
 
-class ActivateLab extends React.PureComponent {
+class NavigateOmniperium extends React.PureComponent {
 
     constructor(props) {
         super(props);
         this.st4te = {
             classes: props.classes,
+            hover: "welcome",
+            video: {pause: function (){}},
             open: props.open
         };
     };
@@ -90,7 +93,19 @@ class ActivateLab extends React.PureComponent {
 
     omniperium_naviguate = (path) => {
 
-        actions.trigger_omniperium_menu(path)
+        actions.trigger_omniperium_menu(path);
+    }
+
+    omniperium_hover = (path) => {
+        if(path !== this.st4te.hover) {
+            //this.st4te.video.pause();
+            this.setSt4te({hover: path}, () => {
+                this.forceUpdate(( ) => {
+                    document.getElementById("explanation-video").play();
+                });
+            });
+        }
+
     }
 
     componentDidMount() {
@@ -111,27 +126,12 @@ class ActivateLab extends React.PureComponent {
                 this.forceUpdate(() => {
                     if(open_changed) {
                         if(this.st4te.open) {
-
-                            try {
-                                var video = document.getElementById("explanation-video");
-                                video.play();
-                            } catch(e){}
                             try {
-                                var video = document.getElementById("particles-video");
-                                video.play();
+                                document.getElementById("particles-video").play();
+                                document.getElementById("explanation-video").play();
+                                document.getElementById("particles-background-video").play();
                             } catch(e){}
-
                         }else {
-
-                            try {
-                                var video = document.getElementById("presentation-video");
-                                video.play();
-                            }catch(e){}
-
-                            try {
-                                var video = document.getElementById("explanation-video");
-                                video.pause();
-                            } catch(e){}
                         }
                     }
                 });
@@ -151,7 +151,8 @@ class ActivateLab extends React.PureComponent {
 
         const {
             classes,
-            open
+            open,
+            hover
         } = this.st4te;
 
         return (
@@ -162,17 +163,24 @@ class ActivateLab extends React.PureComponent {
                         onClose={this.props.onClose}
                         disablePortal={true}
                         keepMounted={true}>
-                    <OmniperiumMenu onPathChange={(path) => {this.omniperium_naviguate(path)}} className={classes.activateSVG} style={{height: "min(75vh, 75vw)", width: "min(75vh, 75vw)", margin: "auto"}}/>
+                    <OmniperiumMenu onHoverPathChange={(path) => {this.omniperium_hover(path)}} onPathChange={(path) => {this.omniperium_naviguate(path)}} className={classes.activateSVG} style={{height: "min(75vh, 75vw)", width: "min(75vh, 75vw)", margin: "auto"}}/>
                 </Dialog>
-                <video width="720" height="720" style={{display: open ? "inherit": "none",  pointerEvents: "none", zIndex: "1500", cursor: "pointer", aspectRatio: "1 / 1", width: "360px", height: "360px", position: "fixed", left: "0%", bottom: "0%", mixBlendMode: "screen"}} autoPlay={false} id="explanation-video">
-                    <source src="/src/videos/omniperium.mp4" type="video/mp4"/>
+                <img src="/src/videos/omniperium/poster.jpg" width="720" height="720" style={{display: open ? "inherit": "none",  pointerEvents: "none", zIndex: "1500", cursor: "pointer", aspectRatio: "1 / 1", width: "min(300px, 19vw)", height: "min(300px, 19vw)", position: "fixed", left: "0%", bottom: "0%", mixBlendMode: "color-dodge"}}/>
+                <video width="720" height="720" style={{display: open ? "inherit": "none",  pointerEvents: "none", zIndex: "1500", cursor: "pointer", aspectRatio: "1 / 1", width: "min(300px, 19vw)", height: "min(300px, 19vw)", position: "fixed", left: "0%", bottom: "0%", mixBlendMode: "screen"}}  key={hover} autoPlay={open} id="explanation-video">
+                    <source src={"/src/videos/omniperium/"+hover+".mp4"} type="video/mp4"/>
+                </video>
+                <video width="1920" height="1080" style={{display: open ? "inherit": "none", zIndex: "1401", pointerEvents: "none", minWidth: "100vw", aspectRatio: "16 / 9", position: "fixed", left: "0", bottom: "0", mixBlendMode: "screen"}} id="particles-video" loop={false}>
+                    <source src="/src/videos/particles3.mp4" type="video/mp4"/>
                 </video>
-                <video width="1920" height="1080" style={{display: open ? "inherit": "none", zIndex: "1400", pointerEvents: "none", minWidth: "100vw", aspectRatio: "16 / 9", position: "fixed", left: "0", bottom: "0", mixBlendMode: "screen"}} autoPlay={false} id="particles-video" loop={false}>
-                    <source src="/src/videos/omnintro.mp4" type="video/mp4"/>
+                <video width="1920" height="1080" style={{display: open ? "inherit": "none", zIndex: "1400", pointerEvents: "none", minWidth: "100vw", aspectRatio: "16 / 9", position: "fixed", left: "0", bottom: "0", mixBlendMode: "color-dodge"}} id="particles-background-video" key={open} autoPlay={open} loop={open}>
+                    <source src="/src/videos/particles.mp4" type="video/mp4"/>
                 </video>
+                <IconButton style={{position: "absolute", top: 16, right: 16, color: "white", zIndex: "1402",}} onClick={() => {this.omniperium_hover("explanation")}}>
+                    <InfoIcon style={{color: "currentColor"}}/>
+                </IconButton>
             </React.Fragment>
         );
     }
 }
 
-export default withStyles(styles)(ActivateLab);
+export default withStyles(styles)(NavigateOmniperium);

src/js/icons/OmniperiumMenu.js

@@ -9,12 +9,16 @@ export default class OmniperiumMenu extends React.PureComponent {
         };
     }
 
-    change_active_path = (path) => {
+    change_active_path = (path, name) => {
 
         this.setState({
             _active_path: path
         }, () => {
 
+            if(typeof this.props.onHoverPathChange === "function"){
+                this.props.onHoverPathChange(name);
+            }
+
             this.forceUpdate();
         })
     };
@@ -115,7 +119,7 @@ export default class OmniperiumMenu extends React.PureComponent {
                                     />
                                 </radialGradient>
                                 <path
-                                    onPointerEnter={() => {this.change_active_path("m429.99 369.379-91.463 158.418H155.601L64.138 369.379l91.463-158.418h182.926l91.463 158.418z", "attributes")}}
+                                    onPointerEnter={() => {this.change_active_path("m429.99 369.379-91.463 158.418H155.601L64.138 369.379l91.463-158.418h182.926l91.463 158.418z", "documentation")}}
                                     onClick={() => {this.click_path("documentation")}}
                                     fill="url(#b)"
                                     fillRule="evenodd"
@@ -162,7 +166,7 @@ export default class OmniperiumMenu extends React.PureComponent {
                                 </radialGradient>
                                 <path
                                     fill="url(#c)"
-                                    onPointerEnter={() => {this.change_active_path("m725.59 200.384-91.463 158.419H451.201l-91.463-158.419 91.463-158.418h182.926l91.463 158.418z", "methods")}}
+                                    onPointerEnter={() => {this.change_active_path("m725.59 200.384-91.463 158.419H451.201l-91.463-158.419 91.463-158.418h182.926l91.463 158.418z", "guides")}}
                                     onClick={() => {this.click_path("guides")}}
                                     fillRule="evenodd"
                                     d="m725.59 200.384-91.463 158.419H451.201l-91.463-158.419 91.463-158.418h182.926l91.463 158.418z"
@@ -208,7 +212,7 @@ export default class OmniperiumMenu extends React.PureComponent {
                                 </radialGradient>
                                 <path
                                     fill="url(#d)"
-                                    onPointerEnter={() => {this.change_active_path("m1022.702 369.379-91.463 158.418H748.313L656.85 369.379l91.463-158.418h182.926l91.463 158.418z", "metrics")}}
+                                    onPointerEnter={() => {this.change_active_path("m1022.702 369.379-91.463 158.418H748.313L656.85 369.379l91.463-158.418h182.926l91.463 158.418z", "analytics")}}
                                     onClick={() => {this.click_path("analytics")}}
                                     fillRule="evenodd"
                                     d="m1022.702 369.379-91.463 158.418H748.313L656.85 369.379l91.463-158.418h182.926l91.463 158.418z"
@@ -254,7 +258,7 @@ export default class OmniperiumMenu extends React.PureComponent {
                                 </radialGradient>
                                 <path
                                     fill="url(#e)"
-                                    onPointerEnter={() => {this.change_active_path("m1022.702 708.893-91.463 158.419H748.313L656.85 708.893l91.463-158.418h182.926l91.463 158.418z", "control")}}
+                                    onPointerEnter={() => {this.change_active_path("m1022.702 708.893-91.463 158.419H748.313L656.85 708.893l91.463-158.418h182.926l91.463 158.418z", "dashboard")}}
                                     onClick={() => {this.click_path("dashboard")}}
                                     fillRule="evenodd"
                                     d="m1022.702 708.893-91.463 158.419H748.313L656.85 708.893l91.463-158.418h182.926l91.463 158.418z"
@@ -300,7 +304,7 @@ export default class OmniperiumMenu extends React.PureComponent {
                                 </radialGradient>
                                 <path
                                     fill="url(#f)"
-                                    onPointerEnter={() => {this.change_active_path("m725.59 882.295-91.463 158.418H451.201l-91.463-158.418 91.463-158.419h182.926l91.463 158.419z", "disruptions")}}
+                                    onPointerEnter={() => {this.change_active_path("m725.59 882.295-91.463 158.418H451.201l-91.463-158.418 91.463-158.419h182.926l91.463 158.419z", "reports")}}
                                     onClick={() => {this.click_path("reports")}}
                                     fillRule="evenodd"
                                     d="m725.59 882.295-91.463 158.418H451.201l-91.463-158.418 91.463-158.419h182.926l91.463 158.419z"
@@ -347,7 +351,7 @@ export default class OmniperiumMenu extends React.PureComponent {
                                 <path
                                     fill="url(#g)"
                                     onPointerEnter={() => {this.change_active_path("m429.992 708.893-91.463 158.419H155.603L64.138 708.893l91.465-158.418h182.926l91.463 158.418z", "viability")}}
-                                    onClick={() => {this.click_path("actions")}}
+                                    onClick={() => {this.click_path("viability")}}
                                     fillRule="evenodd"
                                     d="m429.992 708.893-91.463 158.419H155.603L64.138 708.893l91.465-158.418h182.926l91.463 158.418z"
                                 />