diff --git a/src/content/components/player-bans.js b/src/content/components/player-bans.js
new file mode 100644
index 00000000..36814525
--- /dev/null
+++ b/src/content/components/player-bans.js
@@ -0,0 +1,21 @@
+/** @jsx h */
+import { h } from 'dom-chef'
+import { formatDistance, parseISO } from 'date-fns'
+
+export default ({ banStart, banEnd, expired, reason }) => {
+ const isActive = !expired
+ const className = isActive ? 'text-success' : 'text-danger'
+
+ return (
+
+ [{reason}]
+ {formatDistance(parseISO(banEnd), new Date(), { addSuffix: true })}
+
+ )
+}
diff --git a/src/content/features/add-player-profile-ban.js b/src/content/features/add-player-profile-ban.js
new file mode 100644
index 00000000..ea3d5cb0
--- /dev/null
+++ b/src/content/features/add-player-profile-ban.js
@@ -0,0 +1,58 @@
+/** @jsx h */
+import { h } from 'dom-chef'
+import select from 'select-dom'
+
+import {
+ hasFeatureAttribute,
+ setFeatureAttribute
+} from '../helpers/dom-element'
+
+import createPlayerBansElement from '../components/player-bans'
+import { getPlayerProfileNickname } from '../helpers/player-profile'
+import { getPlayer, getPlayerBans } from '../helpers/faceit-api'
+
+const FEATURE_ATTRIBUTE = 'profile-bans'
+
+export default async parentElement => {
+ const banElement = select('profile-overview-bans', parentElement)
+
+ if (banElement === null) {
+ return
+ }
+
+ if (hasFeatureAttribute(FEATURE_ATTRIBUTE, banElement)) {
+ return
+ }
+
+ setFeatureAttribute(FEATURE_ATTRIBUTE, banElement)
+
+ const headerElement = (
+
+ Bans
+
+ )
+
+ const noBanElement = No match bans yet
+
+ const nickname = getPlayerProfileNickname()
+ const { guid } = await getPlayer(nickname)
+
+ const playerBans = await getPlayerBans(guid)
+
+ if (playerBans.length === 0) {
+ banElement.append(noBanElement)
+ }
+
+ playerBans.forEach(async ban => {
+ const playerBansElement = createPlayerBansElement(ban)
+
+ const banWrapper = {playerBansElement}
+
+ banElement.append(banWrapper)
+ })
+
+ const headerElementMissing = select('h3.heading-border', parentElement)
+ if (headerElementMissing === null) {
+ banElement.insertBefore(headerElement, banElement.firstChild)
+ }
+}
diff --git a/src/content/helpers/faceit-api.js b/src/content/helpers/faceit-api.js
index 33ddc00b..baed49ee 100644
--- a/src/content/helpers/faceit-api.js
+++ b/src/content/helpers/faceit-api.js
@@ -124,3 +124,12 @@ export const getPlayerHistory = async (userId, page = 0) => {
export const getMatchmakingQueue = queueId =>
fetchApiMemoized(`/queue/v1/queue/matchmaking/${queueId}`)
+
+export const getPlayerBans = async userId => {
+ const limit = 20
+ const offset = 0
+
+ return fetchApiMemoized(
+ `/queue/v1/ban?userId=${userId}&organizerId=faceit&offset=${offset}&limit=${limit}`
+ )
+}
diff --git a/src/content/index.js b/src/content/index.js
index ba54e885..c8f9e9c0 100755
--- a/src/content/index.js
+++ b/src/content/index.js
@@ -21,6 +21,7 @@ import addPlayerProfileLevelProgress from './features/add-player-profile-level-p
import addPlayerProfileMatchesDemo from './features/add-player-profile-matches-demo'
import addPlayerProfileExtendedStats from './features/add-player-profile-extended-stats'
import addPlayerProfileBadge from './features/add-player-profile-badge'
+import addPlayerProfileBan from './features/add-player-profile-ban'
import clickModalClose from './features/click-modal-close'
import getBannedUser from './helpers/get-banned-user'
import stopToxicity from './features/stop-toxicity'
@@ -91,6 +92,7 @@ function observeBody() {
} else if (modals.isPlayerProfile()) {
addPlayerProfileBadge(modalElement)
addPlayerProfileLinks(modalElement)
+ addPlayerProfileBan(modalElement)
if (modals.isPlayerProfileStats()) {
debouncedPlayerProfileStatsFeatures(modalElement)
@@ -139,6 +141,7 @@ function observeBody() {
} else if (pages.isPlayerProfile()) {
addPlayerProfileBadge(mainContentElement)
addPlayerProfileLinks(mainContentElement)
+ addPlayerProfileBan(mainContentElement)
if (pages.isPlayerProfileStats()) {
debouncedPlayerProfileStatsFeatures(mainContentElement)