Thumbnail improvements

- always pass to optimizer, even for speech

- default channel thumb to optimized at 5
50px, original on channel page

- fix misc analytics bug

.env.defaults

@@ -34,7 +34,7 @@ WELCOME_VERSION=1.0
 # OG
 OG_TITLE_SUFFIX=| odysee.com
 OG_HOMEPAGE_TITLE=Odysee
-OG_IMAGE_URL=https://spee.ch/odysee-og:e.png?quality=85&height=630&width=1200
+OG_IMAGE_URL=https://thumbnails.odycdn.com/optimize/s:1200:630/quality:85/plain/https://spee.ch/odysee-og:e.png
 SITE_CANONICAL_URL=odysee.com
 
 # UI
@@ -51,15 +51,15 @@ TWITTER_ACCOUNT=OdyseeTeam
 BRANDED_SITE=odysee
 
 # IMAGE ASSETS
-YRBL_HAPPY_IMG_URL=https://spee.ch/spaceman-happy:a.png?quality=85&height=457&width=457
+YRBL_HAPPY_IMG_URL=https://thumbnails.odycdn.com/optimize/s:300:300/quality:85/plain/https://spee.ch/spaceman-happy:a.png
-YRBL_SAD_IMG_URL=https://spee.ch/spaceman-sad:d.png?quality=85&height=457&width=457
+YRBL_SAD_IMG_URL=https://thumbnails.odycdn.com/optimize/s:300:300/quality:85/plain/https://spee.ch/spaceman-sad:d.png
-LOGIN_IMG_URL=https://player.odycdn.com/speech/odysee-sign-up:d.png
+LOGIN_IMG_URL=https://thumbnails.odycdn.com/optimize/s:400:507/quality:85/plain/https://player.odycdn.com/speech/odysee-sign-up:d.png
-LOGO=https://spee.ch/odysee-logo-png:3.png?quality=85&height=200&width=200
+LOGO=https://thumbnails.odycdn.com/optimize/s:100:100/quality:85/plain/https://spee.ch/odysee-logo-png:3.png
-LOGO_WHITE_TEXT=https://spee.ch/odysee-white-png:f.png?quality=85&height=300&width=1000
+LOGO_WHITE_TEXT=https://thumbnails.odycdn.com/optimize/s:1000:300/quality:85/plain/https://spee.ch/odysee-white-png:f.png
-LOGO_DARK_TEXT=https://spee.ch/odysee-png:2.png?quality=85&height=300&width=1000
+LOGO_DARK_TEXT=https://thumbnails.odycdn.com/optimize/s:1000:300/quality:85/plain/https://spee.ch/odysee-png:2.png
-AVATAR_DEFAULT=https://spee.ch/spaceman-png:2.png?quality=85&height=180&width=180
+AVATAR_DEFAULT=https://thumbnails.odycdn.com/optimize/s:160:160/quality:85/plain/https://spee.ch/spaceman-png:2.png
-MISSING_THUMB_DEFAULT=https://spee.ch/missing-thumb-png?quality=85&height=390&width=220
+MISSING_THUMB_DEFAULT=https://thumbnails.odycdn.com/optimize/s:390:220/quality:85/plain/https://spee.ch/missing-thumb-png
-FAVICON=https://spee.ch/favicon-png:c.png
+FAVICON=https://thumbnails.odycdn.com/optimize/s:100:100/quality:85/plain/https://spee.ch/favicon-png:c.png
 
 # LOCALE
 DEFAULT_LANGUAGE=en

ui/analytics.js

@@ -160,10 +160,10 @@ async function sendAndResetWatchmanData() {
   }
 
   // current position in video in MS
-  const positionInVideo = Math.round(videoPlayer.currentTime()) * 1000;
+  const positionInVideo = videoPlayer && Math.round(videoPlayer.currentTime()) * 1000;
 
   // get the duration marking the time in the video for relative position calculation
