diff --git a/dist/media-element.min.js b/dist/media-element.min.js new file mode 100644 index 0000000..944bb57 --- /dev/null +++ b/dist/media-element.min.js @@ -0,0 +1,408 @@ +class Media_Details extends HTMLElement{constructor(){super(),this.mediaElementDetails=null,this.name=this.getAttribute("name"),this.type=this.getAttribute("type");var i="",e=this.name.split("(")[0],o=this.name.substring(this.name.indexOf("(")+1,this.name.lastIndexOf(")"));void 0==this.type&&(i=`https://api.themoviedb.org/3/search/movie?api_key=${TheMovieDB_APIKey}&language=en-US&query=${e}&year=${o}`),"TV"==this.type&&(i=`https://api.themoviedb.org/3/search/tv?api_key=${TheMovieDB_APIKey}&language=en-US&query=${e}&first_air_date_year=${o}`),this.endpoint=i,this.getDetails=this.getDetails.bind(this),this.innerHTML="

Loading

"}async connectedCallback(){let i=await this.getDetails();this.mediaElementDetails=i,this.initShadowDom()}initShadowDom(){this.attachShadow({mode:"open"}).innerHTML=this.template}get style(){var i=this.getAttribute("theme"),e=`@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700,800'); +* { + box-sizing: border-box; + margin: 0; +} +.movie_card { + font-family: 'Montserrat', helvetica, arial, sans-serif; + font-size: 14px; + font-weight: 400; + position: relative; + display: block; + width: 800px; + height: 350px; + margin: 80px auto; + overflow: hidden; + border-radius: 10px; + transition: all 0.4s; + box-shadow: 0px 0px 120px -25px rgba(0, 0, 0, 0.5); + text-align:left; +} +.movie_card .info_section { + position: relative; + width: 100%; + height: 100%; + background-blend-mode: multiply; + z-index: 2; + border-radius: 10px; +} +.movie_card .info_section .movie_header { + position: relative; + padding: 25px; + height: 40%; +} +.movie_card .info_section .movie_header h1 { + color: black; + font-weight: 400; +} +.movie_card .info_section .movie_header h4 { + color: #555; + font-weight: 400; +} +.movie_card .info_section .movie_header .minutes { + display: inline-block; + margin-top: 15px; + color: #555; + padding: 5px; + border-radius: 5px; + border: 1px solid rgba(0, 0, 0, 0.05); +} +.movie_card .info_section .movie_header .empty-span { + display: inline-block; + margin-top: 15px; + color: #555; + padding: 5px; + margin-left:-14px; +} +.movie_card .info_section .movie_header .empty-space { + display: inline-block; + margin-top: 15px; + padding: 5px; +} +.movie_card .info_section .movie_header .show-minutes { + display: inline-block; + color: #959595; + margin-left: 10px; +} +.movie_card .info_section .movie_header .no-minutes { + display: inline-block; + color: #959595; +} +.movie_card .info_section .movie_header .locandina { + position: relative; + float: left; + margin-right: 20px; + height: 120px; + box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.5); +} +.movie_card .info_section .movie_desc { + padding: 25px; + height: 50%; +} +.movie_card .info_section .movie_desc .text { + color: #545454; + + font-size: 0.69vw; +} +.movie_card .info_section .movie_social { + height: 10%; + padding-left: 15px; + padding-bottom: 20px; +} +.movie_card .info_section .movie_social ul { + list-style: none; + padding: 0; +} +.movie_card .info_section .movie_social ul li { + display: inline-block; + color: rgba(0, 0, 0, 0.3); + transition: color 0.3s; + transition-delay: 0.15s; + margin: 0 10px; +} +.movie_card .info_section .movie_social ul li:hover { + transition: color 0.3s; + color: rgba(0, 0, 0, 0.7); +} +.movie_card .info_section .movie_social ul li i { + font-size: 19px; + cursor: pointer; +} +.movie_card .blur_back { + position: absolute; + top: 0; + z-index: 1; + height: 100%; + right: 0; + background-size: cover; + border-radius: 11px; +} +@media screen and (min-width: 768px) { + .movie_header { + width: 65%; + } + .movie_desc { + width: 50%; + } + .info_section { + background: linear-gradient(to right, #e5e6e6 50%, transparent 100%); + } + .blur_back { + width: 80%; + background-position: -100% 10% !important; + } +} +@media screen and (max-width: 768px) { + .movie_card { + width: 95%; + margin: 70px auto; + min-height: 350px; + height: auto; + } + .blur_back { + width: 100%; + background-position: 50% 50% !important; + } + .movie_header { + width: 100%; + margin-top: 85px; + } + .movie_desc { + width: 100%; + } + .info_section { + background: linear-gradient(to top, #e5e6e6 50%, transparent 100%); + display: inline-grid; + } +} +`;return"black"==i&&(e=`@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700,800'); +* { + box-sizing: border-box; + margin: 0; +} +.movie_card { + position: relative; + display: block; + width: 800px; + height: 350px; + margin: 100px auto; + overflow: hidden; + border-radius: 10px; + transition: all 0.4s; + font-family: 'Montserrat', helvetica, arial, sans-serif; + font-size: 14px; + font-weight: 400; + text-align:left; +} +.movie_card .info_section { + position: relative; + width: 100%; + height: 100%; + background-blend-mode: multiply; + z-index: 2; + border-radius: 10px; +} +.movie_card .info_section .movie_header { + position: relative; + padding: 25px; + height: 40%; +} +.movie_card .info_section .movie_header h1 { + color: #fff; + font-weight: 400; +} +.movie_card .info_section .movie_header h4 { + color: #9ac7fa; + font-weight: 400; +} +.movie_card .info_section .movie_header .minutes { + display: inline-block; + margin-top: 10px; + color: #fff; + padding: 5px; + border-radius: 5px; + border: 1px solid rgba(255, 255, 255, 0.13); +} +.movie_card .info_section .movie_header .show-minutes { + display: inline-block; + color: #cee4fd; + margin-left: 10px; +} +.movie_card .info_section .movie_header .no-minutes { + display: inline-block; + color: #cee4fd; + margin-left: 0px; +} +.movie_card .info_section .movie_header .empty-span { + display: inline-block; + margin-top: 15px; + color: #555; + padding: 5px; + margin-left:-14px; +} +.movie_card .info_section .movie_header .empty-space { + display: inline-block; + margin-top: 15px; + padding: 5px; +} +.movie_card .info_section .movie_header .show-minutes { + display: inline-block; + color: #cee4fd; + margin-left: 10px; +} +.movie_card .info_section .movie_header .no-minutes { + display: inline-block; + color: #cee4fd; +} +.movie_card .info_section .movie_header .locandina { + position: relative; + float: left; + margin-right: 20px; + height: 120px; + box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.5); +} +.movie_card .info_section .movie_desc { + padding: 25px; + height: 50%; +} +.movie_card .info_section .movie_desc .text { + color: #cfd6e1; + font-size: 0.69vw; +} +.movie_card .info_section .movie_social { + height: 10%; + padding-left: 15px; + padding-bottom: 20px; +} +.movie_card .info_section .movie_social ul { + list-style: none; + padding: 0; +} +.movie_card .info_section .movie_social ul li { + display: inline-block; + color: rgba(255, 255, 255, 0.4); + transition: color 0.3s; + transition-delay: 0.15s; + margin: 0 10px; +} +.movie_card .info_section .movie_social ul li:hover { + transition: color 0.3s; + color: rgba(255, 255, 255, 0.8); +} +.movie_card .info_section .movie_social ul li i { + font-size: 19px; + cursor: pointer; +} +.movie_card .blur_back { + position: absolute; + top: 0; + z-index: 1; + height: 100%; + right: 0; + background-size: cover; + border-radius: 11px; +} +@media screen and (min-width: 768px) { + .movie_header { + width: 60%; + } + .movie_desc { + width: 50%; + } + .info_section { + background: linear-gradient(to right, #0d0d0c 50%, transparent 100%); + } + .blur_back { + width: 80%; + background-position: -100% 10% !important; + } +} +@media screen and (max-width: 768px) { + .movie_card { + width: 95%; + margin: 70px auto; + min-height: 350px; + height: auto; + } + .blur_back { + width: 100%; + background-position: 50% 50% !important; + } + .movie_header { + width: 100%; + margin-top: 85px; + } + .movie_desc { + width: 100%; + } + .info_section { + background: linear-gradient(to top, #141413 50%, transparent 100%); + display: inline-grid; + } +} +#bright { + box-shadow: 0px 0px 150px -45px rgba(255, 51, 0, 0.5); +} +#bright:hover { + box-shadow: 0px 0px 120px -55px rgba(255, 51, 0, 0.5); +} +.bright_back { + background: url("https://occ-0-2433-448.1.nflxso.net/art/cd5c9/3e192edf2027c536e25bb5d3b6ac93ced77cd5c9.jpg"); +} +#tomb { + box-shadow: 0px 0px 150px -45px rgba(19, 160, 134, 0.6); +} +#tomb:hover { + box-shadow: 0px 0px 120px -55px rgba(19, 160, 134, 0.6); +} +.tomb_back { + background: url("https://fsmedia.imgix.net/cd/c9/5e/ba/4817/4d9a/93f0/c776ec32ecbc/lara-crofts-neck-looks-unnatural-in-the-new-poster-for-tomb-raider.png"); +} +#ave { + box-shadow: 0px 0px 150px -45px rgba(199, 147, 75, 0.7); + margin-bottom: 200px; +} +#ave:hover { + box-shadow: 0px 0px 120px -55px rgba(199, 147, 75, 0.7); +} +.ave_back { + background: url("https://www.gannett-cdn.com/-mm-/c03fd140debe8ad4c05cf81a5cad7ad61a12ce52/c=0-1580-2985-3266&r=x803&c=1600x800/local/-/media/2017/06/09/USATODAY/USATODAY/636326272873599176-Black-Panther-Teaser.jpg"); +} +`),` + + `}get template(){let i=this.mediaElementDetails;return 0===i.total_results?this.style+this.cardError(i):i.status_message?this.style+this.cardError(i):this.style+this.cardTemplate(i)}async getDetails(){return await fetch(this.endpoint,{mode:"cors"}).then(i=>i.json())}cardError({status_message:i,total_results:e}){if(void 0==i)var o="Movie / TV Show Not Found";else var o=i;return` + +
+
+
+ +

Error: ${o}

+ +
+
+

+ +

+
+ +
+
+
+ + `}cardTemplate({Count:i,page:e,results:o}){if(void 0==this.type){var t=o[0].title,a=o[0].overview;o[0].id;var n="https://image.tmdb.org/t/p/w500"+o[0].poster_path,r="https://image.tmdb.org/t/p/w500"+o[0].backdrop_path,s=o[0].release_date.split("-")[0],d="show-minutes",c='136 min'}if("TV"==this.type)var t=o[0].name,a=o[0].overview,n="https://image.tmdb.org/t/p/w500"+o[0].poster_path,r="https://image.tmdb.org/t/p/w500"+o[0].backdrop_path,s=o[0].first_air_date.split("-")[0],c='',d="no-minutes";var i=0;for(var l in this.name)i+=1;return` + +
+
+
+ +

${t}

+

${s}

+ ${c} +

Action, Science Fiction

+
+
+

+ ${a} + +

+
+ +
+
+
+ `}}window.customElements.define("media-element",Media_Details);