Merge branch 'development' of 'FreeTubeApp/FreeTube' into dev-electro…

…n-dwngrade

.github/workflows/build.yml

@@ -18,9 +18,7 @@ jobs:
           - win-x64
           - win-arm64
           - osx-x64
-          # `osx-arm64` disabled due to "macOS gatekeeper"
-          # See details in https://github.com/FreeTubeApp/FreeTube/pull/2113
-          # - osx-arm64
+          - osx-arm64
         include:
         - runtime: linux-x64
           os: ubuntu-latest
@@ -34,8 +32,8 @@ jobs:
         - runtime: osx-x64
           os: macOS-latest
 
-#        - runtime: osx-arm64
-#          os: macOS-latest
+        - runtime: osx-arm64
+          os: macOS-latest
 
         - runtime: win-x64
           os: windows-latest
@@ -298,12 +296,12 @@ jobs:
         name: freetube-${{ steps.versionNumber.outputs.result }}-mac-x64.dmg
         path: build/freetube-${{ steps.versionNumber.outputs.result }}.dmg
 
-#    - name: Upload Mac arm64 .dmg Artifact
-#      uses: actions/upload-artifact@v4
-#      if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-arm64')
-#      with:
-#        name: freetube-${{ steps.versionNumber.outputs.result }}-mac-arm64.dmg
-#        path: build/freetube-${{ steps.versionNumber.outputs.result }}-arm64.dmg
+    - name: Upload Mac arm64 .dmg Artifact
+      uses: actions/upload-artifact@v4
+      if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-arm64')
+      with:
+        name: freetube-${{ steps.versionNumber.outputs.result }}-mac-arm64.dmg
+        path: build/freetube-${{ steps.versionNumber.outputs.result }}-arm64.dmg
 
     - name: Upload Mac x64 .zip Artifact
       uses: actions/upload-artifact@v4
@@ -319,9 +317,16 @@ jobs:
         name: freetube-${{ steps.versionNumber.outputs.result }}-mac-x64.7z
         path: build/freetube-${{ steps.versionNumber.outputs.result }}-mac.7z
 
-#    - name: Upload Mac arm64 .zip Artifact
-#      uses: actions/upload-artifact@v4
-#      if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-arm64')
-#      with:
-#        name: freetube-${{ steps.versionNumber.outputs.result }}-mac-arm64.zip
-#        path: build/freetube-${{ steps.versionNumber.outputs.result }}-arm64-mac.zip
+    - name: Upload Mac arm64 .zip Artifact
+      uses: actions/upload-artifact@v4
+      if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-arm64')
+      with:
+        name: freetube-${{ steps.versionNumber.outputs.result }}-mac-arm64.zip
+        path: build/freetube-${{ steps.versionNumber.outputs.result }}-arm64-mac.zip
+
+    - name: Upload Mac arm64 .7z Artifact
+      uses: actions/upload-artifact@v4
+      if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-arm64')
+      with:
+        name: freetube-${{ steps.versionNumber.outputs.result }}-mac-arm64.7z
+        path: build/freetube-${{ steps.versionNumber.outputs.result }}-arm64-mac.7z

src/constants.js

@@ -5,6 +5,10 @@ const IpcChannels = {
   OPEN_EXTERNAL_LINK: 'open-external-link',
   GET_SYSTEM_LOCALE: 'get-system-locale',
   GET_PICTURES_PATH: 'get-pictures-path',
+  GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX: 'get-navigation-history-entry-at-index',
+  GET_NAV_HISTORY_ACTIVE_INDEX: 'get-navigation-history-active-index',
+  GET_NAV_HISTORY_LENGTH: 'get-navigation-history-length',
+  GO_TO_NAV_HISTORY_OFFSET: 'go-to-navigation-history-index',
   SHOW_OPEN_DIALOG: 'show-open-dialog',
   SHOW_SAVE_DIALOG: 'show-save-dialog',
   STOP_POWER_SAVE_BLOCKER: 'stop-power-save-blocker',

src/main/index.js

@@ -897,6 +897,26 @@ function runApp() {
     session.defaultSession.closeAllConnections()
   })
 