-  const totalDurationInSeconds = Math.round(videoPlayer.duration());
+  const totalDurationInSeconds = videoPlayer && Math.round(videoPlayer.duration());
 
   // build object for watchman backend
   const objectToSend = {

ui/component/channelThumbnail/view.jsx

@@ -8,6 +8,7 @@ import OptimizedImage from 'component/optimizedImage';
 import { AVATAR_DEFAULT } from 'config';
 import useGetUserMemberships from 'effects/use-get-user-memberships';
 import PremiumBadge from 'component/common/premium-badge';
+import { getThumbnailCdnUrl } from 'util/thumbnail';
 
 type Props = {
   thumbnail: ?string,
@@ -24,7 +25,7 @@ type Props = {
   noLazyLoad?: boolean,
   hideStakedIndicator?: boolean,
   hideTooltip?: boolean,
-  noOptimization?: boolean,
+  minOptimization?: boolean,
   setThumbUploadError: (boolean) => void,
   ThumbUploadError: boolean,
   claimsByUri: { [string]: any },
@@ -58,13 +59,21 @@ function ChannelThumbnail(props: Props) {
     showMemberBadge,
     isChannel,
     checkMembership = true,
+    minOptimization,
   } = props;
   const [thumbLoadError, setThumbLoadError] = React.useState(ThumbUploadError);
   const shouldResolve = !isResolving && claim === undefined;
   const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
   const thumbnailPreview = rawThumbnailPreview && rawThumbnailPreview.trim().replace(/^http:\/\//i, 'https://');
   const defaultAvatar = AVATAR_DEFAULT || Gerbil;
-  const channelThumbnail = thumbnailPreview || thumbnail || defaultAvatar;
+  const thumb = thumbnailPreview || thumbnail || defaultAvatar;
+  // checking with CDN to see if a max size can be passed, but for now, this is an improvement vs not using the optimizer
+  const channelThumbnail = getThumbnailCdnUrl({
+    thumbnail: thumb,
+    width: minOptimization ? 500 : 50,
+    height: minOptimization ? 500 : 50,
+    quality: minOptimization ? 95 : 85,
+  });
   const isGif = channelThumbnail && channelThumbnail.endsWith('gif');
   const showThumb = (!obscure && !!thumbnail) || thumbnailPreview;
 

ui/effects/use-get-thumbnail.js

@@ -1,12 +1,13 @@
 // @flow
 import React from 'react';
 import { generateStreamUrl } from 'util/web';
+import { MISSING_THUMB_DEFAULT } from 'config';
 
 export default function useGetThumbnail(
   uri: string,
   claim: ?Claim,
   streamingUrl: ?string,
-  getFile: string => void,
+  getFile: (string) => void,
   shouldHide: boolean
 ) {
   let thumbnailToUse;
@@ -24,7 +25,7 @@ export default function useGetThumbnail(
   } else if (claim && isImage && isFree) {
     thumbnailToUse = generateStreamUrl(claim.name, claim.claim_id);
   } else if (isCollection) {
-    thumbnailToUse = 'http://spee.ch/default-thumb-odysee:e.jpg';
+    thumbnailToUse = MISSING_THUMB_DEFAULT;
   }
   // @endif
 

ui/page/channel/view.jsx

@@ -28,6 +28,7 @@ import TruncatedText from 'component/common/truncated-text';
 import PlaceholderTx from 'static/img/placeholderTx.gif';
 import Tooltip from 'component/common/tooltip';
 import { toCompactNotation } from 'util/string';
+import { getThumbnailCdnUrl } from 'util/thumbnail';
 
 export const PAGE_VIEW_QUERY = `view`;
 export const DISCUSSION_PAGE = `discussion`;
@@ -235,11 +236,18 @@ function ChannelPage(props: Props) {
           <ClaimMenuList uri={claim.permanent_url} inline isChannelPage />
         </div>
         {cover && <img className={classnames('channel-cover__custom')} src={PlaceholderTx} />}
-        {cover && <OptimizedImage className={classnames('channel-cover__custom')} src={cover} objectFit="cover" />}
+        {cover && (
+          <OptimizedImage
+            className={classnames('channel-cover__custom')}
+            src={getThumbnailCdnUrl({ thumbnail: cover, width: 0, height: 0, quality: 85 })}
+            objectFit="cover"
+          />
+        )}
         <div className="channel__primary-info">
           <ChannelThumbnail
             className="channel__thumbnail--channel-page"
             uri={uri}
+            minOptimization
             allowGifs
             showMemberBadge
             isChannel

ui/scss/component/_file-render.scss

@@ -243,7 +243,7 @@
 }
 
 .file-render--scheduledLivestream {
-  background-image: url('//spee.ch/odysee-streaming-png:2.png?quality=80&height=960&width=1920');
+  background-image: url('https://thumbnails.odycdn.com/optimize/s:1280:720/quality:85/plain/https://spee.ch/odysee-streaming-png:2.png');
   background-size: cover;
   margin-top: var(--spacing-m);
 }

ui/util/thumbnail.js

@@ -15,15 +15,11 @@ export function getThumbnailCdnUrl(props: Props) {
     return thumbnail;
   }
 
-  if (thumbnail && !thumbnail.includes('https://spee.ch')) {
+  if (thumbnail.includes(THUMBNAIL_CDN_URL)) {
-    return `${THUMBNAIL_CDN_URL}s:${width}:${height}/quality:${quality}/plain/${thumbnail}`;
-  }
-
-  if (thumbnail && thumbnail.includes('https://spee.ch') && !thumbnail.includes('?quality=')) {
-    return `${thumbnail}?quality=${quality}&height=${height}&width=${width}`;
-  }
-
-  if (thumbnail && thumbnail.includes('https://spee.ch')) {
     return thumbnail;
   }
+
+  if (thumbnail) {
+    return `${THUMBNAIL_CDN_URL}s:${width}:${height}/quality:${quality}/plain/${thumbnail}`;
+  }
 }