macjabeth / showbunny Goto Github PK

We are currently getting an error in the console:

SyntaxError: Unexpected token S in JSON at position 0
    at JSON.parse (<anonymous>)
    at window.onload (app.js:59)

This needs to be tracked down and fixed.

Styling and data should be inspired by the design spec (see README.md).

Tasks

• Render TV show data
• Show seasons and episodes
• Style displayed data for mobile screens
• Style displayed data for tablet & desktop screens

It works on mobile, but it could definitely do with some UI tweaking.

As per: https://developers.themoviedb.org/3/trending/get-trending

Ideally, it should pull the trending movies for the week upon loading the site; if one switches to the TV tab (next to the search bar), it should then pull trending TV shows for the week.

Hey @macjabeth , I think you should add a neat navigation bar on your website for easier navigation through movies/shows.

If you want I will make a nice and responsive floating navigation bar for your website using css with bootstrap 5 😃😃

At the moment it simply asks for the season and episode via prompt().

On searches with lots of results the first and last pages can be off the sides of the screen. Maybe find a way to reduce the amount of results (first few, last few, and some ellipsis for instance).

In the develop branch lies the old version of Showbunny, which includes the necessary images, icons and favicon. These should be copied over and referenced appropriately.

At the moment it uses prompt() to gather this information. It could be better, and I welcome any contributors.

While semicolons are technically optional in Javascript its good practice to use them for line endings and there are even some weird edge cases where Javascript will actually break if they aren't there. So start getting in the habit of using them now ;)

As per: https://developers.themoviedb.org/3/getting-started/authentication

This will let users do things like rate movies, maintain their favourite and watch lists as well as do things like create and edit custom lists—all while staying in sync with their account on TMDb.

Guest sessions are a second type of user authentication. They have limited permissions as they can only rate a movie, TV show and TV episode.

Is your feature request related to a problem? Please describe.
Having security risks is always a problem. Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement to distribute malware.

Describe the solution you'd like
A CSP should be defined as an HTTP header which allows content from 3rd-party sites such as TMDB for images and gstatic for fonts.

Styling and data should be inspired by the design spec (see README.md).

Tasks

• Render Movie data
• Style displayed data for mobile screens
• Style displayed data for tablet & desktop screens

Upon installation we are getting:

found 10 vulnerabilities (1 low, 3 moderate, 6 high)

These audit errors need manual review and fixing.

Modularity and DRY code is the purpose of this issue. In order to keep things clean, elements like movie/show posters should be turned into Web Components.

Others could be converted as well.

We are getting the following errors when loading the page:

Failed to load resource: the server responded with a status of 404

This started showing up after adding in the TV show posters. It seems like it is trying to fetch these resources before the poster paths are appended to the web components.

I always use dark themes for websites and apps, so naturally, this must have one too.

Describe the bug

Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity.

To Reproduce

Steps to reproduce the behavior:

1. Load site on mobile device
2. See pixelated/unclear images

Expected behavior

Load the correct image size from the API to sharpen image resolution.

Screenshots

Right now we have the <media-poster> tags as direct descendants of the <ul> tags.

This is structured incorrectly. The <media-poster> tags should be descendants of <li> tags.

Describe the bug

The lists are able to be scroll through on mobile and tablet views, but for desktop users - specifically ones with a mouse - they are unable to scroll to the right or left.

To Reproduce

Steps to reproduce the behavior:

1. Go to the home page on desktop
2. Attempt to drag or scroll through one of the lists
3. See issue

Expected behavior

Users should be able to scroll by clicking nav buttons on the left or right of the list, as seen in other streaming services.

Implementation Examples

For any artists out there who love bunnies, this is your chance to shine.

Please keep in mind that these icons will be used not only in the browser but for any PWA icons in the future. Including a 512x512 icon is important.

See https://github.com/audreyr/favicon-cheat-sheet for a guide and best practices.

🥕 You will be awarded a tasty carrot for completing this task. 🥕

Describe the bug
There is an issue where the media posters are repeating themselves each page refresh.

To Reproduce
Steps to reproduce the behavior:

1. Click on movies page
2. Go back to homepage
3. Scroll through movies list
4. See that movies have been duplicated in the list

Expected behavior
Only one movie and show should show up. Duplicates should not be present

Additional context
There are a few ways this could be corrected, but the ideal solution would be to keep a cache of results for each request to the API. Then when switching pages, we can clear out existing page data and check the cache before making another API call.

The previous version of Showbunny included updated images and icons (which can be viewed in the master branch).

These changes should be moved over to the rebirth branch and the site.webmanifest should be updated to fix the following console errors.

Manifest: property 'start_url' ignored, URL is invalid.
Manifest: property 'src' ignored, URL is invalid.

Instead of coding the image URL as a background, it should use an picture tag with source tags set to appropriate poster sizes so that the image quality is optimized for each device.

Example:

<picture>
  <source media="(max-width: 92px)" srcset="w92.jpg">
  <source media="(max-width: 154px)" srcset="w154.jpg">
  <source media="(max-width: 185px)" srcset="w185.jpg">
  <source media="(max-width: 342px)" srcset="w342.jpg">
  <source media="(max-width: 500px)" srcset="w500.jpg">
  <source media="(max-width: 780px)" srcset="w780.jpg">
  <img src="original.jpg" alt="Poster image">
</picture>

The available poster sizes can be viewed here.
Documentation on responsive images can be found here.

When you click on a search result, it should open a modal window to display more information and streaming options.

• create basic layout
• add styling
• add interactivity

There are numerous benefits to this; having native support for mobile devices is enough to make it a worthwhile improvement.

Tasks:

• Configure the Web App Manifest
• Create the Manifest icons
• Add the Service Worker code
• Set up Service Worker Cache to ensure site works offline

Having the aria labels on the movie posters is not well-supported. To improve SEO, we should add these aria labels to the list item tags.

This should be done after completing #43.

Something bunny-themed, of course. 🐰

We're getting errors when trying to import javascript from the index.html.

Failed to load resource: the server responded with a status of 404

These errors are due to the way Vite is bundling for production, and should be fixed.