UJ 4.0: Оновлений вигляд стрічки. Логіка обрізки контенту. Педжинація стрічки. Інтегровані вставки

Онов­ле­ний вигляд стрічки

Вирі­шив зупи­ни­ти­ся на вигля­ді стрі­чки як у Threads, коли пости роз­ді­ле­ні ліні­єю. В Threads немає діле­н­ня на ​“ста­тя” та «комен­тар», є тіль­ки ​“пост”. Я вирі­шив теж зро­би­ти дуже умов­не роз­ді­ле­н­ня. Тому ​“комен­та­рі” та ​“обго­во­ре­н­ня” мати­муть такий самий вигляд, як і інші пости в стрі­чці, тому логі­чно від­обра­жа­ти їх без від­сту­пів. На сто­рін­ці ​“обго­во­ре­н­ня” або ​“посту”, голов­ний пост буде мати біль­ший роз­мір заго­лов­ку та тексту.

Логі­ка обріз­ки контенту

Я поду­мав, що бага­то постів вза­га­лі не потре­бу­ють пере­хо­ду на сто­рін­ку посту. Буде добре, якщо ми буде­мо зали­ша­ти­ся в стрі­чці. Тому пости тепер діля­ться на коро­ткі та дов­гі. Коро­ткий пост це пост у яко­го 1 встав­ка і до 480 сим­во­лів текс­ту (без вра­ху­ва­н­ня дов­жи­ни поси­ла­н­ня вста­вок). Такий пост буде від­обра­же­но в стрі­чці пов­ні­стю. Дов­гий пост це 2 і біль­ше встав­ки, біль­ше за 480 сим­во­лів текс­ту. Для тако­го посту з’яв­ля­є­ться поси­ла­н­ня ​“Чита­ти далі”, а пре­вью буде фор­му­ва­ти­ся так: якщо пост почи­на­є­ться з текс­ту, то буде взя­то 240 сим­во­лів з пер­шо­го абза­цу. Якщо далі йде встав­ка (зобра­же­н­ня або поси­ла­н­ня), то така встав­ка бере­ться для пре­вью. Якщо пост почи­на­є­ться зі встав­ки, то текст для пре­вью не береться.

Педжи­на­ція стрічки

Додав педжи­на­цію. Вона реа­лі­зо­ва­на у вигля­ді кно­пки ​“Заван­та­жи­ти ще”. Вона від­обра­жа­є­ться тіль­ки пер­ший раз, далі під­ван­та­же­н­ня від­бу­ва­є­ться авто­ма­ти­чно при скро­лі. Чому так? Пошу­ко­ви­кам не подо­ба­є­ться, коли на сто­рін­ці є без­кі­не­чний скрол, вони не розу­мі­ють коли потрі­бно завер­ши­ти скрол і зібра­ти кон­тент. Саме для цьо­го потрі­бен цей стоп­пер. Ця кно­пка має поси­ла­н­ня, котре можно від­кри­ти у новій табі і поча­ти пере­гляд з дру­гої сто­рін­ки, тоб­то GET пара­метр з номе­ром сто­рін­ки працює.

Інте­гро­ва­ні вставки

Розі­брав­ся з логі­кою від­обра­же­н­ня вста­вок і опти­мі­за­ці­я­ми. Якщо всі встав­ки дода­ва­ти через фрейм, навіть зви­чай­ні поси­ла­н­ня, то на сто­рін­ці буде над­то бага­то IFRAME, що зна­чно погір­шить швид­кість рен­де­ру. Тому я роз­ді­лив встав­ки на два види: поси­ла­н­ня і фрей­ми. І пер­ші і дру­гі обро­бляє один сер­віс, але поси­ла­н­ня встав­ля­ю­ться у вигля­ді SVG зобра­же­н­ня, а фрей­ми це фрей­ми. Для фрей­мів є спи­сок доме­нів, кор­ті підтримуються.

api.soundcloud.com, clips.twitch.tv, codepen.io, dailymotion.com, facebook.com,
fb.com, figma.com, giphy.com, i.giphy.com, instagram.com, linkedin.com, loom.com,
m.facebook.com, media.giphy.com, new.reddit.com, old.reddit.com, open.spotify.com,
pin.it, pinterest.ca, pinterest.co.uk, pinterest.com, reddit.com, soundcloud.com,
steamcommunity.com, store.steampowered.com, t.me, telegram.dog, telegram.me,
threads.com, threads.net, tiktok.com, twitch.tv, twitter.com, vimeo.com,
w.soundcloud.com, x.com, youtube.com, youtu.be

Також тепер не можна буде зро­би­ти текст поси­ла­н­ням, тому що всі поси­ла­н­ня будуть про­хо­ди­ти через сер­віс вста­вок, щоб кори­сту­вач бачив кар­тку і мав біль­ше уяв­ле­н­ня куди він пере­хо­дить. Ще я вирі­шив не роби­ти пов­но­ро­змір­ні пре­вью поси­лань, тому що часто зобра­же­н­ня має пога­ну кар­тин­ку або вона від­су­тня — заби­ра­ти бага­то про­сто­ру на бите зобра­же­н­ня це незручність.

Роз­гор­та­н­ня демо від­кла­да­є­ться (воно у про­цес­сі), є бажа­н­ня зро­би­ти його якнайшвидше.