feat(filters): filter out vertical videos (#991)

src/_locales/cmn-CN.yml

@@ -176,6 +176,7 @@ settings:
   disable_filters_for_followed_users: 关注的用户不受过滤条件限制
   disable_filters_for_followed_users_desc: >
     如果启用此选项，您关注的用户不受过滤条件限制。
+  filter_out_vertical_videos: 过滤竖屏视频（仅在 app 推荐模式下有效）
   filter_by_view_count: 按播放数筛选
   filter_by_view_count_desc: 筛选掉播放数小于您设置的视频。
   filter_by_view_count_unit: 次

src/_locales/cmn-TW.yml

@@ -177,6 +177,7 @@ settings:
   disable_filters_for_followed_users: 正在跟隨的使用者不受過濾條件限制
   disable_filters_for_followed_users_desc: >
     如果啟用此選項，正在跟隨的使用者不受過濾條件限制。
+  filter_out_vertical_videos: 過濾直式影片（僅在 app 推薦模式下有效）
   filter_by_view_count: 按觀看次數篩選
   filter_by_view_count_desc: 篩選掉觀看次數少於您設定的影片。
   filter_by_view_count_unit: 次

src/_locales/en.yml

@@ -177,6 +177,7 @@ settings:
   disable_filters_for_followed_users: Disable filters for followed users
   disable_filters_for_followed_users_desc: >
     If you enable this option, all filters you set will be disabled for the users you follow.
+  filter_out_vertical_videos: Filter out vertical videos (only works on the app recommendation mode)
   filter_by_view_count: Filter by view count
   filter_by_view_count_desc: Filtered out videos with less than the view count you set.
   filter_by_view_count_unit: views

src/_locales/jyut.yml

@@ -177,6 +177,7 @@ settings:
   disable_filters_for_followed_users: Follow 緊嘅人唔受啲過濾條件限制
   disable_filters_for_followed_users_desc: >
     開咗呢個功能嘅話，你 Follow 緊嘅人唔會俾啲過濾條件限制。
+  filter_out_vertical_videos: 過濾打戙嘅片（淨係得 app 推介模式下有效）
   filter_by_view_count: 根據觀看次數篩選
   filter_by_view_count_desc: 避開啲觀看次數唔夠你設嗰個數嘅片。
   filter_by_view_count_unit: 次

src/components/Settings/Home/Home.vue

@@ -211,6 +211,9 @@ function handleToggleHomeTab(tab: any) {
       <SettingsItem :title="$t('settings.disable_filters_for_followed_users')" :desc="$t('settings.disable_filters_for_followed_users_desc')">
         <Radio v-model="settings.disableFilterForFollowedUser" />
       </SettingsItem>
+      <SettingsItem :title="$t('settings.filter_out_vertical_videos')">
+        <Radio v-model="settings.filterOutVerticalVideos" />
+      </SettingsItem>
       <SettingsItem :title="$t('settings.filter_by_view_count')" :desc="$t('settings.filter_by_view_count_desc')">
         <div flex="~ justify-end" w-full>
           <Input

src/composables/useFilter.ts

@@ -1,8 +1,10 @@
 import { settings } from '~/logic'
+import { isVerticalVideo } from '~/utils/uriParse'
 
 const get = (obj: any, path: string[]) => path.reduce((acc, part) => acc && acc[part], obj)
 
 export enum FilterType {
+  filterOutVerticalVideos,
   viewCount,
   viewCountStr,
   duration,
@@ -19,6 +21,11 @@ type FuncMap = { [key in FilterType]: {
 type KeyPath = Array<string>[]
 
 export function useFilter(isFollowedKeyPath: string[], filterOpt: FilterType[], keyList: KeyPath) {
+  function filterOutVerticalVideos(item: any, keyPath: string[], _filterValue: number) {
+    const value = get(item, keyPath)
+    return !isVerticalVideo(value)
+  }
+
   /**
    * Compares a number value in an object with a filter value.
    * Return `true` if the number value is greater than the filter value, `false` otherwise.
@@ -107,6 +114,11 @@ export function useFilter(isFollowedKeyPath: string[], filterOpt: FilterType[],
   // #endregion
 
   const funcMap: FuncMap = {
+    [FilterType.filterOutVerticalVideos]: {
+      func: filterOutVerticalVideos,
+      enabledKey: 'filterOutVerticalVideos',
+      valueKey: '',
+    },
     [FilterType.viewCount]: {
       func: compareNumber,
       enabledKey: 'enableFilterByViewCount',
@@ -137,6 +149,7 @@ export function useFilter(isFollowedKeyPath: string[], filterOpt: FilterType[],
   const filter = ref<Function | null>(null)
 
   watch(() => [
+    settings.value.filterOutVerticalVideos,
     settings.value.enableFilterByDuration,
     settings.value.enableFilterByViewCount,
     settings.value.enableFilterByTitle,
@@ -145,8 +158,8 @@ export function useFilter(isFollowedKeyPath: string[], filterOpt: FilterType[],
     settings.value.filterByViewCount,
     settings.value.filterByTitle,
     settings.value.filterByUser,
-  ], ([durationFilter, viewCountFilter, titleFilter, userFilter]) => {
-    if (!durationFilter && !viewCountFilter && !titleFilter && !userFilter) {
+  ], ([filterOutVerticalVideos, durationFilter, viewCountFilter, titleFilter, userFilter]) => {
+    if (!filterOutVerticalVideos && !durationFilter && !viewCountFilter && !titleFilter && !userFilter) {
       filter.value = null
       return
     }

src/contentScripts/views/Home/components/ForYou.vue

@@ -33,8 +33,8 @@ const filterFunc = useFilter(
 )
 const appFilterFunc = useFilter(
   ['bottom_rcmd_reason'],
-  [FilterType.duration, FilterType.viewCountStr, FilterType.title, FilterType.user, FilterType.user],
-  [['player_args', 'duration'], ['cover_left_text_1'], ['title'], ['mask', 'avatar', 'text'], ['mask', 'avatar', 'up_id']],
+  [FilterType.filterOutVerticalVideos, FilterType.duration, FilterType.viewCountStr, FilterType.title, FilterType.user, FilterType.user],
+  [['uri'], ['player_args', 'duration'], ['cover_left_text_1'], ['title'], ['mask', 'avatar', 'text'], ['mask', 'avatar', 'up_id']],
 )
 
 const { t } = useI18n()

src/logic/storage.ts

@@ -61,6 +61,7 @@ export interface Settings {
 
   // filter setting
   disableFilterForFollowedUser: boolean
+  filterOutVerticalVideos: boolean
   enableFilterByViewCount: boolean
   filterByViewCount: number
   enableFilterByDuration: boolean
@@ -133,6 +134,7 @@ export const settings = useStorageLocal('settings', ref<Settings>({
 
   // filter setting
   disableFilterForFollowedUser: false,
+  filterOutVerticalVideos: false,
   enableFilterByViewCount: false,
   filterByViewCount: 10000,
   enableFilterByDuration: false,