elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-24 11:58:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Tweak Reusable Invite generator UI

Browse Source 
Separates settings in groups to improve further expansion of available toggles
Increases margins and padding
This commit is contained in:
Joel Calado 2020-08-27 08:30:11 +01:00
parent 75ba4f4b4d
commit b31248c191
2 changed files with 82 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
index.html
View File

@ -361,73 +361,76 @@
<br /> <br />
<br /> <br />
<div style="margin: 20px; max-width: 400px; text-align: left; margin: auto auto;"> <div style="margin: 20px; max-width: 400px; text-align: left; margin: auto auto;">
<br /> <div class="invite_setting_group">
<h4 style="padding: 0 0 10px 0;"> <h4>
<i> <span data-translate="advanced-paramaters">Advanced Options</span>
<span data-translate="advanced-paramaters">Advanced Options:</span> </h4>
</i> <div class="invite_setting_item">
</h4> <input type="checkbox" id="invite_bitrate" />
<br /> <label for="invite_bitrate">
<input type="checkbox" id="invite_bitrate" /> <span data-translate="unlock-video-bitrate">Unlock Video Bitrate (20mbps)</span>
<label for="invite_bitrate"> </label>
<span data-translate="unlock-video-bitrate">Unlock Video Bitrate (20mbps)</span> </div>
</label> <div class="invite_setting_item">
<br /> <input type="checkbox" id="invite_vp9" />
<input type="checkbox" id="invite_vp9" /> <label for="invite_vp9">
<label for="invite_vp9"> <span data-translate="force-vp9-video-codec">Force VP9 Video Codec (less artifacting)</span>
<span data-translate="force-vp9-video-codec">Force VP9 Video Codec (less artifacting)</span> </label>
</label> </div>
<br /> <div class="invite_setting_item">
<input type="checkbox" id="invite_stereo" /> <input type="checkbox" id="invite_stereo" />
<label for="invite_stereo"> <label for="invite_stereo">
<span data-translate="enable-stereo-and-pro">Enable Stereo and Pro HD Audio</span> <span data-translate="enable-stereo-and-pro">Enable Stereo and Pro HD Audio</span>
</label> </label>
<br /> </div>
<br /> <div class="invite_setting_item">
<label for="invite_quality" data-translate="video-resolution">Video Resolution: </label> <label for="invite_quality" data-translate="video-resolution">Video Resolution: </label>
<select id="invite_quality" name="invite_quality"> <select id="invite_quality" name="invite_quality">
<option value="-1" selected>User Selectable</option> <option value="-1" selected>User Selectable</option>
<option value="0">Maximum Resolution</option> <option value="0">Maximum Resolution</option>
<option value="1">Balanced</option> <option value="1">Balanced</option>
<option value="2">Smooth and Cool</option> <option value="2">Smooth and Cool</option>
</select> </select>
<br /> </div>
<br /> </div>
<input type="checkbox" id="invite_secure" /> <div class="invite_setting_group">
<label for="invite_secure"> <div class="invite_setting_item">
<span data-translate="high-security-mode">High Security Mode</span> <input type="checkbox" id="invite_secure" />
</label> <label for="invite_secure">
<br /> <span data-translate="high-security-mode">High Security Mode</span>
<input type="checkbox" id="invite_hidescreen" /> </label>
<label for="invite_hidescreen"> </div>
<span data-translate="hide-screen-share">Hide Screenshare Option</span> <div class="invite_setting_item">
</label> <input type="checkbox" id="invite_hidescreen" />
<br /> <label for="invite_hidescreen">
<input type="checkbox" id="invite_remotecontrol" /> <span data-translate="hide-screen-share">Hide Screenshare Option</span>
<label for="invite_remotecontrol"> </label>
<span data-translate="allow-remote-control">Remote Control Camera Zoom (android)</span> </div>
</label> <div class="invite_setting_item">
<br /> <input type="checkbox" id="invite_remotecontrol" />
<br /> <label for="invite_remotecontrol">
<span data-translate="add-a-password-to-stream"> Add a password:</span> <span data-translate="allow-remote-control">Remote Control Camera Zoom (android)</span>
<input id="invite_password" placeholder="Add an optional password" /> </label>
<br /> </div>
<br /> <div class="invite_setting_item">
<span data-translate="add-the-guest-to-a-room"> Add the guest to a room:</span> <span data-translate="add-a-password-to-stream"> Add a password:</span>
<input id="invite_joinroom" placeholder="Enter Room name here" oninput="document.getElementById('invitegroupchat').style.display='block';" /> <input id="invite_password" placeholder="Add an optional password" />
<br /> </div>
<br /> <div class="invite_setting_item">
<span id="invitegroupchat" style="display: none;"> <span data-translate="add-the-guest-to-a-room"> Add the guest to a room:</span>
<label for="invite_group_chat_type" data-translate="invite-group-chat-type">This room guest can:</label> <input id="invite_joinroom" placeholder="Enter Room name here" oninput="document.getElementById('invitegroupchat').style.display='block';" />
<select id="invite_group_chat_type" name="invite_group_chat_type"> </div>
<option value="0" selected data-translate="can-see-and-hear">Can see and hear the group chat</option> <div class="invite_setting_item">
<option value="1" data-translate="can-hear-only">Can only hear the group chat</option> <span id="invitegroupchat" style="display: none;">
<option value="2" data-translate="cant-see-or-hear">Cannot hear or see the group chat</option> <label for="invite_group_chat_type" data-translate="invite-group-chat-type">This room guest can:</label>
</select> <select id="invite_group_chat_type" name="invite_group_chat_type">
</span> <option value="0" selected data-translate="can-see-and-hear">Can see and hear the group chat</option>
<br /> <option value="1" data-translate="can-hear-only">Can only hear the group chat</option>
<br /> <option value="2" data-translate="cant-see-or-hear">Cannot hear or see the group chat</option>
<br /> </select>
</span>
</div>
</div>
<div>See the <div>See the
<a style="text-decoration: none; color: blue;" target="_blank" href="https://docs.obs.ninja/advanced">documentation</a> for more options and info. <a style="text-decoration: none; color: blue;" target="_blank" href="https://docs.obs.ninja/advanced">documentation</a> for more options and info.
</div> </div>

12
main.css
View File

@ -1281,3 +1281,15 @@ input[type=checkbox]
} }
} }
/* Invite link generator */
.invite_setting_group {
margin: 20px 0px;
background-color: #d2d2d2;
padding: 10px;
}
.invite_setting_group h4 {
margin:10px 0px 20px;
}
.invite_setting_item {
margin: 10px 0px;
}