AnotherFoxGuy/overte-synced-video
1
0
Fork 0
Code Issues Activity

Compare commits

base: AnotherFoxGuy:8ec53c551b851584ebf65f33ddd01c2faecf0398
Branches Tags
AnotherFoxGuy:main
..
compare: AnotherFoxGuy:41189d7f4397d78e01deb5ae97e815e5547801a4
Branches Tags
AnotherFoxGuy:main

10 Commits
8ec53c551b ... 41189d7f43

Author SHA1 Message Date
Julian Groß
41189d7f43 Change video URL input field width to 100%. 2025-01-06 14:00:49 +01:00
Julian Groß
a94cf0a2b8 Specify dark mode. 
Fixes black text appearing on very dark background.
 2025-01-06 14:00:49 +01:00
Julian Groß
23b697b81c Remove controls element from html5 video. 
Fixes video player not reacting on 'Touch events' input mode.
 2025-01-06 14:00:49 +01:00
Darlingnotin
d467a54c6c
Update videoSyncServerScript.js 
Adding automatically scaling entity to handle aspect ratio of video playing.
 2024-02-06 14:24:09 -05:00
Darlingnotin
db5730c8a8
Update videoSync.html 
Adding automatically scaling entity to handle aspect ratio of video playing.
 2024-02-06 14:22:31 -05:00
Darlingnotin
b719f32cf3
Update videoSync.html 
Added workaround for onclick in HTML not firing properly.
 2024-02-04 16:57:16 -05:00
Darlingnotin
8dc7e00978
Update videoSync.js 
Added workaround for onclick in the HTML not firing properly.
 2024-02-04 16:55:31 -05:00
Darlingnotin
0ddc1afa1b Revert "Update videoSync.html" 
This reverts commit 8ec53c551b851584ebf65f33ddd01c2faecf0398.
 2021-05-09 08:31:22 -04:00
Darlingnotin
689adc927f
Update videoSyncServerScript.js 2020-12-16 10:46:59 -05:00
Darlingnotin
7b4f6e9659
Update videoSync.js 2020-12-16 10:46:30 -05:00
4 changed files with 50 additions and 7 deletions
Show Stats Expand all files Collapse all files

15
assets/videoSyncInterface.html
View File

@ -41,7 +41,15 @@
cursor: pointer; cursor: pointer;
} }
input[type=text], input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #dddddd;
border-radius: 4px;
box-sizing: border-box;
}
select { select {
width: 450px; width: 450px;
@ -160,6 +168,11 @@
position: relative; position: relative;
top: 1px; top: 1px;
} }
body {
background-color: #333333;
color:white;
}
</style> </style>
</head> </head>

11
videoSync.html
View File

@ -42,12 +42,10 @@
<body bgcolor="#333333"> <body bgcolor="#333333">
<div id="video-container" onclick="requestSync()"> <div id="video-container" onclick="requestSync()">
<video id="video" poster="assets/clickToWatch.png" controls autoplay> <video id="video" poster="assets/clickToWatch.png" autoplay>
<source id="mp4_src" src=" " type="video/webm"> <source id="mp4_src" src=" " type="video/webm">
</video> </video>
</div> </div>
<button id="joinInButton" onclick="requestSync()">Join In</button>
<script> <script>
var firstTime = true; var firstTime = true;
@ -82,7 +80,6 @@
document.getElementById('video').src = messageData.videoUrl; document.getElementById('video').src = messageData.videoUrl;
document.getElementById('video').currentTime = messageData.timeStamp; document.getElementById('video').currentTime = messageData.timeStamp;
firstTime = false; firstTime = false;
document.getElementById("joinInButton").hidden = true;
if (!messageData.videoPlaying) { if (!messageData.videoPlaying) {
var vid = document.getElementById("video"); var vid = document.getElementById("video");
vid.onloadeddata = function () { vid.onloadeddata = function () {
@ -114,7 +111,8 @@
videoUrl: messageData.videoUrl, videoUrl: messageData.videoUrl,
length: v.duration, length: v.duration,
timeStamp: v.currentTime, timeStamp: v.currentTime,
myTimeStamp: myTimeStamp myTimeStamp: myTimeStamp,
aspectRatio: v.videoWidth / v.videoHeight
}; };
EventBridge.emitWebEvent(JSON.stringify(readyEvent)); EventBridge.emitWebEvent(JSON.stringify(readyEvent));
clearInterval(videoLoadedSendMessageInterval); clearInterval(videoLoadedSendMessageInterval);
@ -126,7 +124,6 @@
document.getElementById('video').src = "http://"; document.getElementById('video').src = "http://";
firstTime = true; firstTime = true;
HasBeenClicked = false; HasBeenClicked = false;
document.getElementById("joinInButton").hidden = false;
} else if (messageData.buttonAction == "volumeButtonMinus") { } else if (messageData.buttonAction == "volumeButtonMinus") {
var video = document.getElementById('video'); var video = document.getElementById('video');
var volume = video.volume; var volume = video.volume;
@ -167,6 +164,8 @@
} else if (messageData.action == "videoEnd") { } else if (messageData.action == "videoEnd") {
document.getElementById("video").src = ""; document.getElementById("video").src = "";
document.getElementById('video').poster = "assets/clickToWatch.png" document.getElementById('video').poster = "assets/clickToWatch.png"
} else if (messageData.action == "firstClick") {
requestSync();
} }
}); });

