Merge pull request #6 from mlibrary/issue-working5

altmetric changes and videos

src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

@@ -76,7 +76,7 @@ <h5>Abstract</h5>
 <ng-container *ngFor="let entry of object.allMetadataValues('dc.description.hathi')">
   <span *ngVar="(object.owningCollection | async)?.payload as collection">
     <p>
-      <span><a class="image-link" href="{{entry}}" attr.onclick="_gaq.push(['_trackEvent', 'HATHI Download', 'Item View','{{collection?.name}} - {{ getHandle(object.allMetadataValues('dc.identifier.uri')) }} - {{ object.firstMetadataValue('dc.title') }}]);"></a><img title="HathiTrust Viewer" style="height:20px;width:20px;text-decoration:none;" src="../../../../assets/images/file_icons/hathi_trust_icon18x18.png" alt="HathiTrust Viewer">&nbsp;&nbsp;&nbsp;<a href="{{entry}}">View/Open<span style="padding-left:.25em" aria-label="Opens in a new window" class="glyphicon glyphicon-new-window"></span></a></span>
+      <span><img title="HathiTrust Viewer" style="height:20px;width:20px;text-decoration:none;" src="../../../../assets/images/file_icons/hathi_trust_icon18x18.png" alt="HathiTrust Viewer">&nbsp;&nbsp;&nbsp;<a href="{{entry}}">View/Open<span style="padding-left:.25em" aria-label="Opens in a new window" class="glyphicon glyphicon-new-window"></span></a></span>
     </p>
   </span>
 </ng-container>
@@ -85,7 +85,8 @@ <h5>Abstract</h5>
 <ng-container *ngFor="let entry of object.allMetadataValues('dc.description.fulcrum')">
   <span *ngVar="(object.owningCollection | async)?.payload as collection">
     <p>
-      <span><a class="image-link" href="{{entry}}" attr.onclick="_gaq.push(['_trackEvent', 'FULCRUM Download', 'Item View','{{collection?.name}} - {{ getHandle(object.allMetadataValues('dc.identifier.uri')) }} - {{ object.firstMetadataValue('dc.title') }}]);"></a><img title="Fulcrum Viewer" style="height:20px;width:20px;text-decoration:none;" src="../../../../assets/images/file_icons/fulcrum_icon.png" alt="Fulcrum Viewer">&nbsp;&nbsp;&nbsp;<a href="{{entry}}">View/Open<span style="padding-left:.25em" aria-label="Opens in a new window" class="glyphicon glyphicon-new-window"></span></a></span>
+      <span>
+         <img title="Fulcrum Viewer" style="height:20px;width:20px;text-decoration:none;" src="../../../../assets/images/file_icons/fulcrum_icon.png" alt="Fulcrum Viewer">&nbsp;&nbsp;&nbsp;<a href="{{entry}}">View/Open<span style="padding-left:.25em" aria-label="Opens in a new window" class="glyphicon glyphicon-new-window"></span></a></span>
     </p>
   </span>
 </ng-container>
@@ -482,24 +483,20 @@ <h5 _ngcontent-dspace-angular-c161="" class="simple-view-element-header ng-star-
   </div>
 </div>
 
-<!--  As en example of how one should look like:
-<h2 style="font-size: 18px;">Videos123</h2>
 <div>
-<script src="http://cdnapisec.kaltura.com/p/1038472/sp/103847200/embedIframeJs/uiconf_id/33084471/partner_id/1038472?autoembed=true&entry_id=1_irztzumh&playerId=kaltura_player_01&cache_st=1455309475&width=400&height=330&flashvars[streamerType]=auto">http://cdnapisec.kaltura.com/p/1038472/sp/103847200/embedIframeJs/uiconf_id/33084471/partner_id/1038472?autoembed=true&entry_id=1_irztzumh&playerId=kaltura_player_01&cache_st=1455309475&width=400&height=330&flashvars[streamerType]=auto</script>
-</div>
--->
-
     <span *ngIf="object.allMetadata(['dc.identifier.videostream']).length > 0" >
