VR overlay progress bar

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 () {

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

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;
 })();

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")

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;