Merge branch 'development' into sabr-pr

* development: (24 commits)
  Add proxy login support (FreeTubeApp#7996)
  Migrate the History view to the composition API (FreeTubeApp#8064)
  Fix player button hiding (FreeTubeApp#8065)
  Translated using Weblate (Norwegian Bokmål)
  Translated using Weblate (Indonesian)
  Fix playback rate reset when video ends (FreeTubeApp#7718)
  Skip Electron binary download in CI as we do not run it (FreeTubeApp#8063)
  Feat: Display player overlay controls on keyboard interaction (FreeTubeApp#7757)
  Translated using Weblate (Hungarian)
  Translated using Weblate (Czech)
  Translated using Weblate (Estonian)
  Translated using Weblate (French)
  Bump electron from 37.4.0 to 38.1.0 (FreeTubeApp#8025)
  Translated using Weblate (Dutch)
  Translated using Weblate (Portuguese (Brazil))
  Translated using Weblate (German)
  Translated using Weblate (Breton)
  Translated using Weblate (Italian)
  Translated using Weblate (Chinese (Simplified Han script))
  Support exporting single playlists as a list of video URLs (FreeTubeApp#8054)
  ...

# Conflicts:
#	src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js

Author: PikachuEXE

.github/workflows/build.yml

@@ -58,6 +58,8 @@ jobs:
         node-version: ${{ matrix.node-version }}
         cache: "yarn"
     - run: yarn run ci
+      env:
+        ELECTRON_SKIP_BINARY_DOWNLOAD: '1'
     - run: yarn run lint
     - name: Get Version Number
       id: getPackageInfo

.github/workflows/linter.yml

@@ -24,6 +24,8 @@ jobs:
         node-version: 22.x
         cache: "yarn"
     - run: yarn run ci
+      env:
+        ELECTRON_SKIP_BINARY_DOWNLOAD: '1'
     - run: yarn run lint
     # let's verify that webpack is able to package the project
     - run: yarn run pack

.github/workflows/release.yml

@@ -63,6 +63,8 @@ jobs:
         node-version: ${{ matrix.node-version }}
         cache: "yarn"
     - run: yarn run ci
+      env:
+        ELECTRON_SKIP_BINARY_DOWNLOAD: '1'
     - run: yarn run lint
 
     - name: Get Version Number

README.md

@@ -4,7 +4,7 @@
 
 FreeTube is an open source desktop YouTube player built with privacy in mind.
 Use YouTube without advertisements and prevent Google from tracking you with their cookies and JavaScript.
-Available for Windows (10 and later), Mac (macOS 11 and later) & Linux thanks to Electron.
+Available for Windows (10 and later), Mac (macOS 12 and later) & Linux thanks to Electron.
 
 <p align="center"><a href="https://github.com/FreeTubeApp/FreeTube/releases">Download FreeTube</a></p>
 <p align="center">
@@ -96,7 +96,7 @@ RedirectTube, doesn’t automatically open YouTube links in FreeTube. Instead, i
 ### Official Downloads
 
 > [!CAUTION]
-> FreeTube is only supported on Windows 10 and later, macOS 11 and above, and various Linux distributions. Installing it on unsupported systems may result in unexpected issues.
+> FreeTube is only supported on Windows 10 and later, macOS 12 and above, and various Linux distributions. Installing it on unsupported systems may result in unexpected issues.
 
 * [GitHub Releases](https://github.com/FreeTubeApp/FreeTube/releases)
 

package.json

@@ -86,7 +86,7 @@
     "copy-webpack-plugin": "^13.0.1",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.2",
-    "electron": "^37.4.0",
+    "electron": "^38.1.0",
     "electron-builder": "^26.0.20",
     "eslint": "^9.35.0",
     "eslint-plugin-jsdoc": "^57.0.8",

src/main/index.js

@@ -703,6 +703,15 @@ function runApp() {
     }
   })
 
+  app.on('login', async (event, webContents, request, authInfo, callback) => {
+    if (authInfo.isProxy) {
+      event.preventDefault()
+      const proxyUsername = (await baseHandlers.settings._findOne('proxyUsername'))?.value
+      const proxyPassword = (await baseHandlers.settings._findOne('proxyPassword'))?.value
+      callback(proxyUsername, proxyPassword)
+    }
+  })
+
   function trayClick(window, close = false) {
     if (!close) {
       if (window.id in trayMaximizedWindows) {

src/renderer/components/PlaylistInfo/PlaylistInfo.vue

@@ -177,7 +177,7 @@
             :title="$t('User Playlists.Export Playlist')"
             :icon="['fas', 'file-arrow-down']"
             theme="secondary"
-            @click="handlePlaylistExport"
+            @click="showExportPrompt = true"
           />
           <FtIconButton
             v-if="!editMode && userPlaylistDuplicateItemCount > 0"
@@ -251,6 +251,13 @@
         is-first-option-destructive
         @click="handleRemoveDuplicateVideosPromptAnswer"
       />
+      <FtPrompt
+        v-if="showExportPrompt"
+        :label="t('Settings.Data Settings.Select Export Type')"
+        :option-names="exportNames"
+        :option-values="EXPORT_VALUES"
+        @click="handleExport"
+      />
     </div>
   </div>
 </template>
@@ -323,6 +330,10 @@ const props = defineProps({
     type: Array,
     required: true
   },
+  sortedVideos: {
+    type: Array,
+    required: true
+  },
   viewCount: {
     type: Number,
     required: true,
@@ -370,6 +381,7 @@ const editMode = ref(false)
 const showDeletePlaylistPrompt = ref(false)
 const showRemoveVideosOnWatchPrompt = ref(false)
 const showRemoveDuplicateVideosPrompt = ref(false)
+const showExportPrompt = ref(false)
 const newTitle = ref(props.title)
 const newDescription = ref(props.description)
 
@@ -532,6 +544,7 @@ const playlistPersistenceDisabled = computed(() => {
 
 watch(showDeletePlaylistPrompt, handlePromptToggle)
 watch(showRemoveVideosOnWatchPrompt, handlePromptToggle)
+watch(showExportPrompt, handlePromptToggle)
 
 /**
  * @param {boolean} shown
@@ -617,10 +630,43 @@ function handlePlaylistDeleteDisabledClick() {
   showToast(playlistDeletionDisabledLabel.value)
 }
 
-async function handlePlaylistExport() {
+const EXPORT_VALUES = [
+  'database',
+  'urls',
+  'close'
+]
+
+const exportNames = computed(() => [
+  `${t('Settings.Data Settings.Export FreeTube')} (.db)`,
+  `${t('User Playlists.Export list of URLs')} (.txt)`,
+  t('Close')
+])
+
+/**
+ * @param {'database' | 'urls' | null} value
+ */
+function handleExport(value) {
+  showExportPrompt.value = false
+
+  if (value === 'database') {
+    exportAsFreeTubeDatabase()
+  } else if (value === 'urls') {
+    exportAsListOfUrls()
+  }
+}
+
+/**
+ * @param {string} title
+ * @param {string} extension
+ */
+function getExportFilename(title, extension) {
   const dateStr = getTodayDateStrLocalTimezone()
-  const title = selectedUserPlaylist.value.playlistName.replaceAll(/[ "%*/:<>?\\|]/g, '_')
-  const exportFileName = 'freetube-playlist-' + title + '-' + dateStr + '.db'
+  const sanitisedTitle = title.replaceAll(/[ "%*/:<>?\\|]/g, '_')
+  return `freetube-playlist-${sanitisedTitle}-${dateStr}.${extension}`
+}
+
+async function exportAsFreeTubeDatabase() {
+  const exportFileName = getExportFilename(selectedUserPlaylist.value.playlistName, 'db')
 
   const data = JSON.stringify(selectedUserPlaylist.value) + '\n'
 
@@ -646,6 +692,35 @@ async function handlePlaylistExport() {
   }
 }
 
+async function exportAsListOfUrls() {
+  const exportFileName = getExportFilename(props.title, 'txt')
+
+  const data = props.sortedVideos.map((video) => {
+    return `https://www.youtube.com/watch?v=${video.videoId}`
+  }).join('\n') + '\n'
+
+  // See DataSettings.vue `promptAndWriteToFile`
+
+  try {
+    const response = await writeFileWithPicker(
+      exportFileName,
+      data,
+      '',
+      'text/plain',
+      '.txt',
+      'single-playlist-export',
+      'downloads'
+    )
+
+    if (response) {
+      showToast(t('User Playlists.The playlist has been successfully exported'))
+    }
+  } catch (error) {
+    const message = t('Settings.Data Settings.Unable to write file')
+    showToast(`${message}: ${error}`)
+  }
+}
+
 function exitEditMode() {
   editMode.value = false
 

src/renderer/components/ProxySettings/ProxySettings.vue

@@ -53,6 +53,24 @@
           @keydown.enter.native="testProxy"
         />
       </FtFlexBox>
+      <FtFlexBox>
+        <FtInput
+          :placeholder="$t('Settings.Proxy Settings.Proxy Username')"
+          :show-action-button="false"
+          show-label
+          :value="proxyUsername"
+          @input="handleUpdateProxyUsername"
+          @keydown.enter.native="testProxy"
+        />
+        <FtInput
+          :placeholder="$t('Settings.Proxy Settings.Proxy Password')"
+          :show-action-button="false"
+          show-label
+          :value="proxyPassword"
+          @input="handleUpdateProxyPassword"
+          @keydown.enter.native="testProxy"
+        />
+      </FtFlexBox>
       <p
         class="center"
       >
@@ -151,6 +169,16 @@ const proxyPort = computed(() => {
   return store.getters.getProxyPort
 })
 
+/** @type {import('vue').ComputedRef<string>} */
+const proxyUsername = computed(() => {
+  return store.getters.getProxyUsername
+})
+
+/** @type {import('vue').ComputedRef<string>} */
+const proxyPassword = computed(() => {
+  return store.getters.getProxyPassword
+})
+
 const proxyUrl = computed(() => {
   return `${proxyProtocol.value}://${proxyHostname.value}:${proxyPort.value}`
 })
@@ -230,6 +258,28 @@ function handleUpdateProxyPort(value) {
   store.dispatch('updateProxyPort', value)
 }
 
+/**
+ * @param {string} value
+ */
+function handleUpdateProxyUsername(value) {
+  if (useProxy.value) {
+    debouncedEnableProxy()
+  }
+
+  store.dispatch('updateProxyUsername', value)
+}
+
+/**
+ * @param {string} value
+ */
+function handleUpdateProxyPassword(value) {
+  if (useProxy.value) {
+    debouncedEnableProxy()
+  }
+
+  store.dispatch('updateProxyPassword', value)
+}
+
 function enableProxy() {
   if (process.env.IS_ELECTRON) {
     window.ftElectron.enableProxy(proxyUrl.value)