18
videoSync.js
View File

@ -1,3 +1,10 @@
// Copyright (c) 2020 Danielle Arlington.
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, version 3.
// https://www.gnu.org/licenses/gpl-3.0.en.html
(function () { (function () {
var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system"); var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
var videoSyncInterface = Script.resolvePath("assets/videoSyncInterface.html"); var videoSyncInterface = Script.resolvePath("assets/videoSyncInterface.html");
@ -88,10 +95,19 @@
}); });
} }
_entityID = entityID; _entityID = entityID;
Script.addEventHandler(_entityID, "mousePressOnEntity", onFirstClick);
Entities.webEventReceived.connect(onWebEvent); Entities.webEventReceived.connect(onWebEvent);
addButtons(); addButtons();
} }
function onFirstClick() {
Entities.emitScriptEvent(_entityID, JSON.stringify({
action: "firstClick"
}));
console.log("onFirstClick");
Script.removeEventHandler(_entityID, "mousePressOnEntity", onFirstClick);
}
function onWebEvent(uuid, event) { function onWebEvent(uuid, event) {
if (uuid == _entityID || volumeSliderUuid == uuid) { if (uuid == _entityID || volumeSliderUuid == uuid) {
var messageData = JSON.parse(event); var messageData = JSON.parse(event);
@ -275,6 +291,7 @@
actOnButtonPressed("pause"); actOnButtonPressed("pause");
break; break;
case leaveButtonUuid: case leaveButtonUuid:
Script.addEventHandler(_entityID, "mousePressOnEntity", onFirstClick);
console.log("LeaveButtonUuid Yes"); console.log("LeaveButtonUuid Yes");
actOnButtonPressed("leave"); actOnButtonPressed("leave");
buttonsAreActive = false; buttonsAreActive = false;
@ -370,6 +387,7 @@
Script.removeEventHandler(leaveButtonUuid, "mousePressOnEntity", evaluateWhichButtonPressed); Script.removeEventHandler(leaveButtonUuid, "mousePressOnEntity", evaluateWhichButtonPressed);
Script.removeEventHandler(pauseButtonUuid, "mousePressOnEntity", evaluateWhichButtonPressed); Script.removeEventHandler(pauseButtonUuid, "mousePressOnEntity", evaluateWhichButtonPressed);
Script.removeEventHandler(playButtonUuid, "mousePressOnEntity", evaluateWhichButtonPressed); Script.removeEventHandler(playButtonUuid, "mousePressOnEntity", evaluateWhichButtonPressed);
Script.addEventHandler(_entityID, "mousePressOnEntity", onFirstClick);
} }
Messages.messageReceived.connect(onMessageReceived); Messages.messageReceived.connect(onMessageReceived);

13
videoSyncServerScript.js
View File

@ -1,3 +1,10 @@
// Copyright (c) 2020 Danielle Arlington.
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, version 3.
// https://www.gnu.org/licenses/gpl-3.0.en.html
(function () { (function () {
var videoSyncServerScriptUrl = Script.resolvePath("videoSyncServerScript.js"); var videoSyncServerScriptUrl = Script.resolvePath("videoSyncServerScript.js");
var sourceUrl = Script.resolvePath("videoSync.html"); var sourceUrl = Script.resolvePath("videoSync.html");
@ -149,6 +156,12 @@
if (useGatewayServer && gatewayServerConnected) { if (useGatewayServer && gatewayServerConnected) {
ws.send(JSON.stringify(wsNow)); ws.send(JSON.stringify(wsNow));
} }
console.log(JSON.stringify(messageData));
var entity = Entities.getEntityProperties(videoPlayerChannel);
entity.dimensions.y = (entity.dimensions.x / messageData.aspectRatio) + .1
Entities.editEntity(videoPlayerChannel, {
dimensions: entity.dimensions
});
} else if (messageData.action == "play") { } else if (messageData.action == "play") {
timeStamp = messageData.timeStamp; timeStamp = messageData.timeStamp;
if (intervalIsRunning) { if (intervalIsRunning) {