feat: add review section

fetchers/movie.js

@@ -109,6 +109,20 @@ const getMovie = async (title, quality = null) => {
       '[data-testid="storyline-certificate"] li'
     ).text();
 
+    // reviews
+    const reviewSummary = $(
+      'section[data-testid="UserReviews"] span[data-testid="review-summary"]'
+    ).text();
+    const reviewRating = $(
+      'section[data-testid="UserReviews"] div[data-testid="review-featured-header"]'
+    )
+      .children()
+      .last()
+      .text();
+    const reviewComment = $(
+      'section[data-testid="UserReviews"] div[data-testid="review-overflow"]'
+    ).text();
+
     // details
     const releaseDate = $(
       'section[data-testid="Details"] li[data-testid="title-details-releasedate"] li'
@@ -223,6 +237,11 @@ const getMovie = async (title, quality = null) => {
       },
       reviews: {
         reviewScores,
+        review: {
+          reviewComment,
+          reviewSummary,
+          reviewRating,
+        },
       },
     };
 

views/pug/movie.pug

@@ -84,6 +84,26 @@ block content
           span.movie__heading-sub Parental Guidance: 
           span= movie.storyline.parentalGuidance || '\u2013'
 
+    .movie__review 
+      h2.movie__heading-main Reviews 
+      -if (movie.reviews.review.reviewRating)
+        .movie__review-box.review__box
+          h3.review__summary.movie__heading-sub= movie.reviews.review.reviewSummary
+          p.review__rating
+            svg.basic__rating-icon.basic__icon: use(href='/img/misc/sprite.svg#icon-rating')
+            span.movie__heading-sub= movie.reviews.review.reviewRating
+          p.review__comment= movie.reviews.review.reviewComment
+      -else 
+        p.review__na no reviews
+
+      .movie__review-scores.review__scores
+        each reviewScore in movie.reviews.reviewScores
+          p.review__score
+            span.movie__heading-sub= reviewScore[0]
+            | 
+            span= reviewScore[1]
+        
+      a.movie__link(href='./reviews') All reviews
 
     .movie__details 
       h2.movie__heading-main Details 

views/sass/_components.scss

@@ -1,6 +1,25 @@
 // importing as scss vars
 @use 'abstracts' as *;
 
+////////////////////////////////////////////////////////////////
+//                          PLACEHOLDERS
+////////////////////////////////////////////////////////////////
+%list-items:not(:last-of-type)::after {
+  margin-right: 0.6rem;
+  display: inline-block;
+  content: ',';
+}
+
+%bullet-items:not(:last-of-type)::after {
+  display: inline-block;
+  content: '\00b7';
+  margin: 0 5px;
+  font-weight: 900;
+  font-family: var(--ff-alt-alpha);
+  // font-size: var(--fs-200);
+  color: var(--clr-card-text-alt-alpha);
+}
+
 ////////////////////////////////////////////////////////////////
 //                          HEADINGS
 ////////////////////////////////////////////////////////////////
@@ -556,11 +575,6 @@
     }
   }
 
-  %list-items:not(:last-of-type)::after {
-    margin-right: 0.6rem;
-    display: inline-block;
-    content: ',';
-  }
   &__title {
     font-family: var(--ff-alt-alpha);
     color: var(--clr-card-heading);
@@ -605,15 +619,7 @@
     // font-size: var(--fs-180);
     // line-height: 1;
 
-    &:not(:last-of-type)::after {
-      display: inline-block;
-      content: '\00b7';
-      margin: 0 5px;
-      font-weight: 900;
-      font-family: var(--ff-alt-alpha);
-      font-size: var(--fs-200);
-      color: var(--clr-card-text-alt-alpha);
-    }
+    @extend %bullet-items;
   }
 
   &__stats {
@@ -802,3 +808,44 @@
   display: grid;
   gap: var(--spacer-050);
 }
+
+////////////////////////////////////////////////////////////////
+//                          review
+////////////////////////////////////////////////////////////////
+.review {
+  &__scores {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacer-050) var(--spacer-300);
+    padding-block: var(--spacer-100);
+  }
+
+  &__score {
+  }
+
+  &__box {
+    display: grid;
+    grid-template-columns: auto min-content;
+    gap: var(--spacer-100);
+
+    @include bp(bp-725) {
+      grid-template-columns: auto;
+    }
+  }
+
+  &__summary {
+  }
+
+  &__rating {
+    display: flex;
+    gap: var(--spacer-050);
+
+    > * {
+      align-self: center;
+    }
+  }
+
+  &__comment {
+    grid-column: 1 / -1;
+  }
+}

views/sass/_pages.scss

@@ -516,7 +516,8 @@
   &__boxoffice,
   &__details,
   &__technical,
-  &__media {
+  &__media,
+  &__review {
     // background: var(--clr-card-bg);
     // border-radius: var(--border-radius);
     padding: var(--spacer-200);
@@ -573,7 +574,7 @@
     }
   }
 
-  &__media {
+  &__review {
     align-self: center;
     grid-column: 1 / span 4;
     grid-row: -3 / -1;
@@ -583,6 +584,16 @@
     }
   }
 
+  &__media {
+    align-self: center;
+    grid-column: 1 / -1;
+    // grid-row: -3 / -1;
+    // @include bp(bp-1100) {
+    //   grid-column: 1 / -1;
+    //   grid-row: unset;
+    // }
+  }
+
   &__media-image-secondary-box {
     max-height: 30rem;
     flex: 1 0 30rem;