mirror of
https://github.com/cheeaun/phanpy.git
synced 2025-03-14 12:18:30 +03:00
New experimental Filtered Posts UI
This commit is contained in:
Lim Chee Aun
parent
955ac3f3bc
commit
422813be9c
10 changed files with 327 additions and 23 deletions
|
|
@ -50,9 +50,11 @@
|
|||
.status-pre-meta .name-text {
|
||||
display: inline;
|
||||
}
|
||||
.status-pre-meta .icon {
|
||||
color: var(--reblog-color);
|
||||
.status-pre-meta > * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.status-reblog .status-pre-meta .icon {
|
||||
color: var(--reblog-color);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -103,6 +105,52 @@
|
|||
background-color: var(--outline-color);
|
||||
}
|
||||
|
||||
.status.filtered {
|
||||
padding-block: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.status.filtered .status-filtered-info {
|
||||
pointer-events: none;
|
||||
flex-grow: 1;
|
||||
font-size: 90%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
mask-image: linear-gradient(to right, black 90%, transparent);
|
||||
position: relative;
|
||||
}
|
||||
.status.filtered .avatar {
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.7s ease-in;
|
||||
}
|
||||
.status.filtered:is(:hover, :focus, :active) .avatar {
|
||||
opacity: 1;
|
||||
}
|
||||
.status.filtered :is(.status-filtered-info-1, .status-filtered-info-2) {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
.status.filtered:hover :is(.status-filtered-info-1, .status-filtered-info-2) {
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
.status.filtered .status-filtered-info-1 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.status.filtered:is(:hover, :focus, :active) .status-filtered-info-1 {
|
||||
opacity: 0;
|
||||
}
|
||||
.status.filtered .status-filtered-info-2 {
|
||||
opacity: 0;
|
||||
transform: translateX(8px);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
.status.filtered:is(:hover, :focus, :active) .status-filtered-info-2 {
|
||||
opacity: 0.75;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.status .container {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
|
|
@ -195,6 +243,27 @@
|
|||
);
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-filtered-badge {
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
color: var(--text-insignificant-color);
|
||||
/* background: var(--bg-faded-color); */
|
||||
/* border: var(--hairline-width) solid var(--bg-color); */
|
||||
border: var(--hairline-width) dashed var(--text-insignificant-color);
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.status-filtered-badge.clickable:hover {
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
border-color: var(--text-color);
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
.status.large .content-container {
|
||||
margin-left: calc(-50px - 16px);
|
||||
|
|
@ -1002,3 +1071,37 @@ a.card:is(:hover, :focus) {
|
|||
text-transform: uppercase;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/* FILTERED */
|
||||
|
||||
#filtered-status-peek main > p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#filtered-status-peek main .heading {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#filtered-status-peek .status-link {
|
||||
border-radius: 16px;
|
||||
border: var(--hairline-width) dashed var(--text-insignificant-color);
|
||||
max-height: 33vh;
|
||||
max-height: 33dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
#filtered-status-peek .status-link .status {
|
||||
pointer-events: none;
|
||||
font-size: 90%;
|
||||
max-height: 33vh;
|
||||
max-height: 33dvh;
|
||||
overflow: hidden;
|
||||
mask-image: linear-gradient(black 80%, transparent 95%);
|
||||
}
|
||||
#filtered-status-peek .status-post-link {
|
||||
float: right;
|
||||
position: sticky;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import niceDateTime from '../utils/nice-date-time';
|
|||
import shortenNumber from '../utils/shorten-number';
|
||||
import showToast from '../utils/show-toast';
|
||||
import states, { getStatus, saveStatus, statusKey } from '../utils/states';
|
||||
import statusPeek from '../utils/status-peek';
|
||||
import store from '../utils/store';
|
||||
import visibilityIconsMap from '../utils/visibility-icons-map';
|
||||
|
||||
|
|
@ -72,6 +73,7 @@ function Status({
|
|||
contentTextWeight,
|
||||
enableTranslate,
|
||||
previewMode,
|
||||
allowFilters,
|
||||
}) {
|
||||
if (skeleton) {
|
||||
return (
|
||||
|
|
@ -141,10 +143,21 @@ function Status({
|
|||
// Non-API props
|
||||
_deleted,
|
||||
_pinned,
|
||||
_filtered,
|
||||
} = status;
|
||||
|
||||
console.debug('RENDER Status', id, status?.account.displayName);
|
||||
|
||||
if (allowFilters && size !== 'l' && _filtered) {
|
||||
return (
|
||||
<FilteredStatus
|
||||
status={status}
|
||||
filterInfo={_filtered}
|
||||
instance={instance}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const createdAtDate = new Date(createdAt);
|
||||
const editedAtDate = new Date(editedAt);
|
||||
|
||||
|
|
@ -183,6 +196,7 @@ function Status({
|
|||
};
|
||||
|
||||
if (reblog) {
|
||||
// If has statusID, means useItemID (cached in states)
|
||||
return (
|
||||
<div class="status-reblog" onMouseEnter={debugHover}>
|
||||
<div class="status-pre-meta">
|
||||
|
|
@ -191,7 +205,8 @@ function Status({
|
|||
boosted
|
||||
</div>
|
||||
<Status
|
||||
status={reblog}
|
||||
status={statusID ? null : reblog}
|
||||
statusID={statusID ? reblog.id : null}
|
||||
instance={instance}
|
||||
size={size}
|
||||
contentTextWeight={contentTextWeight}
|
||||
|
|
@ -1655,8 +1670,8 @@ function nicePostURL(url) {
|
|||
const unfurlMastodonLink = throttle(_unfurlMastodonLink);
|
||||
|
||||
const div = document.createElement('div');
|
||||
function getHTMLText(html) {
|
||||
if (!html) return 0;
|
||||
export function getHTMLText(html) {
|
||||
if (!html) return '';
|
||||
div.innerHTML = html
|
||||
.replace(/<\/p>/g, '</p>\n\n')
|
||||
.replace(/<\/li>/g, '</li>\n');
|
||||
|
|
@ -1687,4 +1702,94 @@ function safeBoundingBoxPadding() {
|
|||
return str;
|
||||
}
|
||||
|
||||
function FilteredStatus({ status, filterInfo, instance }) {
|
||||
const {
|
||||
account: { avatar, avatarStatic },
|
||||
createdAt,
|
||||
visibility,
|
||||
} = status;
|
||||
const filterTitleStr = filterInfo?.titlesStr || '';
|
||||
const createdAtDate = new Date(createdAt);
|
||||
const statusPeekText = statusPeek(status);
|
||||
|
||||
const [showPeek, setShowPeek] = useState(false);
|
||||
const bindLongPress = useLongPress(
|
||||
() => {
|
||||
setShowPeek(true);
|
||||
},
|
||||
{
|
||||
captureEvent: true,
|
||||
detect: 'touch',
|
||||
cancelOnMovement: true,
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
title={statusPeekText}
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPeek(true);
|
||||
}}
|
||||
{...bindLongPress()}
|
||||
>
|
||||
<article class="status filtered" tabindex="-1">
|
||||
<b
|
||||
class="status-filtered-badge clickable"
|
||||
title={filterTitleStr}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPeek(true);
|
||||
}}
|
||||
>
|
||||
Filtered
|
||||
</b>{' '}
|
||||
<Avatar url={avatarStatic || avatar} />
|
||||
<span class="status-filtered-info">
|
||||
<span class="status-filtered-info-1">
|
||||
<NameText account={status.account} instance={instance} />{' '}
|
||||
<Icon
|
||||
icon={visibilityIconsMap[visibility]}
|
||||
alt={visibilityText[visibility]}
|
||||
size="s"
|
||||
/>{' '}
|
||||
<RelativeTime datetime={createdAtDate} format="micro" />
|
||||
</span>
|
||||
<span class="status-filtered-info-2">{statusPeekText}</span>
|
||||
</span>
|
||||
</article>
|
||||
{!!showPeek && (
|
||||
<Modal
|
||||
class="light"
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
setShowPeek(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div id="filtered-status-peek" class="sheet">
|
||||
<main tabIndex="-1">
|
||||
<p class="heading">
|
||||
<b class="status-filtered-badge">Filtered</b> {filterTitleStr}
|
||||
</p>
|
||||
<Link
|
||||
class="status-link"
|
||||
to={`/${instance}/s/${status.id}`}
|
||||
onClick={() => {
|
||||
setShowPeek(false);
|
||||
}}
|
||||
>
|
||||
<Status status={status} instance={instance} size="s" readOnly />
|
||||
<button type="button" class="status-post-link plain3">
|
||||
See post »
|
||||
</button>
|
||||
</Link>
|
||||
</main>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(Status);
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ function Timeline({
|
|||
headerStart,
|
||||
headerEnd,
|
||||
timelineStart,
|
||||
allowFilters,
|
||||
}) {
|
||||
const [items, setItems] = useState([]);
|
||||
const [uiState, setUIState] = useState('default');
|
||||
|
|
@ -310,6 +311,16 @@ function Timeline({
|
|||
title = 'Pinned posts';
|
||||
}
|
||||
if (items) {
|
||||
// Here, we don't hide filtered posts, but we sort them last
|
||||
items.sort((a, b) => {
|
||||
if (a._filtered && !b._filtered) {
|
||||
return 1;
|
||||
}
|
||||
if (!a._filtered && b._filtered) {
|
||||
return -1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
return (
|
||||
<li key={`timeline-${statusID}`}>
|
||||
<StatusCarousel title={title} class={`${type}-carousel`}>
|
||||
|
|
@ -352,9 +363,17 @@ function Timeline({
|
|||
<li key={`timeline-${statusID + _pinned}`}>
|
||||
<Link class="status-link timeline-item" to={url}>
|
||||
{useItemID ? (
|
||||
<Status statusID={statusID} instance={instance} />
|
||||
<Status
|
||||
statusID={statusID}
|
||||
instance={instance}
|
||||
allowFilters
|
||||
/>
|
||||
) : (
|
||||
<Status status={status} instance={instance} />
|
||||
<Status
|
||||
status={status}
|
||||
instance={instance}
|
||||
allowFilters
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { useSnapshot } from 'valtio';
|
|||
|
||||
import Timeline from '../components/timeline';
|
||||
import { api } from '../utils/api';
|
||||
import { filteredItems } from '../utils/filters';
|
||||
import states from '../utils/states';
|
||||
import { getStatus, saveStatus } from '../utils/states';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
|
@ -21,12 +22,14 @@ function Following({ title, path, id, ...props }) {
|
|||
homeIterator.current = masto.v1.timelines.listHome({ limit: LIMIT });
|
||||
}
|
||||
const results = await homeIterator.current.next();
|
||||
const { value } = results;
|
||||
let { value } = results;
|
||||
if (value?.length) {
|
||||
if (firstLoad) {
|
||||
latestItem.current = value[0].id;
|
||||
console.log('First load', latestItem.current);
|
||||
}
|
||||
|
||||
value = filteredItems(value, 'home');
|
||||
value.forEach((item) => {
|
||||
saveStatus(item, instance);
|
||||
});
|
||||
|
|
@ -49,8 +52,9 @@ function Following({ title, path, id, ...props }) {
|
|||
since_id: latestItem.current,
|
||||
})
|
||||
.next();
|
||||
const { value } = results;
|
||||
let { value } = results;
|
||||
console.log('checkForUpdates', latestItem.current, value);
|
||||
value = filteredItems(value, 'home');
|
||||
if (value?.length && value.some((item) => !item.reblog)) {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -119,6 +123,7 @@ function Following({ title, path, id, ...props }) {
|
|||
useItemID
|
||||
boostsCarousel={snapStates.settings.boostsCarousel}
|
||||
{...props}
|
||||
allowFilters
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import Icon from '../components/icon';
|
|||
import Link from '../components/link';
|
||||
import Timeline from '../components/timeline';
|
||||
import { api } from '../utils/api';
|
||||
import { filteredItems } from '../utils/filters';
|
||||
import { saveStatus } from '../utils/states';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
|
|
@ -23,12 +24,13 @@ function List(props) {
|
|||
});
|
||||
}
|
||||
const results = await listIterator.current.next();
|
||||
const { value } = results;
|
||||
let { value } = results;
|
||||
if (value?.length) {
|
||||
if (firstLoad) {
|
||||
latestItem.current = value[0].id;
|
||||
}
|
||||
|
||||
value = filteredItems(value, 'home');
|
||||
value.forEach((item) => {
|
||||
saveStatus(item, instance);
|
||||
});
|
||||
|
|
@ -42,7 +44,8 @@ function List(props) {
|
|||
limit: 1,
|
||||
since_id: latestItem.current,
|
||||
});
|
||||
const { value } = results;
|
||||
let { value } = results;
|
||||
value = filteredItems(value, 'home');
|
||||
if (value?.length) {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -76,6 +79,7 @@ function List(props) {
|
|||
checkForUpdates={checkForUpdates}
|
||||
useItemID
|
||||
boostsCarousel
|
||||
allowFilters
|
||||
headerStart={
|
||||
<Link to="/l" class="button plain">
|
||||
<Icon icon="list" size="l" />
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { useSnapshot } from 'valtio';
|
|||
import Icon from '../components/icon';
|
||||
import Timeline from '../components/timeline';
|
||||
import { api } from '../utils/api';
|
||||
import { filteredItems } from '../utils/filters';
|
||||
import states from '../utils/states';
|
||||
import { saveStatus } from '../utils/states';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
|
@ -33,12 +34,13 @@ function Public({ local, ...props }) {
|
|||
});
|
||||
}
|
||||
const results = await publicIterator.current.next();
|
||||
const { value } = results;
|
||||
let { value } = results;
|
||||
if (value?.length) {
|
||||
if (firstLoad) {
|
||||
latestItem.current = value[0].id;
|
||||
}
|
||||
|
||||
value = filteredItems(value, 'public');
|
||||
value.forEach((item) => {
|
||||
saveStatus(item, instance);
|
||||
});
|
||||
|
|
@ -55,7 +57,8 @@ function Public({ local, ...props }) {
|
|||
since_id: latestItem.current,
|
||||
})
|
||||
.next();
|
||||
const { value } = results;
|
||||
let { value } = results;
|
||||
value = filteredItems(value, 'public');
|
||||
if (value?.length) {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -84,6 +87,7 @@ function Public({ local, ...props }) {
|
|||
useItemID
|
||||
headerStart={<></>}
|
||||
boostsCarousel={snapStates.settings.boostsCarousel}
|
||||
allowFilters
|
||||
headerEnd={
|
||||
<Menu
|
||||
portal={{
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import states, {
|
|||
statusKey,
|
||||
threadifyStatus,
|
||||
} from '../utils/states';
|
||||
import statusPeek from '../utils/status-peek';
|
||||
import { getCurrentAccount } from '../utils/store-utils';
|
||||
import useScroll from '../utils/useScroll';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
|
@ -306,15 +307,7 @@ function StatusPage() {
|
|||
}, [heroStatus]);
|
||||
const heroContentText = useMemo(() => {
|
||||
if (!heroStatus) return '';
|
||||
const { spoilerText, content } = heroStatus;
|
||||
let text;
|
||||
if (spoilerText) {
|
||||
text = spoilerText;
|
||||
} else {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = content;
|
||||
text = div.innerText.trim();
|
||||
}
|
||||
let text = statusPeek(heroStatus);
|
||||
if (text.length > 64) {
|
||||
// "The title should ideally be less than 64 characters in length"
|
||||
// https://www.w3.org/Provider/Style/TITLE.html
|
||||
|
|
|
|||
34
src/utils/filters.jsx
Normal file
34
src/utils/filters.jsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import store from './store';
|
||||
|
||||
export function filteredItem(item, filterContext, currentAccountID) {
|
||||
const { filtered } = item;
|
||||
if (!filtered?.length) return true;
|
||||
const isSelf = currentAccountID && item.account?.id === currentAccountID;
|
||||
if (isSelf) return true;
|
||||
const appliedFilters = filtered.filter((f) => {
|
||||
const { filter } = f;
|
||||
const hasContext = filter.context.includes(filterContext);
|
||||
if (!hasContext) return false;
|
||||
if (!filter.expiresAt) return hasContext;
|
||||
return new Date(filter.expiresAt) > new Date();
|
||||
});
|
||||
const isHidden = appliedFilters.some((f) => f.filter.filterAction === 'hide');
|
||||
console.log({ isHidden, filtered, appliedFilters });
|
||||
if (!isHidden) {
|
||||
const filterTitles = appliedFilters.map((f) => f.filter.title);
|
||||
item._filtered = {
|
||||
titles: filterTitles,
|
||||
titlesStr: filterTitles.join(' • '),
|
||||
};
|
||||
item._test = { test: 'test' };
|
||||
}
|
||||
return !isHidden;
|
||||
}
|
||||
export function filteredItems(items, filterContext) {
|
||||
if (!items?.length) return [];
|
||||
if (!filterContext) return items;
|
||||
const currentAccountID = store.session.get('currentAccount');
|
||||
return items.filter((item) =>
|
||||
filteredItem(item, filterContext, currentAccountID),
|
||||
);
|
||||
}
|
||||
|
|
@ -114,8 +114,11 @@ export function saveStatus(status, instance, opts) {
|
|||
opts,
|
||||
);
|
||||
if (!status) return;
|
||||
if (!override && getStatus(status.id)) return;
|
||||
const oldStatus = getStatus(status.id, instance);
|
||||
if (!override && oldStatus) return;
|
||||
const key = statusKey(status.id, instance);
|
||||
if (oldStatus?._pinned) status._pinned = oldStatus._pinned;
|
||||
if (oldStatus?._filtered) status._filtered = oldStatus._filtered;
|
||||
states.statuses[key] = status;
|
||||
if (status.reblog) {
|
||||
const key = statusKey(status.reblog.id, instance);
|
||||
|
|
|
|||
34
src/utils/status-peek.jsx
Normal file
34
src/utils/status-peek.jsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { getHTMLText } from '../components/status';
|
||||
|
||||
function statusPeek(status) {
|
||||
const { spoilerText, content, poll, mediaAttachments } = status;
|
||||
let text = '';
|
||||
if (spoilerText?.trim()) {
|
||||
text += spoilerText;
|
||||
} else {
|
||||
text += getHTMLText(content);
|
||||
}
|
||||
text = text.trim();
|
||||
if (poll) {
|
||||
text += ' 📊';
|
||||
}
|
||||
if (mediaAttachments?.length) {
|
||||
text +=
|
||||
' ' +
|
||||
mediaAttachments
|
||||
.map(
|
||||
(m) =>
|
||||
({
|
||||
image: '🖼️',
|
||||
gifv: '🎞️',
|
||||
video: '📹',
|
||||
audio: '🎵',
|
||||
unknown: '',
|
||||
}[m.type] || ''),
|
||||
)
|
||||
.join('');
|
||||
}
|
||||
return text;
|
||||
}
|
||||
|
||||
export default statusPeek;
|
||||
Loading…
Add table
Reference in a new issue