Merge branch 'development' into feature/playlist-2023-05

* development: Translated using Weblate (Italian) Translated using Weblate (Polish) Translated using Weblate (Kurdish (Central)) Translated using Weblate (Spanish) Translated using Weblate (Kurdish (Central)) Translated using Weblate (Kurdish) A new way to subscribe (FreeTubeApp#4238) Display more profiles on the profile drop-down list, v2 (fixed for low res, fixed linter) (FreeTubeApp#4359) Translated using Weblate (Estonian) Translated using Weblate (Serbian) Translated using Weblate (Arabic) Translated using Weblate (Chinese (Simplified)) Display currently watching viewer count on live streams (FreeTubeApp#4206) Translated using Weblate (Spanish) Translated using Weblate (Czech) Translated using Weblate (Chinese (Traditional)) Translated using Weblate (Italian) Fix block channel channel ID validation (FreeTubeApp#4366)
PikachuEXE · Nov 23, 2023 · 6ea2b7a · 6ea2b7a
2 parents dbe57a4 + 19c7a24
commit 6ea2b7a
Show file tree

Hide file tree

Showing 33 changed files with 657 additions and 304 deletions.
diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -5,7 +5,7 @@ import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtInputTags from '../../components/ft-input-tags/ft-input-tags.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import { showToast } from '../../helpers/utils'
-import { checkYoutubeId, findChannelTagInfo } from '../../helpers/channels'
+import { checkYoutubeChannelId, findChannelTagInfo } from '../../helpers/channels'
 
 export default defineComponent({
   name: 'PlayerSettings',
@@ -152,7 +152,7 @@ export default defineComponent({
       showToast(this.$t('Settings.Distraction Free Settings.Hide Channels Already Exists'))
     },
     validateChannelId: function (text) {
-      return checkYoutubeId(text)
+      return checkYoutubeChannelId(text)
     },
     findChannelTagInfo: async function (text) {
       return await findChannelTagInfo(text, this.backendOptions)
@@ -167,7 +167,7 @@ export default defineComponent({
         if (tag.invalid) continue
 
         // process if no preferred name and is possibly a YouTube ID
-        if (tag.preferredName === '' && checkYoutubeId(tag.name)) {
+        if (tag.preferredName === '' && checkYoutubeChannelId(tag.name)) {
           this.channelHiderDisabled = true
 
           const { preferredName, icon, iconHref, invalidId } = await this.findChannelTagInfo(tag.name)

diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -11,17 +11,12 @@
   overflow: hidden;
   color: inherit;
   text-decoration: none;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
   transition: background 0.2s ease-out;
 }
 
 .bubblePadding:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -14,6 +14,7 @@
       }"
       tabindex="0"
       role="button"
+      :aria-expanded="dropdownShown"
       @click="handleIconClick"
       @mousedown="handleIconMouseDown"
       @keydown.enter.prevent="handleIconClick"
@@ -33,7 +34,6 @@
             v-if="dropdownOptions.length > 0"
             class="list"
             role="listbox"
-            :aria-expanded="dropdownShown"
           >
             <li
               v-for="(option, index) in dropdownOptions"
@@ -71,7 +71,6 @@
             v-if="dropdownOptions.length > 0"
             class="list"
             role="listbox"
-            :aria-expanded="dropdownShown"
           >
             <li
               v-for="(option, index) in dropdownOptions"

diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
@@ -57,8 +57,6 @@
   border-radius: 100%;
   color: var(--primary-text-color);
   opacity: 0;
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
@@ -74,8 +72,6 @@
 .clearInputTextButton.visible:active {
   background-color: var(--tertiary-text-color);
   color: var(--side-nav-active-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
@@ -172,8 +168,6 @@
 .inputAction.enabled:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
@@ -184,8 +178,6 @@
 .inputAction.enabled:active {
   background-color: var(--tertiary-text-color);
   color: var(--side-nav-active-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 

diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@@ -4,17 +4,12 @@
   padding-block: 10px 30px;
   padding-inline: 10px;
   cursor: pointer;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
   transition: background 0.2s ease-out;
 }
 
 .bubblePadding:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 

diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -27,32 +27,41 @@
   inset-block-start: 60px;
   inset-inline-end: 10px;
   min-inline-size: 250px;
-  block-size: 400px;
+  block-size: auto;
   padding: 5px;
   background-color: var(--card-bg-color);
   box-shadow: 0 0 4px var(--scrollbar-color-hover);
 }
 
 .profileWrapper {
   margin-block-start: 60px;
-  block-size: 340px;
+  block-size: auto;
   overflow-y: auto;
+  /*
+  profile list max height: 90% of window size - 100 px. It's scaled to be 340px on 800x600 resolution. 
+  Offset of 100px is to compensate for the fixed size of elements above the list, which takes more screen space on lower resolutions
+  */
+  max-block-size: calc(90vh - 100px); 
+  min-block-size: 340px;
+}
+
+/* Navbar changes position to horizontal with this media rule.
+Height adjust for profile list so it won't cover navbar.  */
+@media only screen and (max-width: 680px){
+  .profileWrapper {
+    max-block-size: calc(95vh - 180px);
+  }
 }
 
 .profile {
   cursor: pointer;
   block-size: 50px;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
   transition: background 0.2s ease-out;
 }
 
 .profile:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 

diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.js b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
@@ -35,6 +35,10 @@ export default defineComponent({
     }
   },
   methods: {
+    isActiveProfile: function (profile) {
+      return profile._id === this.activeProfile._id
+    },
+
     toggleProfileList: function () {
       this.profileListShown = !this.profileListShown
 

diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
@@ -6,6 +6,8 @@
       :style="{ background: activeProfile.bgColor, color: activeProfile.textColor }"
       tabindex="0"
       role="button"
+      :aria-expanded="profileListShown"
+      aria-controls="profileSelectorList"
       @click="toggleProfileList"
       @mousedown="handleIconMouseDown"
       @keydown.space.prevent="toggleProfileList"
@@ -19,6 +21,7 @@
     </div>
     <ft-card
       v-show="profileListShown"
+      id="profileSelectorList"
       ref="profileList"
       class="profileList"
       tabindex="-1"
@@ -46,7 +49,7 @@
           :key="index"
           class="profile"
           :aria-labelledby="'profile-' + index + '-name'"
-          aria-selected="false"
+          :aria-selected="isActiveProfile(profile)"
           tabindex="0"
           role="option"
           @click="setActiveProfile(profile)"

diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
@@ -25,70 +25,99 @@ export default defineComponent({
       type: String,
       required: true
     },
+    hideProfileDropdownToggle: {
+      type: Boolean,
+      default: false
+    },
     subscriptionCountText: {
       default: '',
       type: String,
       required: false
     }
   },
+  data: function () {
+    return {
+      isProfileDropdownOpen: false
+    }
+  },
   computed: {
+    profileInitials: function () {
+      return this.profileDisplayList.map((profile) => {
+        return profile?.name?.length > 0 ? Array.from(profile.name)[0].toUpperCase() : ''
+      })
+    },
+
     profileList: function () {
       return this.$store.getters.getProfileList
     },
 
+    /* sort by 'All Channels' -> active profile -> unsubscribed channels -> subscribed channels */
+    profileDisplayList: function () {
+      const mainProfileAndActiveProfile = [this.profileList[0]]
+      if (this.activeProfile._id !== MAIN_PROFILE_ID) {
+        mainProfileAndActiveProfile.push(this.activeProfile)
+      }
+
+      return [
+        ...mainProfileAndActiveProfile,
+        ...this.profileList.filter((profile, i) =>
+          i !== 0 && !this.isActiveProfile(profile) && !this.isProfileSubscribed(profile)),
+        ...this.profileList.filter((profile, i) =>
+          i !== 0 && !this.isActiveProfile(profile) && this.isProfileSubscribed(profile))
+      ]
+    },
+
     activeProfile: function () {
       return this.$store.getters.getActiveProfile
     },
 
     subscriptionInfo: function () {
-      return this.activeProfile.subscriptions.find((channel) => {
-        return channel.id === this.channelId
-      }) ?? null
-    },
-
-    isSubscribed: function () {
-      return this.subscriptionInfo !== null
+      return this.subscriptionInfoForProfile(this.activeProfile)
     },
 
     hideChannelSubscriptions: function () {
       return this.$store.getters.getHideChannelSubscriptions
     },
 
     subscribedText: function () {
-      let subscribedValue = (this.isSubscribed ? this.$t('Channel.Unsubscribe') : this.$t('Channel.Subscribe')).toUpperCase()
+      let subscribedValue = (this.isProfileSubscribed(this.activeProfile) ? this.$t('Channel.Unsubscribe') : this.$t('Channel.Subscribe')).toUpperCase()
       if (this.subscriptionCountText !== '' && !this.hideChannelSubscriptions) {
         subscribedValue += ' ' + this.subscriptionCountText
       }
       return subscribedValue
+    },
+
+    isProfileDropdownEnabled: function () {
+      return !this.hideProfileDropdownToggle && this.profileList.length > 1
     }
 
   },
   methods: {
-    handleSubscription: function () {
+    handleSubscription: function (profile = this.activeProfile) {
       if (this.channelId === '') {
         return
       }
 
-      const currentProfile = deepCopy(this.activeProfile)
+      const currentProfile = deepCopy(profile)
 
-      if (this.isSubscribed) {
+      if (this.isProfileSubscribed(profile)) {
         currentProfile.subscriptions = currentProfile.subscriptions.filter((channel) => {
           return channel.id !== this.channelId
         })
 
         this.updateProfile(currentProfile)
         showToast(this.$t('Channel.Channel has been removed from your subscriptions'))
 
-        if (this.activeProfile._id === MAIN_PROFILE_ID) {
+        if (profile._id === MAIN_PROFILE_ID) {
           // Check if a subscription exists in a different profile.
           // Remove from there as well.
           let duplicateSubscriptions = 0
 
-          this.profileList.forEach((profile) => {
-            if (profile._id === MAIN_PROFILE_ID) {
+          this.profileList.forEach((profileInList) => {
+            if (profileInList._id === MAIN_PROFILE_ID) {
               return
             }
-            duplicateSubscriptions += this.unsubscribe(profile, this.channelId)
+            duplicateSubscriptions += this.unsubscribe(profileInList, this.channelId)
           })
 
           if (duplicateSubscriptions > 0) {
@@ -107,7 +136,7 @@ export default defineComponent({
         this.updateProfile(currentProfile)
         showToast(this.$t('Channel.Added channel to your subscriptions'))
 
-        if (this.activeProfile._id !== MAIN_PROFILE_ID) {
+        if (profile._id !== MAIN_PROFILE_ID) {
           const primaryProfile = deepCopy(this.profileList.find(prof => {
             return prof._id === MAIN_PROFILE_ID
           }))
@@ -122,6 +151,34 @@ export default defineComponent({
           }
         }
       }
+
+      if (this.isProfileDropdownEnabled && !this.isProfileDropdownOpen) {
+        this.toggleProfileDropdown()
+      }
+    },
+
+    handleProfileDropdownFocusOut: function () {
+      if (!this.$refs.subscribeButton.matches(':focus-within')) {
+        this.isProfileDropdownOpen = false
+      }
+    },
+
+    toggleProfileDropdown: function() {
+      this.isProfileDropdownOpen = !this.isProfileDropdownOpen
+    },
+
+    isActiveProfile: function (profile) {
+      return profile._id === this.activeProfile._id
+    },
+
+    subscriptionInfoForProfile: function (profile) {
+      return profile.subscriptions.find((channel) => {
+        return channel.id === this.channelId
+      }) ?? null
+    },
+
+    isProfileSubscribed: function (profile) {
+      return this.subscriptionInfoForProfile(profile) !== null
     },
 
     unsubscribe: function(profile, channelId) {