feat(src): add cr-pin attribute to control

Ref: #8

Introduce cr-pin attribute to control CR Pin behavior.

Author: olgahaha

dev/index.html

@@ -97,6 +97,11 @@
         nid="bafybeigda2fjjeta7725hbicpfzldygszl4gbllcaybwuetlemraauazwm"
         position="top right"
         heading-source="abstract"
+        layout="curated"
+        cz-title="produced for"
+        visibility="always"
+        action-button-text="donate"
+        cr-pin="off"
       >
         <img
           src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeigda2fjjeta7725hbicpfzldygszl4gbllcaybwuetlemraauazwm"

src/capture-eye.ts

@@ -80,6 +80,12 @@ export class CaptureEye extends LitElement {
   @property({ type: String, attribute: 'action-button-link' })
   actionButtonLink = '';
 
+  /**
+   * Control the CR Pin behavior. Default is on. Options: on, off
+   */
+  @property({ type: String, attribute: 'cr-pin' })
+  crPin = Constant.crPin.on;
+
   @state({})
   protected _isFullVisibility = false;
 
@@ -198,6 +204,7 @@ export class CaptureEye extends LitElement {
       engagementZones: this.engagementZones,
       actionButtonText: this.actionButtonText,
       actionButtonLink: this.actionButtonLink,
+      crPin: this.crPin,
       position: {
         top: buttonRect.top + window.scrollY,
         left: buttonRect.left + window.scrollX,

src/constant.ts

@@ -32,6 +32,7 @@ interface ConstantType {
   visibility: Visibility;
   color: Color;
   position: Position;
+  crPin: CrPin;
 }
 
 interface Layout {
@@ -56,6 +57,11 @@ interface Position {
   bottomRight: string;
 }
 
+interface CrPin {
+  on: string;
+  off: string;
+}
+
 const numbersCdnUrl = 'https://static-cdn.numbersprotocol.io';
 
 export const Constant: ConstantType = {
@@ -102,4 +108,8 @@ export const Constant: ConstantType = {
     bottomLeft: 'bottom left',
     bottomRight: 'bottom right',
   },
+  crPin: {
+    on: 'on',
+    off: 'off',
+  },
 };

src/modal/modal.ts

@@ -57,6 +57,7 @@ export interface ModalOptions {
   actionButtonText?: string;
   actionButtonLink?: string;
   position?: { top: number; left: number; name: string };
+  crPin?: string;
 }
 
 @customElement('capture-eye-modal')
@@ -83,6 +84,7 @@ export class CaptureEyeModal extends LitElement {
   @state() protected _asset: AssetModel | undefined = undefined;
   @state() protected _assetLoaded = false;
   @state() protected _imageLoaded = false;
+  @state() protected _crPin = Constant.crPin.on;
 
   @query('.modal') modalElement!: HTMLDivElement;
 
@@ -132,6 +134,9 @@ export class CaptureEyeModal extends LitElement {
       this._imageLoaded = false;
       this._engagementZones = options.engagementZones;
     }
+    if (options.crPin !== undefined) {
+      this._crPin = options.crPin;
+    }
     this.preloadEngagementZoneImages();
     if (options.actionButtonText)
       this._actionButtonText = options.actionButtonText;
@@ -156,6 +161,7 @@ export class CaptureEyeModal extends LitElement {
     this._asset = undefined;
     this._assetLoaded = false;
     this._position = undefined;
+    this._crPin = Constant.crPin.on;
   }
 
   private remToPixels(rem: number): number {
@@ -257,7 +263,7 @@ export class CaptureEyeModal extends LitElement {
         />`
       : html``;
 
-    const contentCredentials = this.isC2paSupported()
+    const contentCredentials = this._crPin !== Constant.crPin.off && this.isC2paSupported()
       ? html`<div
           class="button-content-credentials" title="Inspect Content Credentials"
           @click=${this.handleInspectContentCredentials}

src/test/modal_test.ts

@@ -489,4 +489,39 @@ suite('capture-eye-modal', () => {
 
     expect(badge).to.exist;
   });
+
+  test('should hide content credentials when disabled', async () => {
+    const el = await fixture<CaptureEyeModal>(html`
+      <capture-eye-modal></capture-eye-modal>
+    `);
+
+    el.updateAsset({
+      encodingFormat: 'image/jpeg',
+    }, true);
+
+    // By default, Content Credentials should be enabled
+    await el.updateComplete;
+    let buttonCr = el.shadowRoot!.querySelector('.button-content-credentials');
+    expect(buttonCr).to.exist;
+
+    // Enable Content Credentials
+    el.updateModalOptions({
+      nid: '123',
+      crPin: Constant.crPin.on
+    });
+    await el.updateComplete;
+
+    buttonCr = el.shadowRoot!.querySelector('.button-content-credentials');
+    expect(buttonCr).to.exist;
+
+    // Disable Content Credentials
+    el.updateModalOptions({
+      nid: '123',
+      crPin: Constant.crPin.off
+    });
+    await el.updateComplete;
+
+    buttonCr = el.shadowRoot!.querySelector('.button-content-credentials');
+    expect(buttonCr).to.not.exist;
+  });
 });