Skip to content

Commit

Permalink
feat: show player vdo ninja link in admin page
Browse files Browse the repository at this point in the history
  • Loading branch information
@timotheeg
timotheeg committed Oct 19, 2024
1 parent fb65ca4 commit ab2a4e8
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 5 deletions.
10 changes: 5 additions & 5 deletions domains/MatchRoom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -690,11 +690,11 @@ class MatchRoom extends Room {

if (Array.isArray(message) && message[0] === 'setVdoNinjaURL') {
user.vdo_ninja_url = message[1];
this.state.players
.filter(p => p.id === user.id)
.forEach(p => {
p.vdo_ninja_url = message[1];
});
this.state.players.forEach((p, p_idx) => {
if (p.id !== user.id) return;
p.vdo_ninja_url = user.vdo_ninja_url;
this.tellAdmin(['setVdoNinjaURL', p_idx, user.vdo_ninja_url]);
});
}

this.state.players.forEach((player, p_idx) => {
Expand Down
107 changes: 107 additions & 0 deletions public/views/competition_admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,71 @@ class Player {
};
}

let copying = false;
this.dom.vdo_ninja_url.querySelector('svg.action.clipboard-copy').onclick =
async () => {
if (copying) return;
copying = true;

const icon = this.dom.vdo_ninja_url.querySelector(
'svg.action.clipboard-copy'
);

[...this.dom.vdo_ninja_url.querySelectorAll('svg.result')].forEach(
icon => (icon.style.display = 'none')
);

try {
await navigator.clipboard.writeText(
this.dom.vdo_ninja_url.querySelector('a').href
);
icon.style.display = 'none';
this.dom.vdo_ninja_url.querySelector('svg.success').style.display =
'inline';
} catch (err) {
icon.display = 'none';
this.dom.vdo_ninja_url.querySelector('svg.failure').style.display =
'inline';
console.error('Umable to write to clipboard');
}

setTimeout(() => {
[...this.dom.vdo_ninja_url.querySelectorAll('svg.result')].forEach(
icon => (icon.style.display = 'none')
);
icon.style.display = 'inline';
copying = false;
}, 650);
};

let playing;
this.dom.vdo_ninja_url.querySelector('svg.action.vdo-play').onclick =
async () => {
if (playing) return;
playing = true;

const icon = this.dom.vdo_ninja_url.querySelector(
'svg.action.vdo-play'
);

icon.style.display = 'none';

const iframe = document.createElement('iframe');
iframe.setAttribute(
'allow',
'autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;midi;geolocation;gyroscope;'
);
iframe.src = this.dom.vdo_ninja_url.querySelector('a').href;

this.dom.images.append(iframe);

setTimeout(() => {
iframe.remove();
icon.style.display = 'inline';
playing = false;
}, 30000);
};

this.dom.win_btn.onclick = () => {
remoteAPI.setWinner(this.idx);
};
Expand Down Expand Up @@ -124,6 +189,36 @@ class Player {
this.dom.country_code_img.dataset.url.replace('{code}', country_code);
}

setVdoNinjaURL(url) {
if (!url) {
this.dom.vdo_ninja_url.querySelector('span').replaceChildren();
this.dom.vdo_ninja_url.style.display = 'none';
return;
}

const u = new URL(url);

const streamId = u.searchParams.get('view') || u.searchParams.get('push'); // just in case someone passed the push url

u.searchParams.delete('push');
u.searchParams.set('view', streamId);
u.searchParams.set('cover', 1);
u.searchParams.set('cleanviewer', 1);
u.searchParams.set('cleanoutput', 1);
u.searchParams.set('transparent', 1);
u.searchParams.set('autostart', 1);

const full_url = u.toString();

const a = document.createElement('a');
a.href = full_url;
a.target = '_blank';
a.textContent = url.replace(/^https?:\/\//, '').replace(/&.+$/, '');

this.dom.vdo_ninja_url.querySelector('span').replaceChildren(a);
this.dom.vdo_ninja_url.style.display = 'block';
}

setProducers(producers) {
this.dom.producers.innerHTML = '';

Expand Down Expand Up @@ -210,6 +305,10 @@ class Player {
this.dom.avatar_url.value = state.profile_image_url;
this.dom.avatar_img.src = state.profile_image_url;

if (state.vdo_ninja_url) {
this.setVdoNinjaURL(state.vdo_ninja_url);
}

this.dom.country_code_select.value = state.country_code;
this.setFlag(state.country_code);
}
Expand Down Expand Up @@ -295,6 +394,7 @@ function addPlayer() {
users: player_node.querySelector('.users select'),
name: player_node.querySelector('.name'),
avatar_url: player_node.querySelector('input.avatar'),
images: player_node.querySelector('.images'),
avatar_img: player_node.querySelector('img.avatar'),
country_code_select: player_node.querySelector('select.country_code'),
country_code_img: player_node.querySelector('img.country_code'),
Expand All @@ -306,6 +406,7 @@ function addPlayer() {
camera_restart_btn: player_node.querySelector('.camera_restart'),
camera_mirror_btn: player_node.querySelector('.camera_mirror'),
focus_player_btn: player_node.querySelector('.focus_player'),
vdo_ninja_url: player_node.querySelector('.vdo_ninja_url'),
});

players_node.appendChild(player_node);
Expand Down Expand Up @@ -393,6 +494,12 @@ function bootstrap() {
break;
}

case 'setVdoNinjaURL': {
const [pidx, url] = args;
players[pidx].setVdoNinjaURL(url);
break;
}

case 'setOwner': {
const owner = args[0];
const player_url = `${location.protocol}//${location.host}/room/u/${owner.login}/producer`;
Expand Down
70 changes: 70 additions & 0 deletions views/admin.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,18 @@
height: 60px;
}
iframe {
display: inline-block;
border: solid 1px white;
margin: 0.5em;
width: 106px;
height: 60px;
background: url(/images/Spinner@1x-1.0s-60px-60px.gif);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
#players {
display: flex;
flex-wrap: wrap;
Expand All @@ -112,6 +124,27 @@
cursor: pointer;
}
.vdo_ninja_url {
display: none;
}
.vdo_ninja_url a {
color: white;
text-decoration: none;
}
.vdo_ninja_url a:hover {
color: grey;
}
.vdo_ninja_url svg.result {
display: none;
}
.vdo_ninja_url svg.action {
cursor: pointer;
}
.buttons {
text-align: center;
margin-top: 6px;
Expand Down Expand Up @@ -228,6 +261,43 @@
</select>
</div>
</div>
<div class="vdo_ninja_url">
<span></span>
<svg class="action clipboard-copy" title="Copy to Clipboard" fill="currentColor" height="20px" width="20px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
<g>
<g>
<path d="M480.6,109.1h-87.5V31.4c0-11.3-9.1-20.4-20.4-20.4H31.4C20.1,11,11,20.1,11,31.4v351c0,11.3,9.1,20.4,20.4,20.4h87.5 v77.7c0,11.3,9.1,20.4,20.4,20.4h341.3c11.3,0,20.4-9.1,20.4-20.4v-351C501,118.3,491.9,109.1,480.6,109.1z M51.8,362V51.8h300.4 v57.3H139.3c-11.3,0-20.4,9.1-20.4,20.4V362H51.8z M460.2,460.2H159.7V150h300.4V460.2z"/>
<path d="m233.3,254.4h155.8c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.1-20.4-20.4-20.4h-155.8c-11.3,0-20.4,9.1-20.4,20.4 0,11.2 9.1,20.4 20.4,20.4z"/>
<path d="m233.3,396.6h155.8c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.1-20.4-20.4-20.4h-155.8c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4z"/>
</g>
</g>
</svg>
<svg class="result fail clipboard-fail" fill="currentColor" height="20px" width="20px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
<g>
<g>
<path d="m458.5,93h-84.2v-28.2c0-11.3-9.1-20.4-20.4-20.4h-77.4v-13c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v13h-77.4c-11.3,0-20.4,9.1-20.4,20.4v28.2h-84.4c-11.3,0-20.4,9.1-20.4,20.4v339.7c0,26.4 21.5,47.9 47.9,47.9h350c26.4,0 47.9-21.5 47.9-47.9v-339.6c0-11.3-9.2-20.5-20.4-20.5zm-279.9-7.8h154.8v53.7h-154.8v-53.7zm259.5,367.9c0,3.9-3.2,7-7,7h-350.1c-3.9,0-7-3.2-7-7v-319.2h63.8v25.5c0,11.3 9.1,20.4 20.4,20.4h195.7c11.3,0 20.4-9.1 20.4-20.4v-25.5h63.8v319.2z"/>
<path d="m308,255.3l-76.2,76.2-28.6-26c-8.4-7.6-21.3-7-28.8,1.4-7.6,8.3-7,21.3 1.4,28.8l43,39.1c3.9,3.5 8.8,5.3 13.7,5.3 5.2,0 10.5-2 14.4-6l89.9-89.9c8-8 8-20.9 0-28.9-7.9-8-20.8-8-28.8-2.84217e-14z"/>
</g>
</g>
</svg>
<svg class="result success clipboard-success" fill="currentColor" height="20px" width="20px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
<g>
<g>
<path d="m458.5,93h-84.2v-28.2c0-11.3-9.1-20.4-20.4-20.4h-77.4v-13c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v13h-77.4c-11.3,0-20.4,9.1-20.4,20.4v28.2h-84.4c-11.3,0-20.4,9.1-20.4,20.4v339.7c0,26.4 21.5,47.9 47.9,47.9h350c26.4,0 47.9-21.5 47.9-47.9v-339.6c0-11.3-9.2-20.5-20.4-20.5zm-279.9-7.8h154.8v53.7h-154.8v-53.7zm259.5,367.9c0,3.9-3.2,7-7,7h-350.1c-3.9,0-7-3.2-7-7v-319.2h63.8v25.5c0,11.3 9.1,20.4 20.4,20.4h195.7c11.3,0 20.4-9.1 20.4-20.4v-25.5h63.8v319.2z"/>
<path d="m308,255.3l-76.2,76.2-28.6-26c-8.4-7.6-21.3-7-28.8,1.4-7.6,8.3-7,21.3 1.4,28.8l43,39.1c3.9,3.5 8.8,5.3 13.7,5.3 5.2,0 10.5-2 14.4-6l89.9-89.9c8-8 8-20.9 0-28.9-7.9-8-20.8-8-28.8-2.84217e-14z"/>
</g>
</g>
</svg>
<svg class="action vdo-play" title="Play video locally for 30s" fill="currentColor" height="20px" width="20px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
<g>
<g>
<path d="M464.3,11H47.7C27.5,11,11,27.5,11,47.7v416.5c0,20.3,16.5,36.7,36.7,36.7h416.5c20.3,0,36.7-16.5,36.7-36.7V47.7 C501,27.5,484.5,11,464.3,11z M460.2,460.2H51.8V51.8h408.3V460.2z"/>
<path d="m109.9,413h19v12.6c0,11.3 9.1,20.4 20.4,20.4 11.3,0 20.4-9.1 20.4-20.4v-12.6h232.4c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.1-20.4-20.4-20.4h-232.3v-12.6c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v12.6h-19c-11.3,0-20.4,9.1-20.4,20.4-0.1,11.2 9,20.4 20.3,20.4z"/>
<path d="m181.6,294c10.3,4.2 18.7,0.9 22.4-1.3l128.9-77.4c5.7-3.4 9.1-9 9.1-15 0-6-3.4-11.6-9.1-15l-128.9-77.4c-6.6-4-15.3-4.5-22.4-1.3-7.2,3.2-11.7,9.4-11.7,16.3v154.7c0,6.9 4.4,13.4 11.7,16.4zm31.6-135.6l69.8,41.9-69.8,41.9v-83.8z"/>
</g>
</g>
</svg>
</div>
<div class="images">
<img class="avatar" />
<img class="country_code" data-url="/vendor/country-flag-icons/3x2/{code}.svg" />
Expand Down

0 comments on commit ab2a4e8

Please sign in to comment.