Merge branch 'development' of github.com:FreeTubeApp/FreeTube into fe…

…at/keyword-search-history

src/main/index.js

@@ -655,6 +655,8 @@ function runApp() {
           return '#282828'
         case 'gruvbox-light':
           return '#fbf1c7'
+        case 'catppuccin-frappe':
+          return '#303446'
         case 'system':
         default:
           return nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1'

src/renderer/components/channel-about/channel-about.vue → src/renderer/components/ChannelAbout/ChannelAbout.vue

@@ -96,18 +96,84 @@
       v-if="!hideFeaturedChannels && relatedChannels.length > 0"
     >
       <h2>{{ $t("Channel.About.Featured Channels") }}</h2>
-      <ft-flex-box>
-        <ft-channel-bubble
-          v-for="(channel, index) in relatedChannels"
-          :key="index"
+      <FtFlexBox>
+        <FtChannelBubble
+          v-for="channel in relatedChannels"
+          :key="channel.id"
           :channel-id="channel.id"
           :channel-name="channel.name"
           :channel-thumbnail="channel.thumbnailUrl"
         />
-      </ft-flex-box>
+      </FtFlexBox>
     </template>
   </div>
 </template>
 
-<script src="./channel-about.js" />
-<style scoped src="./channel-about.css" />
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from '../../composables/use-i18n-polyfill'
+
+import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubble.vue'
+import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
+
+import store from '../../store/index'
+
+import { formatNumber } from '../../helpers/utils'
+
+const { locale } = useI18n()
+
+const props = defineProps({
+  description: {
+    type: String,
+    default: ''
+  },
+  joined: {
+    type: [Date, Number],
+    default: 0
+  },
+  views: {
+    type: Number,
+    default: null
+  },
+  videos: {
+    type: Number,
+    default: null
+  },
+  location: {
+    type: String,
+    default: null
+  },
+  tags: {
+    type: Array,
+    default: () => []
+  },
+  relatedChannels: {
+    type: Array,
+    default: () => []
+  }
+})
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideFeaturedChannels = computed(() => {
+  return store.getters.getHideFeaturedChannels
+})
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideSearchBar = computed(() => {
+  return store.getters.getHideSearchBar
+})
+
+/** @type {import('vue').ComputedRef<{ sortBy: string, time: string, type: string, duration: string, features: string[] }>} */
+const searchSettings = computed(() => {
+  return store.getters.getSearchSettings
+})
+
+const formattedJoined = computed(() => {
+  return new Intl.DateTimeFormat([locale.value, 'en'], { dateStyle: 'long' }).format(props.joined)
+})
+
+const formattedViews = computed(() => formatNumber(props.views))
+const formattedVideos = computed(() => formatNumber(props.videos))
+</script>
+
+<style scoped src="./ChannelAbout.css" />

src/renderer/components/ThemeSettings.vue

@@ -126,6 +126,7 @@ const BASE_THEME_VALUES = [
   'hotPink',
   'pastelPink',
   // Third group
+  'catppuccinFrappe',
   'catppuccinMocha',
   'dracula',
   'gruvboxDark',
@@ -145,6 +146,7 @@ const baseThemeNames = computed(() => [
   t('Settings.Theme Settings.Base Theme.Hot Pink'),
   t('Settings.Theme Settings.Base Theme.Pastel Pink'),
   // Third group
+  t('Settings.Theme Settings.Base Theme.Catppuccin Frappe'),
   t('Settings.Theme Settings.Base Theme.Catppuccin Mocha'),
   t('Settings.Theme Settings.Base Theme.Dracula'),
   t('Settings.Theme Settings.Base Theme.Gruvbox Dark'),

src/renderer/components/ft-list-video/ft-list-video.js

@@ -775,6 +775,9 @@ export default defineComponent({
         description: this.description,
         viewCount: this.viewCount,
         lengthSeconds: this.data.lengthSeconds,
+        published: this.published,
+        premiereDate: this.data.premiereDate,
+        premiereTimestamp: this.data.premiereTimestamp,
       }
 
       this.showAddToPlaylistPromptForManyVideos({ videos: [videoData] })
@@ -824,6 +827,9 @@ export default defineComponent({
         author: this.channelName,
         authorId: this.channelId,
         lengthSeconds: this.data.lengthSeconds,
+        published: this.published,
+        premiereDate: this.data.premiereDate,
+        premiereTimestamp: this.data.premiereTimestamp,
       }
 
       this.addVideo({

src/renderer/components/watch-video-info/watch-video-info.js

@@ -39,6 +39,10 @@ export default defineComponent({
       type: Number,
       required: true
     },
+    premiereDate: {
+      type: Date,
+      default: undefined
+    },
     viewCount: {
       type: Number,
       required: true
@@ -348,6 +352,8 @@ export default defineComponent({
         description: this.description,
         viewCount: this.viewCount,
         lengthSeconds: this.lengthSeconds,
+        published: this.published,
+        premiereDate: this.premiereDate,
       }
 
       this.showAddToPlaylistPromptForManyVideos({ videos: [videoData] })
@@ -372,6 +378,8 @@ export default defineComponent({
         author: this.channelName,
         authorId: this.channelId,
         lengthSeconds: this.lengthSeconds,
+        published: this.published,
+        premiereDate: this.premiereDate,
       }
 
       this.addVideo({

src/renderer/composables/colors.js

@@ -21,6 +21,20 @@ export function useColorTranslations() {
     t('Settings.Theme Settings.Main Color Theme.Amber'),
     t('Settings.Theme Settings.Main Color Theme.Orange'),
     t('Settings.Theme Settings.Main Color Theme.Deep Orange'),
+    t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Rosewater'),
+    t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Flamingo'),
+    t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Pink'),
+    t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Mauve'),
+    t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Red'),
+    t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Maroon'),
+    t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Peach'),
+    t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Yellow'),
+    t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Green'),
+    t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Teal'),
+    t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Sky'),
+    t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Sapphire'),
+    t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Blue'),
+    t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Lavender'),
     t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Rosewater'),
     t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Flamingo'),
     t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Pink'),

src/renderer/helpers/colors.js

@@ -19,6 +19,20 @@ export const colors = [
   { name: 'Amber', value: '#FFAB00' },
   { name: 'Orange', value: '#FF6D00' },
   { name: 'DeepOrange', value: '#DD2C00' },
+  { name: 'CatppuccinFrappeRosewater', value: '#f2d5cf' },
+  { name: 'CatppuccinFrappeFlamingo', value: '#eebebe' },
+  { name: 'CatppuccinFrappePink', value: '#f4b8e4' },
+  { name: 'CatppuccinFrappeMauve', value: '#ca9ee6' },
+  { name: 'CatppuccinFrappeRed', value: '#e78284' },
+  { name: 'CatppuccinFrappeMaroon', value: '#ea999c' },
+  { name: 'CatppuccinFrappePeach', value: '#ef9f76' },
+  { name: 'CatppuccinFrappeYellow', value: '#e5c890' },
+  { name: 'CatppuccinFrappeGreen', value: '#a6d189' },
+  { name: 'CatppuccinFrappeTeal', value: '#81c8be' },
+  { name: 'CatppuccinFrappeSky', value: '#99d1db' },
+  { name: 'CatppuccinFrappeSapphire', value: '#85c1dc' },
+  { name: 'CatppuccinFrappeBlue', value: '#8caaee' },
+  { name: 'CatppuccinFrappeLavender', value: '#babbf1' },
   { name: 'CatppuccinMochaRosewater', value: '#F5E0DC' },
   { name: 'CatppuccinMochaFlamingo', value: '#F2CDCD' },
   { name: 'CatppuccinMochaPink', value: '#F5C2E7' },