Commit fd32274f authored by Christopher Fullarton's avatar Christopher Fullarton

Fix automatic sound playback in the lobby, the running countdown and the...

Fix automatic sound playback in the lobby, the running countdown and the countdown end. Fix style issues in the sound manager
parent 525cf6a9
This diff is collapsed.
......@@ -39,12 +39,19 @@
padding: 1rem;
flex-grow: 1;
flex-shrink: 1;
max-width: calc(100% - 1rem);
.markdown-answer {
align-items: center;
display: flex;
height: 100%;
margin-bottom: 0 !important; // Remove bottom margin of marked generated paragraph element
max-width: 100%;
overflow: hidden;
* {
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
......
......@@ -18,6 +18,12 @@
</div>
</div>
<app-audio-player *ngIf="currentQuizService.isOwner && currentQuizService.quiz.sessionConfig?.music.enabled.lobby"
[original_volume]="currentQuizService.quiz.sessionConfig.music.volumeConfig.useGlobalVolume ? currentQuizService.quiz.sessionConfig.music.volumeConfig.global : currentQuizService.quiz.sessionConfig.music.volumeConfig.lobby"
[autostart]="true"
[target]="'lobby'"
[src]="currentQuizService.quiz.sessionConfig.music.titleConfig.lobby"></app-audio-player>
<ngx-qrcode [qrc-value]="qrCodeContent"
qrc-class="qrCodeContent"
qrc-errorCorrectionLevel="L"
......
......@@ -45,7 +45,7 @@ export class QuizLobbyComponent implements OnInit, OnDestroy {
constructor(
private footerBarService: FooterBarService,
private headerLabelService: HeaderLabelService,
private currentQuizService: CurrentQuizService,
public currentQuizService: CurrentQuizService,
private themesService: ThemesService,
private router: Router,
private http: HttpClient,
......
......@@ -68,13 +68,13 @@
</div>
<div *ngIf="currentQuizService.isOwner">
<app-audio-player *ngIf="countdown && countdown.isRunning && countdown.remainingTime && currentQuizService.quiz.sessionConfig && currentQuizService.quiz.sessionConfig.music.countdownRunningEnabled"
<app-audio-player *ngIf="countdown?.isRunning && countdown?.remainingTime && currentQuizService.quiz.sessionConfig?.music.enabled.countdownRunning"
[original_volume]="currentQuizService.quiz.sessionConfig.music.volumeConfig.useGlobalVolume ? currentQuizService.quiz.sessionConfig.music.volumeConfig.global : currentQuizService.quiz.sessionConfig.music.volumeConfig.countdownRunning"
[autostart]="true"
[target]="'countdownRunning'"
[src]="currentQuizService.quiz.sessionConfig.music.titleConfig.countdownRunning"></app-audio-player>
<app-audio-player *ngIf="countdown && countdown.isRunning && !countdown.remainingTime && currentQuizService.quiz.sessionConfig && currentQuizService.quiz.sessionConfig.music.countdownEndEnabled"
<app-audio-player *ngIf="!countdown?.isRunning && !countdown?.remainingTime && !currentQuizService.readingConfirmationRequested && currentQuizService.quiz.sessionConfig?.music.enabled.countdownEnd"
[original_volume]="currentQuizService.quiz.sessionConfig.music.volumeConfig.useGlobalVolume ? currentQuizService.quiz.sessionConfig.music.volumeConfig.global : currentQuizService.quiz.sessionConfig.music.volumeConfig.countdownEnd"
[autostart]="true"
[loop]="false"
......
......@@ -20,7 +20,7 @@
(click)="toggleSelectAnswer(i)"
[style.flex-basis]="currentQuizService.currentQuestion().showOneAnswerPerRow ? '100%' : 'auto'">
<p *ngIf="currentQuizService.currentQuestion().displayAnswerText"
class="mb-0"
class="mb-0 markdown-answer"
[innerHTML]="sanitizeHTML(elem)"></p>
<p *ngIf="!currentQuizService.currentQuestion().displayAnswerText"
class="mb-0"
......
......@@ -11,11 +11,20 @@
padding: 1rem;
flex-grow: 1;
flex-shrink: 1;
max-width: calc(100% - 1rem);
transition: background-color 800ms linear;
&.selected {
background-color: rebeccapurple;
color: #fff;
}
.markdown-answer {
align-items: center;
display: flex;
height: 100%;
max-width: 100%;
overflow: hidden;
}
}
}
@import "../../../../styles_vendor";
.soundConfig {
.modal-content {
.modal-header {
min-height: initial;
}
.modal-body {
#soundTab {
overflow: hidden;
.btn-group {
margin-bottom: 20px;
span {
text-decoration: none;
}
}
#slider-global-volume-description {
text-align: center;
margin: 0;
}
.tab-content {
padding: 5px 15px;
h3 {
margin-bottom: 20px;
}
#countdownRunningSelect,
#lobbySoundSelect,
#countdownEndSelect {
width: 100%;
height: 46px;
padding: 0 10px;
outline: none;
margin-bottom: 20px;
}
}
}
}
}
h3 {
margin-bottom: 20px;
}
#countdownRunningSelect,
#lobbySoundSelect,
#countdownEndSelect {
width: 100%;
height: 46px;
padding: 0 10px;
outline: none;
margin-bottom: 20px;
}
.collapse {
......
......@@ -2,9 +2,9 @@ import {Component, OnDestroy, OnInit} from '@angular/core';
import {FooterBarService} from 'app/service/footer-bar.service';
import {TranslateService} from '@ngx-translate/core';
import {IMusicSessionConfiguration} from 'arsnova-click-v2-types/src/session_configuration/interfaces';
import {ActiveQuestionGroupService} from '../../../service/active-question-group.service';
import {DefaultSettings} from '../../../../lib/default.settings';
import {ISong} from 'arsnova-click-v2-types/src/common';
import {CurrentQuizService} from "../../../service/current-quiz.service";
@Component({
selector: 'app-sound-manager',
......@@ -38,7 +38,7 @@ export class SoundManagerComponent implements OnInit, OnDestroy {
constructor(
private translateService: TranslateService,
private footerBarService: FooterBarService,
private activeQuestionGroupService: ActiveQuestionGroupService) {
private currentQuizService: CurrentQuizService) {
footerBarService.replaceFooterElements([
this.footerBarService.footerElemBack
]);
......@@ -50,7 +50,7 @@ export class SoundManagerComponent implements OnInit, OnDestroy {
this.translateService.get('plugins.sound.whistle').subscribe(value => {
this._countdownEndSounds.push({id: 'Song0', text: value});
});
this._config = this.activeQuestionGroupService.activeQuestionGroup.sessionConfig.music;
this._config = this.currentQuizService.quiz.sessionConfig.music;
this._lobbySongs.push({id: 'Song0', text: 'Happy & fun mood: "Clear day" | Bensound.com'});
this._lobbySongs.push({id: 'Song1', text: 'House music: "House" | Bensound.com'});
......@@ -99,8 +99,8 @@ export class SoundManagerComponent implements OnInit, OnDestroy {
}
ngOnDestroy() {
this.activeQuestionGroupService.activeQuestionGroup.sessionConfig.music = this._config;
this.activeQuestionGroupService.persistForSession();
this.currentQuizService.quiz.sessionConfig.music = this._config;
this.currentQuizService.persistToSessionStorage();
}
}
......@@ -65,6 +65,17 @@ export class CurrentQuizService implements ICurrentQuiz {
}
if (parsedInstance.quiz) {
this.quiz = questionGroupReflection[parsedInstance.quiz.TYPE](parsedInstance.quiz);
if (this._isOwner) {
if (this.quiz.sessionConfig.readingConfirmationEnabled) {
this.footerBarService.footerElemReadingConfirmation.isActive = true;
}
if (this.quiz.sessionConfig.showResponseProgress) {
this.footerBarService.footerElemResponseProgress.isActive = true;
}
if (this.quiz.sessionConfig.confidenceSliderEnabled) {
this.footerBarService.footerElemConfidenceSlider.isActive = true;
}
}
}
}
this.connectionService.initConnection().then(() => {
......@@ -80,16 +91,6 @@ export class CurrentQuizService implements ICurrentQuiz {
public cacheQuiz(quiz: IQuestionGroup): Promise<any> {
return new Promise((resolve => {
if (this._isOwner) {
if (quiz.sessionConfig.readingConfirmationEnabled) {
this.footerBarService.footerElemReadingConfirmation.isActive = true;
}
if (quiz.sessionConfig.showResponseProgress) {
this.footerBarService.footerElemResponseProgress.isActive = true;
}
if (quiz.sessionConfig.confidenceSliderEnabled) {
this.footerBarService.footerElemConfidenceSlider.isActive = true;
}
if (
this._cacheAssets ||
this.settingsService.serverSettings.cacheQuizAssets ||
......
......@@ -3,6 +3,10 @@
[loop]="loop"
[autoplay]="autostart ? 'autoplay' : null"
[src]="apiUrl + target + '/' + src + '.mp3'"></audio>
<div *ngIf="!autostart"
class="input-group mr-5">
<input type="range" [value]="volume" (input)="emitVolumeChange($event)">
</div>
<div *ngIf="!autostart"
class="btn-group">
<button *ngIf="!_isPlaying"
......@@ -21,8 +25,4 @@
<i class="fa fa-stop"></i>
</button>
</div>
<div *ngIf="!autostart"
class="input-group">
<input type="range" [value]="volume" (input)="emitVolumeChange($event)">
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment