logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: fd1011f622870385d8a694d60b66269e731b36cd
parent 3e99006e2ab06d2c8ade2eb20e12b1d2fbbcaac2
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date:   Wed, 22 May 2024 12:25:24 +0000

Merge branch 'scrobbles-age' into 'develop'

Add setting to only show scrobbles newer than certain age.

See merge request pleroma/pleroma-fe!1904

Diffstat:

Achangelog.d/scrobbles-age-filter.add1+
Dsrc/components/settings_modal/helpers/size_setting.js40----------------------------------------
Dsrc/components/settings_modal/helpers/size_setting.vue62--------------------------------------------------------------
Asrc/components/settings_modal/helpers/unit_setting.js48++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/components/settings_modal/helpers/unit_setting.vue61+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Msrc/components/settings_modal/settings_modal_admin_content.scss4----
Msrc/components/settings_modal/settings_modal_user_content.scss4----
Msrc/components/settings_modal/tabs/filtering_tab.js2++
Msrc/components/settings_modal/tabs/filtering_tab.vue11+++++++++++
Msrc/components/settings_modal/tabs/general_tab.js4++--
Msrc/components/settings_modal/tabs/general_tab.vue4++--
Msrc/components/status/status.js22+++++++++++++++++++++-
Msrc/i18n/en.json9+++++++++
Msrc/modules/config.js1+
14 files changed, 158 insertions(+), 115 deletions(-)

