Skip to content

Commit

Permalink
menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@skayl88
skayl88 committed Dec 22, 2021
1 parent 693981c commit 18e1e5b
Show file tree
Hide file tree
Showing 9 changed files with 1,409 additions and 177 deletions.
Binary file added .DS_Store
View file
Binary file not shown.
1,105 changes: 1,058 additions & 47 deletions package-lock.json
View file

Large diffs are not rendered by default.

Binary file added public/.DS_Store
View file
Binary file not shown.
169 changes: 40 additions & 129 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,152 +1,82 @@
<html>

<head>
<script lang="text/javascript" src="/socket.io/socket.io.js"></script>
<script src="/simple-peer/simplepeer.min.js"></script>

<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<title>WebRTC Demo</title>
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src='main.js' lang="text/javascript"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">

<link rel="stylesheet" href="style.css">

<style>
@import url("https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap");

body {
font-family: "Syne Mono", monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 80px 10px;
}

S .videos {
display: flex;
align-items: center;
justify-content: center;
}

.a-canvas {
width: 100% !important;
height: 100% !important;
}



.local {
display: block;
}

video {
width: 524px;
}

.containers {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 1fr);
grid-template-rows: repeat(auto-fit, 300px);
}

.container {
display: flex;
}

.vid {
flex: 0 1 auto;
height: 400px;
}

.settings {
background-color: #4CAF50;
border: none;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 2px 2px;
cursor: pointer;
}
</style>
</head>

<body>





<header>
<div class="menu_icon">
<span> </span>
</div>
<nav class="menu_body">
<ul>
<li><a href="#">Join Us</a></li>
<li><a href="#">Our Mission</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Enquiries</a></li>
</ul>
</nav>
</header>
<div class="videos">
<div class="local_video">
<span class="local_360 video_mod">

<a-scene background="color: black">

<div class="content">
<div class="title">
<h1>billionair</h1>
<p>The whole world with home comforts</p>

</div>
</div>


<a-scene>
<a-assets id="video_remote_360">
<!-- Single source video. -->

<video id="localVideo" class="" muted autoplay loop crossorigin="anonymous" playsinline
webkit-playsinline>
<!-- MP4 video source. -->

</video>
<video id="localVideo12" src="https://immersive-live-streaming-transcodingegressbucket-1iw3938j3ab6z.s3.eu-west-1.amazonaws.com/360video/Fusion+Baloon+Fly.mp4" class="" autoplay loop crossorigin="anonymous"
playsinline webkit-playsinline>
<video playsinline autoplay muted loop id="localVideo12" src="video/ndp-2.mp4" type="video/mp4"
class="" muted="muted" preload="auto" crossorigin="anonymous" webkit-playsinline>
<!-- MP4 video source. -->

</video>
</a-assets>
<!-- The original example also has this 180 degree rotation, to appear to be going forward. -->
<a-videosphere id="image-360" src="#localVideo12" rotation="0 360 0"
play-on-vrdisplayactivate-or-enter-vr>
<a-videosphere id="image-360" look-controls-enabled="false" muted="muted" src="#localVideo12"
rotation="0 220 0">
</a-videosphere>

<!-- Define camera with zero user height, movement disabled and arrow key rotation added. -->
<a-camera user-height="0" wasd-controls-enabled="false" arrow-key-rotation>
<a-camera user-height="0" look-controls-enabled="false" mouse-cursor="false" rotation-reader>
<!-- Text element for display messaging. Hide once video is playing. -->
<a-video id="local_video" src="#localVideo" width="16" height="12" position="75 -9 -60">
</a-video>
<a-video id="local_video2" src="#rem_video_360" width="16" height="12" position="75 -25 -60">
</a-video>


</a-camera>

<!-- Wait for the video to load. -->

<a-entity id="buttons" visible="true">


<a-entity id="treebutton" rotation="0 -35" position="1.7 0 -1.7" text="value: REMOTE ;"
geometry="primitive: plane; height: 0.25; width: 0.5"
event-set__1="_event: mousedown; scale: 1 1 1"
event-set__2="_event: mouseup; scale: 1.2 1.2 1"
event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
event-set__4="_event: mouseleave; scale: 1 1 1" hide="target: #buttons"
play-video="on:click; target: #local_video; src: #localVideo"></a-entity>
<a-entity></a-entity>

