@titoagudelo/cdf-ng-media/lib/components/media/cdf-media.component.metadata.json

Angular module for displaying media assets (images, videos)

[{"__symbolic":"module","version":3,"metadata":{"CdfMediaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"cdf-media","template":"\n\t<!--IMAGE-->\n\t<cdf-image *ngIf=\"(mediaModel.HasImage && !mediaModel.HasVideo)\" \n\t\t\t\t[imageModel]=\"mediaModel\" \n\t\t\t\t(click)=\"doImageClick()\"></cdf-image>\n\n\t<!--VIDEO-->\n\t<cdf-video-youtube *ngIf=\"(mediaModel.HasVideo)\" \n\t\t\t\t[mediaModel]=\"mediaModel\"\n\t\t\t\t(onVideoBeforePlay)=\"doOnVideoBeforePlay()\"\n\t\t\t\t(onVideoStopPlay)=\"doOnVideoStopPlay()\"></cdf-video-youtube>\n\n\t<div (click)=\"onMediaClick()\">\n\t\t<ng-content></ng-content>\n\t</div>\n\n\t<span *ngIf=\"(showType && mediaModel.Type && mediaModel.Type.length > 0)\" class=\"cdf-media-type cdf-media-type-{{getCleanType()}}\">{{mediaModel.Type}}</span>\n\n\t<!--NO MEDIA ASSETS (NO IMAGE OR VIDEO)-->\n\t<section class=\"cdf-media-title-container\" *ngIf=\"(!mediaModel.HasImage && !mediaModel.HasVideo) || (showTitle)\">\n\t\t<a (click)=\"onMediaClick()\">\n\t\t\t<section class=\"cdf-media-title-wrapper\">\n\t\t\t\t<h2 class=\"cdf-media-title\">{{mediaModel.Title}}</h2>\n\t\t\t</section>\n\t\t</a>\n\t</section>\n\t","styles":["\n\t:host \n\t{\n\t\tcursor: pointer;\n\t\tdisplay: inherit;\n\t\theight: 200px;\n\t\toverflow: hidden;\n\t\twidth: 200px;\n\t}\n\n\t:host:hover /deep/ .cdf-background-image,\n\t:host:hover /deep/ .jw-preview\n\t{\n\t\theight: 110%;\n\t\tmargin: -5%;\n\t\toverflow: hidden;\n\t\twidth: 110%;\n\t}\n\n\ta\n\t{\n\t\tdisplay: block;\n\t\theight: 100%;\n\t\twidth: 100%;\t\t\n\t}\n\n\t.cdf-media-type\n\t{\n\t\tbackground-color: #ccc;\n\t\tcolor: #fff;\n\t\tleft: 0.75rem;\n\t\tpadding: 0.25rem 0.5rem;\n\t\tposition: absolute;\n\t\ttop: 0.75rem;\t\n\t\tz-index: 100;\n\t}\n\n\t.cdf-media-title-container\n\t{\n\t\tbottom: 0;\n\t\tbackground-color: rgba(0,0,0,0.15);\n\t\tleft: 0;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t}\n\n\t.cdf-media-title-wrapper\n\t{\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tpadding: 10%;\n\t\tposition: absolute;\n\t\tright: 0;\n\t}\n\n\t.cdf-media-title\n\t{\n\t\tcolor: #fff;\n\t\tline-height: 1;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t}\n\t"],"host":{"[class]":"classNames","$quoted$":["[class]"]},"providers":[]}]}],"members":{"mediaModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onImageClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onVideoBeforePlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onVideoStopPlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"videoComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../video/index","name":"CdfVideoYouTubeComponent"}]}]}],"imageComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../image/index","name":"CdfImageComponent"}]}]}],"isMediaVideo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.media-is-video"]}]}],"isMediaImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.media-is-image"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"stop":[{"__symbolic":"method"}],"doOnVideoBeforePlay":[{"__symbolic":"method"}],"doOnVideoStopPlay":[{"__symbolic":"method"}],"onMediaClick":[{"__symbolic":"method"}],"doImageClick":[{"__symbolic":"method"}],"getCleanType":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CdfMediaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"cdf-media","template":"\n\t<!--IMAGE-->\n\t<cdf-image *ngIf=\"(mediaModel.HasImage && !mediaModel.HasVideo)\" \n\t\t\t\t[imageModel]=\"mediaModel\" \n\t\t\t\t(click)=\"doImageClick()\"></cdf-image>\n\n\t<!--VIDEO-->\n\t<cdf-video-youtube *ngIf=\"(mediaModel.HasVideo)\" \n\t\t\t\t[mediaModel]=\"mediaModel\"\n\t\t\t\t(onVideoBeforePlay)=\"doOnVideoBeforePlay()\"\n\t\t\t\t(onVideoStopPlay)=\"doOnVideoStopPlay()\"></cdf-video-youtube>\n\n\t<div (click)=\"onMediaClick()\">\n\t\t<ng-content></ng-content>\n\t</div>\n\n\t<span *ngIf=\"(showType && mediaModel.Type && mediaModel.Type.length > 0)\" class=\"cdf-media-type cdf-media-type-{{getCleanType()}}\">{{mediaModel.Type}}</span>\n\n\t<!--NO MEDIA ASSETS (NO IMAGE OR VIDEO)-->\n\t<section class=\"cdf-media-title-container\" *ngIf=\"(!mediaModel.HasImage && !mediaModel.HasVideo) || (showTitle)\">\n\t\t<a (click)=\"onMediaClick()\">\n\t\t\t<section class=\"cdf-media-title-wrapper\">\n\t\t\t\t<h2 class=\"cdf-media-title\">{{mediaModel.Title}}</h2>\n\t\t\t</section>\n\t\t</a>\n\t</section>\n\t","styles":["\n\t:host \n\t{\n\t\tcursor: pointer;\n\t\tdisplay: inherit;\n\t\theight: 200px;\n\t\toverflow: hidden;\n\t\twidth: 200px;\n\t}\n\n\t:host:hover /deep/ .cdf-background-image,\n\t:host:hover /deep/ .jw-preview\n\t{\n\t\theight: 110%;\n\t\tmargin: -5%;\n\t\toverflow: hidden;\n\t\twidth: 110%;\n\t}\n\n\ta\n\t{\n\t\tdisplay: block;\n\t\theight: 100%;\n\t\twidth: 100%;\t\t\n\t}\n\n\t.cdf-media-type\n\t{\n\t\tbackground-color: #ccc;\n\t\tcolor: #fff;\n\t\tleft: 0.75rem;\n\t\tpadding: 0.25rem 0.5rem;\n\t\tposition: absolute;\n\t\ttop: 0.75rem;\t\n\t\tz-index: 100;\n\t}\n\n\t.cdf-media-title-container\n\t{\n\t\tbottom: 0;\n\t\tbackground-color: rgba(0,0,0,0.15);\n\t\tleft: 0;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t}\n\n\t.cdf-media-title-wrapper\n\t{\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tpadding: 10%;\n\t\tposition: absolute;\n\t\tright: 0;\n\t}\n\n\t.cdf-media-title\n\t{\n\t\tcolor: #fff;\n\t\tline-height: 1;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t}\n\t"],"host":{"[class]":"classNames"},"providers":[]}]}],"members":{"mediaModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onImageClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onVideoBeforePlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onVideoStopPlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"videoComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../video/index","name":"CdfVideoYouTubeComponent"}]}]}],"imageComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../image/index","name":"CdfImageComponent"}]}]}],"isMediaVideo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.media-is-video"]}]}],"isMediaImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.media-is-image"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"stop":[{"__symbolic":"method"}],"doOnVideoBeforePlay":[{"__symbolic":"method"}],"doOnVideoStopPlay":[{"__symbolic":"method"}],"onMediaClick":[{"__symbolic":"method"}],"doImageClick":[{"__symbolic":"method"}],"getCleanType":[{"__symbolic":"method"}]}}}}]