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;