4 files changed, 37 insertions, 12 deletions

diff --git a/client/src/app/helpers/utils/channel.ts b/client/src/app/helpers/utils/channel.ts
index 93863a8af..83f36b70f 100644
--- a/client/src/app/helpers/utils/channel.ts
+++ b/client/src/app/helpers/utils/channel.ts
@@ -1,8 +1,10 @@
+import { minBy } from 'lodash-es'
 import { first, map } from 'rxjs/operators'
 import { SelectChannelItem } from 'src/types/select-options-item.model'
+import { VideoChannel } from '@shared/models'
 import { AuthService } from '../../core/auth'
 
-function listUserChannels (authService: AuthService) {
+function listUserChannelsForSelect (authService: AuthService) {
   return authService.userInformationLoaded
     .pipe(
       first(),
@@ -23,12 +25,20 @@ function listUserChannels (authService: AuthService) {
             id: c.id,
             label: c.displayName,
             support: c.support,
-            avatarPath: c.avatar?.path
+            avatarPath: getAvatarPath(c)
           }) as SelectChannelItem)
       })
     )
 }
 
 export {
-  listUserChannels
+  listUserChannelsForSelect
+}
+
+// ---------------------------------------------------------------------------
+
+function getAvatarPath (c: VideoChannel) {
+  if (!c.avatars || c.avatars.length === 0) return undefined
+
+  return minBy(c.avatars, 'width').path
 }
diff --git a/client/src/app/helpers/utils/ui.ts b/client/src/app/helpers/utils/dom.ts
index ac8298926..f65e4d726 100644
--- a/client/src/app/helpers/utils/ui.ts
+++ b/client/src/app/helpers/utils/dom.ts
@@ -6,14 +6,24 @@ function scrollToTop (behavior: 'auto' | 'smooth' = 'auto') {
   })
 }
 
-function isInViewport (el: HTMLElement) {
-  const bounding = el.getBoundingClientRect()
-  return (
-    bounding.top >= 0 &&
-      bounding.left >= 0 &&
-      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-      bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
-  )
+function isInViewport (el: HTMLElement, container: HTMLElement = document.documentElement) {
+  const boundingEl = el.getBoundingClientRect()
+  const boundingContainer = container.getBoundingClientRect()
+
+  const relativePos = {
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  }
+
+  relativePos.top = boundingEl.top - boundingContainer.top
+  relativePos.left = boundingEl.left - boundingContainer.left
+
+  return relativePos.top >= 0 &&
+    relativePos.left >= 0 &&
+    boundingEl.bottom <= boundingContainer.bottom &&
+    boundingEl.right <= boundingContainer.right
 }
 
 function isXPercentInViewport (el: HTMLElement, percentVisible: number) {
diff --git a/client/src/app/helpers/utils/index.ts b/client/src/app/helpers/utils/index.ts
index dc09c92ab..f821985c9 100644
--- a/client/src/app/helpers/utils/index.ts
+++ b/client/src/app/helpers/utils/index.ts
@@ -2,6 +2,6 @@ export * from './channel'
 export * from './date'
 export * from './html'
 export * from './object'
-export * from './ui'
+export * from './dom'
 export * from './upload'
 export * from './url'
diff --git a/client/src/app/helpers/utils/url.ts b/client/src/app/helpers/utils/url.ts
index b3cded8f4..08c27e3c1 100644
--- a/client/src/app/helpers/utils/url.ts
+++ b/client/src/app/helpers/utils/url.ts
@@ -13,6 +13,10 @@ function getAbsoluteAPIUrl () {
   return absoluteAPIUrl
 }
 
+function getAPIHost () {
+  return new URL(getAbsoluteAPIUrl()).host
+}
+
 function getAbsoluteEmbedUrl () {
   let absoluteEmbedUrl = environment.originServerUrl
   if (!absoluteEmbedUrl) {
@@ -52,5 +56,6 @@ function objectToFormData (obj: any, form?: FormData, namespace?: string) {
 export {
   objectToFormData,
   getAbsoluteAPIUrl,
+  getAPIHost,
   getAbsoluteEmbedUrl
 }