Merge pull request #745 from HolodexNet/dev

Deployment of .... actually a ton of things

README.md

@@ -18,8 +18,10 @@
 
 ## Setup for Development
 
+### Important: the bulk of development is currently happening on the `next` branch!!! If you would like to participate in Holodex React development, please check out the `next` branch and PR against it! The contribution/development readme is in `/package/react/README.md`!
+
 ```
-git clone [email protected]:RiceCakess/Holodex.git
+git clone [email protected]:HolodexNet/Holodex.git
 npm install
 # By default the api is proxied to staging, copy, rename and edit the .env.placeholder to change API_BASE_URL
 npm run serve

docs/CHANGELOG.md

@@ -5,6 +5,15 @@
 - **Development of Vue3-powered Holodex (release 3.0 ?!?!) is completely scrapped**. We're making it in **react** instead. If you like to influence how it looks, now is the best time to let us know.
 - If you are a **React UI engineer/designer** and would like to contribute to Holodex, drop by our discord!
 
+### 2.38 Holodex [*November 14th, 2023*]
+- TY Livia for:
+  - Hovering over a currently live stream's time will show its start time.
+- And TY Nelo for:
+  - Song count now shows on thumbnail.
+  - YouTube caption language will attempt to default to your site language, if available.
+  - Fixed loading Twitch streams on specific MultiView cells
+- Reverted previous navigation history change.
+
 ### 2.37 Holodex & Musicdex [*September 24th, 2023*]
 
 #### Holodex

src/components/channel/ChannelList.vue

@@ -50,6 +50,26 @@
               {{ group.title }}
             </v-list-item-title>
             <!-- TODO ADD CONFIRMATION DIALOG -->
+            <v-tooltip bottom>
+              <template #activator="{ on, attrs }">
+                <v-btn icon large @click.stop="toggleGroupDisplay(group)">
+                  <v-icon
+                    :color="group.hide ? 'red' : 'grey'"
+                    v-bind="attrs"
+                    v-on="on"
+                  >
+                    {{ group.hide ? mdiEyeOffOutline : mdiEyeOutline }}
+                  </v-icon>
+                </v-btn>
+              </template>
+              <span>
+                {{
+                  group.hide
+                    ? $t("component.channelList.enableGroupDisplay")
+                    : $t("component.channelList.disableGroupDisplay")
+                }}
+              </span>
+            </v-tooltip>
             <v-tooltip bottom>
               <template #activator="{ on, attrs }">
                 <v-btn sm outlined @click.stop="toggleFavoriteAll(index)">
@@ -130,6 +150,7 @@
 import ChannelImg from "./ChannelImg.vue";
 import ChannelInfo from "./ChannelInfo.vue";
 import ChannelSocials from "./ChannelSocials.vue";
+import { mdiEyeOffOutline, mdiEyeOutline } from "@mdi/js";
 
 export default {
     name: "ChannelList",
@@ -165,6 +186,12 @@ export default {
             default: false,
         },
     },
+    data() {
+        return {
+            mdiEyeOffOutline,
+            mdiEyeOutline,
+        };
+    },
     computed: {
         isXs() {
             return this.$vuetify.breakpoint.width <= 420;
@@ -179,6 +206,8 @@ export default {
                         title: group,
                         items: [],
                         allFavorited: true,
+                        hide: this.isHidden(group),
+                        org: this.$store.state.currentOrg.name,
                     });
                     lastGroup = group;
                 }
@@ -197,6 +226,14 @@ export default {
         isFavorited(id) {
             return this.$store.getters["favorites/isFavorited"](id);
         },
+        isHidden(groupName){
+            const org = this.$store.state.currentOrg.name;
+            const hiding = this.$store.state.settings.hiddenGroups;
+            console.log(hiding);
+            if (!hiding) return false;
+            if (!Object.keys(hiding).includes(org)) return false;
+            return this.$store.state.settings.hiddenGroups[org].includes(groupName.toLowerCase())
+        },
         toggleFavoriteAll(index) {
             if (!this.isLoggedIn) return;
             const allFav = this.channelsByGroup[index].allFavorited;
@@ -211,6 +248,9 @@ export default {
                 this.$store.dispatch("favorites/updateFavorites");
             }
         },
+        toggleGroupDisplay(group) {
+            this.$store.commit("settings/toggleGroupDisplay", group);
+        },
     },
 };
 </script>

src/components/media/SongFrame.vue

@@ -18,6 +18,7 @@
           modestbranding: 1,
           rel: 0,
           cc_load_policy: 0,
+          cc_lang_pref: getLang,
           iv_load_policy: 3,
         }"
         v-on="$listeners"
@@ -30,6 +31,7 @@
 
 <script lang="ts">
 import Youtube from "@/components/player/YoutubePlayer.vue";
+import { getYTLangFromState } from "@/utils/functions";
 
 export default {
     name: "SongFrame",
@@ -58,6 +60,9 @@ export default {
         containerClass() {
             return this.isBackground ? "song-player-container-background" : "song-player-container";
         },
+        getLang() {
+            return getYTLangFromState(this.$store.state);
+        },
     },
     watch: {
         playback: {

src/components/multiview/VideoCell.vue

@@ -31,6 +31,7 @@
         :video-id="cellContent.id"
         :player-vars="{
           playsinline: 1,
+          cc_lang_pref: getLang,
         }"
         :mute="muted"
         manual-update
@@ -58,6 +59,7 @@
 
 <script>
 import { mapMutations } from "vuex";
+import { getYTLangFromState } from "@/utils/functions";
 import YoutubePlayer from "../player/YoutubePlayer.vue";
 import CellMixin from "./CellMixin";
 import CellControl from "./CellControl.vue";
@@ -123,6 +125,9 @@ export default {
         isFastFoward() {
             return this.playbackRate !== 1;
         },
+        getLang() {
+            return getYTLangFromState(this.$store.state);
+        },
     },
     watch: {
         cellContent(nw, old) {

src/components/multiview/VideoSelector.vue

@@ -252,6 +252,7 @@ export default {
                 hideIgnoredTopics: true,
                 hidePlaceholder: this.hidePlaceholder,
                 hideMissing: this.hideMissing,
+                hideGroups: true,
             };
             const isTwitchPlaceholder = (v) => (v.type === "placeholder" && v.link?.includes("twitch.tv"));
             const isPlayable = (v) => (v.type === "stream" || isTwitchPlaceholder(v));

src/components/video/VideoCard.vue

@@ -55,8 +55,13 @@
 
         <!-- Video duration/music indicator (👻❌) -->
         <div v-if="!isPlaceholder" class="d-flex flex-column align-end">
-          <!-- Show music icon if songs exist -->
-          <div v-if="data.songcount" class="video-duration">
+          <!-- Show music icon if songs exist, and song count if there's multiple -->
+          <div 
+            v-if="data.songcount" 
+            class="video-duration d-flex align-center"
+            :title="songIconTitle"
+          >
+            {{ songCount }}
             <v-icon small color="white">{{ icons.mdiMusic }}</v-icon>
           </div>
           <!-- Show TL chat icon if recently active or has archive tl exist -->
@@ -536,6 +541,12 @@ export default {
                 ? this.$t("component.videoCard.totalTLs")
                 : this.$t("component.videoCard.tlPresence");
         },
+        songIconTitle() {
+            return this.$t("component.videoCard.totalSongs");
+        },
+        songCount() {
+            return this.data.songcount > 1 ? this.data.songcount : "";
+        },
         href() {
             if (this.isPlaceholder) return undefined;
             return this.redirectMode

src/components/video/VideoCardList.vue

@@ -127,6 +127,7 @@ export default {
                 ignoreBlock: false,
                 hideCollabs: false,
                 hideIgnoredTopics: true,
+                hideGroups: this.includeChannel,
                 forOrg: "",
                 ...this.filterConfig,
             };

src/components/watch/WatchInfo.vue

@@ -22,7 +22,9 @@
       </router-link>
     </v-card-title>
     <v-card-subtitle>
-      {{ formattedTime }}
+      <span :class="'text-' + video.status" :title="absoluteTimeString">
+        {{ formattedTime }}
+      </span>
       <span
         v-if="video.status === 'live' && liveViewers"
         class="live-viewers"
@@ -199,6 +201,17 @@ export default {
         lang() {
             return this.$store.state.settings.lang;
         },
+        absoluteTimeString() {
+            const ts = localizedDayjs(this.video.available_at, this.lang);
+            const ts1 = ts.format(`${ts.isTomorrow() ? "ddd " : ""}LT zzz`);
+            const ts2 = ts
+                .tz("Asia/Tokyo")
+                .format(`${ts.isTomorrow() ? "ddd " : ""}LT zzz`);
+            if (ts1 === ts2) {
+                return ts1;
+            }
+            return `${ts1}\n${ts2}`;
+        },
         formattedTime() {
             switch (this.video.status) {
                 case "upcoming":

src/locales/en/ui.yml

@@ -9,6 +9,8 @@ component:
     signInToFavorite: Sign in to favorite
     unfavoriteAllInGroup: Unfavorite all in group
     favoriteAllInGroup: Favorite all in group
+    enableGroupDisplay: Show channels from this group on the Home page
+    disableGroupDisplay: Hide channels from this group from the Home page
   channelInfo:
     stats: Stats
     videoCount: '{0} Videos'
@@ -48,6 +50,7 @@ component:
     premiere: PREMIERE
     googleCalendar: Add to Google Calendar
     totalTLs: Total live chat TLs
+    totalSongs: Total timestamped songs
     tlPresence: Active translator in last 30 mins
     uncertainPlaceholder: Start time is not officially confirmed, actual start time may vary.
     typeScheduledYT: Scheduled Stream

src/mixins/filterVideos.js

@@ -7,24 +7,34 @@ export default {
             forOrg = "",
             hidePlaceholder = false,
             hideMissing = false,
+            hideGroups = false,
         }) {
             const blockedChannels = this.$store.getters["settings/blockedChannelIDs"];
             const ignoredTopics = this.$store.getters["settings/ignoredTopics"];
             const favoriteChannels = this.$store.getters["favorites/favoriteChannelIDs"];
             // eslint-disable-next-line no-param-reassign
             forOrg ||= this.$store.state.currentOrg.name;
+            let hiddenGroups = this.$store.state.settings.hiddenGroups;
+            const validOrgs = Object.keys(hiddenGroups)
+            const orgGroupsHidden = validOrgs.includes(v.channel.org);
 
             let keep = true;
             const channelId = v.channel_id || v.channel.id;
             const isFavoritedOrInOrg = v.channel.org === forOrg || favoriteChannels.has(channelId) || forOrg === "All Vtubers";
+            const channelGroup = (v.channel.group || (`${v.channel.suborg}`).slice(2) || "Other").toLowerCase();
+            let hideViaGroup = false;
+            if (orgGroupsHidden) hideViaGroup = hiddenGroups[v.channel.org].includes(channelGroup);
 
             if (!ignoreBlock) {
                 keep &&= !blockedChannels.has(channelId);
             }
 
+            // TODO: Update to suport hideViaGroup: mentions needs suborg field on API
             if (!isFavoritedOrInOrg) {
                 keep &&= !hideCollabs && !v.mentions?.every(
-                    ({ id, org }) => blockedChannels.has(id) || (org !== forOrg && !favoriteChannels.has(id)),
+                    ({ id, org, suborg }) => (blockedChannels.has(id) || 
+                    (hideGroups && validOrgs.includes(org) && hiddenGroups[org].includes((`${suborg}`).slice(2) || "Other"))
+                    || (org !== forOrg && !favoriteChannels.has(id))),
                 );
             }
 
@@ -39,6 +49,12 @@ export default {
             if (hideMissing) {
                 keep &&= v.status !== "missing";
             }
+
+            if (hideGroups) {
+                if (orgGroupsHidden) {
+                    keep &&= !hideViaGroup;
+                }
+            }
 
             return keep;
         },

src/store/settings.module.js

@@ -26,6 +26,7 @@ const initialState = {
     hideMissing: false,
     nameProperty: englishNamePrefs.has(lang) ? "english_name" : "name",
     hideCollabStreams: false,
+    hiddenGroups: {},
     ignoredTopics: [],
     // Valid values: "grid" | "list" | "denseList"
     homeViewMode: "grid",
@@ -141,6 +142,22 @@ const mutations = {
             state.blockedChannels.push(channel);
         }
     },
+    toggleGroupDisplay(state, group) {
+        const groupName = `${group.title}`.toLowerCase();
+        const orgName = `${group.org}`;
+        if (!state.hiddenGroups) Vue.set(state, "hiddenGroups", {});
+        if (!state.hiddenGroups[orgName]) Vue.set(state.hiddenGroups, `${orgName}`, [])
+
+        // determine to add or subtract:
+        if (state.hiddenGroups[orgName].includes(groupName)) {
+            Vue.delete(
+                state.hiddenGroups[orgName],
+                state.hiddenGroups[orgName].findIndex((x) => x.toLowerCase() === groupName),
+            );
+        } else {
+            state.hiddenGroups[orgName].push(groupName);
+        }
+    },
     toggleLiveTlBlocked(state, name) {
         if (!state.liveTlBlocked) Vue.set(state, "blockedChannels", []);
         const index = state.liveTlBlocked.indexOf(name);

src/utils/consts.js

@@ -136,6 +136,14 @@ export const TL_LANGS = Object.freeze([
 //     MISSING: "missing",
 // };
 
+// Language code conversion for YouTube frame
+export const langConversion = Object.freeze({
+    "lol-PEKO": "en",
+    "lol-UWU": "en",
+    "zh": "zh-Hant",
+    "zh-CN": "zh-Hans",
+});
+
 export const companionExtensionId = "jkdnofimdhpbhdjbcdlgnccfjjkidlgp";
 
 export const MESSAGE_TYPES = Object.freeze({

src/utils/functions.js

@@ -1,6 +1,7 @@
 import { TL_LANGS,
     VIDEO_URL_REGEX,
     TWITCH_VIDEO_URL_REGEX,
+    langConversion,
     /*
     TWITCH_UNLIVE_VIDEO_URL_REGEX,
     TWITCAST_VIDEO_URL_REGEX,
@@ -75,6 +76,11 @@ export function getLang(weblang) {
     return "en";
 }
 
+export function getYTLangFromState(state) {
+    const { lang } = state.settings;
+    return langConversion[lang] || lang.split("-")[0].toLowerCase();
+}
+
 export function getBannerImages(url) {
     const base = `${url.split("=")[0]}=`;
     return {

src/views/EditVideo.vue

@@ -16,6 +16,7 @@
                 ...(timeOffset && { start: timeOffset }),
                 autoplay: 1,
                 playsinline: 1,
+                cc_lang_pref: getLang,
               }"
               @ready="ready"
             />
@@ -172,7 +173,7 @@ import WatchComments from "@/components/watch/WatchComments.vue";
 import VideoEditSongs from "@/components/edit/VideoEditSongs.vue";
 import VideoEditMentions from "@/components/edit/VideoEditMentions.vue";
 import CommentSongParser from "@/components/media/CommentSongParser.vue";
-import { decodeHTMLEntities, syncState } from "@/utils/functions";
+import { decodeHTMLEntities, syncState, getYTLangFromState } from "@/utils/functions";
 // import { dayjs } from "@/utils/time";
 import api from "@/utils/backend-api";
 
@@ -249,6 +250,9 @@ export default {
         role() {
             return this.$store.state.userdata?.user?.role;
         },
+        getLang() {
+            return getYTLangFromState(this.$store.state);
+        },
     },
     watch: {
         // eslint-disable-next-line func-names