aboutsummaryrefslogtreecommitdiff
path: root/src/services
diff options
context:
space:
mode:
Diffstat (limited to 'src/services')
-rw-r--r--src/services/api/api.service.js136
-rw-r--r--src/services/backend_interactor_service/backend_interactor_service.js30
-rw-r--r--src/services/color_convert/color_convert.js110
-rw-r--r--src/services/file_type/file_type.service.js4
-rw-r--r--src/services/new_api/oauth.js82
-rw-r--r--src/services/new_api/user_search.js16
-rw-r--r--src/services/new_api/utils.js36
-rw-r--r--src/services/notifications_fetcher/notifications_fetcher.service.js46
-rw-r--r--src/services/push/push.js69
-rw-r--r--src/services/status_poster/status_poster.service.js4
-rw-r--r--src/services/style_setter/style_setter.js496
-rw-r--r--src/services/timeline_fetcher/timeline_fetcher.service.js10
-rw-r--r--src/services/user_highlighter/user_highlighter.js48
13 files changed, 996 insertions, 91 deletions
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index f14bfd6d..ae876b7f 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -8,12 +8,14 @@ const TAG_TIMELINE_URL = '/api/statusnet/tags/timeline'
const FAVORITE_URL = '/api/favorites/create'
const UNFAVORITE_URL = '/api/favorites/destroy'
const RETWEET_URL = '/api/statuses/retweet'
+const UNRETWEET_URL = '/api/statuses/unretweet'
const STATUS_UPDATE_URL = '/api/statuses/update.json'
const STATUS_DELETE_URL = '/api/statuses/destroy'
const STATUS_URL = '/api/statuses/show'
const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload'
const CONVERSATION_URL = '/api/statusnet/conversation'
const MENTIONS_URL = '/api/statuses/mentions.json'
+const DM_TIMELINE_URL = '/api/statuses/dm_timeline.json'
const FOLLOWERS_URL = '/api/statuses/followers.json'
const FRIENDS_URL = '/api/statuses/friends.json'
const FOLLOWING_URL = '/api/friendships/create.json'
@@ -26,10 +28,18 @@ const BANNER_UPDATE_URL = '/api/account/update_profile_banner.json'
const PROFILE_UPDATE_URL = '/api/account/update_profile.json'
const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json'
const QVITTER_USER_TIMELINE_URL = '/api/qvitter/statuses/user_timeline.json'
+const QVITTER_USER_NOTIFICATIONS_URL = '/api/qvitter/statuses/notifications.json'
+const QVITTER_USER_NOTIFICATIONS_READ_URL = '/api/qvitter/statuses/notifications/read.json'
const BLOCKING_URL = '/api/blocks/create.json'
const UNBLOCKING_URL = '/api/blocks/destroy.json'
const USER_URL = '/api/users/show.json'
const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import'
+const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account'
+const CHANGE_PASSWORD_URL = '/api/pleroma/change_password'
+const FOLLOW_REQUESTS_URL = '/api/pleroma/friend_requests'
+const APPROVE_USER_URL = '/api/pleroma/friendships/approve'
+const DENY_USER_URL = '/api/pleroma/friendships/deny'
+const SUGGESTIONS_URL = '/api/v1/suggestions'
import { each, map } from 'lodash'
import 'whatwg-fetch'
@@ -44,16 +54,6 @@ let fetch = (url, options) => {
return oldfetch(fullUrl, options)
}
-// from https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
-let utoa = (str) => {
- // first we use encodeURIComponent to get percent-encoded UTF-8,
- // then we convert the percent encodings into raw bytes which
- // can be fed into btoa.
- return btoa(encodeURIComponent(str)
- .replace(/%([0-9A-F]{2})/g,
- (match, p1) => { return String.fromCharCode('0x' + p1) }))
-}
-
// Params
// cropH
// cropW
@@ -128,8 +128,8 @@ const updateProfile = ({credentials, params}) => {
const form = new FormData()
each(params, (value, key) => {
- if (key === 'description' || /* Always include description, because it might be empty */
- value) {
+ /* Always include description, no_rich_text and locked, because it might be empty or false */
+ if (key === 'description' || key === 'locked' || key === 'no_rich_text' || value) {
form.append(key, value)
}
})
@@ -151,6 +151,7 @@ const updateProfile = ({credentials, params}) => {
// bio
// homepage
// location
+// token
const register = (params) => {
const form = new FormData()
@@ -166,9 +167,9 @@ const register = (params) => {
})
}
-const authHeaders = (user) => {
- if (user && user.username && user.password) {
- return { 'Authorization': `Basic ${utoa(`${user.username}:${user.password}`)}` }
+const authHeaders = (accessToken) => {
+ if (accessToken) {
+ return { 'Authorization': `Bearer ${accessToken}` }
} else {
return { }
}
@@ -214,6 +215,22 @@ const unblockUser = ({id, credentials}) => {
}).then((data) => data.json())
}
+const approveUser = ({id, credentials}) => {
+ let url = `${APPROVE_USER_URL}?user_id=${id}`
+ return fetch(url, {
+ headers: authHeaders(credentials),
+ method: 'POST'
+ }).then((data) => data.json())
+}
+
+const denyUser = ({id, credentials}) => {
+ let url = `${DENY_USER_URL}?user_id=${id}`
+ return fetch(url, {
+ headers: authHeaders(credentials),
+ method: 'POST'
+ }).then((data) => data.json())
+}
+
const fetchUser = ({id, credentials}) => {
let url = `${USER_URL}?user_id=${id}`
return fetch(url, { headers: authHeaders(credentials) })
@@ -238,6 +255,12 @@ const fetchAllFollowing = ({username, credentials}) => {
.then((data) => data.json())
}
+const fetchFollowRequests = ({credentials}) => {
+ const url = FOLLOW_REQUESTS_URL
+ return fetch(url, { headers: authHeaders(credentials) })
+ .then((data) => data.json())
+}
+
const fetchConversation = ({id, credentials}) => {
let url = `${CONVERSATION_URL}/${id}.json?count=100`
return fetch(url, { headers: authHeaders(credentials) })
@@ -271,8 +294,13 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use
public: PUBLIC_TIMELINE_URL,
friends: FRIENDS_TIMELINE_URL,
mentions: MENTIONS_URL,
+ dms: DM_TIMELINE_URL,
+ notifications: QVITTER_USER_NOTIFICATIONS_URL,
'publicAndExternal': PUBLIC_AND_EXTERNAL_TIMELINE_URL,
user: QVITTER_USER_TIMELINE_URL,
+ // separate timeline for own posts, so it won't break due to user timeline bugs
+ // really needed only for broken favorites
+ own: QVITTER_USER_TIMELINE_URL,
tag: TAG_TIMELINE_URL
}
@@ -298,7 +326,14 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use
const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
url += `?${queryString}`
- return fetch(url, { headers: authHeaders(credentials) }).then((data) => data.json())
+ return fetch(url, { headers: authHeaders(credentials) })
+ .then((data) => {
+ if (data.ok) {
+ return data
+ }
+ throw new Error('Error fetching timeline')
+ })
+ .then((data) => data.json())
}
const verifyCredentials = (user) => {
@@ -329,12 +364,23 @@ const retweet = ({ id, credentials }) => {
})
}
-const postStatus = ({credentials, status, mediaIds, inReplyToStatusId}) => {
+const unretweet = ({ id, credentials }) => {
+ return fetch(`${UNRETWEET_URL}/${id}.json`, {
+ headers: authHeaders(credentials),
+ method: 'POST'
+ })
+}
+
+const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType}) => {
const idsText = mediaIds.join(',')
const form = new FormData()
form.append('status', status)
form.append('source', 'Pleroma FE')
+ if (spoilerText) form.append('spoiler_text', spoilerText)
+ if (visibility) form.append('visibility', visibility)
+ if (sensitive) form.append('sensitive', sensitive)
+ if (contentType) form.append('content_type', contentType)
form.append('media_ids', idsText)
if (inReplyToStatusId) {
form.append('in_reply_to_status_id', inReplyToStatusId)
@@ -373,6 +419,34 @@ const followImport = ({params, credentials}) => {
.then((response) => response.ok)
}
+const deleteAccount = ({credentials, password}) => {
+ const form = new FormData()
+
+ form.append('password', password)
+
+ return fetch(DELETE_ACCOUNT_URL, {
+ body: form,
+ method: 'POST',
+ headers: authHeaders(credentials)
+ })
+ .then((response) => response.json())
+}
+
+const changePassword = ({credentials, password, newPassword, newPasswordConfirmation}) => {
+ const form = new FormData()
+
+ form.append('password', password)
+ form.append('new_password', newPassword)
+ form.append('new_password_confirmation', newPasswordConfirmation)
+
+ return fetch(CHANGE_PASSWORD_URL, {
+ body: form,
+ method: 'POST',
+ headers: authHeaders(credentials)
+ })
+ .then((response) => response.json())
+}
+
const fetchMutes = ({credentials}) => {
const url = '/api/qvitter/mutes.json'
@@ -381,6 +455,24 @@ const fetchMutes = ({credentials}) => {
}).then((data) => data.json())
}
+const suggestions = ({credentials}) => {
+ return fetch(SUGGESTIONS_URL, {
+ headers: authHeaders(credentials)
+ }).then((data) => data.json())
+}
+
+const markNotificationsAsSeen = ({id, credentials}) => {
+ const body = new FormData()
+
+ body.append('latest_id', id)
+
+ return fetch(QVITTER_USER_NOTIFICATIONS_READ_URL, {
+ body,
+ headers: authHeaders(credentials),
+ method: 'POST'
+ }).then((data) => data.json())
+}
+
const apiService = {
verifyCredentials,
fetchTimeline,
@@ -396,6 +488,7 @@ const apiService = {
favorite,
unfavorite,
retweet,
+ unretweet,
postStatus,
deleteStatus,
uploadMedia,
@@ -408,7 +501,14 @@ const apiService = {
updateProfile,
updateBanner,
externalProfile,
- followImport
+ followImport,
+ deleteAccount,
+ changePassword,
+ fetchFollowRequests,
+ approveUser,
+ denyUser,
+ suggestions,
+ markNotificationsAsSeen
}
export default apiService
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 52b8286b..c84373ac 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -42,15 +42,34 @@ const backendInteractorService = (credentials) => {
return apiService.unblockUser({credentials, id})
}
+ const approveUser = (id) => {
+ return apiService.approveUser({credentials, id})
+ }
+
+ const denyUser = (id) => {
+ return apiService.denyUser({credentials, id})
+ }
+
const startFetching = ({timeline, store, userId = false}) => {
return timelineFetcherService.startFetching({timeline, store, credentials, userId})
}
+ const fetchOldPost = ({store, postId}) => {
+ return timelineFetcherService.fetchAndUpdate({
+ store,
+ credentials,
+ timeline: 'own',
+ older: true,
+ until: postId + 1
+ })
+ }
+
const setUserMute = ({id, muted = true}) => {
return apiService.setUserMute({id, muted, credentials})
}
const fetchMutes = () => apiService.fetchMutes({credentials})
+ const fetchFollowRequests = () => apiService.fetchFollowRequests({credentials})
const register = (params) => apiService.register(params)
const updateAvatar = ({params}) => apiService.updateAvatar({credentials, params})
@@ -61,6 +80,9 @@ const backendInteractorService = (credentials) => {
const externalProfile = (profileUrl) => apiService.externalProfile({profileUrl, credentials})
const followImport = ({params}) => apiService.followImport({params, credentials})
+ const deleteAccount = ({password}) => apiService.deleteAccount({credentials, password})
+ const changePassword = ({password, newPassword, newPasswordConfirmation}) => apiService.changePassword({credentials, password, newPassword, newPasswordConfirmation})
+
const backendInteractorServiceInstance = {
fetchStatus,
fetchConversation,
@@ -74,6 +96,7 @@ const backendInteractorService = (credentials) => {
fetchAllFollowing,
verifyCredentials: apiService.verifyCredentials,
startFetching,
+ fetchOldPost,
setUserMute,
fetchMutes,
register,
@@ -82,7 +105,12 @@ const backendInteractorService = (credentials) => {
updateBanner,
updateProfile,
externalProfile,
- followImport
+ followImport,
+ deleteAccount,
+ changePassword,
+ fetchFollowRequests,
+ approveUser,
+ denyUser
}
return backendInteractorServiceInstance
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 13dd8979..7576c518 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -1,6 +1,15 @@
import { map } from 'lodash'
const rgb2hex = (r, g, b) => {
+ if (r === null || typeof r === 'undefined') {
+ return undefined
+ }
+ if (r[0] === '#') {
+ return r
+ }
+ if (typeof r === 'object') {
+ ({ r, g, b } = r)
+ }
[r, g, b] = map([r, g, b], (val) => {
val = Math.ceil(val)
val = val < 0 ? 0 : val
@@ -10,6 +19,91 @@ const rgb2hex = (r, g, b) => {
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
}
+/**
+ * Converts 8-bit RGB component into linear component
+ * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+ * https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
+ * https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation
+ *
+ * @param {Number} bit - color component [0..255]
+ * @returns {Number} linear component [0..1]
+ */
+const c2linear = (bit) => {
+ // W3C gives 0.03928 while wikipedia states 0.04045
+ // what those magical numbers mean - I don't know.
+ // something about gamma-correction, i suppose.
+ // Sticking with W3C example.
+ const c = bit / 255
+ if (c < 0.03928) {
+ return c / 12.92
+ } else {
+ return Math.pow((c + 0.055) / 1.055, 2.4)
+ }
+}
+
+/**
+ * Converts sRGB into linear RGB
+ * @param {Object} srgb - sRGB color
+ * @returns {Object} linear rgb color
+ */
+const srgbToLinear = (srgb) => {
+ return 'rgb'.split('').reduce((acc, c) => { acc[c] = c2linear(srgb[c]); return acc }, {})
+}
+
+/**
+ * Calculates relative luminance for given color
+ * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+ * https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
+ *
+ * @param {Object} srgb - sRGB color
+ * @returns {Number} relative luminance
+ */
+const relativeLuminance = (srgb) => {
+ const {r, g, b} = srgbToLinear(srgb)
+ return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+/**
+ * Generates color ratio between two colors. Order is unimporant
+ * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+ *
+ * @param {Object} a - sRGB color
+ * @param {Object} b - sRGB color
+ * @returns {Number} color ratio
+ */
+const getContrastRatio = (a, b) => {
+ const la = relativeLuminance(a)
+ const lb = relativeLuminance(b)
+ const [l1, l2] = la > lb ? [la, lb] : [lb, la]
+
+ return (l1 + 0.05) / (l2 + 0.05)
+}
+
+/**
+ * This performs alpha blending between solid background and semi-transparent foreground
+ *
+ * @param {Object} fg - top layer color
+ * @param {Number} fga - top layer's alpha
+ * @param {Object} bg - bottom layer color
+ * @returns {Object} sRGB of resulting color
+ */
+const alphaBlend = (fg, fga, bg) => {
+ if (fga === 1 || typeof fga === 'undefined') return fg
+ return 'rgb'.split('').reduce((acc, c) => {
+ // Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
+ // for opaque bg and transparent fg
+ acc[c] = (fg[c] * fga + bg[c] * (1 - fga))
+ return acc
+ }, {})
+}
+
+const invert = (rgb) => {
+ return 'rgb'.split('').reduce((acc, c) => {
+ acc[c] = 255 - rgb[c]
+ return acc
+ }, {})
+}
+
const hex2rgb = (hex) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
return result ? {
@@ -19,16 +113,18 @@ const hex2rgb = (hex) => {
} : null
}
-const rgbstr2hex = (rgb) => {
- if (rgb[0] === '#') {
- return rgb
- }
- rgb = rgb.match(/\d+/g)
- return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
+const mixrgb = (a, b) => {
+ return Object.keys(a).reduce((acc, k) => {
+ acc[k] = (a[k] + b[k]) / 2
+ return acc
+ }, {})
}
export {
rgb2hex,
hex2rgb,
- rgbstr2hex
+ mixrgb,
+ invert,
+ getContrastRatio,
+ alphaBlend
}
diff --git a/src/services/file_type/file_type.service.js b/src/services/file_type/file_type.service.js
index f9d3b466..f543ec79 100644
--- a/src/services/file_type/file_type.service.js
+++ b/src/services/file_type/file_type.service.js
@@ -9,11 +9,11 @@ const fileType = (typeString) => {
type = 'image'
}
- if (typeString.match(/video\/(webm|mp4)/)) {
+ if (typeString.match(/video/)) {
type = 'video'
}
- if (typeString.match(/audio|ogg/)) {
+ if (typeString.match(/audio/)) {
type = 'audio'
}
diff --git a/src/services/new_api/oauth.js b/src/services/new_api/oauth.js
new file mode 100644
index 00000000..9e656507
--- /dev/null
+++ b/src/services/new_api/oauth.js
@@ -0,0 +1,82 @@
+import {reduce} from 'lodash'
+
+const getOrCreateApp = ({oauth, instance}) => {
+ const url = `${instance}/api/v1/apps`
+ const form = new window.FormData()
+
+ form.append('client_name', `PleromaFE_${Math.random()}`)
+ form.append('redirect_uris', `${window.location.origin}/oauth-callback`)
+ form.append('scopes', 'read write follow')
+
+ return window.fetch(url, {
+ method: 'POST',
+ body: form
+ }).then((data) => data.json())
+}
+const login = (args) => {
+ getOrCreateApp(args).then((app) => {
+ args.commit('setClientData', app)
+
+ const data = {
+ response_type: 'code',
+ client_id: app.client_id,
+ redirect_uri: app.redirect_uri,
+ scope: 'read write follow'
+ }
+
+ const dataString = reduce(data, (acc, v, k) => {
+ const encoded = `${k}=${encodeURIComponent(v)}`
+ if (!acc) {
+ return encoded
+ } else {
+ return `${acc}&${encoded}`
+ }
+ }, false)
+
+ // Do the redirect...
+ const url = `${args.instance}/oauth/authorize?${dataString}`
+
+ window.location.href = url
+ })
+}
+
+const getTokenWithCredentials = ({app, instance, username, password}) => {
+ const url = `${instance}/oauth/token`
+ const form = new window.FormData()
+
+ form.append('client_id', app.client_id)
+ form.append('client_secret', app.client_secret)
+ form.append('grant_type', 'password')
+ form.append('username', username)
+ form.append('password', password)
+
+ return window.fetch(url, {
+ method: 'POST',
+ body: form
+ }).then((data) => data.json())
+}
+
+const getToken = ({app, instance, code}) => {
+ const url = `${instance}/oauth/token`
+ const form = new window.FormData()
+
+ form.append('client_id', app.client_id)
+ form.append('client_secret', app.client_secret)
+ form.append('grant_type', 'authorization_code')
+ form.append('code', code)
+ form.append('redirect_uri', `${window.location.origin}/oauth-callback`)
+
+ return window.fetch(url, {
+ method: 'POST',
+ body: form
+ }).then((data) => data.json())
+}
+
+const oauth = {
+ login,
+ getToken,
+ getTokenWithCredentials,
+ getOrCreateApp
+}
+
+export default oauth
diff --git a/src/services/new_api/user_search.js b/src/services/new_api/user_search.js
new file mode 100644
index 00000000..ce7da88e
--- /dev/null
+++ b/src/services/new_api/user_search.js
@@ -0,0 +1,16 @@
+import utils from './utils.js'
+
+const search = ({query, store}) => {
+ return utils.request({
+ store,
+ url: '/api/pleroma/search_user',
+ params: {
+ query
+ }
+ }).then((data) => data.json())
+}
+const UserSearch = {
+ search
+}
+
+export default UserSearch
diff --git a/src/services/new_api/utils.js b/src/services/new_api/utils.js
new file mode 100644
index 00000000..078f392f
--- /dev/null
+++ b/src/services/new_api/utils.js
@@ -0,0 +1,36 @@
+const queryParams = (params) => {
+ return Object.keys(params)
+ .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+ .join('&')
+}
+
+const headers = (store) => {
+ const accessToken = store.state.oauth.token
+ if (accessToken) {
+ return {'Authorization': `Bearer ${accessToken}`}
+ } else {
+ return {}
+ }
+}
+
+const request = ({method = 'GET', url, params, store}) => {
+ const instance = store.state.instance.server
+ let fullUrl = `${instance}${url}`
+
+ if (method === 'GET' && params) {
+ fullUrl = fullUrl + `?${queryParams(params)}`
+ }
+
+ return window.fetch(fullUrl, {
+ method,
+ headers: headers(store),
+ credentials: 'same-origin'
+ })
+}
+
+const utils = {
+ queryParams,
+ request
+}
+
+export default utils
diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
new file mode 100644
index 00000000..1480cded
--- /dev/null
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -0,0 +1,46 @@
+import apiService from '../api/api.service.js'
+
+const update = ({store, notifications, older}) => {
+ store.dispatch('setNotificationsError', { value: false })
+
+ store.dispatch('addNewNotifications', { notifications, older })
+}
+
+const fetchAndUpdate = ({store, credentials, older = false}) => {
+ const args = { credentials }
+ const rootState = store.rootState || store.state
+ const timelineData = rootState.statuses.notifications
+
+ if (older) {
+ if (timelineData.minId !== Number.POSITIVE_INFINITY) {
+ args['until'] = timelineData.minId
+ }
+ } else {
+ args['since'] = timelineData.maxId
+ }
+
+ args['timeline'] = 'notifications'
+
+ return apiService.fetchTimeline(args)
+ .then((notifications) => {
+ update({store, notifications, older})
+ }, () => store.dispatch('setNotificationsError', { value: true }))
+ .catch(() => store.dispatch('setNotificationsError', { value: true }))
+}
+
+const startFetching = ({credentials, store}) => {
+ fetchAndUpdate({ credentials, store })
+ const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
+ // Initially there's set flag to silence all desktop notifications so
+ // that there won't spam of them when user just opened up the FE we
+ // reset that flag after a while to show new notifications once again.
+ setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000)
+ return setInterval(boundFetchAndUpdate, 10000)
+}
+
+const notificationsFetcher = {
+ fetchAndUpdate,
+ startFetching
+}
+
+export default notificationsFetcher
diff --git a/src/services/push/push.js b/src/services/push/push.js
new file mode 100644
index 00000000..1ac304d1
--- /dev/null
+++ b/src/services/push/push.js
@@ -0,0 +1,69 @@
+import runtime from 'serviceworker-webpack-plugin/lib/runtime'
+
+function urlBase64ToUint8Array (base64String) {
+ const padding = '='.repeat((4 - base64String.length % 4) % 4)
+ const base64 = (base64String + padding)
+ .replace(/-/g, '+')
+ .replace(/_/g, '/')
+
+ const rawData = window.atob(base64)
+ return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)))
+}
+
+function isPushSupported () {
+ return 'serviceWorker' in navigator && 'PushManager' in window
+}
+
+function registerServiceWorker () {
+ return runtime.register()
+ .catch((err) => console.error('Unable to register service worker.', err))
+}
+
+function subscribe (registration, isEnabled, vapidPublicKey) {
+ if (!isEnabled) return Promise.reject(new Error('Web Push is disabled in config'))
+ if (!vapidPublicKey) return Promise.reject(new Error('VAPID public key is not found'))
+
+ const subscribeOptions = {
+ userVisibleOnly: true,
+ applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
+ }
+ return registration.pushManager.subscribe(subscribeOptions)
+}
+
+function sendSubscriptionToBackEnd (subscription, token) {
+ return window.fetch('/api/v1/push/subscription/', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${token}`
+ },
+ body: JSON.stringify({
+ subscription,
+ data: {
+ alerts: {
+ follow: true,
+ favourite: true,
+ mention: true,
+ reblog: true
+ }
+ }
+ })
+ })
+ .then((response) => {
+ if (!response.ok) throw new Error('Bad status code from server.')
+ return response.json()
+ })
+ .then((responseData) => {
+ if (!responseData.id) throw new Error('Bad response from server.')
+ return responseData
+ })
+}
+
+export default function registerPushNotifications (isEnabled, vapidPublicKey, token) {
+ if (isPushSupported()) {
+ registerServiceWorker()
+ .then((registration) => subscribe(registration, isEnabled, vapidPublicKey))
+ .then((subscription) => sendSubscriptionToBackEnd(subscription, token))
+ .catch((e) => console.warn(`Failed to setup Web Push Notifications: ${e.message}`))
+ }
+}
diff --git a/src/services/status_poster/status_poster.service.js b/src/services/status_poster/status_poster.service.js
index 001ff8a5..7f8b0fc0 100644
--- a/src/services/status_poster/status_poster.service.js
+++ b/src/services/status_poster/status_poster.service.js
@@ -1,10 +1,10 @@
import { map } from 'lodash'
import apiService from '../api/api.service.js'
-const postStatus = ({ store, status, media = [], inReplyToStatusId = undefined }) => {
+const postStatus = ({ store, status, spoilerText, visibility, sensitive, media = [], inReplyToStatusId = undefined, contentType = 'text/plain' }) => {
const mediaIds = map(media, 'id')
- return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, mediaIds, inReplyToStatusId})
+ return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType})
.then((data) => data.json())
.then((data) => {
if (!data.error) {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 9dc4a3e1..10e7ed9b 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,5 +1,6 @@
import { times } from 'lodash'
-import { rgb2hex, hex2rgb } from '../color_convert/color_convert.js'
+import { brightness, invertLightness, convert, contrastRatio } from 'chromatism'
+import { rgb2hex, hex2rgb, mixrgb, getContrastRatio, alphaBlend } from '../color_convert/color_convert.js'
// While this is not used anymore right now, I left it in if we want to do custom
// styles that aren't just colors, so user can pick from a few different distinct
@@ -39,8 +40,6 @@ const setStyle = (href, commit) => {
colors[name] = color
})
- commit('setOption', { name: 'colors', value: colors })
-
body.removeChild(baseEl)
const styleEl = document.createElement('style')
@@ -53,7 +52,27 @@ const setStyle = (href, commit) => {
cssEl.addEventListener('load', setDynamic)
}
-const setColors = (col, commit) => {
+const rgb2rgba = function (rgba) {
+ return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
+}
+
+const getTextColor = function (bg, text, preserve) {
+ const bgIsLight = convert(bg).hsl.l > 50
+ const textIsLight = convert(text).hsl.l > 50
+
+ if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
+ const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
+ const result = Object.assign(base, invertLightness(text).rgb)
+ if (!preserve && getContrastRatio(bg, result) < 4.5) {
+ return contrastRatio(bg, text).rgb
+ }
+ return result
+ }
+ return text
+}
+
+const applyTheme = (input, commit) => {
+ const { rules, theme } = generatePreset(input)
const head = document.head
const body = document.body
body.style.display = 'none'
@@ -62,57 +81,411 @@ const setColors = (col, commit) => {
head.appendChild(styleEl)
const styleSheet = styleEl.sheet
- const isDark = (col.text.r + col.text.g + col.text.b) > (col.bg.r + col.bg.g + col.bg.b)
- let colors = {}
- let radii = {}
+ styleSheet.toString()
+ styleSheet.insertRule(`body { ${rules.radii} }`, 'index-max')
+ styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max')
+ styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max')
+ styleSheet.insertRule(`body { ${rules.fonts} }`, 'index-max')
+ body.style.display = 'initial'
- const mod = isDark ? -10 : 10
+ // commit('setOption', { name: 'colors', value: htmlColors })
+ // commit('setOption', { name: 'radii', value: radii })
+ commit('setOption', { name: 'customTheme', value: input })
+ commit('setOption', { name: 'colors', value: theme.colors })
+}
- colors.bg = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background
- colors.lightBg = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
- colors.btn = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons
- colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders
- colors.faint = rgb2hex(
- col.text.r * 0.45 + col.fg.r * 0.55,
- col.text.g * 0.45 + col.fg.g * 0.55,
- col.text.b * 0.45 + col.fg.b * 0.55) // faint text
- colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b) // text
- colors.lightFg = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
+const getCssShadow = (input, usesDropShadow) => {
+ if (input.length === 0) {
+ return 'none'
+ }
- colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
+ return input
+ .filter(_ => usesDropShadow ? _.inset : _)
+ .map((shad) => [
+ shad.x,
+ shad.y,
+ shad.blur,
+ shad.spread
+ ].map(_ => _ + 'px').concat([
+ getCssColor(shad.color, shad.alpha),
+ shad.inset ? 'inset' : ''
+ ]).join(' ')).join(', ')
+}
- colors.link = rgb2hex(col.link.r, col.link.g, col.link.b) // links
- colors.icon = rgb2hex((col.bg.r + col.text.r) / 2, (col.bg.g + col.text.g) / 2, (col.bg.b + col.text.b) / 2) // icons
+const getCssShadowFilter = (input) => {
+ if (input.length === 0) {
+ return 'none'
+ }
- colors.cBlue = col.cBlue && rgb2hex(col.cBlue.r, col.cBlue.g, col.cBlue.b)
- colors.cRed = col.cRed && rgb2hex(col.cRed.r, col.cRed.g, col.cRed.b)
- colors.cGreen = col.cGreen && rgb2hex(col.cGreen.r, col.cGreen.g, col.cGreen.b)
- colors.cOrange = col.cOrange && rgb2hex(col.cOrange.r, col.cOrange.g, col.cOrange.b)
+ return input
+ // drop-shadow doesn't support inset or spread
+ .filter((shad) => !shad.inset && Number(shad.spread) === 0)
+ .map((shad) => [
+ shad.x,
+ shad.y,
+ // drop-shadow's blur is twice as strong compared to box-shadow
+ shad.blur / 2
+ ].map(_ => _ + 'px').concat([
+ getCssColor(shad.color, shad.alpha)
+ ]).join(' '))
+ .map(_ => `drop-shadow(${_})`)
+ .join(' ')
+}
- colors.cAlertRed = col.cRed && `rgba(${col.cRed.r}, ${col.cRed.g}, ${col.cRed.b}, .5)`
+const getCssColor = (input, a) => {
+ let rgb = {}
+ if (typeof input === 'object') {
+ rgb = input
+ } else if (typeof input === 'string') {
+ if (input.startsWith('#')) {
+ rgb = hex2rgb(input)
+ } else if (input.startsWith('--')) {
+ return `var(${input})`
+ } else {
+ return input
+ }
+ }
+ return rgb2rgba({ ...rgb, a })
+}
- radii.btnRadius = col.btnRadius
- radii.panelRadius = col.panelRadius
- radii.avatarRadius = col.avatarRadius
- radii.avatarAltRadius = col.avatarAltRadius
- radii.tooltipRadius = col.tooltipRadius
- radii.attachmentRadius = col.attachmentRadius
+const generateColors = (input) => {
+ const colors = {}
+ const opacity = Object.assign({
+ alert: 0.5,
+ input: 0.5,
+ faint: 0.5
+ }, Object.entries(input.opacity || {}).reduce((acc, [k, v]) => {
+ if (typeof v !== 'undefined') {
+ acc[k] = v
+ }
+ return acc
+ }, {}))
+ const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
+ if (typeof v === 'object') {
+ acc[k] = v
+ } else {
+ acc[k] = hex2rgb(v)
+ }
+ return acc
+ }, {})
- styleSheet.toString()
- styleSheet.insertRule(`body { ${Object.entries(colors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';')} }`, 'index-max')
- styleSheet.insertRule(`body { ${Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';')} }`, 'index-max')
- body.style.display = 'initial'
+ const isLightOnDark = convert(col.bg).hsl.l < convert(col.text).hsl.l
+ const mod = isLightOnDark ? 1 : -1
+
+ colors.text = col.text
+ colors.lightText = brightness(20 * mod, colors.text).rgb
+ colors.link = col.link
+ colors.faint = col.faint || Object.assign({}, col.text)
+
+ colors.bg = col.bg
+ colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb
+
+ colors.fg = col.fg
+ colors.fgText = col.fgText || getTextColor(colors.fg, colors.text)
+ colors.fgLink = col.fgLink || getTextColor(colors.fg, colors.link, true)
+
+ colors.border = col.border || brightness(2 * mod, colors.fg).rgb
+
+ colors.btn = col.btn || Object.assign({}, col.fg)
+ colors.btnText = col.btnText || getTextColor(colors.btn, colors.fgText)
+
+ colors.input = col.input || Object.assign({}, col.fg)
+ colors.inputText = col.inputText || getTextColor(colors.input, colors.lightText)
+
+ colors.panel = col.panel || Object.assign({}, col.fg)
+ colors.panelText = col.panelText || getTextColor(colors.panel, colors.fgText)
+ colors.panelLink = col.panelLink || getTextColor(colors.panel, colors.fgLink)
+ colors.panelFaint = col.panelFaint || getTextColor(colors.panel, colors.faint)
- commit('setOption', { name: 'colors', value: colors })
- commit('setOption', { name: 'radii', value: radii })
- commit('setOption', { name: 'customTheme', value: col })
+ colors.topBar = col.topBar || Object.assign({}, col.fg)
+ colors.topBarText = col.topBarText || getTextColor(colors.topBar, colors.fgText)
+ colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink)
+
+ colors.faintLink = col.faintLink || Object.assign({}, col.link)
+
+ colors.icon = mixrgb(colors.bg, colors.text)
+
+ colors.cBlue = col.cBlue || hex2rgb('#0000FF')
+ colors.cRed = col.cRed || hex2rgb('#FF0000')
+ colors.cGreen = col.cGreen || hex2rgb('#00FF00')
+ colors.cOrange = col.cOrange || hex2rgb('#E3FF00')
+
+ colors.alertError = col.alertError || Object.assign({}, colors.cRed)
+ colors.alertErrorText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.bg), colors.text)
+ colors.alertErrorPanelText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.panel), colors.panelText)
+
+ colors.badgeNotification = col.badgeNotification || Object.assign({}, colors.cRed)
+ colors.badgeNotificationText = contrastRatio(colors.badgeNotification).rgb
+
+ Object.entries(opacity).forEach(([ k, v ]) => {
+ if (typeof v === 'undefined') return
+ if (k === 'alert') {
+ colors.alertError.a = v
+ return
+ }
+ if (k === 'faint') {
+ colors[k + 'Link'].a = v
+ colors['panelFaint'].a = v
+ }
+ if (k === 'bg') {
+ colors['lightBg'].a = v
+ }
+ if (colors[k]) {
+ colors[k].a = v
+ } else {
+ console.error('Wrong key ' + k)
+ }
+ })
+
+ const htmlColors = Object.entries(colors)
+ .reduce((acc, [k, v]) => {
+ if (!v) return acc
+ acc.solid[k] = rgb2hex(v)
+ acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
+ return acc
+ }, { complete: {}, solid: {} })
+ return {
+ rules: {
+ colors: Object.entries(htmlColors.complete)
+ .filter(([k, v]) => v)
+ .map(([k, v]) => `--${k}: ${v}`)
+ .join(';')
+ },
+ theme: {
+ colors: htmlColors.solid,
+ opacity
+ }
+ }
}
-const setPreset = (val, commit) => {
- window.fetch('/static/styles.json')
+const generateRadii = (input) => {
+ let inputRadii = input.radii || {}
+ // v1 -> v2
+ if (typeof input.btnRadius !== 'undefined') {
+ inputRadii = Object
+ .entries(input)
+ .filter(([k, v]) => k.endsWith('Radius'))
+ .reduce((acc, e) => { acc[e[0].split('Radius')[0]] = e[1]; return acc }, {})
+ }
+ const radii = Object.entries(inputRadii).filter(([k, v]) => v).reduce((acc, [k, v]) => {
+ acc[k] = v
+ return acc
+ }, {
+ btn: 4,
+ input: 4,
+ checkbox: 2,
+ panel: 10,
+ avatar: 5,
+ avatarAlt: 50,
+ tooltip: 2,
+ attachment: 5
+ })
+
+ return {
+ rules: {
+ radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')
+ },
+ theme: {
+ radii
+ }
+ }
+}
+
+const generateFonts = (input) => {
+ const fonts = Object.entries(input.fonts || {}).filter(([k, v]) => v).reduce((acc, [k, v]) => {
+ acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => {
+ acc[k] = v
+ return acc
+ }, acc[k])
+ return acc
+ }, {
+ interface: {
+ family: 'sans-serif'
+ },
+ input: {
+ family: 'inherit'
+ },
+ post: {
+ family: 'inherit'
+ },
+ postCode: {
+ family: 'monospace'
+ }
+ })
+
+ return {
+ rules: {
+ fonts: Object
+ .entries(fonts)
+ .filter(([k, v]) => v)
+ .map(([k, v]) => `--${k}Font: ${v.family}`).join(';')
+ },
+ theme: {
+ fonts
+ }
+ }
+}
+
+const generateShadows = (input) => {
+ const border = (top, shadow) => ({
+ x: 0,
+ y: top ? 1 : -1,
+ blur: 0,
+ spread: 0,
+ color: shadow ? '#000000' : '#FFFFFF',
+ alpha: 0.2,
+ inset: true
+ })
+ const buttonInsetFakeBorders = [border(true, false), border(false, true)]
+ const inputInsetFakeBorders = [border(true, true), border(false, false)]
+ const hoverGlow = {
+ x: 0,
+ y: 0,
+ blur: 4,
+ spread: 0,
+ color: '--faint',
+ alpha: 1
+ }
+
+ const shadows = {
+ panel: [{
+ x: 1,
+ y: 1,
+ blur: 4,
+ spread: 0,
+ color: '#000000',
+ alpha: 0.6
+ }],
+ topBar: [{
+ x: 0,
+ y: 0,
+ blur: 4,
+ spread: 0,
+ color: '#000000',
+ alpha: 0.6
+ }],
+ popup: [{
+ x: 2,
+ y: 2,
+ blur: 3,
+ spread: 0,
+ color: '#000000',
+ alpha: 0.5
+ }],
+ avatar: [{
+ x: 0,
+ y: 1,
+ blur: 8,
+ spread: 0,
+ color: '#000000',
+ alpha: 0.7
+ }],
+ avatarStatus: [],
+ panelHeader: [],
+ button: [{
+ x: 0,
+ y: 0,
+ blur: 2,
+ spread: 0,
+ color: '#000000',
+ alpha: 1
+ }, ...buttonInsetFakeBorders],
+ buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
+ buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
+ input: [...inputInsetFakeBorders, {
+ x: 0,
+ y: 0,
+ blur: 2,
+ inset: true,
+ spread: 0,
+ color: '#000000',
+ alpha: 1
+ }],
+ ...(input.shadows || {})
+ }
+
+ return {
+ rules: {
+ shadows: Object
+ .entries(shadows)
+ // TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally
+ // convert all non-inset shadows into filter: drop-shadow() to boost performance
+ .map(([k, v]) => [
+ `--${k}Shadow: ${getCssShadow(v)}`,
+ `--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
+ `--${k}ShadowInset: ${getCssShadow(v, true)}`
+ ].join(';'))
+ .join(';')
+ },
+ theme: {
+ shadows
+ }
+ }
+}
+
+const composePreset = (colors, radii, shadows, fonts) => {
+ return {
+ rules: {
+ ...shadows.rules,
+ ...colors.rules,
+ ...radii.rules,
+ ...fonts.rules
+ },
+ theme: {
+ ...shadows.theme,
+ ...colors.theme,
+ ...radii.theme,
+ ...fonts.theme
+ }
+ }
+}
+
+const generatePreset = (input) => {
+ const shadows = generateShadows(input)
+ const colors = generateColors(input)
+ const radii = generateRadii(input)
+ const fonts = generateFonts(input)
+
+ return composePreset(colors, radii, shadows, fonts)
+}
+
+const getThemes = () => {
+ return window.fetch('/static/styles.json')
.then((data) => data.json())
.then((themes) => {
- const theme = themes[val] ? themes[val] : themes['pleroma-dark']
+ return Promise.all(Object.entries(themes).map(([k, v]) => {
+ if (typeof v === 'object') {
+ return Promise.resolve([k, v])
+ } else if (typeof v === 'string') {
+ return window.fetch(v)
+ .then((data) => data.json())
+ .then((theme) => {
+ return [k, theme]
+ })
+ .catch((e) => {
+ console.error(e)
+ return []
+ })
+ }
+ }))
+ })
+ .then((promises) => {
+ return promises
+ .filter(([k, v]) => v)
+ .reduce((acc, [k, v]) => {
+ acc[k] = v
+ return acc
+ }, {})
+ })
+}
+
+const setPreset = (val, commit) => {
+ getThemes().then((themes) => {
+ const theme = themes[val] ? themes[val] : themes['pleroma-dark']
+ const isV1 = Array.isArray(theme)
+ const data = isV1 ? {} : theme.theme
+
+ if (isV1) {
const bgRgb = hex2rgb(theme[1])
const fgRgb = hex2rgb(theme[2])
const textRgb = hex2rgb(theme[3])
@@ -123,7 +496,7 @@ const setPreset = (val, commit) => {
const cBlueRgb = hex2rgb(theme[7] || '#0000FF')
const cOrangeRgb = hex2rgb(theme[8] || '#E3FF00')
- const col = {
+ data.colors = {
bg: bgRgb,
fg: fgRgb,
text: textRgb,
@@ -133,23 +506,32 @@ const setPreset = (val, commit) => {
cGreen: cGreenRgb,
cOrange: cOrangeRgb
}
+ }
- // This is a hack, this function is only called during initial load.
- // We want to cancel loading the theme from config.json if we're already
- // loading a theme from the persisted state.
- // Needed some way of dealing with the async way of things.
- // load config -> set preset -> wait for styles.json to load ->
- // load persisted state -> set colors -> styles.json loaded -> set colors
- if (!window.themeLoaded) {
- setColors(col, commit)
- }
- })
+ // This is a hack, this function is only called during initial load.
+ // We want to cancel loading the theme from config.json if we're already
+ // loading a theme from the persisted state.
+ // Needed some way of dealing with the async way of things.
+ // load config -> set preset -> wait for styles.json to load ->
+ // load persisted state -> set colors -> styles.json loaded -> set colors
+ if (!window.themeLoaded) {
+ applyTheme(data, commit)
+ }
+ })
}
-const StyleSetter = {
+export {
setStyle,
setPreset,
- setColors
+ applyTheme,
+ getTextColor,
+ generateColors,
+ generateRadii,
+ generateShadows,
+ generateFonts,
+ generatePreset,
+ getThemes,
+ composePreset,
+ getCssShadow,
+ getCssShadowFilter
}
-
-export default StyleSetter
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index bb5fdc2e..c2a7de56 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -2,25 +2,26 @@ import { camelCase } from 'lodash'
import apiService from '../api/api.service.js'
-const update = ({store, statuses, timeline, showImmediately}) => {
+const update = ({store, statuses, timeline, showImmediately, userId}) => {
const ccTimeline = camelCase(timeline)
store.dispatch('setError', { value: false })
store.dispatch('addNewStatuses', {
timeline: ccTimeline,
+ userId,
statuses,
showImmediately
})
}
-const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false, userId = false, tag = false}) => {
+const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false, userId = false, tag = false, until}) => {
const args = { timeline, credentials }
const rootState = store.rootState || store.state
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
if (older) {
- args['until'] = timelineData.minVisibleId
+ args['until'] = until || timelineData.minVisibleId
} else {
args['since'] = timelineData.maxId
}
@@ -33,7 +34,7 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
if (!older && statuses.length >= 20 && !timelineData.loading) {
store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
}
- update({store, statuses, timeline, showImmediately})
+ update({store, statuses, timeline, showImmediately, userId})
}, () => store.dispatch('setError', { value: true }))
}
@@ -41,6 +42,7 @@ const startFetching = ({timeline = 'friends', credentials, store, userId = false
const rootState = store.rootState || store.state
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
const showImmediately = timelineData.visibleStatuses.length === 0
+ timelineData.userId = userId
fetchAndUpdate({timeline, credentials, store, showImmediately, userId, tag})
const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag })
return setInterval(boundFetchAndUpdate, 10000)
diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js
new file mode 100644
index 00000000..f6ddfb9c
--- /dev/null
+++ b/src/services/user_highlighter/user_highlighter.js
@@ -0,0 +1,48 @@
+import { hex2rgb } from '../color_convert/color_convert.js'
+const highlightStyle = (prefs) => {
+ if (prefs === undefined) return
+ const {color, type} = prefs
+ if (typeof color !== 'string') return
+ const rgb = hex2rgb(color)
+ if (rgb == null) return
+ const solidColor = `rgb(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)})`
+ const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .1)`
+ const tintColor2 = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .2)`
+ if (type === 'striped') {
+ return {
+ backgroundImage: [
+ 'repeating-linear-gradient(135deg,',
+ `${tintColor} ,`,
+ `${tintColor} 20px,`,
+ `${tintColor2} 20px,`,
+ `${tintColor2} 40px`
+ ].join(' '),
+ backgroundPosition: '0 0'
+ }
+ } else if (type === 'solid') {
+ return {
+ backgroundColor: tintColor2
+ }
+ } else if (type === 'side') {
+ return {
+ backgroundImage: [
+ 'linear-gradient(to right,',
+ `${solidColor} ,`,
+ `${solidColor} 2px,`,
+ `transparent 6px`
+ ].join(' '),
+ backgroundPosition: '0 0'
+ }
+ }
+}
+
+const highlightClass = (user) => {
+ return 'USER____' + user.screen_name
+ .replace(/\./g, '_')
+ .replace(/@/g, '_AT_')
+}
+
+export {
+ highlightClass,
+ highlightStyle
+}
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2025-12-03 17:25:01 +0000