diff --git a/changelog.d/scrobbles-age-filter.add b/changelog.d/scrobbles-age-filter.add @@ -0,0 +1 @@ +Option to only show scrobbles that are recent enough diff --git a/src/components/settings_modal/helpers/size_setting.js b/src/components/settings_modal/helpers/size_setting.js @@ -1,40 +0,0 @@ -import Select from 'src/components/select/select.vue' -import Setting from './setting.js' - -export const allCssUnits = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%'] -export const defaultHorizontalUnits = ['px', 'rem', 'vw'] -export const defaultVerticalUnits = ['px', 'rem', 'vh'] - -export default { - ...Setting, - components: { - ...Setting.components, - Select - }, - props: { - ...Setting.props, - min: Number, - units: { - type: Array, - default: () => allCssUnits - } - }, - computed: { - ...Setting.computed, - stateUnit () { - return this.state.replace(/\d+/, '') - }, - stateValue () { - return this.state.replace(/\D+/, '') - } - }, - methods: { - ...Setting.methods, - updateValue (e) { - this.configSink(this.path, parseInt(e.target.value) + this.stateUnit) - }, - updateUnit (e) { - this.configSink(this.path, this.stateValue + e.target.value) - } - } -} diff --git a/src/components/settings_modal/helpers/size_setting.vue b/src/components/settings_modal/helpers/size_setting.vue @@ -1,62 +0,0 @@ -<template> - <span - v-if="matchesExpertLevel" - class="SizeSetting" - > - <label - :for="path" - class="size-label" - > - <slot /> - </label> - <input - :id="path" - class="input number-input" - type="number" - step="1" - :disabled="disabled" - :min="min || 0" - :value="stateValue" - @change="updateValue" - > - <Select - :id="path" - :model-value="stateUnit" - :disabled="disabled" - class="css-unit-input" - @change="updateUnit" - > - <option - v-for="option in units" - :key="option" - :value="option" - > - {{ option }} - </option> - </Select> - {{ ' ' }} - <ModifiedIndicator - :changed="isChanged" - :onclick="reset" - /> - </span> -</template> - -<script src="./size_setting.js"></script> - -<style lang="scss"> -.SizeSetting { - .number-input { - max-width: 6.5em; - } - - .css-unit-input, - .css-unit-input select { - margin-left: 0.5em; - width: 4em; - max-width: 4em; - min-width: 4em; - } -} - -</style> diff --git a/src/components/settings_modal/helpers/unit_setting.js b/src/components/settings_modal/helpers/unit_setting.js @@ -0,0 +1,48 @@ +import Select from 'src/components/select/select.vue' +import Setting from './setting.js' + +export const allCssUnits = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%'] +export const defaultHorizontalUnits = ['px', 'rem', 'vw'] +export const defaultVerticalUnits = ['px', 'rem', 'vh'] + +export default { + ...Setting, + components: { + ...Setting.components, + Select + }, + props: { + ...Setting.props, + min: Number, + units: { + type: Array, + default: () => allCssUnits + }, + unitSet: { + type: String, + default: 'none' + } + }, + computed: { + ...Setting.computed, + stateUnit () { + return this.state.replace(/\d+/, '') + }, + stateValue () { + return this.state.replace(/\D+/, '') + } + }, + methods: { + ...Setting.methods, + getUnitString (value) { + if (this.unitSet === 'none') return value + return this.$t(['settings', 'units', this.unitSet, value].join('.')) + }, + updateValue (e) { + this.configSink(this.path, parseInt(e.target.value) + this.stateUnit) + }, + updateUnit (e) { + this.configSink(this.path, this.stateValue + e.target.value) + } + } +} diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue @@ -0,0 +1,61 @@ +<template> + <span + v-if="matchesExpertLevel" + class="UnitSetting" + > + <label + :for="path" + class="size-label" + > + <slot /> + </label> + <input + :id="path" + class="input number-input" + type="number" + step="1" + :disabled="disabled" + :min="min || 0" + :value="stateValue" + @change="updateValue" + > + <Select + :id="path" + :model-value="stateUnit" + :disabled="disabled" + class="unit-input unstyled" + @change="updateUnit" + > + <option + v-for="option in units" + :key="option" + :value="option" + > + {{ getUnitString(option) }} + </option> + </Select> + {{ ' ' }} + <ModifiedIndicator + :changed="isChanged" + :onclick="reset" + /> + </span> +</template> + +<script src="./unit_setting.js"></script> + +<style lang="scss"> +.UnitSetting { + .number-input { + max-width: 6.5em; + text-align: right; + } + + .unit-input, + .unit-input select { + min-width: 4em; + width: auto; + } +} + +</style> diff --git a/src/components/settings_modal/settings_modal_admin_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss @@ -31,10 +31,6 @@ margin-bottom: 1em; } - select { - min-width: 10em; - } - textarea { width: 100%; max-width: 100%; diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss @@ -31,10 +31,6 @@ margin-bottom: 1em; } - select { - min-width: 10em; - } - textarea { width: 100%; max-width: 100%; diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js @@ -1,6 +1,7 @@ import { filter, trim, debounce } from 'lodash' import BooleanSetting from '../helpers/boolean_setting.vue' import ChoiceSetting from '../helpers/choice_setting.vue' +import UnitSetting from '../helpers/unit_setting.vue' import IntegerSetting from '../helpers/integer_setting.vue' import SharedComputedObject from '../helpers/shared_computed_object.js' @@ -19,6 +20,7 @@ const FilteringTab = { components: { BooleanSetting, ChoiceSetting, + UnitSetting, IntegerSetting }, computed: { diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue @@ -119,6 +119,17 @@ {{ $t('settings.hide_scrobbles') }} </BooleanSetting> </li> + <li> + <UnitSetting + key="hideScrobblesAfter" + path="hideScrobblesAfter" + :units="['m', 'h', 'd']" + unitSet="time" + expert="1" + > + {{ $t('settings.hide_scrobbles_after') }} + </UnitSetting> + </li> </ul> </div> <div diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js @@ -3,7 +3,7 @@ import ChoiceSetting from '../helpers/choice_setting.vue' import ScopeSelector from 'src/components/scope_selector/scope_selector.vue' import IntegerSetting from '../helpers/integer_setting.vue' import FloatSetting from '../helpers/float_setting.vue' -import SizeSetting, { defaultHorizontalUnits } from '../helpers/size_setting.vue' +import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue' import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue' import SharedComputedObject from '../helpers/shared_computed_object.js' @@ -64,7 +64,7 @@ const GeneralTab = { ChoiceSetting, IntegerSetting, FloatSetting, - SizeSetting, + UnitSetting, InterfaceLanguageSwitcher, ScopeSelector, ProfileSettingIndicator diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue @@ -134,7 +134,7 @@ <li v-if="expertLevel > 0"> {{ $t('settings.column_sizes') }} <div class="column-settings"> - <SizeSetting + <UnitSetting v-for="column in columns" :key="column" :path="column + 'ColumnWidth'" @@ -142,7 +142,7 @@ expert="1" > {{ $t('settings.column_sizes_' + column) }} - </SizeSetting> + </UnitSetting> </div> </li> <li class="select-multiple"> diff --git a/src/components/status/status.js b/src/components/status/status.js @@ -425,7 +425,27 @@ const Status = { return this.quotedStatus && this.displayQuote }, scrobblePresent () { - return !this.mergedConfig.hideScrobbles && this.status.user.latestScrobble && this.status.user.latestScrobble.artist + if (this.mergedConfig.hideScrobbles) return false + if (!this.status.user.latestScrobble) return false + const value = this.mergedConfig.hideScrobblesAfter.match(/\d+/gs)[0] + const unit = this.mergedConfig.hideScrobblesAfter.match(/\D+/gs)[0] + let multiplier = 60 * 1000 // minutes is smallest unit + switch (unit) { + case 'm': + break + case 'h': + multiplier *= 60 // hour + break + case 'd': + multiplier *= 60 // hour + multiplier *= 24 // day + break + } + const maxAge = Number(value) * multiplier + const createdAt = Date.parse(this.status.user.latestScrobble.created_at) + const age = Date.now() - createdAt + if (age > maxAge) return false + return this.status.user.latestScrobble.artist }, scrobble () { return this.status.user.latestScrobble diff --git a/src/i18n/en.json b/src/i18n/en.json @@ -395,6 +395,14 @@ "desc": "To enable two-factor authentication, enter the code from your two-factor app:" } }, + "units": { + "time": { + "m": "minutes", + "s": "seconds", + "h": "hours", + "d": "days" + } + }, "lists_navigation": "Show lists in navigation", "allow_following_move": "Allow auto-follow when following account moves", "attachmentRadius": "Attachments", @@ -502,6 +510,7 @@ "mute_bot_posts": "Mute bot posts", "hide_actor_type_indication": "Hide actor type (bots, groups, etc.) indication in posts", "hide_scrobbles": "Hide scrobbles", + "hide_scrobbles_after": "Hide scrobbles older than", "mute_sensitive_posts": "Mute sensitive posts", "hide_all_muted_posts": "Hide muted posts", "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)", diff --git a/src/modules/config.js b/src/modules/config.js @@ -43,6 +43,7 @@ export const defaultState = { hideAttachments: false, hideAttachmentsInConv: false, hideScrobbles: false, + hideScrobblesAfter: '2d', maxThumbnails: 16, hideNsfw: true, preloadImage: true,