openlp
/
web-remote
mirror of https://gitlab.com/openlp/web-remote.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix liniting issues

This commit is contained in:
Simon Hanna 2019-10-06 20:34:00 +02:00
parent 83ff26118c
commit 371c9d9e84
6 changed files with 48 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/app.component.ts
View File

@ -11,8 +11,8 @@ import { LoginComponent } from './components/login/login.component';
})
export class AppComponent implements OnInit {
fastSwitching = false;
state: State = new State();
showLogin: boolean = false;
state = new State();
showLogin = false;
constructor(private openlpService: OpenLPService, private dialog: MatDialog) {
openlpService.stateChanged$.subscribe(item => this.state = item);
@ -32,9 +32,9 @@ export class AppComponent implements OnInit {
this.showLogin = false;
this.openlpService.setAuthToken(result.token);
}
})
});
}
nextItem() {
this.openlpService.nextItem().subscribe();
}

4
src/app/components/chord-view/chord-view.component.ts
View File

@ -12,7 +12,7 @@ import { StageViewComponent } from '../stage-view/stage-view.component';
})
export class ChordViewComponent extends StageViewComponent {
transpose: number = 0;
transpose = 0;
transposeUp(): void {
this.transpose++;
@ -28,7 +28,7 @@ export class ChordViewComponent extends StageViewComponent {
}
let chordpro: string = slide.chords_text;
chordpro = chordpro.replace(/<span class="\w*\s*\w*">/g, '');
chordpro = chordpro.replace(/<span>/g, '',);
chordpro = chordpro.replace(/<span>/g, '');
chordpro = chordpro.replace(/<\/span>/g, '');
chordpro = chordpro.replace(/<strong>/g, '[');
chordpro = chordpro.replace(/<\/strong>/g, ']');

46
src/app/components/chord-view/chordpro.pipe.ts
View File

@ -16,13 +16,18 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Pipe({ name: 'chordpro' })
export class ChordProPipe implements PipeTransform {
/**
* @var chordRegex Expression used to determine if given line contains a chord.
* @type {RegExp}
*/
private chordRegex = /\[([^\]]*)\]/;
private readonly MAX_HALF_STEPS = 11;
constructor(private sanitizer: DomSanitizer) {
this.notesSharpNotation['german'] = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','H'];
this.notesFlatNotation['german'] = ['C','Db','D','Eb','Fb','F','Gb','G','Ab','A','B','H'];
this.notesSharpNotation['english'] = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
this.notesFlatNotation['english'] = ['C','Db','D','Eb','Fb','F','Gb','G','Ab','A','Bb','B'];
this.notesSharpNotation['german'] = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'H'];
this.notesFlatNotation['german'] = ['C', 'Db', 'D', 'Eb', 'Fb', 'F', 'Gb', 'G', 'Ab', 'A', 'B', 'H'];
this.notesSharpNotation['english'] = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
this.notesFlatNotation['english'] = ['C', 'Db', 'D', 'Eb', 'Fb', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'];
}
private keys = [
@ -48,17 +53,11 @@ export class ChordProPipe implements PipeTransform {
notesFlatNotation = {};
decodeHTML(value: string) {
const tempElement = document.createElement("div")
tempElement.innerHTML = value
return tempElement.innerText
const tempElement = document.createElement('div');
tempElement.innerHTML = value;
return tempElement.innerText;
}
/**
* @var chordRegex Expression used to determine if given line contains a chord.
* @type {RegExp}
*/
private chordRegex = /\[([^\]]*)\]/;
/**
* Pipe transformation for ChordPro-formatted song texts.
* @param {string} song
@ -66,13 +65,12 @@ export class ChordProPipe implements PipeTransform {
* @returns {string}
*/
transform(song: string, nHalfSteps: number): string|SafeHtml {
let transformed = song;
try {
if (song !== undefined && song) {
return this.sanitizer.bypassSecurityTrustHtml(this.parseToHTML(song, nHalfSteps));
}
else {
return transformed;
return song;
}
}
catch (exception) {
@ -97,7 +95,7 @@ export class ChordProPipe implements PipeTransform {
restOfChord(chord) {
let rest = '';
let root = this.chordRoot(chord);
const root = this.chordRoot(chord);
if (chord.length > root.length) {
rest = chord.substr(root.length);
}
@ -146,20 +144,20 @@ export class ChordProPipe implements PipeTransform {
// becuase it gets messed up when a chord is placed on it..
// shouldn't be relevant if we actually get chordpro format
song = this.decodeHTML(song);
let comp = this;
const comp = this;
if (!song) {
return '';
}
let chordText: string = '';
let lastChord: string = '';
let chordText = '';
let lastChord = '';
if (!song.match(comp.chordRegex)) {
return `<div class="no-chords">${song}</div>`;
}
song.split(comp.chordRegex).forEach((part, index) => {
if (index % 2 == 0) {
if (index % 2 === 0) {
// text
if (lastChord) {
chordText += `<span data-chord="${lastChord}">${part.substring(0, 1)}</span>${part.substring(1)}`
chordText += `<span data-chord="${lastChord}">${part.substring(0, 1)}</span>${part.substring(1)}`;
lastChord = '';
} else {
chordText += part;
@ -169,8 +167,8 @@ export class ChordProPipe implements PipeTransform {
lastChord = part.replace(/[[]]/, '');
if (nHalfSteps !== 0) {
lastChord = lastChord.split('/').map(chord => {
let chordRoot = comp.chordRoot(chord);
let newRoot = comp.transposeChord(chordRoot, nHalfSteps);
const chordRoot = comp.chordRoot(chord);
const newRoot = comp.transposeChord(chordRoot, nHalfSteps);
return newRoot + comp.restOfChord(chord);
}).join('/');
}
@ -182,4 +180,4 @@ export class ChordProPipe implements PipeTransform {
});
return `<div class="with-chords">${chordText}</div>`;
}
}
}

4
src/app/components/login/login.component.ts
View File

@ -20,10 +20,10 @@ export class LoginComponent implements OnInit {
performLogin() {
this.openlpService.login({username: this.username, password: this.password}).subscribe(
result => {
this.snackBar.open('Successfully logged in', '', {duration: 2000})
this.snackBar.open('Successfully logged in', '', {duration: 2000});
this.dialogRef.close(result);
},
err => this.snackBar.open('Login failed', '', {duration: 2000})
)
);
}
}

26
src/app/components/stage-view/stage-view.component.ts
View File

@ -14,9 +14,9 @@ interface Tag {
})
export class StageViewComponent implements OnInit {
currentSlides: Slide[] = [];
activeSlide: number = 0;
activeSlide = 0;
tags: Tag[] = [];
time: Date = new Date();
time = new Date();
constructor(private openlpService: OpenLPService) {
setInterval(() => this.time = new Date(), 1000);
}
@ -35,7 +35,7 @@ export class StageViewComponent implements OnInit {
}
setNewSlides(slides: Slide[]): void {
if (slides.length == 0) {
if (slides.length === 0) {
return;
}
this.currentSlides = slides;
@ -45,29 +45,28 @@ export class StageViewComponent implements OnInit {
/**
* This method updates the tags from the current slides.
*
*
* We add a tag as soon as we know we need it.
* So we start with the first tag and on each tag change we push the new one.
*
*
* If we find the same tag, we check to see if the current slide is a repition.
* In case of a repition we also add a new tag.
*
*
* TODO This approach should work for most cases. It is a primary candidate for a test :-)
*/
updateTags(): void {
this.tags = [];
this.tags.push({"text": this.currentSlides[0].tag, "active": this.currentSlides[0].selected});
let lastIndex : number = 0;
this.tags.push({text: this.currentSlides[0].tag, active: this.currentSlides[0].selected});
let lastIndex = 0;
loop:
for (let index = 1; index < this.currentSlides.length; ++index) {
let foundActive = false;
if (this.currentSlides[index].tag == this.currentSlides[lastIndex].tag) {
if (this.currentSlides[index].tag === this.currentSlides[lastIndex].tag) {
for (let i = 0; i < index - lastIndex; ++i) {
foundActive = foundActive || this.currentSlides[index + i].selected;
// they are different, stop checking and continue outer loop
if (this.currentSlides[lastIndex + i].text != this.currentSlides[index + i].text) {
if (this.currentSlides[lastIndex + i].text !== this.currentSlides[index + i].text) {
// Since we are collapsing tags, we make sure to mark the tag active, if any of the collapsed tags were active
if (foundActive) {
this.tags[this.tags.length - 1].active = foundActive;
@ -77,10 +76,9 @@ export class StageViewComponent implements OnInit {
}
}
// either the tags differed, or we found a repitition. Either way add a tag
this.tags.push({"text": this.currentSlides[index].tag, "active": this.currentSlides[index].selected});
this.tags.push({text: this.currentSlides[index].tag, active: this.currentSlides[index].selected});
this.currentSlides[index].first_slide_of_tag = true;
lastIndex = index;
}
}
}
}

13
src/app/openlp.service.ts
View File

@ -18,7 +18,7 @@ const deserialize = (json, cls) => {
};
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
headers: new HttpHeaders({'Content-Type': 'application/json'});
}
@Injectable()
@ -38,17 +38,16 @@ export class OpenLPService {
this.stateChanged$ = new EventEmitter<State>();
let state:State = null;
this.retrieveSystemInformation().subscribe(info => {
let ws:WebSocket = new WebSocket(`ws://localhost:${info.websocket_port}/state`)
const ws = new WebSocket(`ws://localhost:${info.websocket_port}/state`);
ws.onmessage = (event) => {
let reader = new FileReader()
const reader = new FileReader();
reader.onload = () => {
state = deserialize(JSON.parse(reader.result as string).results, State);
const state = deserialize(JSON.parse(reader.result as string).results, State);
this.stateChanged$.emit(state);
}
};
reader.readAsText(event.data);
}
};
});
}