+  // #region navigation history
+
+  ipcMain.on(IpcChannels.GO_TO_NAV_HISTORY_OFFSET, ({ sender }, offset) => {
+    sender.navigationHistory.goToOffset(offset)
+  })
+
+  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX, async ({ sender }, index) => {
+    return sender.navigationHistory.getEntryAtIndex(index)?.title
+  })
+
+  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ACTIVE_INDEX, async ({ sender }) => {
+    return sender.navigationHistory.getActiveIndex()
+  })
+
+  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_LENGTH, async ({ sender }) => {
+    return sender.navigationHistory.length()
+  })
+
+  // #endregion navigation history
+
   ipcMain.handle(IpcChannels.OPEN_EXTERNAL_LINK, (_, url) => {
     if (typeof url === 'string') {
       let parsedURL

src/renderer/App.js

@@ -97,6 +97,7 @@ export default defineComponent({
     externalPlayer: function () {
       return this.$store.getters.getExternalPlayer
     },
+
     defaultInvidiousInstance: function () {
       return this.$store.getters.getDefaultInvidiousInstance
     },
@@ -144,6 +145,10 @@ export default defineComponent({
       return this.$store.getters.getExternalLinkHandling
     },
 
+    appTitle: function () {
+      return this.$store.getters.getAppTitle
+    },
+
     openDeepLinksInNewWindow: function () {
       return this.$store.getters.getOpenDeepLinksInNewWindow
     }
@@ -158,10 +163,11 @@ export default defineComponent({
     secColor: 'checkThemeSettings',
 
     locale: 'setLocale',
+
+    appTitle: 'setDocumentTitle'
   },
   created () {
     this.checkThemeSettings()
-    this.setWindowTitle()
     this.setLocale()
   },
   mounted: function () {
@@ -207,10 +213,16 @@ export default defineComponent({
         if (this.$router.currentRoute.path === '/') {
           this.$router.replace({ path: this.landingPage })
         }
+
+        this.setWindowTitle()
       })
     })
   },
   methods: {
+    setDocumentTitle: function(value) {
+      document.title = value
+      this.$nextTick(() => this.$refs.topNav?.setActiveNavigationHistoryEntryTitle(value))
+    },
     checkThemeSettings: function () {
       const theme = {
         baseTheme: this.baseTheme || 'dark',
@@ -539,7 +551,7 @@ export default defineComponent({
 
     setWindowTitle: function() {
       if (this.windowTitle !== null) {
-        document.title = this.windowTitle
+        this.setAppTitle(this.windowTitle)
       }
     },
 
@@ -562,6 +574,7 @@ export default defineComponent({
       'getExternalPlayerCmdArgumentsData',
       'fetchInvidiousInstances',
       'fetchInvidiousInstancesFromFile',
+      'setAppTitle',
       'setRandomCurrentInvidiousInstance',
       'setupListenersToSyncWindows',
       'updateBaseTheme',

src/renderer/components/ChannelDetails/ChannelDetails.vue

@@ -223,6 +223,7 @@
           v-if="showSearchBar"
           ref="searchBar"
           :placeholder="$t('Channel.Search Channel')"
+          :value="query"
           :show-clear-text-button="true"
           class="channelSearch"
           :maxlength="255"
@@ -291,7 +292,11 @@ const props = defineProps({
   currentTab: {
     type: String,
     default: 'videos'
-  }
+  },
+  query: {
+    type: String,
+    default: ''
+  },
 })
 
 const emit = defineEmits(['change-tab', 'search', 'subscribed'])

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -2,6 +2,8 @@ import { defineComponent, nextTick } from 'vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
+const LONG_CLICK_BOUNDARY_MS = 500
+
 export default defineComponent({
   name: 'FtIconButton',
   components: {
@@ -55,21 +57,27 @@ export default defineComponent({
     dropdownOptions: {
       // Array of objects with these properties
       // - type: ('labelValue'|'divider', default to 'labelValue' for less typing)
-      // - label: String (if type == 'labelValue')
-      // - value: String (if type == 'labelValue')
+      // - label: String (if type === 'labelValue')
+      // - value: String (if type === 'labelValue')
+      // - (OPTIONAL) active: Number (if type === 'labelValue')
       type: Array,
       default: () => { return [] }
     },
     dropdownModalOnMobile: {
       type: Boolean,
       default: false
+    },
+    openOnRightOrLongClick: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['click', 'disabled-click'],
   data: function () {
     return {
       dropdownShown: false,
-      mouseDownOnIcon: false,
+      blockLeftClick: false,
+      longPressTimer: null,
       useModal: false
     }
   },
@@ -91,14 +99,24 @@ export default defineComponent({
       this.dropdownShown = false
     },
 
-    handleIconClick: function () {
+    handleIconClick: function (e, isRightOrLongClick = false) {
       if (this.disabled) {
         this.$emit('disabled-click')
         return
       }
-      if (this.forceDropdown || (this.dropdownOptions.length > 0)) {
-        this.dropdownShown = !this.dropdownShown
 
+      if (this.blockLeftClick) {
+        return
+      }
+
+      if (this.longPressTimer != null) {
+        clearTimeout(this.longPressTimer)
+        this.longPressTimer = null
+      }
+
+      if ((!this.openOnRightOrLongClick || (this.openOnRightOrLongClick && isRightOrLongClick)) &&
+       (this.forceDropdown || this.dropdownOptions.length > 0)) {
+        this.dropdownShown = !this.dropdownShown
         if (this.dropdownShown && !this.useModal) {
           // wait until the dropdown is visible
           // then focus it so we can hide it automatically when it loses focus
@@ -111,24 +129,38 @@ export default defineComponent({
       }
     },
 
-    handleIconMouseDown: function () {
-      if (this.disabled) { return }
-      if (this.dropdownShown) {
-        this.mouseDownOnIcon = true
+    handleIconPointerDown: function (event) {
+      if (!this.openOnRightOrLongClick) { return }
+      if (event.button === 2) { // right button click
+        this.handleIconClick(null, true)
+      } else if (event.button === 0) { // left button click
+        this.longPressTimer = setTimeout(() => {
+          this.handleIconClick(null, true)
+
+          // prevent a long press that ends on the icon button from firing the handleIconClick handler
+          window.addEventListener('pointerup', this.preventButtonClickAfterLongPress, { once: true })
+          window.addEventListener('pointercancel', () => {
+            window.removeEventListener('pointerup', this.preventButtonClickAfterLongPress)
+          }, { once: true })
+        }, LONG_CLICK_BOUNDARY_MS)
       }
     },
 
+    // prevent the handleIconClick handler from firing for an instant
+    preventButtonClickAfterLongPress: function () {
+      this.blockLeftClick = true
+      setTimeout(() => { this.blockLeftClick = false }, 0)
+    },
+
     handleDropdownFocusOut: function () {
-      if (this.mouseDownOnIcon) {
-        this.mouseDownOnIcon = false
-      } else if (!this.$refs.dropdown.matches(':focus-within')) {
+      if (this.dropdownShown && !this.$refs.ftIconButton.matches(':focus-within')) {
         this.dropdownShown = false
       }
     },
 
     handleDropdownEscape: function () {
-      this.$refs.iconButton.focus()
-      // handleDropdownFocusOut will hide the dropdown for us
+      this.dropdownShown = false
+      this.$refs.ftIconButton.firstElementChild.focus()
     },
 
     handleDropdownClick: function ({ url, index }) {