_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'resizeSelect' of github.com:thecodingmachine/workadventure into resizeSelect

Browse Source
This commit is contained in:
GRL 2021-06-02 09:59:44 +02:00
commit e9ec5f26aa
4 changed files with 104 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
front/src/Components/App.svelte
View File

@ -22,31 +22,48 @@
</script> </script>
<div> <div>
{#if $gameOverlayVisibilityStore} {#if $loginSceneVisibleStore}
<MyCamera></MyCamera> <div>
<CameraControls></CameraControls>
{/if}
<div class="absolute-overlay">
{#if $loginSceneVisibleStore}
<LoginScene game={game}></LoginScene> <LoginScene game={game}></LoginScene>
{/if} </div>
{#if $selectCharacterSceneVisibleStore} {/if}
{#if $selectCharacterSceneVisibleStore}
<div>
<SelectCharacterScene game={ game }></SelectCharacterScene> <SelectCharacterScene game={ game }></SelectCharacterScene>
{/if} </div>
{#if $customCharacterSceneVisibleStore} {/if}
<CustomCharacterScene game={ game }></CustomCharacterScene> {#if $customCharacterSceneVisibleStore}
{/if} <div>
{#if $selectCompanionSceneVisibleStore} <CustomCharacterScene game={ game }></CustomCharacterScene>
</div>
{/if}
{#if $selectCompanionSceneVisibleStore}
<div>
<SelectCompanionScene game={ game }></SelectCompanionScene> <SelectCompanionScene game={ game }></SelectCompanionScene>
{/if} </div>
{#if $enableCameraSceneVisibilityStore} {/if}
{#if $enableCameraSceneVisibilityStore}
<div>
<EnableCameraScene game={game}></EnableCameraScene> <EnableCameraScene game={game}></EnableCameraScene>
{/if} </div>
<!-- {#if $menuIconVisible} {/if}
<MenuIcon />
{/if} --> <!--
{#if $helpCameraSettingsVisibleStore} {#if $menuIconVisible}
<div>
<MenuIcon />
</div>
{/if}
-->
{#if $gameOverlayVisibilityStore}
<div>
<MyCamera></MyCamera>
<CameraControls></CameraControls>
</div>
{/if}
{#if $helpCameraSettingsVisibleStore}
<div>
<HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup> <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
{/if} </div>
</div> {/if}
</div> </div>

44
front/src/Components/CameraControls.svelte
View File

@ -34,26 +34,28 @@
</script> </script>
<div class="btn-cam-action"> <div>
<div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore} class:enabled={$requestedScreenSharingState}> <div class="btn-cam-action">
{#if $requestedScreenSharingState} <div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore} class:enabled={$requestedScreenSharingState}>
<img src={monitorImg} alt="Start screen sharing"> {#if $requestedScreenSharingState}
{:else} <img src={monitorImg} alt="Start screen sharing">
<img src={monitorCloseImg} alt="Stop screen sharing"> {:else}
{/if} <img src={monitorCloseImg} alt="Stop screen sharing">
</div> {/if}
<div class="btn-video" on:click={cameraClick} class:disabled={!$requestedCameraState}> </div>
{#if $requestedCameraState} <div class="btn-video" on:click={cameraClick} class:disabled={!$requestedCameraState}>
<img src={cinemaImg} alt="Turn on webcam"> {#if $requestedCameraState}
{:else} <img src={cinemaImg} alt="Turn on webcam">
<img src={cinemaCloseImg} alt="Turn off webcam"> {:else}
{/if} <img src={cinemaCloseImg} alt="Turn off webcam">
</div> {/if}
<div class="btn-micro" on:click={microphoneClick} class:disabled={!$requestedMicrophoneState}> </div>
{#if $requestedMicrophoneState} <div class="btn-micro" on:click={microphoneClick} class:disabled={!$requestedMicrophoneState}>
<img src={microphoneImg} alt="Turn on microphone"> {#if $requestedMicrophoneState}
{:else} <img src={microphoneImg} alt="Turn on microphone">
<img src={microphoneCloseImg} alt="Turn off microphone"> {:else}
{/if} <img src={microphoneCloseImg} alt="Turn off microphone">
{/if}
</div>
</div> </div>
</div> </div>

54
front/src/Components/EnableCamera/EnableCameraScene.svelte
View File

@ -11,6 +11,8 @@
import {onDestroy} from "svelte"; import {onDestroy} from "svelte";
import HorizontalSoundMeterWidget from "./HorizontalSoundMeterWidget.svelte"; import HorizontalSoundMeterWidget from "./HorizontalSoundMeterWidget.svelte";
import cinemaCloseImg from "../images/cinema-close.svg"; import cinemaCloseImg from "../images/cinema-close.svg";
import cinemaImg from "../images/cinema.svg";
import microphoneImg from "../images/microphone.svg";
export let game: Game; export let game: Game;
let selectedCamera : string|null = null; let selectedCamera : string|null = null;
@ -89,27 +91,33 @@
<section class="selectWebcamForm"> <section class="selectWebcamForm">
{#if $cameraListStore.length > 1 } {#if $cameraListStore.length > 1 }
<div class="nes-select"> <div class="control-group">
<select bind:value={selectedCamera} on:change={selectCamera}> <img src={cinemaImg} alt="Camera" />
{#each $cameraListStore as camera} <div class="nes-select">
<option value={camera.deviceId}> <select bind:value={selectedCamera} on:change={selectCamera}>
{normalizeDeviceName(camera.label)} {#each $cameraListStore as camera}
</option> <option value={camera.deviceId}>
{/each} {normalizeDeviceName(camera.label)}
</select> </option>
</div> {/each}
</select>
</div>
</div>
{/if} {/if}
{#if $microphoneListStore.length > 1 } {#if $microphoneListStore.length > 1 }
<div class="nes-select"> <div class="control-group">
<select bind:value={selectedMicrophone} on:change={selectMicrophone}> <img src={microphoneImg} alt="Microphone" />
{#each $microphoneListStore as microphone} <div class="nes-select">
<option value={microphone.deviceId}> <select bind:value={selectedMicrophone} on:change={selectMicrophone}>
{normalizeDeviceName(microphone.label)} {#each $microphoneListStore as microphone}
</option> <option value={microphone.deviceId}>
{/each} {normalizeDeviceName(microphone.label)}
</select> </option>
</div> {/each}
</select>
</div>
</div>
{/if} {/if}
</section> </section>
@ -163,6 +171,16 @@
font-size: 200%; font-size: 200%;
} }
.control-group {
display: flex;
flex-direction: row;
img {
width: 30px;
margin-right: 10px;
}
}
.webrtcsetup{ .webrtcsetup{
margin-top: 2vh; margin-top: 2vh;
margin-left: auto; margin-left: auto;

10
front/style/style.scss
View File

@ -1212,13 +1212,15 @@ div.action.danger p.action-body{
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
.absolute-overlay { & > div {
position: absolute; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
& > * { & > div {
position: relative; position: absolute;
width: 100%;
height: 100%;
} }
} }
} }