-        <span *ngFor="let video of object.allMetadataValues(['dc.identifier.videostream']); let last=last;">
         <h5 _ngcontent-dspace-angular-c161="" class="simple-view-element-header ng-star-inserted">Videos</h5>
-          <span><script src="{{video}}">{{video}}</script></span>              
+        <span *ngFor="let video of object.allMetadataValues(['dc.identifier.videostream']); let last=last;">
+
+<!-- Call this to create the trustedUrl -->
+{{getVideoUrl(video)}}
+<iframe id="kaltura_player_1712258806"  [src]="trustedUrl" width="400" height="500" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *" frameborder="0"></iframe>
+
         <span *ngIf="!last"></span>
           <p></p>
         </span>
     </span>
-
-
-
+</div>
 
 
 <!--
@@ -536,13 +533,14 @@ <h5 _ngcontent-dspace-angular-c161="" class="simple-view-element-header ng-star-
     <div *ngIf="object.hasMetadata('dc.identifier.doi')" [id]="object.id">
       <p>
         <span align="center" data-badge-popover="right" data-badge-type="1"   data-hide-less-than="1" class="altmetric-embed" data-style="large_rectangle" attr.data-handle="{{ getHandle(object.allMetadataValues('dc.identifier.uri')) }}" attr.data-doi="{{ getDoi(object.firstMetadataValue('dc.identifier.doi')) }}"></span>
-      </p>
-
+     </p>
       <p>
-        <span style="margin-left: auto; margin-right: auto; width: 8.5em" class="__dimensions_badge_embed__"  data-hide-zero-citations="true" data-style="large_rectangle" attr.data-doi="{{ getDoi(object.firstMetadataValue('dc.identifier.doi')) }}"></span>
+        <span class="__dimensions_badge_embed__"  data-hide-zero-citations="true" data-style="large_rectangle" attr.data-doi="{{ getDoi(object.firstMetadataValue('dc.identifier.doi')) }}"></span>
       </p>
     </div>
 
+
+
     <div>
       <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="button">
         <i class="fas fa-info-circle"></i> {{"item.page.link.full" | translate}}

src/app/item-page/simple/item-types/untyped-item/untyped-item.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { Item } from '../../../../core/shared/item.model';
 import { ViewMode } from '../../../../core/shared/view-mode.model';
 import { listableObjectComponent } from '../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
@@ -8,6 +8,7 @@ import { AuthorizationDataService } from '../../../../core/data/feature-authoriz
 import { FeatureID } from '../../../../core/data/feature-authorization/feature-id';
 import { Observable, of as observableOf } from 'rxjs';
 
+import { DomSanitizer } from '@angular/platform-browser';
 /**
  * Component that represents a publication Item page
  */