<a-entity id="pondbutton" rotation="0 -90" position="2.5 0 0" text="value:LOCAL ;"
geometry="primitive: plane; height: 0.25; width: 0.5"
event-set__1="_event: mousedown; scale: 1 1 1"
event-set__2="_event: mouseup; scale: 1.2 1.2 1"
event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
event-set__4="_event: mouseleave; scale: 1 1 1" hide="target: #buttons"
play-video="on:click; target: #image-360; src:#localVideo12"></a-entity>
</a-entity>

<a-entity camera look-controls-enabled="false" controls="false">


<a-entity camera look-controls>
<a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: white; shader: flat">
</a-entity>
</a-entity>

</a-scene>
Expand All @@ -155,31 +85,12 @@

</div>

<span class="remoute_video video_mod">
<h3>Remote Stream</h3>
<div id="remoteVideo" class="remote_videos">

</div>


</span>



</div>



<br />
<div style="display:block">
<button id="switchButton" class="settings" onclick="switchMedia()">Switch
Camera</button>
<button id="muteButton" class="settings" onclick="toggleMute()">Unmuted</button>
<button id="vidButton" class="settings" onclick="toggleVid()">Video Enabled</button>
</div>
</body>
<footer>
<script src='/js/main.js' lang="text/javascript"></script>


</footer>
Expand Down
9 changes: 9 additions & 0 deletions public/js/jquery.vide.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion public/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,4 +308,4 @@ AFRAME.registerComponent('play-video', {
data.target.components.material.material.map.image.play();
});
}
});
});
146 changes: 146 additions & 0 deletions public/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@


AFRAME.registerComponent('play-video', {
schema: {
target: { type: 'selector' },
src: { type: 'string' },
on: { default: 'click' },
},

multiple: true,

init: function () {
var data = this.data;

this.el.addEventListener(data.on, function () {
data.target.setAttribute('src', data.src);
data.target.components.material.material.map.image.play();
});
}
});

let x;
let y;
var ax = 0;
var ay = 0;
window.addEventListener('mousemove', function (e) {



});
var timestamp = null;
let lastMouseX;
let lastMouseY;

var a = 0;
window.addEventListener('mousemove', function (e) {
a++;
x = e.clientX / window.innerWidth;
y = e.clientY / window.innerHeight;
if (a > 200) {
a = 0;
timerId();
}

});
function animate(options) {

var start = performance.now();

requestAnimationFrame(function animate(time) {
// timeFraction от 0 до 1
var timeFraction = (time - start) / options.duration;
if (timeFraction > 1) timeFraction = 1;

// текущее состояние анимации
var progress = options.timing(timeFraction)

options.draw(progress);

if (timeFraction < 1) {
requestAnimationFrame(animate);
}

});
}
function makeEaseOut(timing) {

return function (timeFraction) {
return 1 - timing(1 - timeFraction);

}
}

function bounce(timeFraction) {
for (let a = 0, b = 1; 1; a += b, b /= 2) {
if (timeFraction >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
}
}
}

let bounceEaseOut = makeEaseOut(bounce);

let road = 1;
let timerId = () => {

animate({
duration: 1000,
timing: bounceEaseOut,
draw: function (progress) {
ax = ax + ((x - ax) * progress);
ay = ay + ((y - ay) * progress);
}
});
return;

};


// `rotation` is a three.js Euler using radians. `quaternion` also available.


let th;

AFRAME.registerComponent('rotation-reader', {
tick: function () {
// `this.el` is the element.
// `object3D` is the three.js object.
th = this;
if (x > 0.7 && th.el.object3D.rotation.y > -3) {

th.el.object3D.rotation.y = th.el.object3D.rotation.y - 0.005;
}
if (x < 0.3 && th.el.object3D.rotation.y < 3) {

th.el.object3D.rotation.y = th.el.object3D.rotation.y + 0.005;
}


th.el.object3D.rotation.x = 1 - 2 * y;
// `position` is a three.js Vector3.

}

});
function sayHi() {
document.querySelector("#image-360").components.material.material.map.image.play();

}

document.addEventListener("DOMContentLoaded", function (event) {
console.log(1);

setTimeout(sayHi, 2000);
const iconMenu = document.querySelector('.menu_icon');
const menuBody = document.querySelector('.menu_body');
const videoBlock = document.querySelector('.content');
console.log(iconMenu);
iconMenu.addEventListener('click', () => {
iconMenu.classList.toggle('active');
menuBody.classList.toggle('active');
videoBlock.classList.toggle('active');
});
});


Loading

0 comments on commit 18e1e5b

Please sign in to comment.