Feature eng zone rotation (#37)

* build(scripts/deploy-icons.sh): improve icon deploy script to select all in directory and avoid redundant upload Signed-off-by: James Chien <[email protected]> * feat(src): support multiple engagement zone rotation Signed-off-by: James Chien <[email protected]> * docs(README.md): update readme for rotating eng-img and eng-link Signed-off-by: James Chien <[email protected]> * docs(README.md): update attribute table to make it easier to read Signed-off-by: James Chien <[email protected]> * test: fix test Signed-off-by: James Chien <[email protected]> * fix(src/modal/modal.ts): hide arrow button when engagement zone <= 1 Signed-off-by: James Chien <[email protected]> * docs(README.md): update eng-link example and visibility description about mobile device Signed-off-by: James Chien <[email protected]> * fix(src/{modal,test/moodal_test}.ts): fix rotatePrev negative index and remove redundant code Signed-off-by: James Chien <[email protected]> * fix(src/modal/modal.ts): reset imageLoaded when zone changed to empty array Signed-off-by: James Chien <[email protected]> --------- Signed-off-by: James Chien <[email protected]>
numbersprotocol · Oct 25, 2024 · 4a66f11 · 4a66f11
1 parent 92ac5e1
commit 4a66f11
Show file tree

Hide file tree

Showing 7 changed files with 308 additions and 118 deletions.
diff --git a/README.md b/README.md
@@ -38,16 +38,16 @@ Visit the [interactive playground](https://playcode.io/capture_eye_demo) for the
 
 ## Component attributes
 
-| Attribute Name       | Required | Description                                                                                                                       | Example                                                                                         |
-| -------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
-| `nid`                | Yes     | The unique [Nid](https://docs.numbersprotocol.io/introduction/numbers-protocol/defining-web3-assets/numbers-id-nid) of the asset. | `<capture-eye nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"></capture-eye>` |
-| `layout`             | No    | Decides which layout to display. Default value is `original`. Additional option includes `curated`.                               | `<capture-eye nid="..." layout="curated"></capture-eye>`                                        |
-| `visibility`             | No    | Visibility behavior. Default value is `hover`, showing Eye on mouse hover. Setting it to option `always` will make the Eye always shown.                               | `<capture-eye nid="..." visibility="always"></capture-eye>`                                        |
-| `cz-title`            | No    | Override the copyright zone title.          | `<capture-eye nid="..." cz-title="collected by"></capture-eye>`                |
-| `eng-img`            | No    | Override the engagement zone banner image. Recommended size is 400x200 px but any image with width >= 320px should work.          | `<capture-eye nid="..." eng-img="https://my.image.url/image.png"></capture-eye>`                |
-| `eng-link`           | No    | Override the engagement zone banner link.                                                                                         | `<capture-eye nid="..." eng-link="https://my.website.url"></capture-eye>`                       |
-| `action-button-text` | No    | Override the default action button text (`View More`).                                                                            | `<capture-eye nid="..." action-button-text="Collect"></capture-eye>`                            |
-| `action-button-link` | No    | Override the default action button link to Capture website.                                                                       | `<capture-eye nid="..." action-button-link="https://my.website.url"></capture-eye>`             |
+| Attribute Name | Required | Description |
+| ---- | --- | --- |
+| `nid` | Yes | The unique [Nid](https://docs.numbersprotocol.io/introduction/numbers-protocol/defining-web3-assets/numbers-id-nid) of the asset. <br> `<capture-eye nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"></capture-eye>` |
+| `layout` | No | Decides which layout to display. Default value is `original`. Additional option includes `curated`. <br> `<capture-eye nid="..." layout="curated"></capture-eye>` |
+| `visibility` | No | Visibility behavior. Default value is `hover`, showing Eye on mouse hover. Setting it to option `always` will make the Eye always shown. This attribute is `always` and cannot be customized on mobile devices. <br> `<capture-eye nid="..." visibility="always"></capture-eye>` |
+| `cz-title` | No | Override the copyright zone title. <br> `<capture-eye nid="..." cz-title="collected by"></capture-eye>` |
+| eng-img | No | Sets the image for the engagement zone banner. Recommended dimensions: `320x120 px`. Supports multiple `eng-img` and `eng-link` pairs for rotating banners. If multiple pairs are provided by using comma to seperate each URL entry, the banner will rotate every 5 seconds. Ensure that the number of `eng-img` matches the number of `eng-link` entries. Use URL encoding to replace commas with `%2C` in the URLs. <br> `<capture-eye nid="..." eng-img="https://my.image.url/image1.png, https://my.image.url/image2.png"></capture-eye>` |
+| eng-link | No | Sets the URL for the engagement zone banner link. Each `eng-link` should correspond to an `eng-img` for proper pairing in rotating banners, following the same comma-separated rule.  <br> `<capture-eye nid="..." eng-link="https://my.website.url1, https://my.website.url2"></capture-eye>` |
+| `action-button-text` | No | Override the default action button text (`View More`). <br> `<capture-eye nid="..." action-button-text="Collect"></capture-eye>` |
+| `action-button-link` | No | Override the default action button link to Capture website. <br> `<capture-eye nid="..." action-button-link="https://my.website.url"></capture-eye>` |
 
 ## Integration with Frontend Frameworks
 

diff --git a/dev/index.html b/dev/index.html
@@ -61,8 +61,8 @@
       <capture-eye
         nid="bafybeifksqe7orsgtfnly5j3okltqi3iyt3k2pptnlfyre62jpfzxftsju"
         cz-title="Collected By"
-        eng-img="https://static-cdn.numbersprotocol.io/collab/defiance_media_banner.webp"
-        eng-link="https://defiance.media/"
+        eng-img="https://static-cdn.numbersprotocol.io/capture-eye/capture-ad.png, https://static-cdn.numbersprotocol.io/collab/defiance_media_banner.webp"
+        eng-link="https://captureapp.xyz, https://defiance.media/"
         action-button-text="View docs"
         action-button-link="https://docs.captureapp.xyz"
       >

diff --git a/scripts/deploy-icons.sh b/scripts/deploy-icons.sh
@@ -5,34 +5,59 @@ DISTRIBUTION_ID="E1GEDS049Y53CA"
 S3_BUCKET="numbers-static"
 S3_PATH="capture-eye"
 ICON_DIR="assets/icons"
-INVALIDATION_PATHS=(
-  "/${S3_PATH}/capture-eye-blockchain-icon.svg"
-  "/${S3_PATH}/capture-eye-curator-icon.png"
-  "/${S3_PATH}/capture-eye-close-icon.png"
-  "/${S3_PATH}/capture-eye-tx-icon.svg"
-  "/${S3_PATH}/capture-eye-gray.svg"
-  "/${S3_PATH}/capture-eye-close-gray.svg"
-)
-FILES_TO_UPLOAD=(
-  "${ICON_DIR}/capture-eye-blockchain-icon.svg"
-  "${ICON_DIR}/capture-eye-curator-icon.png"
-  "${ICON_DIR}/capture-eye-close-icon.png"
-  "${ICON_DIR}/capture-eye-tx-icon.svg"
-  "${ICON_DIR}/capture-eye-gray.svg"
-  "${ICON_DIR}/capture-eye-close-gray.svg"
-)
-
-# Upload files to S3
-for file in "${FILES_TO_UPLOAD[@]}"; do
-  aws s3 cp $file s3://$S3_BUCKET/$S3_PATH/
-  if [ $? -ne 0 ]; then
-    echo "Failed to upload $file to s3://$S3_BUCKET/$S3_PATH/"
-    exit 1
+
+# Find all files in the ICON_DIR recursively
+FILES_TO_UPLOAD=$(find $ICON_DIR -type f)
+
+# Function to get the local MD5 checksum
+get_local_md5() {
+  file=$1
+  md5sum "$file" | awk '{ print $1 }'
+}
+
+# Function to get the S3 MD5 checksum (ETag)
+get_s3_md5() {
+  file=$1
+  s3_key="$S3_PATH/$(basename "$file")"
+  aws s3api head-object --bucket "$S3_BUCKET" --key "$s3_key" --query ETag --output text 2>/dev/null | tr -d '"'
+}
+
+# Print all files that will be checked for upload
+echo "Checking files for changes:"
+for file in $FILES_TO_UPLOAD; do
+  local_md5=$(get_local_md5 "$file")
+  s3_md5=$(get_s3_md5 "$file")
+
+  if [ "$local_md5" != "$s3_md5" ]; then
+    echo "Uploading new or modified file: $file"
+
+    # Upload the file to S3
+    aws s3 cp "$file" "s3://$S3_BUCKET/$S3_PATH/$(basename "$file")"
+    if [ $? -ne 0 ]; then
+      echo "Failed to upload $file to s3://$S3_BUCKET/$S3_PATH/$(basename "$file")"
+      exit 1
+    fi
+    echo "File uploaded to s3://$S3_BUCKET/$S3_PATH/$(basename "$file")"
+
+    # Add to invalidation paths
+    INVALIDATION_PATHS+=("/$S3_PATH/$(basename "$file")")
+  else
+    echo "File unchanged, skipping upload: $file"
   fi
-  echo "File uploaded to s3://$S3_BUCKET/$S3_PATH/"
 done
 
-# Create the invalidation
+# Check if there are any files to invalidate
+if [ ${#INVALIDATION_PATHS[@]} -eq 0 ]; then
+  echo "No files to invalidate."
+  exit 0
+fi
+
+# Create the invalidation with all uploaded files
+echo "Creating invalidation for the following paths:"
+for path in "${INVALIDATION_PATHS[@]}"; do
+  echo "$path"
+done
+
 INVALIDATION_ID=$(aws cloudfront create-invalidation --distribution-id $DISTRIBUTION_ID --paths "${INVALIDATION_PATHS[@]}" --query 'Invalidation.Id' --output text)
 if [ $? -ne 0 ]; then
   echo "Failed to create invalidation"
@@ -50,9 +75,16 @@ check_invalidation_status() {
 while true; do
   check_invalidation_status
   if [ "$STATUS" = "Completed" ]; then
-    echo "success/done"
+    echo "Invalidation completed successfully."
     break
   fi
   # Wait for 5 seconds before checking again
   sleep 5
 done
+
+# Print the CDN URLs of the uploaded files
+echo "CDN URLs for uploaded files:"
+for path in "${INVALIDATION_PATHS[@]}"; do
+  filename=$(basename "$path")
+  echo "https://static-cdn.numbersprotocol.io/$S3_PATH/$filename"
+done
diff --git a/src/capture-eye.ts b/src/capture-eye.ts
@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { Constant } from './constant.js';
 import { getCaptureEyeStyles } from './capture-eye-styles.js';
 import { ModalManager } from './modal/modal-manager.js';
-import { CaptureEyeModal } from './modal/modal.js';
+import { CaptureEyeModal, EngagementZone } from './modal/modal.js';
 import { MediaViewer } from './media-viewer/media-viewer.js';
 import interactionTracker, {
   TrackerEvent,
@@ -39,13 +39,13 @@ export class CaptureEye extends LitElement {
   copyrightZoneTitle = '';
 
   /**
-   * Url of the engagement image.
+   * Urls of the engagement images. Use comma to separate multiple images.
    */
   @property({ type: String, attribute: 'eng-img' })
   engagementImage = '';
 
   /**
-   * Url of the engagement link.
+   * Urls of the engagement links. Use comma to separate multiple links.
    */
   @property({ type: String, attribute: 'eng-link' })
   engagementLink = '';
@@ -141,8 +141,7 @@ export class CaptureEye extends LitElement {
       nid: this.nid,
       layout: this.layout,
       copyrightZoneTitle: this.copyrightZoneTitle,
-      engagementImage: this.engagementImage,
-      engagementLink: this.engagementLink,
+      engagementZones: this.engagementZones,
       actionButtonText: this.actionButtonText,
       actionButtonLink: this.actionButtonLink,
       position: {
@@ -194,6 +193,26 @@ export class CaptureEye extends LitElement {
     font.rel = 'stylesheet';
     document.head.appendChild(font);
   }
+
+  private get engagementZones() {
+    const engagementImages = this.engagementImage
+      .split(',')
+      .map((url) => url.trim())
+      .filter((url) => url !== '');
+    const engagementLinks = this.engagementLink
+      .split(',')
+      .map((url) => url.trim())
+      .filter((url) => url !== '');
+    /* Use image as base. For unexpected use cases links > images, ignore the exceeding links.
+     * For unexpected use cases images > links, use default link.
+     */
+    return engagementImages.map((image, index) => {
+      return {
+        image,
+        link: engagementLinks[index] || Constant.url.defaultEngagementLink,
+      } as EngagementZone;
+    });
+  }
 }
 
 declare global {

diff --git a/src/modal/modal-styles.ts b/src/modal/modal-styles.ts
@@ -216,11 +216,47 @@ export function getModalStyles() {
       color: var(--secondary-text-color);
     }
 
+    .slideshow-container {
+      position: relative;
+      width: 320px;
+      height: 120px;
+    }
     .eng-img {
-      width: 100%;
+      width: 320px;
+      height: 120px;
       display: block;
+      object-fit: contain;
       border-bottom-left-radius: var(--border-radius);
       border-bottom-right-radius: var(--border-radius);
+      background-color: #eee;
+    }
+    .prev,
+    .next {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 30px; /* Make the buttons thinner */
+      background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
+      color: white;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      font-size: 18px;
+      user-select: none;
+      opacity: 0;
+    }
+    .prev {
+      left: 0;
+      border-bottom-left-radius: var(--border-radius);
+    }
+    .next {
+      right: 0;
+      border-bottom-right-radius: var(--border-radius);
+    }
+    .prev:hover,
+    .next:hover {
+      background-color: rgba(0, 0, 0, 0.3); /* Darker background on hover */
+      opacity: 1;
     }
 
     /* Shimmer effect */