Ainias/wordRotator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Musik lückenlos abspielen & Cookie-Hinweis rescaling angepasst

Browse Source
This commit is contained in:
silas 2018-09-25 12:42:24 +02:00
parent c8c5ccf737
commit 35b2f61d00
9 changed files with 108 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -250,7 +250,6 @@
var error = "There was an Error:\n" + e.message + "\n\nMaybe your Browser is too old."; var error = "There was an Error:\n" + e.message + "\n\nMaybe your Browser is too old.";
alert(error); alert(error);
document.body.innerHTML = error; document.body.innerHTML = error;
} }
</script> </script>
</body> </body>

114
public/js/app.js
View File

@ -1373,6 +1373,12 @@ ThemeManager.themes = [];
ThemeManager.changeListeners = []; ThemeManager.changeListeners = [];
class CookieCompliance { class CookieCompliance {
static async showIfNeeded(cookieContainer) {
let cookieCompliance = new CookieCompliance(cookieContainer);
return cookieCompliance.showIfNeeded();
}
constructor(cookieContainerId) { constructor(cookieContainerId) {
this.cookieContainerId = cookieContainerId; this.cookieContainerId = cookieContainerId;
this.dropCookie = true; this.dropCookie = true;
@ -1381,11 +1387,11 @@ class CookieCompliance {
this.cookieValue = 'true'; this.cookieValue = 'true';
} }
showIfNeeded() async showIfNeeded() {
{
if (CookieCompliance.checkCookie(this.cookieName) !== this.cookieValue) { if (CookieCompliance.checkCookie(this.cookieName) !== this.cookieValue) {
this.show(); return this.show();
} }
return Promise.resolve();
} }
removeMe() { removeMe() {
@ -1429,12 +1435,14 @@ class CookieCompliance {
show() { show() {
let cookieCompliance = this; let cookieCompliance = this;
const cookieMessage = document.getElementById(this.cookieContainerId); const cookieMessage = document.getElementById(this.cookieContainerId);
cookieMessage.style.display='block'; cookieMessage.style.display = 'block';
cookieMessage.querySelector("#close-cookie-msg").onclick = function(){ return new Promise(r => {
cookieCompliance.removeMe(); cookieMessage.querySelector("#close-cookie-msg").onclick = function () {
cookieMessage.remove(); cookieCompliance.removeMe();
}; cookieMessage.remove();
r();
};
});
} }
} }
@ -2343,7 +2351,7 @@ class App {
if (this._showCookieCompliance) if (this._showCookieCompliance)
{ {
new CookieCompliance('cookie-compliance').showIfNeeded(); this._cookieClosePromise = CookieCompliance.showIfNeeded('cookie-compliance');
} }
} }
@ -4675,6 +4683,7 @@ class SoundManager {
constructor() { constructor() {
this.channels = {}; this.channels = {};
this.context = new AudioContext();
} }
set(options, channel) { set(options, channel) {
@ -4687,49 +4696,24 @@ class SoundManager {
let audio = options.audio; let audio = options.audio;
if (Helper.isNotNull(audio)) { if (Helper.isNotNull(audio)) {
let src = null; audioObject.loadedPromise = fetch(audio).then(res => res.arrayBuffer()).then(arrayBuffer => this.context.decodeAudioData(arrayBuffer));
if (typeof audio === "string") {
src = audio;
audio = new Audio();
audioObject.loadedPromise = new Promise((resolve, reject) => {
audio.addEventListener("loadeddata", () => {
resolve();
});
audio.addEventListener("error", (e) => {
console.warn(e);
reject(e);
});
});
audio.src = Helper.basePath(src);
}
else {
audioObject.loadedPromise = Promise.resolve();
}
this.stop(channel); this.stop(channel);
audioObject.audio = audio;
// audio.addEventListener('timeupdate', () => {
// let buffer = 10;
// if (this.channels[channel].audio === audio && this.channels[channel].loop) {
// if (audio.currentTime > audio.duration - buffer) {
// console.log("reset");
// audio.currentTime = 0;
// audio.play();
// }
// }
// }, false);
} }
audioObject.muted = Helper.nonNull(options.muted, audioObject.muted, false); audioObject.muted = Helper.nonNull(options.muted, audioObject.muted, false);
audioObject.volume = Helper.nonNull(options.volume, audioObject.volume, 1); audioObject.volume = Helper.nonNull(options.volume, audioObject.volume, 1);
audioObject.loop = Helper.nonNull(options.loop, audioObject.loop, false); audioObject.loop = Helper.nonNull(options.loop, audioObject.loop, false);
audioObject.timeOffset = Helper.nonNull(options.timeOffset, audioObject.timeOffset, 0); audioObject.timeOffset = Helper.nonNull(options.timeOffset, audioObject.timeOffset, 0);
if (audioObject.muted){
this.stop(channel);
}
this.channels[channel] = audioObject; this.channels[channel] = audioObject;
this._update(channel);
return this.channels[channel]; return this.channels[channel];
} }
play(channel, audioOrOptions) { async play(channel, audioOrOptions) {
channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT); channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT);
if (Helper.isNull(audioOrOptions)) { if (Helper.isNull(audioOrOptions)) {
audioOrOptions = {}; audioOrOptions = {};
@ -4742,10 +4726,17 @@ class SoundManager {
this.stop(channel); this.stop(channel);
this.set(audioOrOptions, channel); this.set(audioOrOptions, channel);
// this._update(channel);
if (!this.channels[channel].muted) { if (!this.channels[channel].muted) {
this.channels[channel].audio.play(); let buffer = await this.channels[channel].loadedPromise;
let source = this.context.createBufferSource();
source.buffer = buffer;
source.connect(this.context.destination);
// source.loopStart = 5;
// source.loopEnd = 5;
source.loop = this.channels[channel].loop;
source.start(0);
this.channels[channel].source = source;
} }
return this.channels[channel]; return this.channels[channel];
} }
@ -4754,22 +4745,10 @@ class SoundManager {
channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT); channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT);
let oldAudio = this.channels[channel]; let oldAudio = this.channels[channel];
if (oldAudio != null) { if (Helper.nonNull(oldAudio) && Helper.nonNull(oldAudio.source)) {
oldAudio.audio.pause(); oldAudio.source.stop();
} }
} }
_update(channel) {
let audioObject = this.channels[channel];
audioObject.audio.currentTime = Helper.nonNull(audioObject.timeOffset, audioObject.audio.currentTime);
audioObject.audio.loop = Helper.nonNull(audioObject.loop, audioObject.audio.loop);
audioObject.audio.volume = Helper.nonNull(audioObject.volume, audioObject.audio.volume);
if (audioObject.muted) {
this.stop(channel);
}
}
get(channel) { get(channel) {
channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT); channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT);
return this.channels[channel]; return this.channels[channel];
@ -5028,20 +5007,17 @@ class ParentSegment extends Segment {
static initListener() { static initListener() {
window.addEventListener("mousedown", (e) => { window.addEventListener("mousedown", (e) => {
ParentSegment.mouseDownTarget = e.target; ParentSegment.mouseDownTarget = e.target;
// ParentSegment.mouseDownTarget = e.originalTarget;
}); });
window.addEventListener("mouseup", (e) => { window.addEventListener("mouseup", (e) => {
ParentSegment.mouseDownTarget = null; ParentSegment.mouseDownTarget = null;
}); });
window.addEventListener("touchstart", (e) => { window.addEventListener("touchstart", (e) => {
console.log("start", e);
if (e.targetTouches.length === 1) { if (e.targetTouches.length === 1) {
ParentSegment.mouseDownTarget = e.targetTouches[0].target; ParentSegment.mouseDownTarget = e.targetTouches[0].target;
} }
}); });
window.addEventListener("touchend", (e) => { window.addEventListener("touchend", (e) => {
console.log("end", e);
ParentSegment.mouseDownTarget = null; ParentSegment.mouseDownTarget = null;
}); });
} }
@ -5070,6 +5046,7 @@ class ParentSegment extends Segment {
self.rotate(); self.rotate();
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
console.log("mouseup", e);
} }
}; };
} }
@ -6095,7 +6072,7 @@ class MenuSite extends WordRotatorBaseSite {
playButton.style.width = levelStyle.getPropertyValue("width"); playButton.style.width = levelStyle.getPropertyValue("width");
scaleHelper.scaleToFull(playButton.children[0], playButton, null, null, null, null, null, false); scaleHelper.scaleToFull(playButton.children[0], playButton, null, null, null, null, null, false);
await scaleHelper.scaleTo(0.17, levelNumber.parentElement, levelNumber.parentElement.parentElement, null, null, null, 10, null, false); await scaleHelper.scaleTo(0.2, levelNumber.parentElement, levelNumber.parentElement.parentElement, null, null, null, 10, null, false);
scaleHelper.scaleToFull(levelNumber, levelNumber.parentElement, false, false, 8, null, null, false); scaleHelper.scaleToFull(levelNumber, levelNumber.parentElement, false, false, 8, null, null, false);
}; };
@ -6129,6 +6106,14 @@ class MenuSite extends WordRotatorBaseSite {
triangleTemplate.remove(); triangleTemplate.remove();
this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate); this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
if (Helper.nonNull(MenuSite.app._cookieClosePromise)) {
MenuSite.app._cookieClosePromise.then(() => {
if (this.listener) {
this.listener();
}
});
}
} }
onPause(args) { onPause(args) {
@ -6137,6 +6122,11 @@ class MenuSite extends WordRotatorBaseSite {
} }
} }
MenuSite.app = null;
InitPromise.addPromise(app => {
MenuSite.app = app;
});
class SynchronizeSite extends WordRotatorBaseSite { class SynchronizeSite extends WordRotatorBaseSite {
constructor(siteManager) { constructor(siteManager) {
@ -6285,7 +6275,7 @@ InitPromise.resolve(app).then(function(){
SettingsSite.settingsAction.showFor = MenuAction.SHOW_ALWAYS; SettingsSite.settingsAction.showFor = MenuAction.SHOW_ALWAYS;
let soundManager = SoundManager.getInstance(); let soundManager = SoundManager.getInstance();
soundManager.play(SoundManager.CHANNELS.MUSIC, {audio: "sound/brightAndBeautifull__.mp3", loop: true, volume: 0.3}); soundManager.play(SoundManager.CHANNELS.MUSIC, {audio: "sound/brightAndBeautifull__.wav", loop: true, volume: 0.3});
app.start(SynchronizeSite); app.start(SynchronizeSite);
Translator.setLanguage("de"); Translator.setLanguage("de");

BIN
public/sound/brightAndBeautifull__.mp3
View File

Binary file not shown.

BIN
public/sound/brightAndBeautifull__.wav Normal file
View File

Binary file not shown.

2
src/js/init.js
View File

@ -59,7 +59,7 @@ InitPromise.resolve(app).then(function(){
SettingsSite.settingsAction.showFor = MenuAction.SHOW_ALWAYS; SettingsSite.settingsAction.showFor = MenuAction.SHOW_ALWAYS;
let soundManager = SoundManager.getInstance(); let soundManager = SoundManager.getInstance();
soundManager.play(SoundManager.CHANNELS.MUSIC, {audio: "sound/brightAndBeautifull__.mp3", loop: true, volume: 0.3}); soundManager.play(SoundManager.CHANNELS.MUSIC, {audio: "sound/brightAndBeautifull__.wav", loop: true, volume: 0.3});
app.start(SynchronizeSite); app.start(SynchronizeSite);
Translator.setLanguage("de"); Translator.setLanguage("de");

65
src/js/lib/pwa-assets.js
View File

@ -119,6 +119,7 @@ class SoundManager {
constructor() { constructor() {
this.channels = {}; this.channels = {};
this.context = new AudioContext();
} }
set(options, channel) { set(options, channel) {
@ -131,49 +132,24 @@ class SoundManager {
let audio = options.audio; let audio = options.audio;
if (Helper.isNotNull(audio)) { if (Helper.isNotNull(audio)) {
let src = null; audioObject.loadedPromise = fetch(audio).then(res => res.arrayBuffer()).then(arrayBuffer => this.context.decodeAudioData(arrayBuffer));
if (typeof audio === "string") {
src = audio;
audio = new Audio();
audioObject.loadedPromise = new Promise((resolve, reject) => {
audio.addEventListener("loadeddata", () => {
resolve();
});
audio.addEventListener("error", (e) => {
console.warn(e);
reject(e);
});
});
audio.src = Helper.basePath(src);
}
else {
audioObject.loadedPromise = Promise.resolve();
}
this.stop(channel); this.stop(channel);
audioObject.audio = audio;
// audio.addEventListener('timeupdate', () => {
// let buffer = 10;
// if (this.channels[channel].audio === audio && this.channels[channel].loop) {
// if (audio.currentTime > audio.duration - buffer) {
// console.log("reset");
// audio.currentTime = 0;
// audio.play();
// }
// }
// }, false);
} }
audioObject.muted = Helper.nonNull(options.muted, audioObject.muted, false); audioObject.muted = Helper.nonNull(options.muted, audioObject.muted, false);
audioObject.volume = Helper.nonNull(options.volume, audioObject.volume, 1); audioObject.volume = Helper.nonNull(options.volume, audioObject.volume, 1);
audioObject.loop = Helper.nonNull(options.loop, audioObject.loop, false); audioObject.loop = Helper.nonNull(options.loop, audioObject.loop, false);
audioObject.timeOffset = Helper.nonNull(options.timeOffset, audioObject.timeOffset, 0); audioObject.timeOffset = Helper.nonNull(options.timeOffset, audioObject.timeOffset, 0);
if (audioObject.muted){
this.stop(channel);
}
this.channels[channel] = audioObject; this.channels[channel] = audioObject;
this._update(channel);
return this.channels[channel]; return this.channels[channel];
} }
play(channel, audioOrOptions) { async play(channel, audioOrOptions) {
channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT); channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT);
if (Helper.isNull(audioOrOptions)) { if (Helper.isNull(audioOrOptions)) {
audioOrOptions = {}; audioOrOptions = {};
@ -186,10 +162,17 @@ class SoundManager {
this.stop(channel); this.stop(channel);
this.set(audioOrOptions, channel); this.set(audioOrOptions, channel);
// this._update(channel);
if (!this.channels[channel].muted) { if (!this.channels[channel].muted) {
this.channels[channel].audio.play(); let buffer = await this.channels[channel].loadedPromise;
let source = this.context.createBufferSource();
source.buffer = buffer;
source.connect(this.context.destination);
// source.loopStart = 5;
// source.loopEnd = 5;
source.loop = this.channels[channel].loop;
source.start(0);
this.channels[channel].source = source;
} }
return this.channels[channel]; return this.channels[channel];
} }
@ -198,22 +181,10 @@ class SoundManager {
channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT); channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT);
let oldAudio = this.channels[channel]; let oldAudio = this.channels[channel];
if (oldAudio != null) { if (Helper.nonNull(oldAudio) && Helper.nonNull(oldAudio.source)) {
oldAudio.audio.pause(); oldAudio.source.stop();
} }
} }
_update(channel) {
let audioObject = this.channels[channel];
audioObject.audio.currentTime = Helper.nonNull(audioObject.timeOffset, audioObject.audio.currentTime);
audioObject.audio.loop = Helper.nonNull(audioObject.loop, audioObject.audio.loop);
audioObject.audio.volume = Helper.nonNull(audioObject.volume, audioObject.audio.volume);
if (audioObject.muted) {
this.stop(channel);
}
}
get(channel) { get(channel) {
channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT); channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT);
return this.channels[channel]; return this.channels[channel];

28
src/js/lib/pwa-lib.js
View File

@ -1373,6 +1373,12 @@ ThemeManager.themes = [];
ThemeManager.changeListeners = []; ThemeManager.changeListeners = [];
class CookieCompliance { class CookieCompliance {
static async showIfNeeded(cookieContainer) {
let cookieCompliance = new CookieCompliance(cookieContainer);
return cookieCompliance.showIfNeeded();
}
constructor(cookieContainerId) { constructor(cookieContainerId) {
this.cookieContainerId = cookieContainerId; this.cookieContainerId = cookieContainerId;
this.dropCookie = true; this.dropCookie = true;
@ -1381,11 +1387,11 @@ class CookieCompliance {
this.cookieValue = 'true'; this.cookieValue = 'true';
} }
showIfNeeded() async showIfNeeded() {
{
if (CookieCompliance.checkCookie(this.cookieName) !== this.cookieValue) { if (CookieCompliance.checkCookie(this.cookieName) !== this.cookieValue) {
this.show(); return this.show();
} }
return Promise.resolve();
} }
removeMe() { removeMe() {
@ -1429,12 +1435,14 @@ class CookieCompliance {
show() { show() {
let cookieCompliance = this; let cookieCompliance = this;
const cookieMessage = document.getElementById(this.cookieContainerId); const cookieMessage = document.getElementById(this.cookieContainerId);
cookieMessage.style.display='block'; cookieMessage.style.display = 'block';
cookieMessage.querySelector("#close-cookie-msg").onclick = function(){ return new Promise(r => {
cookieCompliance.removeMe(); cookieMessage.querySelector("#close-cookie-msg").onclick = function () {
cookieMessage.remove(); cookieCompliance.removeMe();
}; cookieMessage.remove();
r();
};
});
} }
} }
@ -2343,7 +2351,7 @@ class App {
if (this._showCookieCompliance) if (this._showCookieCompliance)
{ {
new CookieCompliance('cookie-compliance').showIfNeeded(); this._cookieClosePromise = CookieCompliance.showIfNeeded('cookie-compliance');
} }
} }

19
src/module/Application/pwa/js/site/MenuSite.js
View File

@ -3,7 +3,7 @@ import {LevelSite} from "./LevelSite";
import {ScaleHelper} from "../../../../../js/lib/pwa-assets"; import {ScaleHelper} from "../../../../../js/lib/pwa-assets";
import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer"; import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer";
import {MainMenuLevel} from "../wordrotator/Level/MainMenuLevel"; import {MainMenuLevel} from "../wordrotator/Level/MainMenuLevel";
import {Helper} from "../../../../../js/lib/pwa-lib"; import {Helper, InitPromise} from "../../../../../js/lib/pwa-lib";
export class MenuSite extends WordRotatorBaseSite { export class MenuSite extends WordRotatorBaseSite {
constructor(siteManager) { constructor(siteManager) {
@ -73,7 +73,7 @@ export class MenuSite extends WordRotatorBaseSite {
playButton.style.width = levelStyle.getPropertyValue("width"); playButton.style.width = levelStyle.getPropertyValue("width");
scaleHelper.scaleToFull(playButton.children[0], playButton, null, null, null, null, null, false); scaleHelper.scaleToFull(playButton.children[0], playButton, null, null, null, null, null, false);
await scaleHelper.scaleTo(0.17, levelNumber.parentElement, levelNumber.parentElement.parentElement, null, null, null, 10, null, false); await scaleHelper.scaleTo(0.2, levelNumber.parentElement, levelNumber.parentElement.parentElement, null, null, null, 10, null, false);
scaleHelper.scaleToFull(levelNumber, levelNumber.parentElement, false, false, 8, null, null, false); scaleHelper.scaleToFull(levelNumber, levelNumber.parentElement, false, false, 8, null, null, false);
}; };
@ -107,10 +107,23 @@ export class MenuSite extends WordRotatorBaseSite {
triangleTemplate.remove(); triangleTemplate.remove();
this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate); this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
if (Helper.nonNull(MenuSite.app._cookieClosePromise)) {
MenuSite.app._cookieClosePromise.then(() => {
if (this.listener) {
this.listener();
}
});
}
} }
onPause(args) { onPause(args) {
window.removeEventListener("resize", this.listener); window.removeEventListener("resize", this.listener);
super.onPause(args); super.onPause(args);
} }
} }
MenuSite.app = null;
InitPromise.addPromise(app => {
MenuSite.app = app;
});

6
src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js
View File

@ -4,20 +4,19 @@ export class ParentSegment extends Segment {
static initListener() { static initListener() {
window.addEventListener("mousedown", (e) => { window.addEventListener("mousedown", (e) => {
ParentSegment.mouseDownTarget = e.target; ParentSegment.mouseDownTarget = e.target;
// ParentSegment.mouseDownTarget = e.originalTarget; ParentSegment.clickPosition = {x: e.clientX, y: e.clientY};
}); });
window.addEventListener("mouseup", (e) => { window.addEventListener("mouseup", (e) => {
ParentSegment.mouseDownTarget = null; ParentSegment.mouseDownTarget = null;
}); });
window.addEventListener("touchstart", (e) => { window.addEventListener("touchstart", (e) => {
console.log("start", e);
if (e.targetTouches.length === 1) { if (e.targetTouches.length === 1) {
ParentSegment.mouseDownTarget = e.targetTouches[0].target; ParentSegment.mouseDownTarget = e.targetTouches[0].target;
ParentSegment.clickPosition = {x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY};
} }
}); });
window.addEventListener("touchend", (e) => { window.addEventListener("touchend", (e) => {
console.log("end", e);
ParentSegment.mouseDownTarget = null; ParentSegment.mouseDownTarget = null;
}); });
} }
@ -46,6 +45,7 @@ export class ParentSegment extends Segment {
self.rotate(); self.rotate();
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
console.log("mouseup", e);
} }
}; };
} }