changes:

+ closes #136
+ display player errors in ui

src/components/Charts.vue

@@ -4,6 +4,7 @@ import { ref, reactive, watch, onMounted } from 'vue';
 import AlbumItem from '@/components/AlbumItem.vue';
 import SongItem from '@/components/SongItem.vue';
 
+import { useStore } from '@/scripts/util.js';
 import { getJsonHyp } from '@/scripts/fetch.js';
 
 import { useResults, useArtist } from '@/stores/results.js';
@@ -13,6 +14,7 @@ defineEmits(['play-urls']);
 
 const { getArtist } = useArtist(),
   results = useResults(),
+  store = useStore(),
   { t } = useI18n();
 
 const id = ref(''),
@@ -30,7 +32,7 @@ async function getCharts() {
   console.log(json);
 
   if (!id.value)
-    id.value = json.options.all.find(i => i.title == json.options.default).id;
+    id.value = json.options.all.find(i => store.cc ? i.id == store.cc : i.title == json.options.default).id;
 
   for (const country of json.options.all) {
     const locId = `countries.${country.id}`,

src/components/Player.vue

@@ -1,12 +1,12 @@
 <script setup>
 import { ref, watch, onMounted, onBeforeUnmount, onUnmounted } from 'vue';
-import { useManifest } from '@/scripts/util.js';
 
 import muxjs from 'mux.js';
 window.muxjs = muxjs;
 
-import { useStore, useRoute } from '@/scripts/util.js';
+import { useStore, useRoute, useManifest } from '@/scripts/util.js';
 import { useData, usePlayer } from '@/stores/player.js';
+import { useAlert } from '@/stores/misc';
 
 const player = usePlayer(),
   data = useData(),
@@ -108,7 +108,8 @@ async function Stream() {
         }
       })
       .catch(err => {
-        console.error('Code: ' + err.code, err);
+        console.error(err);
+        useAlert.add('error: ' + e.code)
       });
   }
 }

src/components/Prefs.vue

@@ -23,7 +23,8 @@ const { t, setupLocale } = useI18n(),
   hypInstances = ref([]),
   next = ref(false),
   compact = ref(false),
-  prm = ref(false);
+  prm = ref(false),
+  cc = ref(false);
 
 getJson('https://piped-instances.kavin.rocks')
   .then(i => i || getJson('https://instances.tokhmi.xyz'))
@@ -116,6 +117,7 @@ onMounted(() => {
   getStoreBool('next', next, true);
   getStoreBool('compact', compact, false);
   getStoreBool('prm', prm, false);
+  getStoreBool('cc', cc, false);
 });
 </script>
 
@@ -168,6 +170,17 @@ onMounted(() => {
     </option>
   </select>
 
+  <div class="left">
+    <input
+      type="checkbox"
+      name="pref-chk-cc"
+      id="pref-chk-cc"
+      class="input"
+      @change="setStore('to_cc', $event.target.checked)"
+      v-model="cc" />
+    <label for="pref-chk-cc">{{ t('pref.cc') }}</label>
+  </div>
+
   <h2>{{ t('pref.tab') }}</h2>
 
   <select

src/components/SongItem.vue

@@ -157,6 +157,9 @@ onMounted(() => {
   margin: 1rem 0;
   justify-content: initial;
 }
+.song h4 {
+  overflow-wrap: anywhere;
+}
 span.content {
   padding: 1rem;
   flex-direction: column;