@@ -21,7 +22,59 @@ import { Observable, of as observableOf } from 'rxjs';
 })
 export class UntypedItemComponent extends ItemComponent {
 
+  private sanitizer = inject(DomSanitizer);
+  trustedUrl: any = '';
+  theDoi: any = '10.1002/jbmr.493';
 
+  ngOnInit() {
+
+    //this.hasLink = isNotEmpty(this.item.href);
+    let node = document.createElement('script'); 
+    node.src = 'https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js';
+    node.type = 'text/javascript';
+    node.id = 'cloudflarescript';
+    document.getElementsByTagName('head')[0].appendChild(node);
+
+
+    let node2 = document.createElement('script'); 
+    node2.src = 'https://badge.dimensions.ai/badge.js';
+    node2.type = 'text/javascript';
+    node2.id = 'cloudflarescript2';
+    document.getElementsByTagName('head')[0].appendChild(node2);
+
+//  let check3 = document.querySelector("link[href='https://badge.dimensions.ai/badge.css']");
+//  if ( check3 )
+//  {
+//    console.log ('ngOnDestroy removing link to dimensions');
+//    check3.remove();
+//  } 
+
+}
+
+
+ngOnDestroy() {
+  let check2 = document.getElementById('cloudflarescript2');
+  if ( check2 )
+  {
+    //console.log ('ngOnDestroy removing');
+    check2.remove();
+  } 
+
+  let check = document.getElementById('cloudflarescript');
+  if ( check )
+  {
+    //console.log ('ngOnDestroy removing');
+    check.remove();
+  }
+
+// let check3 = document.querySelector("link[href='https://badge.dimensions.ai/badge.css']");
+// if ( check3 )
+// {
+//   console.log ('ngOnDestroy removing link to dimensions');
+//   check3.remove();
+// } 
+
+}
 
   public getSelectedCcLicense(ccLicense: String): String {
     if ( ccLicense.startsWith("http://creativecommons.org/licenses/by/") )
@@ -63,6 +116,53 @@ export class UntypedItemComponent extends ItemComponent {
     }
   }
 
+  public getParent(value: String): String {
+
+    //value ="https://cdnapisec.kaltura.com/p/1038472/sp/103847200/embedIframeJs/uiconf_id/33084471/partner_id/1038472?autoembed=true&entry_id=1_irztzumh&playerId=kaltura_player_01&cache_st=1455309475&width=400&height=330&flashvars[streamerType]=auto=";
+    const matches = value.match(/https:\/\/cdnapisec\.kaltura\.com\/p\/(\w+)\//);
+    if (matches) {
+      // console.log(matches[1]); // ordem1    
+    }
+    return matches[1];
+  }
+
+  public getSubParent(value: String): String {
+
+    //value ="https://cdnapisec.kaltura.com/p/1038472/sp/103847200/embedIframeJs/uiconf_id/33084471/partner_id/1038472?autoembed=true&entry_id=1_irztzumh&playerId=kaltura_player_01&cache_st=1455309475&width=400&height=330&flashvars[streamerType]=auto=";
+    const matches = value.match(/https:\/\/cdnapisec\.kaltura\.com\/p\/.*?\/sp\/(\w+)\//);
+    if (matches) {
+      // console.log(matches[1]); // ordem1    
+    }
+    return matches[1];
+  }
+
+  public getUiConf(value: String): String {
+
+    //value ="https://cdnapisec.kaltura.com/p/1038472/sp/103847200/embedIframeJs/uiconf_id/33084471/partner_id/1038472?autoembed=true&entry_id=1_irztzumh&playerId=kaltura_player_01&cache_st=1455309475&width=400&height=330&flashvars[streamerType]=auto=";
+    const matches = value.match(/.*?\/uiconf_id\/(\w+)\//);
+    if (matches) {
+      //  console.log(matches[1]); // ordem1    
+    }
+    return matches[1];
+  }
+
+  public getEntryId(value: String): String {
+    //value ="https://cdnapisec.kaltura.com/p/1038472/sp/103847200/embedIframeJs/uiconf_id/33084471/partner_id/1038472?autoembed=true&entry_id=1_irztzumh&playerId=kaltura_player_01&cache_st=1455309475&width=400&height=330&flashvars[streamerType]=auto=";
+    const matches = value.match(/.*?entry_id=(\w+)\&/);
+    if (matches) {
+      // console.log(matches[1]); // ordem1    
+    }
+    return matches[1];
+  }
+
+  // Explains how to do this.
+  //https://www.google.com/search?q=iframe+angular&sca_esv=3acf9be9fedf7d41&sca_upv=1&rlz=1C5GCEM_enUS944US945&ei=hw8UZp7gBIG4wN4P4q-F0A0&ved=0ahUKEwjev7vP-bKFAxUBHNAFHeJXAdoQ4dUDCBE&uact=5&oq=iframe+angular&gs_lp=Egxnd3Mtd2l6LXNlcnAiDmlmcmFtZSBhbmd1bGFyMgsQABiABBiKBRiRAjIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBhAAGBYYHjIGEAAYFhgeMgYQABgWGB4yBhAAGBYYHjIGEAAYFhgeSIYrUIkMWMgmcAF4AJABAJgBeKAB9gmqAQQxMS40uAEDyAEA-AEBmAIPoALzCcICChAAGEcY1gQYsAPCAg4QABiABBiKBRixAxiDAcICCxAAGIAEGLEDGIMBwgIOEC4YgAQYigUYsQMYgwHCAhEQLhiABBixAxiDARjHARjRA8ICCxAuGIMBGLEDGIAEwgIOEC4YgAQYsQMYxwEY0QPCAgUQLhiABMICCxAuGIAEGMcBGK8BwgIOEAAYgAQYigUYkQIYsQPCAgoQABiABBiKBRhDwgINEAAYgAQYigUYQxixA8ICCBAAGIAEGLEDmAMAiAYBkAYIkgcEMTEuNKAHsWU&sclient=gws-wiz-serp#fpstate=ive&vld=cid:a23e759d,vid:VCJ45dH0aOs,st:0
+  public getVideoUrl(value: String) {
+    let url = "https://cdnapisec.kaltura.com/p/" + this.getParent(value) + "/sp/" + this.getSubParent(value) + "/embedIframeJs/uiconf_id/" + this.getUiConf(value) + "/partner_id/" + this.getParent(value) + "?iframeembed=true&playerId=kaltura_player_1712258806&entry_id=" + this.getEntryId(value);
+    this.trustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+
+  //  This is used for the altmetrics and dimensions icon.
   public getDoi(doi: String): String {
     doi.replace("http://dx.doi.org/", "");
     doi.replace("https://dx.doi.org/", "");

src/app/shared/theme-support/theme.service.ts

@@ -210,15 +210,17 @@ export class ThemeService {
       return;
     }
 
+    // UM change - don't think we need this, the new way of doing this.
     // Needed for Altmetrics and Dimensions.
-    const scriptAlt = this.document.createElement('script');
-    scriptAlt.setAttribute('src', 'https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js');
-    head.insertBefore(scriptAlt, head.firstChild);
+    //const scriptAlt = this.document.createElement('script');
+    //scriptAlt.setAttribute('src', 'https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js');
+    //head.insertBefore(scriptAlt, head.firstChild);
 
-    const scriptDim = this.document.createElement('script');
-    scriptDim.setAttribute('src', 'https://badge.dimensions.ai/badge.js');
-    head.insertBefore(scriptDim, head.firstChild);
+    //const scriptDim = this.document.createElement('script');
+    // scriptDim.setAttribute('src', 'https://badge.dimensions.ai/badge.js');
+    // head.insertBefore(scriptDim, head.firstChild);
     // End Altmetrics and Dimensions.
+    // END UM Change
 
     // clear head tags
     const currentHeadTags = Array.from(head.getElementsByClassName('theme-head-tag'));

src/themes/dspace/app/home-page/home-news/home-news.component.html

@@ -6,7 +6,7 @@
         <div>
           <h1>Deep Blue Documents</h1>
           <p class="lead">Deep Blue provides access to the work that makes the University of Michigan a leader in research, teaching, and creativity.</p>
-          <p class="lead">To find work by U-M authors, browse or search the contents of Deep Blue, then link to what you find using a URL that will always work (available to all). To deposit your work, please contact us (available to U-M faculty and staff).</p>
+          <p class="lead">To find work by U-M authors, browse or search the contents of Deep Blue, then link to what you find using a URL that will always work (available to all). To deposit your work, please contact us <a style="color: white; text-decoration: underline;" href="https://teamdynamix.umich.edu/TDClient/88/Portal/Requests/TicketRequests/NewForm?ID=7Az64AR5TqI_&amp;RequestorType=Service">contact us</a> (available to U-M faculty and staff).</p>
         </div>
       </div>