diff --git a/html/src/app.js b/html/src/app.js index efa4233d..1a1b11e7 100644 --- a/html/src/app.js +++ b/html/src/app.js @@ -7825,6 +7825,7 @@ speechSynthesis.getVoices(); $app.methods.updateVrNowPlaying = function () { var json = JSON.stringify(this.nowPlaying); AppApi.ExecuteVrFeedFunction('nowPlayingUpdate', json); + AppApi.ExecuteVrOverlayFunction('nowPlayingUpdate', json); }; $app.methods.formatSeconds = function (duration) { @@ -9618,6 +9619,8 @@ speechSynthesis.getVoices(); $app.data.youTubeApi = configRepository.getBool('VRCX_youtubeAPI'); $app.data.youTubeApiKey = configRepository.getString('VRCX_youtubeAPIKey'); + $app.data.progressPie = configRepository.getBool('VRCX_progressPie'); + var downloadProgressStateChange = function () { this.updateVRConfigVars(); }; @@ -9640,7 +9643,8 @@ speechSynthesis.getVoices(); backgroundEnabled: this.vrBackgroundEnabled, isGameRunning: this.isGameRunning, isGameNoVR: this.isGameNoVR, - downloadProgress: this.downloadProgress + downloadProgress: this.downloadProgress, + progressPie: this.progressPie }; var json = JSON.stringify(VRConfigVars); AppApi.ExecuteVrFeedFunction('configUpdate', json); @@ -14475,6 +14479,8 @@ speechSynthesis.getVoices(); $app.methods.changeYouTubeApi = function () { configRepository.setBool('VRCX_youtubeAPI', this.youTubeApi); + configRepository.setBool('VRCX_progressPie', this.progressPie); + this.updateVRConfigVars(); }; $app.methods.showYouTubeApiDialog = function () { diff --git a/html/src/index.pug b/html/src/index.pug index 229d44a2..88359c8a 100644 --- a/html/src/index.pug +++ b/html/src/index.pug @@ -936,6 +936,9 @@ html div.options-container-item span.name Enabled el-switch(v-model="youTubeApi" @change="changeYouTubeApi") + div.options-container-item + span.name Progress pie overlay for videos + el-switch(v-model="progressPie" @change="changeYouTubeApi") div.options-container-item el-button(size="small" icon="el-icon-caret-right" @click="showYouTubeApiDialog") YouTube API Key div.options-container diff --git a/html/src/vr.js b/html/src/vr.js index 2bcb9763..fcd45cd2 100644 --- a/html/src/vr.js +++ b/html/src/vr.js @@ -13,8 +13,6 @@ Vue.component('marquee-text', MarqueeText); import configRepository from './repository/config.js'; -speechSynthesis.getVoices(); - (async function () { var $app = null; @@ -293,6 +291,16 @@ speechSynthesis.getVoices(); $app.methods.nowPlayingUpdate = function (json) { this.nowPlaying = JSON.parse(json); + if (this.appType === '2') { + var circle = document.querySelector(".np-progress-circle-stroke"); + if (this.config.progressPie && this.nowPlaying.percentage !== 0) { + circle.style.opacity = 0.5; + var circumference = circle.getTotalLength(); + circle.style.strokeDashoffset = circumference - (this.nowPlaying.percentage / 100) * circumference; + } else { + circle.style.opacity = 0; + } + } }; $app.methods.lastLocationUpdate = function (json) { @@ -480,15 +488,6 @@ speechSynthesis.getVoices(); return text; }; - $app.methods.speak = function (text) { - var tts = new SpeechSynthesisUtterance(); - var voices = speechSynthesis.getVoices(); - var voiceIndex = this.config.notificationTTSVoice; - tts.voice = voices[voiceIndex]; - tts.text = text; - speechSynthesis.speak(tts); - }; - $app = new Vue($app); window.$app = $app; })(); diff --git a/html/src/vr.pug b/html/src/vr.pug index ee69bd60..b420c416 100644 --- a/html/src/vr.pug +++ b/html/src/vr.pug @@ -374,5 +374,7 @@ html br span(style="float:right") {{ currentTime | formatDate('YYYY-MM-DD HH:MI:SS AMPM') }} span CPU {{ cpuUsage }}% + svg(v-if="appType === '2'" class="np-progress-circle") + circle(class="np-progress-circle-stroke" cx="60" cy="60" stroke="white" r="30" fill="transparent" stroke-width="60") script(src="vendor.js") script(src="vr.js") diff --git a/html/src/vr.scss b/html/src/vr.scss index 8ebd7eeb..ce4f3d18 100644 --- a/html/src/vr.scss +++ b/html/src/vr.scss @@ -40,7 +40,7 @@ .noty_theme__relax.noty_bar .noty_body, .noty_theme__sunset.noty_bar .noty_body { - font-size: 15px; + font-size: 14px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); } @@ -221,6 +221,21 @@ button { background-color: white; } +.np-progress-circle { + position: absolute; + bottom: -30px; + left: -21px; + width: 120px; + height: 120px; + transform: rotate(270deg) scale(0.5); +} + +.np-progress-circle-stroke { + opacity: 0; + stroke-dasharray: 189; + stroke-dashoffset: 189; +} + .x-friend-item { box-sizing: border-box; display: flex; @@ -256,7 +271,6 @@ button { .x-friend-item > img.avatar { width: 50px; - height: 37.5px; margin-right: 0; margin-left: 5px; border-radius: 2px;