├── .editorconfig
├── .gitignore
├── README.md
├── app.html
├── assets
    ├── css
    │   ├── _variables.scss
    │   └── global.scss
    ├── icons
    │   ├── file.png
    │   ├── link.png
    │   └── youtube.svg
    └── images
    │   ├── background.jpg
    │   ├── background_1.jpg
    │   ├── background_2.jpg
    │   └── background_3.jpg
├── components
    ├── AudioBar.vue
    ├── Avatar.vue
    ├── Controls.vue
    ├── Info.vue
    ├── JoinRoom.vue
    ├── Modal.vue
    ├── Participant.vue
    ├── Player.vue
    ├── RoomSetup.vue
    ├── Spinner.vue
    ├── VideoStopped.vue
    └── modals
    │   ├── EditRoom.vue
    │   ├── Invite.vue
    │   └── VideoLinkModal.vue
├── layouts
    └── landing.vue
├── middleware
    └── README.md
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _room.vue
    ├── createroom.vue
    ├── index.vue
    └── joinroom.vue
├── plugins
    ├── ping.js
    ├── socket-io.js
    ├── srt-webvtt.js
    └── vue-plyr.js
├── screenshots
    ├── screenshot_1.png
    ├── screenshot_2.png
    ├── screenshot_3.png
    └── screenshot_4.png
├── static
    ├── favicon.ico
    ├── file_icon.png
    ├── sample.vtt
    └── video_icon.png
└── store
    └── index.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 🍿 Movie Night
  2 | 
  3 | <p>
  4 |   <img alt="Version" src="https://img.shields.io/badge/version-0.1.0-blue.svg?cacheSeconds=2592000" />
  5 |   <a href="#" target="_blank">
  6 |     <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
  7 |   </a>
  8 | </p>
  9 | 
 10 | > Web app to play local video files and youtube videos in sync with your friends for a great movie night!
 11 | 
 12 | ## ⭐️ [Demo](https://movienight.ecris.in/)
 13 | 
 14 | ## 🏙 Screenshots
 15 | 
 16 | ![Player](./screenshots/screenshot_1.png)
 17 | ![Landing page](./screenshots/screenshot_2.png)
 18 | ![Creating room](./screenshots/screenshot_3.png)
 19 | ![Waiting for host](./screenshots/screenshot_4.png)
 20 | 
 21 | ## 💿 Usage
 22 | 
 23 | ```sh
 24 | # install dependencies
 25 | $ yarn install
 26 | 
 27 | # serve with hot reload at localhost:3000
 28 | $ yarn dev
 29 | 
 30 | # build for production and launch server
 31 | $ yarn build
 32 | $ yarn start
 33 | 
 34 | # generate static project
 35 | $ yarn generate
 36 | ```
 37 | 
 38 | ## ‼️ Note
 39 | 
 40 | This is the frontend of the web app. You can get the server [here](https://github.com/emanuelchristo/movie-night-server)
 41 | 
 42 | ## 🌳 Environment Variables
 43 | 
 44 | On deploying set `SERVER_URL` env var to the server's url
 45 | 
 46 | ## 🪜 Steps
 47 | 
 48 | 1. Create a room ➕
 49 | 2. Add a name and thumbnail 🌆
 50 | 3. Add video 🎬
 51 | 4. Invite your friends 🕺
 52 | 5. Chill 🍿
 53 | 
 54 | ## 💎 Features
 55 | 
 56 | 🔮 Beautiful UI  
 57 | 🔥 Fast realtime updates  
 58 | ⌛️ No refreshes needed  
 59 | 📺 Floating video  
 60 | 📄 Subtitles
 61 | 
 62 | ## ❓ FAQs
 63 | 
 64 | #### 1. What can I do with this?
 65 | 
 66 | > Watch video (local files and youtube) in sync with your friends
 67 | 
 68 | #### 2. Does that mean all my friends should have the same video file?
 69 | 
 70 | > Yes, if you want to watch videos from you device. You can also watch youtube videos by just adding its link
 71 | 
 72 | #### 3. Do I have to login to use this?
 73 | 
 74 | > Absolutely no. All you have to give is a nickname - whatever you prefer
 75 | 
 76 | ## 🚗 Roadmap
 77 | 
 78 | - Add voice chat
 79 | - Add text chat
 80 | - Responsive UI
 81 | - Add more host controls
 82 | - [Random Movie](https://github.com/emanuelchristo/random-movie) integration
 83 | - Movie brainstorming board
 84 | - Streaming
 85 | - Social media of cinephiles
 86 | 
 87 | ## 🧑‍💻 Author
 88 | 
 89 | Emanuel Christo
 90 | 
 91 | ## 🔗 Links
 92 | 
 93 | [![github](https://img.shields.io/badge/github-000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/emanuelchristo)
 94 | [![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/emanuelchristo/)
 95 | [![twitter](https://img.shields.io/badge/instagram-f76623?style=for-the-badge&logo=instagram&logoColor=white)](https://instagram.com/emanuel.christo)
 96 | 
 97 | ## 📄 License
 98 | 
 99 | MIT
100 | 
101 | ## Show your support
102 | 
103 | Give a ⭐️ if this project helped you!
104 | 
105 | ---
106 | 


--------------------------------------------------------------------------------
/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html {{ HTML_ATTRS }}>
 3 | 
 4 | <head {{ HEAD_ATTRS }}>
 5 |   {{ HEAD }}
 6 | 
 7 |   <!-- Global site tag (gtag.js) - Google Analytics -->
 8 |   <script async src="https://www.googletagmanager.com/gtag/js?id=G-G2B0XKF8Z7"></script>
 9 |   <script>
10 |     window.dataLayer = window.dataLayer || [];
11 |     function gtag() { dataLayer.push(arguments); }
12 |     gtag('js', new Date());
13 | 
14 |     gtag('config', 'G-G2B0XKF8Z7');
15 |   </script>
16 | </head>
17 | 
18 | <body {{ BODY_ATTRS }}>
19 |   {{ APP }}
20 | </body>
21 | 
22 | </html>


--------------------------------------------------------------------------------
/assets/css/_variables.scss:
--------------------------------------------------------------------------------
 1 | $grid-line-color: rgba(#fff, 0.06);
 2 | 
 3 | $trans-short: ease-out all 0.1s;
 4 | $trans-med: ease-out all 0.3s;
 5 | 
 6 | @mixin gradient {
 7 |   background: rgb(190, 0, 235);
 8 |   background: linear-gradient(
 9 |     150deg,
10 |     rgba(190, 0, 235, 1) 0%,
11 |     rgba(78, 0, 183, 1) 100%
12 |   );
13 | }
14 | 
15 | $menu-bg-color: rgb(19, 20, 26);
16 | 
17 | @mixin red {
18 |   background: rgb(223, 0, 0);
19 |   background: linear-gradient(150deg, rgb(233, 0, 0) 0%, rgb(144, 5, 5) 100%);
20 | }
21 | 
22 | .red {
23 |   @include red;
24 | }
25 | 
26 | @mixin audio-gradient {
27 |   background: rgb(0, 224, 58);
28 |   background: linear-gradient(
29 |     90deg,
30 |     rgba(0, 224, 58, 1) 0%,
31 |     rgba(255, 233, 0, 1) 62%,
32 |     rgba(242, 1, 1, 1) 100%
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/assets/css/global.scss:
--------------------------------------------------------------------------------
  1 | @import "~/assets/css/_variables.scss";
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 |   font-family: "Inter", sans-serif;
  8 |   -webkit-font-smoothing: antialiased;
  9 |   -moz-osx-font-smoothing: grayscale;
 10 |   text-rendering: optimizeLegibility;
 11 | }
 12 | 
 13 | :root {
 14 |   --plyr-color-main: linear-gradient(
 15 |     150deg,
 16 |     rgba(190, 0, 235, 1) 0%,
 17 |     rgba(78, 0, 183, 1) 100%
 18 |   );
 19 |   --plyr-video-background: rgba(255, 255, 255, 1);
 20 | 
 21 |   --plyr-badge-border-radius: 5px;
 22 |   --plyr-badge-background: rgb(197, 0, 0);
 23 |   --plyr-badge-text-color: #fff;
 24 | 
 25 |   --plyr-captions-text-color: rgb(255, 187, 0);
 26 |   --plyr-captions-background: rgba(0, 0, 0, 0.459);
 27 | 
 28 |   --plyr-control-spacing: 12px;
 29 |   // --plyr-video-control-background-hover: rgba(255, 255, 255, 0.3);
 30 | 
 31 |   --plyr-menu-background: rgb(19, 20, 26);
 32 |   --plyr-menu-color: rgba(255, 255, 255, 0.8);
 33 |   --plyr-menu-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
 34 | 
 35 |   --plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.4);
 36 |   --plyr-range-track-height: 3px;
 37 |   --plyr-range-fill-background: rgb(116, 6, 206);
 38 |   --plyr-video-range-track-background: rgba(255, 255, 255, 0.3);
 39 | 
 40 |   --plyr-tooltip-background: rgb(19, 20, 26);
 41 |   --plyr-tooltip-color: rgba(255, 255, 255, 0.8);
 42 |   --plyr-tooltip-radius: 100px;
 43 | 
 44 |   --plyr-font-smoothing: true;
 45 | }
 46 | 
 47 | .player-wrapper {
 48 |   span {
 49 |     font-size: 0.9rem;
 50 |   }
 51 |   button {
 52 |     width: fit-content;
 53 |     height: fit-content;
 54 |   }
 55 |   button:hover {
 56 |     box-shadow: none;
 57 |   }
 58 | }
 59 | 
 60 | body {
 61 |   color: #fff;
 62 |   background: rgb(17, 17, 34);
 63 |   min-width: 1100px;
 64 | }
 65 | 
 66 | a {
 67 |   all: unset;
 68 |   cursor: pointer;
 69 | }
 70 | 
 71 | ::selection {
 72 |   background: rgba(rgb(116, 6, 206), 0.7);
 73 | }
 74 | 
 75 | h2 {
 76 |   color: #fff;
 77 |   font-size: 1.75rem;
 78 | }
 79 | 
 80 | .flex-center {
 81 |   display: flex;
 82 |   align-items: center;
 83 |   justify-content: center;
 84 | }
 85 | .flex-center-col {
 86 |   display: flex;
 87 |   flex-flow: column;
 88 |   align-items: center;
 89 |   justify-content: center;
 90 | }
 91 | 
 92 | button,
 93 | .button {
 94 |   display: flex;
 95 |   align-items: center;
 96 |   justify-content: center;
 97 |   width: 220px;
 98 |   height: 55px;
 99 |   font-size: 1.2rem;
100 |   font-weight: 600;
101 |   @include gradient;
102 |   border: none;
103 |   border-radius: 300px;
104 |   color: #fff;
105 |   cursor: pointer;
106 |   padding-bottom: 2px;
107 |   transition: $trans-med;
108 |   span {
109 |     margin-right: 0.3rem;
110 |     font-size: 1.6rem;
111 |   }
112 | }
113 | button:hover,
114 | .button:hover {
115 |   box-shadow: 0 0.4rem 1.5rem rgb(103, 14, 204),
116 |     0 0.5rem 2rem rgba(204, 14, 195, 0.4);
117 | 
118 |   box-shadow: rgba(208, 46, 240, 0.4) 2px 3px, rgba(195, 46, 240, 0.3) 4px 6px,
119 |     rgba(169, 46, 240, 0.2) 6px 9px, rgba(208, 46, 240, 0.1) 8px 12px;
120 | }
121 | button:active,
122 | .button:active {
123 |   box-shadow: none;
124 | }
125 | 
126 | .button-outline {
127 |   background: none;
128 |   border: 1px solid #fff;
129 |   transition: $trans-med;
130 | }
131 | .button-outline:hover {
132 |   background: rgba(#fff, 0.05);
133 | }
134 | .button-outline:active {
135 |   background: none;
136 |   box-shadow: none;
137 | }
138 | 
139 | .input-wrapper {
140 |   margin: 0.5rem 0;
141 |   display: flex;
142 |   flex-flow: column;
143 | }
144 | 
145 | label {
146 |   font-size: 0.8rem;
147 |   color: rgba(#fff, 0.7);
148 | }
149 | input {
150 |   width: 240px;
151 |   font-size: 1rem;
152 |   color: #fff;
153 |   padding: 0.75rem 1.1rem;
154 |   margin-top: 0.4rem;
155 |   border: none;
156 |   outline: none;
157 |   border-radius: 0.5rem;
158 |   border: 1px solid rgba(#fff, 0.1);
159 |   background: rgba(#fff, 0.05);
160 |   box-shadow: 0 0.5rem 1rem rgba(#000, 0.1);
161 | }
162 | input::placeholder {
163 |   color: rgba(#fff, 0.2);
164 | }
165 | 


--------------------------------------------------------------------------------
/assets/icons/file.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emanuelchristo/movie-night/06544427fba66e95b5fa5492d810ce442c00b281/assets/icons/file.png


--------------------------------------------------------------------------------
/assets/icons/link.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emanuelchristo/movie-night/06544427fba66e95b5fa5492d810ce442c00b281/assets/icons/link.png


--------------------------------------------------------------------------------
/assets/icons/youtube.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" viewBox="-35.20005 -41.33325 305.0671 247.9995"><path d="M229.763 25.817c-2.699-10.162-10.65-18.165-20.748-20.881C190.716 0 117.333 0 117.333 0S43.951 0 25.651 4.936C15.553 7.652 7.6 15.655 4.903 25.817 0 44.236 0 82.667 0 82.667s0 38.429 4.903 56.85C7.6 149.68 15.553 157.681 25.65 160.4c18.3 4.934 91.682 4.934 91.682 4.934s73.383 0 91.682-4.934c10.098-2.718 18.049-10.72 20.748-20.882 4.904-18.421 4.904-56.85 4.904-56.85s0-38.431-4.904-56.85" fill="red"/><path d="M93.333 117.559l61.333-34.89-61.333-34.894z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/assets/images/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emanuelchristo/movie-night/06544427fba66e95b5fa5492d810ce442c00b281/assets/images/background.jpg


--------------------------------------------------------------------------------
/assets/images/background_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emanuelchristo/movie-night/06544427fba66e95b5fa5492d810ce442c00b281/assets/images/background_1.jpg


--------------------------------------------------------------------------------
/assets/images/background_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emanuelchristo/movie-night/06544427fba66e95b5fa5492d810ce442c00b281/assets/images/background_2.jpg


--------------------------------------------------------------------------------
/assets/images/background_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emanuelchristo/movie-night/06544427fba66e95b5fa5492d810ce442c00b281/assets/images/background_3.jpg


--------------------------------------------------------------------------------
/components/AudioBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="audio-bar">
 3 |     <div class="audio-level"></div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {};
 9 | </script>
10 | 
11 | <style lang="scss" scoped>
12 | @import "~/assets/css/_variables.scss";
13 | 
14 | .audio-bar {
15 |   width: 100%;
16 |   height: 4px;
17 |   border-radius: 100px;
18 |   background-color: rgba(#fff, 0.15);
19 | }
20 | 
21 | .audio-level {
22 |   width: 50%;
23 |   height: 100%;
24 |   border-radius: 100px;
25 |   @include audio-gradient;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/components/Avatar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="user" v-if="loggedIn" @click="logout">
 3 |     <p>{{ nickName }}</p>
 4 |     <div class="image" ref="userImage">
 5 |       <span class="mdi mdi-jellyfish"></span>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { mapState, mapActions } from "vuex";
12 | export default {
13 |   computed: {
14 |     ...mapState(["loggedIn", "nickName"])
15 |   },
16 |   methods: {
17 |     ...mapActions(["logout"])
18 |   }
19 | };
20 | </script>
21 | 
22 | <style lang="scss" scoped>
23 | .user {
24 |   display: flex;
25 |   align-items: center;
26 |   justify-content: center;
27 |   cursor: pointer;
28 |   .image {
29 |     width: 45px;
30 |     height: 45px;
31 |     display: flex;
32 |     align-items: center;
33 |     justify-content: center;
34 |     background: rgba(#fff, 0.1);
35 |     border-radius: 100%;
36 |     span {
37 |       font-size: 1.5rem;
38 |     }
39 |   }
40 |   p {
41 |     margin-right: 0.5rem;
42 |   }
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/components/Controls.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="controls-container">
  3 |     <div class="room">
  4 |       <h3>
  5 |         ROOM
  6 |         <span
  7 |           class="mdi mdi-cog room-settings"
  8 |           v-if="isHost"
  9 |           @click="$emit('editRoom')"
 10 |         ></span>
 11 |       </h3>
 12 |       <div class="room-wrapper">
 13 |         <div
 14 |           class="room-image"
 15 |           :style="`background-image: url(${room.imageLink})`"
 16 |         ></div>
 17 |         <div class="room-text">
 18 |           <p class="room-name">
 19 |             {{ room.name || "--" }}
 20 |           </p>
 21 |           <button @click="$emit('invite')">
 22 |             <span class="mdi mdi-party-popper"></span>Invite
 23 |           </button>
 24 |         </div>
 25 |       </div>
 26 |       <!-- <p class="room-code">
 27 |         <span class="code-text">ID</span> {{ room.id || "--" }}
 28 |       </p> -->
 29 |     </div>
 30 | 
 31 |     <div class="participants">
 32 |       <h3>HOST</h3>
 33 |       <participant :info="room.host" :isHost="isHost" />
 34 |       <div style="height: 1rem"></div>
 35 |       <h3>
 36 |         PARTICIPANTS
 37 |         <span class="participants-count">{{ room.participants.length }}</span>
 38 |       </h3>
 39 |       <participant
 40 |         v-for="(p, index) of participants"
 41 |         :info="p"
 42 |         :isHost="isHost"
 43 |         :key="index"
 44 |       />
 45 |     </div>
 46 | 
 47 |     <div class="controls">
 48 |       <h3>CONTROLS</h3>
 49 |       <div class="controls-wrapper">
 50 |         <audio-bar />
 51 |         <div class="controls-b">
 52 |           <button @click="$emit('leave-room')">
 53 |             {{ isHost ? "End room" : "Leave" }}
 54 |           </button>
 55 |           <div class="controls-br">
 56 |             <!-- <span
 57 |               class="mdi mdi-microphone-off"
 58 |               v-if="room.voiceChat.micOff"
 59 |             ></span> -->
 60 |             <span class="mdi mdi-microphone"></span>
 61 |             <!-- <span
 62 |               class="mdi mdi-headphones-off"
 63 |               v-if="room.voiceChat.soundOff"
 64 |             ></span> -->
 65 |             <span class="mdi mdi-headphones"></span>
 66 |             <span class="mdi mdi-cog"></span>
 67 |           </div>
 68 |         </div>
 69 |       </div>
 70 |     </div>
 71 |   </div>
 72 | </template>
 73 | 
 74 | <script>
 75 | export default {
 76 |   props: ["room", "isHost"],
 77 |   computed: {
 78 |     participants() {
 79 |       return this.room.participants.filter(p => p.id !== this.room.host.id);
 80 |     }
 81 |   }
 82 | };
 83 | </script>
 84 | 
 85 | <style lang="scss" scoped>
 86 | @import "~/assets/css/_variables.scss";
 87 | 
 88 | .controls-container {
 89 |   width: 340px;
 90 |   height: 100%;
 91 |   display: flex;
 92 |   flex-flow: column;
 93 |   border-left: 1.5px solid rgba(#fff, 0.1);
 94 |   background: rgba(14, 13, 27, 0.15);
 95 |   backdrop-filter: blur(50px);
 96 | }
 97 | 
 98 | h3 {
 99 |   font-size: 0.8rem;
100 |   margin-bottom: 1.5rem;
101 |   display: flex;
102 |   align-items: center;
103 | }
104 | 
105 | .participants {
106 |   flex: 1;
107 |   padding: 2.5rem 1.25rem 2.5rem 2rem;
108 |   overflow-x: hidden;
109 |   overflow-y: scroll;
110 | }
111 | .participants-count {
112 |   font-weight: 400;
113 |   margin-left: 1rem;
114 | }
115 | 
116 | .controls {
117 |   border-top: 2px solid rgba(#fff, 0.1);
118 |   width: 100%;
119 |   padding: 2rem 2rem;
120 | }
121 | .controls-b {
122 |   margin-top: 1.5rem;
123 |   display: flex;
124 |   align-items: center;
125 |   justify-content: space-between;
126 |   button {
127 |     min-width: 80px;
128 |     width: fit-content;
129 |     height: 35px;
130 |     padding: 0 1rem;
131 |     padding-bottom: 2px;
132 |     font-size: 0.9rem;
133 |     background: none;
134 |     background: rgba(#f00, 0.2);
135 |     border: 1px solid rgba(#f00, 0.3);
136 |   }
137 |   button:hover {
138 |     box-shadow: none;
139 |     background: rgba(#f00, 0.5);
140 |   }
141 |   button:active {
142 |     background: rgba(#f00, 0.2);
143 |   }
144 | }
145 | .controls-br {
146 |   span {
147 |     font-size: 1.3rem;
148 |     color: rgba(#fff, 0.8);
149 |     margin: 0 0.25rem;
150 |     cursor: pointer;
151 |     transition: $trans-short;
152 |     user-select: none;
153 |   }
154 |   span:hover {
155 |     color: #fff;
156 |   }
157 |   span:active {
158 |     color: rgba(#fff, 0.8);
159 |   }
160 | }
161 | 
162 | .room {
163 |   padding: 2.5rem 2rem;
164 |   padding-bottom: 2rem;
165 |   border-bottom: 2px solid rgba(#fff, 0.1);
166 | }
167 | .room-code {
168 |   margin-top: 1.5rem;
169 |   color: rgba(#fff, 0.8);
170 |   span {
171 |     color: #fff;
172 |     font-weight: 600;
173 |     font-size: 0.9rem;
174 |     margin-right: 0.5rem;
175 |   }
176 | }
177 | .room-settings {
178 |   font-size: 1rem;
179 |   margin-left: 1rem;
180 |   color: rgba(#fff, 0.8);
181 |   cursor: pointer;
182 |   transition: $trans-short;
183 | }
184 | .room-settings:hover {
185 |   color: #fff;
186 | }
187 | .room-settings:active {
188 |   color: rgba(#fff, 0.8);
189 | }
190 | .room-wrapper {
191 |   display: flex;
192 |   align-items: center;
193 | }
194 | .room-image {
195 |   width: 100px;
196 |   height: 100px;
197 |   min-width: 100px;
198 |   min-height: 100px;
199 |   background-color: rgba(22, 25, 46, 0.2);
200 |   background-size: cover;
201 |   background-position: center;
202 |   box-sizing: unset;
203 |   border: 1px solid rgb(37, 36, 46);
204 |   box-shadow: 0 1rem 2rem rgba(#000, 0.3);
205 |   border-radius: 1rem;
206 |   margin-right: 1rem;
207 | }
208 | .room-name {
209 |   font-size: 1.1rem;
210 |   line-height: 1.6;
211 |   margin-bottom: 0.5rem;
212 |   overflow: hidden;
213 |   display: -webkit-box;
214 |   -webkit-line-clamp: 2;
215 |   -webkit-box-orient: vertical;
216 | }
217 | .room-text button {
218 |   width: 100px;
219 |   height: 36px;
220 |   padding-bottom: 2px;
221 |   font-size: 0.9rem;
222 |   span {
223 |     font-size: 1.1rem;
224 |   }
225 | }
226 | </style>
227 | 


--------------------------------------------------------------------------------
/components/Info.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="card">
  3 |     <div class="popcorn">🍿</div>
  4 |     <div class="what">
  5 |       <h3>What is this?</h3>
  6 |       <p>Sync play local and YouTube videos with your friends</p>
  7 |     </div>
  8 |     <div class="bottom">
  9 |       <div class="support">
 10 |         <h3>Supports</h3>
 11 |         <div class="support-items-wrapper">
 12 |           <div class="support-item">
 13 |             <div class="icon youtube"></div>
 14 |             <p>YouTube</p>
 15 |           </div>
 16 |           <div class="support-item">
 17 |             <div class="icon file"></div>
 18 |             <p>Files</p>
 19 |           </div>
 20 |           <div class="support-item">
 21 |             <div class="icon link"></div>
 22 |             <p>Links</p>
 23 |           </div>
 24 |         </div>
 25 |         <div class="contribute">
 26 |           <button @click="contribute">
 27 |             <span class="mdi mdi-github"></span>Contribute
 28 |           </button>
 29 |         </div>
 30 |       </div>
 31 |       <div class="steps">
 32 |         <h3>Steps</h3>
 33 |         <ul>
 34 |           <li><span class="num">1</span>Start a room</li>
 35 |           <li><span class="num">2</span> Add name & thumbnail</li>
 36 |           <li><span class="num">3</span>Add video</li>
 37 |           <li><span class="num">4</span>Invite friends</li>
 38 |           <li><span class="num">5</span>Chill</li>
 39 |         </ul>
 40 |       </div>
 41 |     </div>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 | export default {
 47 |   methods: {
 48 |     contribute() {
 49 |       window.open("https://github.com/emanuelchristo/movie-night", "_blank");
 50 |     }
 51 |   }
 52 | };
 53 | </script>
 54 | 
 55 | <style lang="scss">
 56 | .card {
 57 |   border-left: 1px solid rgba(255, 255, 255, 0.2);
 58 |   padding: 2rem 3rem 0 3rem;
 59 |   height: 100%;
 60 |   display: flex;
 61 |   flex-flow: column;
 62 |   align-items: center;
 63 |   justify-content: center;
 64 |   position: relative;
 65 |   h3 {
 66 |     margin-bottom: 1rem;
 67 |   }
 68 |   p {
 69 |     margin: 0;
 70 |   }
 71 | }
 72 | 
 73 | .popcorn {
 74 |   font-size: 6rem;
 75 |   position: absolute;
 76 |   top: -80px;
 77 |   right: 40px;
 78 | }
 79 | 
 80 | .bottom {
 81 |   display: flex;
 82 | }
 83 | 
 84 | .what {
 85 |   align-self: flex-start;
 86 |   margin-bottom: 3rem;
 87 | }
 88 | 
 89 | .contribute {
 90 |   margin-top: 3rem;
 91 |   button {
 92 |     width: 150px;
 93 |     height: 50px;
 94 |     font-weight: 400;
 95 |     font-size: 1rem;
 96 |     background: rgb(42, 41, 63);
 97 |     color: #fff;
 98 |   }
 99 | }
100 | 
101 | .support {
102 |   margin-right: 3rem;
103 | }
104 | .support-items-wrapper {
105 |   display: flex;
106 | }
107 | .support-item {
108 |   display: flex;
109 |   align-items: center;
110 |   flex-flow: column;
111 |   width: fit-content;
112 |   margin-right: 1.5rem;
113 |   .icon {
114 |     width: 58px;
115 |     height: 58px;
116 |     margin-bottom: 0.75rem;
117 |     background-color: rgba(255, 255, 255, 0.1);
118 |     border-radius: 50%;
119 |     background-size: contain;
120 |     background-position: center;
121 |     background-repeat: no-repeat;
122 |   }
123 |   p {
124 |     font-size: 0.8rem;
125 |     color: rgba(255, 255, 255, 0.8);
126 |   }
127 | }
128 | .support-item:last-child {
129 |   margin: 0;
130 | }
131 | 
132 | .youtube {
133 |   background-image: url("~/assets/icons/youtube.svg");
134 | }
135 | .file {
136 |   background-image: url("~/assets/icons/file.png");
137 | }
138 | .link {
139 |   background-image: url("~/assets/icons/link.png");
140 | }
141 | 
142 | .steps {
143 |   min-width: 230px;
144 |   ul {
145 |     list-style: none;
146 |   }
147 | 
148 |   li {
149 |     display: flex;
150 |     align-items: center;
151 |     margin-bottom: 1rem;
152 |   }
153 | 
154 |   .num {
155 |     margin-right: 1rem;
156 |     font-size: 1rem;
157 |     background: rgba(255, 255, 255, 0.1);
158 |     width: 2rem;
159 |     height: 2rem;
160 |     display: flex;
161 |     align-items: center;
162 |     justify-content: center;
163 |     border-radius: 50%;
164 |   }
165 | }
166 | </style>
167 | 


--------------------------------------------------------------------------------
/components/JoinRoom.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div class="setup-bg">
  4 |       <h3>Join Room</h3>
  5 | 
  6 |       <!-- Room exists -->
  7 |       <div class="content" v-if="room.started">
  8 |         <div class="room-info">
  9 |           <div
 10 |             class="thumbnail"
 11 |             :style="`background-image: url(${room.imageLink})`"
 12 |           ></div>
 13 |           <p class="room-name">{{ room.name }}</p>
 14 |           <p class="online">
 15 |             <span class="mdi mdi-access-point"></span
 16 |             >{{ room.participants.length }} online
 17 |           </p>
 18 |         </div>
 19 |         <div class="join">
 20 |           <form @submit.prevent="joinRoom(nickName)">
 21 |             <div class="input-wrapper" v-if="!loggedIn">
 22 |               <label>Nickname*</label>
 23 |               <input type="text" placeholder="Nickname*" v-model="nickName" />
 24 |             </div>
 25 |             <button class="join-button">
 26 |               <span class="mdi mdi-set-center"></span>Join
 27 |             </button>
 28 |           </form>
 29 |         </div>
 30 |       </div>
 31 | 
 32 |       <!-- Room doesn't exist -->
 33 |       <div class="content" v-else>
 34 |         <div class="room-not-exist">
 35 |           <span class="mdi mdi-alert alert-icon"></span>
 36 |           <p>Room hasn't started or has ended</p>
 37 |           <button @click="$router.push('/')">
 38 |             <span class="mdi mdi-home"></span>Home
 39 |           </button>
 40 |         </div>
 41 |       </div>
 42 |     </div>
 43 |   </div>
 44 | </template>
 45 | 
 46 | <script>
 47 | import { mapState, mapActions } from "vuex";
 48 | export default {
 49 |   data() {
 50 |     return { nickName: null };
 51 |   },
 52 |   computed: {
 53 |     ...mapState(["loggedIn", "room"])
 54 |   },
 55 |   methods: {
 56 |     ...mapActions(["joinRoom", "fetchRoom"])
 57 |   },
 58 |   created() {
 59 |     // this.fetchRoom(this.$route.params.room);
 60 |   }
 61 | };
 62 | </script>
 63 | 
 64 | <style lang="scss" scoped>
 65 | .container {
 66 |   width: 100%;
 67 |   max-width: 100%;
 68 |   flex: 1;
 69 |   display: flex;
 70 | }
 71 | .setup-bg {
 72 |   width: 100%;
 73 |   max-width: 100%;
 74 |   flex: 1;
 75 |   display: flex;
 76 |   flex-flow: column;
 77 |   align-items: center;
 78 |   justify-content: center;
 79 |   margin: 0 auto;
 80 |   border-radius: 1.5rem;
 81 |   background-color: rgba(2, 1, 5, 0.2);
 82 |   border: 2px solid rgba(#fff, 0.1);
 83 |   backdrop-filter: blur(40px);
 84 |   box-shadow: 0 3rem 4rem rgba(#000, 0.4);
 85 |   overflow: hidden;
 86 |   padding: 2rem;
 87 | }
 88 | 
 89 | h3 {
 90 |   font-size: 2rem;
 91 |   margin-bottom: 2rem;
 92 | }
 93 | 
 94 | .content {
 95 |   display: flex;
 96 |   align-items: center;
 97 |   justify-content: center;
 98 |   width: 100%;
 99 | }
100 | 
101 | .room-info,
102 | .join {
103 |   display: flex;
104 |   flex-flow: column;
105 |   align-items: center;
106 |   justify-content: center;
107 |   width: 50%;
108 |   padding: 2rem;
109 | }
110 | .room-info {
111 |   border-right: 1px solid rgba(#fff, 0.1);
112 |   .thumbnail {
113 |     width: 200px;
114 |     height: 200px;
115 |     background-color: rgba(22, 25, 46, 0.2);
116 |     background-size: cover;
117 |     background-position: center;
118 |     box-sizing: unset;
119 |     border: 1px solid rgb(37, 36, 46);
120 |     box-shadow: 0 1rem 2rem rgba(#000, 0.3);
121 |     border-radius: 0.75rem;
122 |     margin-bottom: 1rem;
123 |     display: flex;
124 |     align-items: center;
125 |     justify-content: center;
126 |   }
127 |   .room-name {
128 |     max-width: 220px;
129 |     text-align: center;
130 |     line-height: 1.6;
131 |     margin-bottom: 1rem;
132 |   }
133 |   .online {
134 |     display: flex;
135 |     align-items: center;
136 |     padding: 0.5rem 1rem;
137 |     background: rgba(#fff, 0.07);
138 |     border-radius: 200px;
139 |     line-height: 1;
140 |     span {
141 |       font-size: 1.5rem;
142 |       margin-right: 0.5rem;
143 |     }
144 |   }
145 | }
146 | 
147 | .join-button {
148 |   margin-top: 1rem;
149 |   margin-left: auto;
150 |   margin-right: auto;
151 | }
152 | 
153 | .room-not-exist {
154 |   display: flex;
155 |   flex-flow: column;
156 |   align-items: center;
157 |   justify-content: center;
158 |   .alert-icon {
159 |     font-size: 4rem;
160 |     color: rgb(255, 208, 1);
161 |   }
162 |   p {
163 |     margin-top: 0.5rem;
164 |     margin-bottom: 3rem;
165 |   }
166 | }
167 | </style>
168 | 


--------------------------------------------------------------------------------
/components/Modal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="modal">
 3 |     <div class="card-bg">
 4 |       <div class="top">
 5 |         <span class="mdi mdi-close" @click="$emit('close')"></span>
 6 |       </div>
 7 |       <slot></slot>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {};
14 | </script>
15 | 
16 | <style lang="scss" scoped>
17 | @import "~/assets/css/_variables.scss";
18 | 
19 | .modal {
20 |   position: fixed;
21 |   top: 0;
22 |   left: 0;
23 |   z-index: 3000;
24 |   width: 100vw;
25 |   height: 100vh;
26 |   background-color: rgba(#000, 0.1);
27 |   backdrop-filter: blur(3px);
28 |   display: flex;
29 |   align-items: center;
30 |   justify-content: center;
31 | }
32 | 
33 | .card-bg {
34 |   width: 340px;
35 |   height: 500px;
36 |   margin: 0 auto;
37 |   padding: 1rem 1rem 3rem 1rem;
38 |   border-radius: 1.5rem;
39 |   background-color: rgba(16, 13, 27, 0.9);
40 |   border: 2px solid rgba(#fff, 0.1);
41 |   backdrop-filter: blur(15px);
42 |   box-shadow: 0 3rem 4rem rgba(#000, 0.4);
43 |   display: flex;
44 |   flex-flow: column;
45 | }
46 | 
47 | .top {
48 |   display: flex;
49 |   align-items: center;
50 |   justify-content: flex-end;
51 | 
52 |   span {
53 |     width: 2rem;
54 |     height: 2rem;
55 |     display: flex;
56 |     align-items: center;
57 |     justify-content: center;
58 |     font-size: 1.5rem;
59 |     cursor: pointer;
60 |     border-radius: 100px;
61 |     transition: $trans-short;
62 |   }
63 |   span:hover {
64 |     background-color: rgba(#fff, 0.2);
65 |   }
66 |   span:active {
67 |     background: none;
68 |   }
69 | }
70 | </style>
71 | 


--------------------------------------------------------------------------------
/components/Participant.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="participant">
  3 |     <div class="image" ref="image">
  4 |       <span class="mdi mdi-jellyfish"></span>
  5 |       <!-- <div class="ready">
  6 |         <span v-if="info.ready" class="mdi mdi-check-circle green"></span>
  7 |         <span v-else class="mdi mdi-minus-circle red"></span>
  8 |       </div> -->
  9 |     </div>
 10 |     <div class="content">
 11 |       <div class="content-l">
 12 |         <p class="name">
 13 |           <span class="truncate">{{ info.nickName || "--" }}</span>
 14 |           <span
 15 |             class="mic-off mdi mdi-microphone-off"
 16 |             v-if="info.micOff"
 17 |           ></span>
 18 |         </p>
 19 |         <audio-bar />
 20 |       </div>
 21 |       <div class="content-r">
 22 |         <span class="mdi mdi-volume-off" v-if="info.volume <= 0"></span>
 23 |         <span class="mdi mdi-volume-low" v-else-if="info.volume <= 0.33"></span>
 24 |         <span
 25 |           class="mdi mdi-volume-medium"
 26 |           v-else-if="info.volume <= 0.66"
 27 |         ></span>
 28 |         <span class="mdi mdi-volume-high" v-else></span>
 29 |         <!-- <div class="volume-popup">
 30 |           <input class="volume-slider" orient="vertical" type="range" />
 31 |         </div> -->
 32 |         <span
 33 |           class="mdi mdi-dots-vertical options-icon"
 34 |           @click="optionsFunction"
 35 |           v-if="isHost"
 36 |         >
 37 |           <div class="options-popup" v-if="showOptions">
 38 |             <ul>
 39 |               <li>Kick out</li>
 40 |               <li>Mute</li>
 41 |               <li>Ping</li>
 42 |             </ul>
 43 |           </div>
 44 |         </span>
 45 |       </div>
 46 |     </div>
 47 |   </div>
 48 | </template>
 49 | 
 50 | <script>
 51 | import AudioBar from "./AudioBar.vue";
 52 | 
 53 | export default {
 54 |   components: { AudioBar },
 55 |   props: ["info", "isHost"],
 56 |   data() {
 57 |     return {
 58 |       showOptions: false
 59 |     };
 60 |   },
 61 |   methods: {
 62 |     bg() {
 63 |       let colorSet = [
 64 |         ["651366", "A71A5B", "E7204E", "F76E2A", "F0C505"],
 65 |         ["11644D", "A0B046", "F2C94E", "F78145", "F24E4E"],
 66 |         ["331327", "991766", "D90F5A", "F34739", "FF6E27"],
 67 |         ["003049", "d62828", "f77f00", "fcbf49", "eae2b7"],
 68 |         ["f72585", "7209b7", "3a0ca3", "4361ee", "4cc9f0"]
 69 |       ];
 70 |       let index = Math.floor(Math.random() * colorSet.length);
 71 |       this.$refs.image.style.backgroundImage = `url('https://source.boringavatars.com/marble/70/${this.info.id}?square&colors=${colorSet[index][0]},${colorSet[index][1]},${colorSet[index][2]},${colorSet[index][3]},${colorSet[index][4]}')`;
 72 |     },
 73 |     optionsFunction() {
 74 |       this.showOptions = !this.showOptions;
 75 |     }
 76 |   },
 77 |   mounted() {
 78 |     // this.bg();
 79 |     // window.addEventListener("click", function() {
 80 |     //   if (this.showOptions) this.showOptions = false;
 81 |     // });
 82 |   }
 83 | };
 84 | </script>
 85 | 
 86 | <style lang="scss" scoped>
 87 | @import "~/assets/css/_variables.scss";
 88 | 
 89 | .options-popup {
 90 |   width: 150px;
 91 |   position: absolute;
 92 |   right: 0.5rem;
 93 |   bottom: 2.6rem;
 94 |   padding: 0.3rem;
 95 |   border: 1px solid rgba(#fff, 0.2);
 96 |   border-radius: 0.5rem;
 97 |   background: rgba($menu-bg-color, 0.95);
 98 |   box-shadow: 0 1rem 2rem rgba(#000, 0.4);
 99 |   transition: trans-med;
100 | 
101 |   ul {
102 |     list-style: none;
103 |     font-size: 0.9rem;
104 |     li {
105 |       padding: 0.3rem 0.4rem 0.4rem 0.4rem;
106 |       cursor: pointer;
107 |       transition: $trans-short;
108 |       border-radius: 0.25rem;
109 |     }
110 |     li:hover {
111 |       background: rgba(#fff, 0.1);
112 |     }
113 |     li:active {
114 |       background: rgba(#fff, 0.05);
115 |     }
116 |   }
117 | }
118 | 
119 | .volume-popup {
120 |   width: 30px;
121 |   height: 70px;
122 |   position: absolute;
123 |   bottom: 44px;
124 |   background: $menu-bg-color;
125 |   border-radius: 0.5rem;
126 |   border: 1px solid rgba(#fff, 0.2);
127 | }
128 | 
129 | .volume-slider {
130 |   all: unset;
131 |   width: 70px;
132 |   background: red;
133 |   transform: rotate(-90deg), translate(-50%);
134 | }
135 | 
136 | .participant {
137 |   display: flex;
138 |   margin: 1.8rem 0;
139 |   position: relative;
140 | }
141 | 
142 | .image {
143 |   width: 50px;
144 |   height: 50px;
145 |   position: relative;
146 |   border-radius: 50rem;
147 |   background: rgba(#fff, 0.2);
148 |   background-size: cover;
149 |   display: flex;
150 |   align-items: center;
151 |   justify-content: center;
152 |   span {
153 |     font-size: 2rem;
154 |   }
155 | }
156 | 
157 | .ready {
158 |   width: 1rem;
159 |   height: 1rem;
160 |   display: flex;
161 |   align-items: center;
162 |   justify-content: center;
163 |   position: absolute;
164 |   top: 2.2rem;
165 |   right: 0;
166 |   span {
167 |     font-size: 0.9rem;
168 |     margin-left: 1px;
169 |     margin-bottom: 0.2px;
170 |     background-color: #fff;
171 |     border-radius: 100%;
172 |     padding: 0 1px;
173 |     box-shadow: -0.2rem -0.2rem 0.8rem rgba(#000, 0.5);
174 |   }
175 |   .red {
176 |     background: #fff;
177 |     color: rgb(230, 3, 3);
178 |   }
179 |   .green {
180 |     color: rgb(0, 151, 0);
181 |   }
182 | }
183 | 
184 | .content {
185 |   margin-left: 0.75rem;
186 |   flex: 1;
187 |   display: flex;
188 |   justify-content: space-between;
189 | }
190 | 
191 | .content-l {
192 |   flex: 1;
193 |   padding-bottom: 5px;
194 |   display: flex;
195 |   flex-flow: column;
196 |   justify-content: center;
197 | }
198 | 
199 | .name {
200 |   display: flex;
201 |   align-items: center;
202 |   font-size: 1rem;
203 |   font-weight: 500;
204 |   margin-bottom: 0.5rem;
205 |   .truncate {
206 |     max-width: 150px;
207 |     white-space: nowrap;
208 |     overflow: hidden;
209 |     text-overflow: ellipsis;
210 |   }
211 |   .mic-off {
212 |     margin-top: 1px;
213 |     margin-left: 0.4rem;
214 |     color: rgba(#fff, 0.5);
215 |   }
216 | }
217 | 
218 | .content-r {
219 |   display: flex;
220 |   align-items: center;
221 |   margin-left: 0.5rem;
222 | 
223 |   span {
224 |     font-size: 1.3rem;
225 |     color: rgba(#fff, 0.8);
226 |     margin: 0 0.25rem;
227 |     cursor: pointer;
228 |     transition: $trans-short;
229 |     user-select: none;
230 |   }
231 |   span:hover {
232 |     color: #fff;
233 |   }
234 |   span:active {
235 |     color: rgba(#fff, 0.8);
236 |   }
237 | }
238 | </style>
239 | 


--------------------------------------------------------------------------------
/components/Player.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div class="player-bg">
  4 |       <div class="player-wrapper" ref="playerWrapper">
  5 |         <vue-plyr :options="playerOptions" ref="player">
  6 |           <video controls crossorigin playsinline></video>
  7 |         </vue-plyr>
  8 |       </div>
  9 |     </div>
 10 |     <div class="controls-bar">
 11 |       <button
 12 |         class="control-button red-button"
 13 |         @click="$emit('stop')"
 14 |         v-if="isHost"
 15 |       >
 16 |         <span class="mdi mdi-stop-circle-outline"></span>Stop
 17 |       </button>
 18 |       <button class="control-button" @click="syncLocal('manual')">
 19 |         <span class="mdi mdi-sync"></span>Sync
 20 |       </button>
 21 |       <div class="file-input" v-if="showChangeFile">
 22 |         <input
 23 |           type="file"
 24 |           id="file"
 25 |           class="file"
 26 |           accept="video/*"
 27 |           ref="fileInput"
 28 |           @change="addVideoFile"
 29 |         />
 30 |         <label for="file" class="button control-button"
 31 |           ><span class="mdi mdi-file-edit-outline"></span>Change File</label
 32 |         >
 33 |       </div>
 34 |       <div class="file-input" v-if="showChangeFile">
 35 |         <input
 36 |           type="file"
 37 |           id="subtitle"
 38 |           class="file"
 39 |           accept=".vtt, .srt"
 40 |           ref="subtitleInput"
 41 |           @change="addSubtitle"
 42 |         />
 43 |         <label for="subtitle" class="button control-button"
 44 |           ><span class="mdi mdi-subtitles-outline"></span>Add Subtitle</label
 45 |         >
 46 |       </div>
 47 |     </div>
 48 |   </div>
 49 | </template>
 50 | 
 51 | <script>
 52 | import { mapState, mapActions } from "vuex";
 53 | 
 54 | export default {
 55 |   data() {
 56 |     return {
 57 |       playerOptions: {
 58 |         invertTime: false
 59 |       },
 60 |       temp: null
 61 |     };
 62 |   },
 63 |   computed: {
 64 |     ...mapState(["room", "isHost"]),
 65 |     showChangeFile() {
 66 |       return this.room.video.type == "file";
 67 |     },
 68 |     roomString() {
 69 |       return JSON.stringify(this.room);
 70 |     }
 71 |   },
 72 |   watch: {
 73 |     room: function() {
 74 |       this.setPlayer();
 75 |     }
 76 |   },
 77 |   methods: {
 78 |     ...mapActions(["sync", "addVideo"]),
 79 |     addSource(subtitleUrl) {
 80 |       const player = this.$refs.player.player;
 81 |       let source = {
 82 |         type: "video",
 83 |         sources: [
 84 |           {
 85 |             src: this.room.video.link
 86 |           }
 87 |         ]
 88 |       };
 89 |       if (subtitleUrl) {
 90 |         source.tracks = [
 91 |           {
 92 |             kind: "captions",
 93 |             label: "Subtitles",
 94 |             srclang: "SUB",
 95 |             src: subtitleUrl,
 96 |             default: true
 97 |           }
 98 |         ];
 99 |       }
100 |       if (this.room.video.type == "youtube")
101 |         source.sources[0].provider = "youtube";
102 |       player.source = source;
103 |     },
104 |     syncLocal(event) {
105 |       // if (!this.isHost) return;
106 |       const p = this.$refs.player.player;
107 |       let player = {
108 |         loaded: true,
109 |         playing: p.playing,
110 |         time: p.currentTime,
111 |         speed: p.speed,
112 |         volume: p.volume,
113 |         captions: null
114 |       };
115 |       this.sync(player);
116 |     },
117 |     setPlayer() {
118 |       if (!this.isHost) {
119 |         console.log(this.room.player.playing);
120 |         const p = this.$refs.player.player;
121 |         p.currentTime = this.room.player.time;
122 |         if (this.room.player.playing) {
123 |           console.log("called play()");
124 |           p.play();
125 |         } else {
126 |           console.log("called pause()");
127 |           p.pause();
128 |         }
129 |         p.speed = this.room.player.speed;
130 |       }
131 |     },
132 |     addVideoFile(e) {
133 |       const file = e.target.files[0];
134 |       const fileURL = URL.createObjectURL(file);
135 |       this.videoType = "file";
136 |       this.addVideo({ type: "file", fileURL, fileName: file.name }).then(() =>
137 |         this.addSource()
138 |       );
139 |     },
140 |     addSubtitle(e) {
141 |       const file = e.target.files[0];
142 |       const vttConverter = new this.$VTTConverter(file);
143 |       const that = this;
144 |       vttConverter.getURL().then(function(url) {
145 |         console.log("here");
146 |         that.addSource(url);
147 |       });
148 |       // const fileURL = URL.createObjectURL(file);
149 |       // this.addSource(fileURL);
150 |     }
151 |   },
152 |   mounted() {
153 |     this.addSource();
154 |     // Initializing player events
155 |     if (this.isHost) {
156 |       const p = this.$refs.player.player;
157 |       p.on("play", () => this.syncLocal("play"));
158 |       p.on("pause", () => this.syncLocal("pause"));
159 |       p.on("seeked", () => this.syncLocal("seeked"));
160 |       p.on("ratechange", () => this.syncLocal("ratechange"));
161 |       p.on("ended", () => this.syncLocal("ended"));
162 |     }
163 | 
164 |     this.$socket.on("room:syncrequest", () => {
165 |       this.syncLocal("syncrequest");
166 |     });
167 |   }
168 | };
169 | </script>
170 | 
171 | <style lang="scss" scoped>
172 | .controls-bar {
173 |   padding: 1rem 2rem;
174 |   padding-bottom: 0;
175 |   display: flex;
176 | }
177 | .control-button {
178 |   width: fit-content;
179 |   height: 42px;
180 |   padding: 0 1.25rem;
181 |   margin-right: 0.75rem;
182 |   font-size: 1rem;
183 |   background: rgba(#fff, 0.1);
184 |   border: 1px solid rgba(#fff, 0.5);
185 |   span {
186 |     font-size: 1.5rem;
187 |   }
188 | }
189 | .control-button:hover {
190 |   box-shadow: none;
191 |   background-color: rgba(#fff, 0.2);
192 | }
193 | .control-button:active {
194 |   box-shadow: none;
195 |   background-color: rgba(#fff, 0.1);
196 | }
197 | .red-button {
198 |   background: rgba(#f00, 0.5);
199 |   border: 1px solid rgba(#f00, 0.7);
200 | }
201 | .red-button:hover {
202 |   background: rgba(#f00, 0.6);
203 | }
204 | .red-button:active {
205 |   background: rgba(#f00, 0.5);
206 | }
207 | 
208 | .file {
209 |   opacity: 0;
210 |   width: 0.1px;
211 |   height: 0.1px;
212 |   position: absolute;
213 | }
214 | 
215 | .container {
216 |   display: flex;
217 |   flex-flow: column;
218 |   height: 100%;
219 |   width: 100%;
220 | }
221 | .player-bg {
222 |   width: 100%;
223 |   max-width: 100%;
224 |   flex: 1;
225 |   margin: 0 auto;
226 |   border-radius: 1.5rem;
227 |   background-color: rgba(2, 1, 5, 0.2);
228 |   border: 2px solid rgba(#fff, 0.1);
229 |   backdrop-filter: blur(40px);
230 |   box-shadow: 0 3rem 4rem rgba(#000, 0.4);
231 |   overflow: hidden;
232 | }
233 | 
234 | .player-wrapper {
235 |   height: 100%;
236 |   width: 100%;
237 |   overflow: hidden;
238 | }
239 | </style>
240 | 


--------------------------------------------------------------------------------
/components/RoomSetup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div class="setup-bg">
  4 |       <!-- Add video -->
  5 |       <div
  6 |         class="add-video"
  7 |         ref="addVideo"
  8 |         v-if="!(room.video.added && room.video.link)"
  9 |       >
 10 |         <h3>Add video</h3>
 11 |         <div class="file-input">
 12 |           <input
 13 |             type="file"
 14 |             id="file"
 15 |             class="file"
 16 |             accept="video/*"
 17 |             ref="fileInput"
 18 |             @change="addVideoFile"
 19 |           />
 20 |           <label for="file" class="button button-outline"
 21 |             ><span class="mdi mdi-plus-circle"></span>Add File</label
 22 |           >
 23 |         </div>
 24 |         <button class="button-outline" @click="addYoutubeLink">
 25 |           <span class="mdi mdi-youtube"></span>YouTube Link
 26 |         </button>
 27 |         <button class="button-outline" @click="addVideoLink">
 28 |           <span class="mdi mdi-link"></span>Video Link
 29 |         </button>
 30 |       </div>
 31 | 
 32 |       <!-- Video added -->
 33 |       <div class="video-added" v-else>
 34 |         <h3>Video added</h3>
 35 |         <div class="wrapper">
 36 |           <div
 37 |             class="thumbnail"
 38 |             :style="`background-image: url(${room.video.thumbnail})`"
 39 |           ></div>
 40 |           <a target="_blank" :href="room.video.link">
 41 |             <p>{{ room.video.title || "--" }}</p>
 42 |           </a>
 43 |         </div>
 44 | 
 45 |         <button class="button-outline" @click="removeVideo">
 46 |           <span class="mdi mdi-close"></span>Remove
 47 |         </button>
 48 |       </div>
 49 | 
 50 |       <!-- Room info -->
 51 |       <div class="room-info">
 52 |         <h3>Room info</h3>
 53 | 
 54 |         <div class="input-wrapper">
 55 |           <label>Room name*</label>
 56 |           <input type="text" placeholder="Room name*" v-model="roomName" />
 57 |         </div>
 58 |         <div class="input-wrapper">
 59 |           <label>Image link</label>
 60 |           <input type="text" placeholder="Image link" v-model="imageLink" />
 61 |         </div>
 62 |         <button style="margin-top: 1rem" @click="startRoomLocal">
 63 |           <span class="mdi mdi-filmstrip"></span
 64 |           >{{ room.started ? "Play" : "Start Room" }}
 65 |         </button>
 66 |       </div>
 67 |     </div>
 68 |     <!-- Modals -->
 69 |     <video-link-modal
 70 |       :show="videoLinkModalShow"
 71 |       :type="videoType"
 72 |       @submit="submitVideoLink"
 73 |       @close="videoLinkModalShow = false"
 74 |     />
 75 |   </div>
 76 | </template>
 77 | 
 78 | <script>
 79 | import { mapState, mapActions } from "vuex";
 80 | import VideoLinkModal from "./modals/VideoLinkModal.vue";
 81 | 
 82 | export default {
 83 |   components: { VideoLinkModal },
 84 |   data() {
 85 |     return {
 86 |       roomName: null,
 87 |       imageLink: null,
 88 |       videoLinkModalShow: false,
 89 |       videoType: null
 90 |     };
 91 |   },
 92 |   computed: { ...mapState(["room"]) },
 93 |   watch: {
 94 |     room: function() {
 95 |       this.roomName = this.room.name;
 96 |       this.imageLink = this.room.imageLink;
 97 |     }
 98 |   },
 99 |   methods: {
100 |     ...mapActions(["addVideo", "removeVideo", "startRoom"]),
101 |     addVideoFile(e) {
102 |       const file = e.target.files[0];
103 |       const fileURL = URL.createObjectURL(file);
104 |       this.videoType = "file";
105 |       this.addVideo({ type: "file", fileURL, fileName: file.name });
106 |     },
107 |     addYoutubeLink() {
108 |       this.videoType = "youtube";
109 |       this.videoLinkModalShow = true;
110 |     },
111 |     addVideoLink() {
112 |       this.videoType = "video";
113 |       this.videoLinkModalShow = true;
114 |     },
115 |     submitVideoLink(link) {
116 |       let data = {
117 |         link,
118 |         type: this.videoType
119 |       };
120 |       this.addVideo(data);
121 |     },
122 |     startRoomLocal() {
123 |       if (this.room.video.added)
124 |         this.startRoom({ roomName: this.roomName, imageLink: this.imageLink });
125 |     }
126 |   },
127 |   mounted() {
128 |     this.roomName = this.room.name;
129 |     this.imageLink = this.room.imageLink;
130 |   }
131 | };
132 | </script>
133 | 
134 | <style lang="scss" scoped>
135 | .container {
136 |   width: 100%;
137 |   max-width: 100%;
138 |   flex: 1;
139 |   display: flex;
140 | }
141 | .setup-bg {
142 |   width: 100%;
143 |   max-width: 100%;
144 |   flex: 1;
145 |   display: flex;
146 |   margin: 0 auto;
147 |   border-radius: 1.5rem;
148 |   background-color: rgba(2, 1, 5, 0.2);
149 |   border: 2px solid rgba(#fff, 0.1);
150 |   backdrop-filter: blur(40px);
151 |   box-shadow: 0 3rem 4rem rgba(#000, 0.4);
152 |   overflow: hidden;
153 |   padding: 2rem;
154 | }
155 | 
156 | h3 {
157 |   font-size: 2rem;
158 |   margin-bottom: 1rem;
159 | }
160 | 
161 | .add-video,
162 | .room-info,
163 | .video-added {
164 |   width: 50%;
165 |   border-right: 1px solid rgba(#fff, 0.1);
166 |   display: flex;
167 |   flex-flow: column;
168 |   align-items: center;
169 |   justify-content: center;
170 | }
171 | 
172 | .add-video {
173 |   button,
174 |   .file-input {
175 |     margin: 0.75rem 0;
176 |   }
177 | }
178 | 
179 | .video-added {
180 |   .thumbnail {
181 |     width: 200px;
182 |     height: 112px;
183 |     background-color: rgba(22, 25, 46, 0.2);
184 |     background-size: cover;
185 |     background-position: center;
186 |     box-sizing: unset;
187 |     border: 1px solid rgb(37, 36, 46);
188 |     box-shadow: 0 1rem 2rem rgba(#000, 0.3);
189 |     border-radius: 0.75rem;
190 |     margin-bottom: 1rem;
191 |     display: flex;
192 |     align-items: center;
193 |     justify-content: center;
194 |   }
195 |   a p {
196 |     line-height: 1.8;
197 |     font-size: 0.9rem;
198 |     color: rgb(255, 241, 38);
199 |     max-width: 250px;
200 |     white-space: nowrap;
201 |     overflow: hidden;
202 |     text-overflow: ellipsis;
203 |   }
204 |   a p:hover {
205 |     text-decoration: underline dotted;
206 |   }
207 |   .wrapper {
208 |     display: flex;
209 |     flex-flow: column;
210 |     align-items: center;
211 |     margin-top: 0.5rem;
212 |     margin-bottom: 2rem;
213 |   }
214 | }
215 | 
216 | .room-info {
217 |   border: none;
218 | }
219 | 
220 | .file {
221 |   opacity: 0;
222 |   width: 0.1px;
223 |   height: 0.1px;
224 |   position: absolute;
225 | }
226 | </style>
227 | 


--------------------------------------------------------------------------------
/components/Spinner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="loader">
 3 |     <span></span>
 4 |     <span></span>
 5 |     <span></span>
 6 |     <span></span>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {};
12 | </script>
13 | 
14 | <style lang="scss" scoped>
15 | .loader {
16 |   position: relative;
17 |   width: 70px;
18 |   height: 70px;
19 |   border-radius: 50%;
20 |   background: linear-gradient(#eb32eb, #3967ff, #5900ff);
21 |   animation: animate 1.2s linear infinite;
22 | }
23 | 
24 | @keyframes animate {
25 |   0% {
26 |     transform: rotate(0deg);
27 |   }
28 |   100% {
29 |     transform: rotate(360deg);
30 |   }
31 | }
32 | 
33 | .loader span {
34 |   position: absolute;
35 |   width: 100%;
36 |   height: 100%;
37 |   border-radius: 50%;
38 |   background: linear-gradient(#ff00e0, #bd1eff, #0072ff);
39 | }
40 | 
41 | .loader span:nth-child(1) {
42 |   filter: blur(5px);
43 | }
44 | 
45 | .loader span:nth-child(2) {
46 |   filter: blur(10px);
47 | }
48 | 
49 | .loader span:nth-child(3) {
50 |   filter: blur(25px);
51 | }
52 | 
53 | .loader span:nth-child(4) {
54 |   filter: blur(50px);
55 | }
56 | 
57 | .loader:after {
58 |   content: "";
59 |   position: absolute;
60 |   top: 10px;
61 |   left: 10px;
62 |   right: 10px;
63 |   bottom: 10px;
64 |   background: #f1f1f1;
65 |   border: solid white 10px;
66 |   border-radius: 50%;
67 | }
68 | </style>
69 | 


--------------------------------------------------------------------------------
/components/VideoStopped.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div class="setup-bg">
  4 |       <!-- Add file -->
  5 |       <div class="content" v-if="showAddFile">
  6 |         <h3>Add File</h3>
  7 |         <div class="file-input">
  8 |           <input
  9 |             type="file"
 10 |             id="file"
 11 |             class="file"
 12 |             accept="video/*"
 13 |             ref="fileInput"
 14 |             @change="addVideoFile"
 15 |           />
 16 |           <label for="file" class="button button-outline"
 17 |             ><span class="mdi mdi-plus-circle"></span>Add File</label
 18 |           >
 19 |         </div>
 20 |       </div>
 21 | 
 22 |       <!-- Waiting -->
 23 |       <div class="content waiting" v-else>
 24 |         <h3>Waiting</h3>
 25 |         <div class="spinner-wrapper">
 26 |           <spinner />
 27 |         </div>
 28 |         <p>Waiting for the host to start playing</p>
 29 |         <div class="file-input" v-if="showChangeFile">
 30 |           <div style="height: 3rem"></div>
 31 |           <input
 32 |             type="file"
 33 |             id="file"
 34 |             class="file"
 35 |             accept="video/*"
 36 |             ref="fileInput"
 37 |             @change="addVideoFile"
 38 |           />
 39 |           <label for="file" class="button button-outline"
 40 |             ><span class="mdi mdi-file-edit-outline"></span>Change File</label
 41 |           >
 42 |         </div>
 43 |         <p class="file-name">{{ room.video.title }}</p>
 44 |       </div>
 45 |     </div>
 46 |   </div>
 47 | </template>
 48 | 
 49 | <script>
 50 | import { mapState, mapActions } from "vuex";
 51 | import Spinner from "./Spinner.vue";
 52 | export default {
 53 |   components: { Spinner },
 54 |   computed: {
 55 |     ...mapState(["loggedIn", "room"]),
 56 |     showAddFile() {
 57 |       return this.room.video.type == "file" && !this.room.video.link;
 58 |     },
 59 |     showChangeFile() {
 60 |       return this.room.video.type == "file";
 61 |     }
 62 |   },
 63 |   methods: {
 64 |     ...mapActions(["addVideo"]),
 65 |     addVideoFile(e) {
 66 |       const file = e.target.files[0];
 67 |       const fileURL = URL.createObjectURL(file);
 68 |       this.videoType = "file";
 69 |       this.addVideo({ type: "file", fileURL, fileName: file.name });
 70 |     }
 71 |   }
 72 | };
 73 | </script>
 74 | 
 75 | <style lang="scss" scoped>
 76 | .container {
 77 |   width: 100%;
 78 |   max-width: 100%;
 79 |   flex: 1;
 80 |   display: flex;
 81 | }
 82 | .setup-bg {
 83 |   width: 100%;
 84 |   max-width: 100%;
 85 |   flex: 1;
 86 |   display: flex;
 87 |   flex-flow: column;
 88 |   align-items: center;
 89 |   justify-content: center;
 90 |   margin: 0 auto;
 91 |   border-radius: 1.5rem;
 92 |   background-color: rgba(2, 1, 5, 0.2);
 93 |   border: 2px solid rgba(#fff, 0.1);
 94 |   backdrop-filter: blur(40px);
 95 |   box-shadow: 0 3rem 4rem rgba(#000, 0.4);
 96 |   overflow: hidden;
 97 |   padding: 2rem;
 98 | }
 99 | 
100 | h3 {
101 |   font-size: 2rem;
102 |   margin-bottom: 2rem;
103 | }
104 | 
105 | .content {
106 |   display: flex;
107 |   align-items: center;
108 |   justify-content: center;
109 |   flex-flow: column;
110 |   width: 100%;
111 | }
112 | 
113 | .file {
114 |   opacity: 0;
115 |   width: 0.1px;
116 |   height: 0.1px;
117 |   position: absolute;
118 | }
119 | 
120 | .file-name {
121 |   margin-top: 2rem;
122 |   font-size: 0.8rem;
123 |   color: rgb(255, 241, 38);
124 |   max-width: 280px;
125 |   white-space: nowrap;
126 |   overflow: hidden;
127 |   text-overflow: ellipsis;
128 | }
129 | 
130 | .waiting {
131 |   .spinner-wrapper {
132 |     margin-bottom: 1rem;
133 |   }
134 |   p {
135 |     margin-top: 1rem;
136 |   }
137 | }
138 | </style>
139 | 


--------------------------------------------------------------------------------
/components/modals/EditRoom.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <modal v-if="show" @close="$emit('close')">
 3 |     <form
 4 |       @submit.prevent="save"
 5 |       @reset="$emit('close')"
 6 |       class="modal-content-wrapper"
 7 |     >
 8 |       <div class="content">
 9 |         <div style="height: 2rem"></div>
10 |         <span class="mdi mdi-paperclip icon"></span>
11 |         <h2><span style="font-weight: 300">Edit</span>Room</h2>
12 |         <div class="inputs-wrapper flex-center-col">
13 |           <div class="input-wrapper">
14 |             <label for="room-name">Room name</label>
15 |             <input
16 |               type="text"
17 |               name="room-name"
18 |               placeholder="Room name*"
19 |               v-model="info.roomName"
20 |               required
21 |             />
22 |           </div>
23 | 
24 |           <div class="input-wrapper">
25 |             <label for="image-link">Image link</label>
26 |             <input
27 |               type="text"
28 |               name="image-link"
29 |               placeholder="Image link"
30 |               v-model="info.imageLink"
31 |             />
32 |           </div>
33 |         </div>
34 |       </div>
35 |       <div class="actions">
36 |         <button type="reset" class="button-outline">Cancel</button>
37 |         <button type="submit">Save</button>
38 |       </div>
39 |     </form>
40 |   </modal>
41 | </template>
42 | 
43 | <script>
44 | import { mapState, mapActions } from "vuex";
45 | 
46 | export default {
47 |   props: ["show", "info"],
48 |   methods: {
49 |     ...mapActions(["setRoomInfo"]),
50 |     save() {
51 |       this.setRoomInfo(this.info);
52 |       this.$emit("close");
53 |     }
54 |   }
55 | };
56 | </script>
57 | 
58 | <style lang="scss" scoped>
59 | .modal-content-wrapper {
60 |   flex: 1;
61 |   display: flex;
62 |   flex-flow: column;
63 |   align-items: center;
64 |   justify-content: space-between;
65 | }
66 | 
67 | .icon {
68 |   font-size: 2rem;
69 |   color: #fff;
70 |   margin-bottom: 0.25rem;
71 | }
72 | 
73 | .content {
74 |   display: flex;
75 |   flex-flow: column;
76 |   align-items: center;
77 | }
78 | 
79 | .inputs-wrapper {
80 |   margin: 2rem 0;
81 | }
82 | 
83 | .actions {
84 |   display: flex;
85 |   align-items: center;
86 |   justify-content: center;
87 |   button {
88 |     font-size: 1rem;
89 |     width: 120px;
90 |     height: 40px;
91 |     margin: 0 0.25rem;
92 |   }
93 | }
94 | </style>
95 | 


--------------------------------------------------------------------------------
/components/modals/Invite.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- Invite modal -->
 3 |   <modal v-if="show" @close="$emit('close')">
 4 |     <div class="modal-content-wrapper">
 5 |       <div class="content">
 6 |         <div style="height: 2rem"></div>
 7 |         <span class="mdi mdi-party-popper icon"></span>
 8 |         <h2><span style="font-weight: 300"></span>Invite</h2>
 9 |         <div class="inputs-wrapper flex-center-col">
10 |           <div class="input-wrapper">
11 |             <label>Room link</label>
12 |             <input
13 |               id="room-link"
14 |               type="text"
15 |               placeholder="Room link"
16 |               v-model="info.roomLink"
17 |               readonly
18 |             />
19 |           </div>
20 | 
21 |           <div class="input-wrapper">
22 |             <label>Room code</label>
23 |             <input
24 |               type="text"
25 |               placeholder="Room code"
26 |               v-model="info.roomId"
27 |               readonly
28 |             />
29 |           </div>
30 | 
31 |           <button style="margin-top: 1rem" @click="$copyText(info.roomLink)">
32 |             <span class="mdi mdi-link"></span>Copy link
33 |           </button>
34 |         </div>
35 |       </div>
36 |     </div>
37 |   </modal>
38 | </template>
39 | 
40 | <script>
41 | export default { props: ["show", "info"] };
42 | </script>
43 | 
44 | <style lang="scss" scoped>
45 | .modal-content-wrapper {
46 |   flex: 1;
47 |   display: flex;
48 |   flex-flow: column;
49 |   align-items: center;
50 |   justify-content: space-between;
51 | }
52 | 
53 | .icon {
54 |   font-size: 2rem;
55 |   color: #fff;
56 |   margin-bottom: 0.25rem;
57 | }
58 | 
59 | .content {
60 |   display: flex;
61 |   flex-flow: column;
62 |   align-items: center;
63 | }
64 | 
65 | .inputs-wrapper {
66 |   margin-top: 1rem;
67 |   margin-bottom: 2rem;
68 | }
69 | 
70 | .actions {
71 |   display: flex;
72 |   align-items: center;
73 |   justify-content: center;
74 |   button {
75 |     font-size: 1rem;
76 |     width: 120px;
77 |     height: 40px;
78 |     margin: 0 0.25rem;
79 |   }
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/components/modals/VideoLinkModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <modal v-if="show" @close="$emit('close')">
 3 |     <form @submit="save" @reset="$emit('close')" class="modal-content-wrapper">
 4 |       <div class="content">
 5 |         <div style="height: 2rem"></div>
 6 |         <span
 7 |           :class="`mdi ${type == 'youtube' ? 'mdi-youtube' : 'mdi-link'} icon`"
 8 |         ></span>
 9 |         <h2>
10 |           <span style="font-weight: 300">{{
11 |             type == "youtube" ? "YouTube" : "Video"
12 |           }}</span
13 |           >Link
14 |         </h2>
15 |         <div class="inputs-wrapper flex-center-col">
16 |           <div class="input-wrapper">
17 |             <label>Link*</label>
18 |             <input type="text" v-model="link" placeholder="Link*" required />
19 |           </div>
20 |         </div>
21 |       </div>
22 |       <div class="actions">
23 |         <button type="reset" class="button-outline">Cancel</button>
24 |         <button type="submit">Submit</button>
25 |       </div>
26 |     </form>
27 |   </modal>
28 | </template>
29 | 
30 | <script>
31 | export default {
32 |   props: ["show", "type"],
33 |   data() {
34 |     return {
35 |       link: null
36 |     };
37 |   },
38 |   methods: {
39 |     save(e) {
40 |       e.preventDefault();
41 |       this.$emit("submit", this.link);
42 |       this.link = null;
43 |       this.$emit("close");
44 |     }
45 |   }
46 | };
47 | </script>
48 | 
49 | <style lang="scss" scoped>
50 | .modal-content-wrapper {
51 |   flex: 1;
52 |   display: flex;
53 |   flex-flow: column;
54 |   align-items: center;
55 |   justify-content: space-between;
56 | }
57 | 
58 | .icon {
59 |   font-size: 2rem;
60 |   color: #fff;
61 |   margin-bottom: 0.25rem;
62 | }
63 | 
64 | .content {
65 |   display: flex;
66 |   flex-flow: column;
67 |   align-items: center;
68 | }
69 | 
70 | form {
71 |   margin-top: 2.5rem;
72 | }
73 | 
74 | .inputs-wrapper {
75 |   margin: 2rem 0;
76 | }
77 | 
78 | .actions {
79 |   display: flex;
80 |   align-items: center;
81 |   justify-content: center;
82 |   button {
83 |     font-size: 1rem;
84 |     width: 120px;
85 |     height: 40px;
86 |     margin: 0 0.25rem;
87 |   }
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/layouts/landing.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="page-container">
  3 |     <div class="background">
  4 |       <div class="background-image"></div>
  5 |       <div class="background-blur"></div>
  6 |       <div class="background-grid"></div>
  7 |     </div>
  8 |     <div class="top-nav">
  9 |       <nuxt-link to="/">
 10 |         <h1>
 11 |           <span class="mdi mdi-jellyfish"></span>
 12 |           <span style="font-weight: 300">Movie</span>Night
 13 |         </h1>
 14 |       </nuxt-link>
 15 |       <avatar />
 16 |     </div>
 17 | 
 18 |     <div class="modal-card">
 19 |       <Nuxt />
 20 |     </div>
 21 | 
 22 |     <footer>
 23 |       Made with ❤️ by
 24 |       <a href="https://www.instagram.com/emanuel.christo/" target="_blank"
 25 |         >Cris</a
 26 |       >
 27 |     </footer>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | import { mapActions } from "vuex";
 33 | import Avatar from "../components/Avatar.vue";
 34 | export default {
 35 |   components: { Avatar },
 36 |   methods: {
 37 |     ...mapActions(["login"])
 38 |   },
 39 |   created() {
 40 |     this.login();
 41 |   }
 42 | };
 43 | </script>
 44 | 
 45 | <style lang="scss" scoped>
 46 | @import "~/assets/css/_variables.scss";
 47 | 
 48 | .page-container {
 49 |   display: flex;
 50 |   flex-flow: column;
 51 |   align-items: center;
 52 |   justify-content: space-between;
 53 |   min-height: 100vh;
 54 | }
 55 | 
 56 | .modal-card {
 57 |   min-width: 340px;
 58 |   width: fit-content;
 59 |   height: fit-content;
 60 |   min-height: 500px;
 61 |   display: flex;
 62 |   flex-flow: column;
 63 |   align-items: center;
 64 |   justify-content: center;
 65 |   padding: 2.5rem 1rem 3rem 1rem;
 66 |   margin: 0 auto;
 67 |   border-radius: 1.5rem;
 68 |   background-color: rgba(2, 1, 5, 0.2);
 69 |   border: 2px solid rgba(#fff, 0.1);
 70 |   backdrop-filter: blur(40px);
 71 |   box-shadow: 0 3rem 4rem rgba(#000, 0.4);
 72 | }
 73 | 
 74 | footer {
 75 |   width: 100%;
 76 |   height: 65px;
 77 |   margin-top: 1rem;
 78 |   display: flex;
 79 |   align-items: center;
 80 |   justify-content: center;
 81 |   font-size: 1rem;
 82 |   font-weight: 400;
 83 |   color: rgba(#fff, 0.7);
 84 |   a {
 85 |     margin-left: 0.3rem;
 86 |     color: #fff;
 87 |     text-decoration: none;
 88 |   }
 89 |   a:hover {
 90 |     border-bottom: 1px dotted #fff;
 91 |   }
 92 |   a:active {
 93 |     border: none;
 94 |   }
 95 | }
 96 | 
 97 | .top-nav {
 98 |   height: 100px;
 99 |   width: 100%;
100 |   display: flex;
101 |   justify-content: space-between;
102 |   align-items: center;
103 |   padding: 0 2rem;
104 | }
105 | 
106 | h1 {
107 |   color: #fff;
108 |   font-size: 1.7rem;
109 | }
110 | 
111 | .background {
112 |   position: fixed;
113 |   top: 0;
114 |   left: 0;
115 |   height: 100vh;
116 |   width: 100vw;
117 |   z-index: -1;
118 | }
119 | 
120 | .background-image {
121 |   position: absolute;
122 |   top: 0;
123 |   left: 0;
124 |   height: 100vh;
125 |   width: 100vw;
126 |   background-color: rgb(9, 12, 53);
127 |   background-image: url("~/assets/images/background.jpg");
128 |   background-size: cover;
129 | }
130 | 
131 | .background-blur {
132 |   position: absolute;
133 |   top: 0;
134 |   left: 0;
135 |   height: 100vh;
136 |   width: 100vw;
137 |   background-color: rgba(26, 26, 36, 0.6);
138 |   backdrop-filter: blur(60px);
139 | }
140 | 
141 | .background-grid {
142 |   position: absolute;
143 |   top: 0;
144 |   left: 0;
145 |   height: 100vh;
146 |   width: 100vw;
147 |   background-color: transparent;
148 |   background-image: linear-gradient(
149 |       0deg,
150 |       transparent 24%,
151 |       $grid-line-color 25%,
152 |       $grid-line-color 26%,
153 |       transparent 27%,
154 |       transparent 74%,
155 |       $grid-line-color 75%,
156 |       $grid-line-color 76%,
157 |       transparent 77%,
158 |       transparent
159 |     ),
160 |     linear-gradient(
161 |       90deg,
162 |       transparent 24%,
163 |       $grid-line-color 25%,
164 |       $grid-line-color 26%,
165 |       transparent 27%,
166 |       transparent 74%,
167 |       $grid-line-color 75%,
168 |       $grid-line-color 76%,
169 |       transparent 77%,
170 |       transparent
171 |     );
172 |   background-size: 68px 68px;
173 | }
174 | </style>
175 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   // Global page headers
 3 |   head: {
 4 |     title: "Movie Night",
 5 |     htmlAttrs: {
 6 |       lang: "en"
 7 |     },
 8 |     meta: [
 9 |       { charset: "utf-8" },
10 |       { name: "viewport", content: "width=device-width, initial-scale=1" },
11 |       { hid: "description", name: "description", content: "" }
12 |     ],
13 |     link: [
14 |       { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
15 |       { rel: "preconnect", href: "https://fonts.gstatic.com" },
16 |       {
17 |         rel: "stylesheet",
18 |         href:
19 |           "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
20 |       }
21 |     ]
22 |   },
23 | 
24 |   // Global CSS
25 |   css: [
26 |     "~/assets/css/global.scss",
27 |     "@mdi/font/css/materialdesignicons.min.css"
28 |   ],
29 | 
30 |   env: {
31 |     SERVER_URL: process.env.SERVER_URL || "http://localhost:5300"
32 |   },
33 | 
34 |   // Plugins to run before rendering page
35 |   plugins: [
36 |     { src: "~/plugins/vue-plyr", mode: "client" },
37 |     { src: "~/plugins/srt-webvtt", mode: "client" },
38 |     { src: "~/plugins/socket-io", mode: "client" },
39 |     { src: "~/plugins/ping", mode: "client" }
40 |   ],
41 | 
42 |   components: true,
43 | 
44 |   modules: ["@nuxtjs/axios", "nuxt-clipboard"],
45 | 
46 |   axios: {
47 |     // baseURL: "https://movie-night-cris.herokuapp.com/" // Used as fallback if no runtime config is provided
48 |   },
49 | 
50 |   // Build Configuration
51 |   build: {},
52 |   server: {
53 |     host: "0.0.0.0"
54 |   },
55 |   generate: {
56 |     fallback: true
57 |   }
58 | };
59 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "movie-night",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "nuxt",
 7 |     "build": "nuxt build",
 8 |     "start": "nuxt start",
 9 |     "generate": "nuxt generate"
10 |   },
11 |   "dependencies": {
12 |     "@mdi/font": "^5.9.55",
13 |     "@nuxtjs/axios": "^5.13.6",
14 |     "core-js": "^3.18.0",
15 |     "nuxt": "^2.15.8",
16 |     "nuxt-clipboard": "0.0.4",
17 |     "socket.io-client": "^4.2.0",
18 |     "vue-plyr": "^7.0.0"
19 |   },
20 |   "devDependencies": {
21 |     "fibers": "^5.0.0",
22 |     "sass": "^1.42.1",
23 |     "sass-loader": "10"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/pages/_room.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="page-container">
  3 |     <div class="background">
  4 |       <div class="background-image"></div>
  5 |       <div class="background-blur"></div>
  6 |       <div class="background-grid"></div>
  7 |     </div>
  8 | 
  9 |     <div class="player-container">
 10 |       <div class="top-nav">
 11 |         <nuxt-link to="/">
 12 |           <h1>
 13 |             <span class="mdi mdi-jellyfish"></span>
 14 |             <span style="font-weight: 300">Movie</span>Night
 15 |           </h1>
 16 |         </nuxt-link>
 17 |         <avatar />
 18 |       </div>
 19 | 
 20 |       <player
 21 |         v-if="room.started && room.playing && room.joined && room.video.link"
 22 |         @stop="stop"
 23 |         @sync="sync"
 24 |       />
 25 |       <room-setup v-else-if="room.joined && isHost" />
 26 |       <video-stopped v-else-if="room.started & room.joined && !isHost" />
 27 |       <join-room v-else />
 28 | 
 29 |       <footer>
 30 |         Made with ❤️ by
 31 |         <a href="https://www.instagram.com/emanuel.christo/" target="_blank"
 32 |           >Cris</a
 33 |         >
 34 |       </footer>
 35 | 
 36 |       <invite
 37 |         :show="inviteShow"
 38 |         :info="inviteInfo"
 39 |         @close="inviteShow = false"
 40 |       />
 41 |       <edit-room
 42 |         :show="editRoomShow"
 43 |         :info="editRoomInfo"
 44 |         @close="editRoomShow = false"
 45 |       />
 46 |     </div>
 47 | 
 48 |     <controls
 49 |       :room="room"
 50 |       :isHost="isHost"
 51 |       @leave-room="leaveRoom"
 52 |       @editRoom="editRoomShow = true"
 53 |       @invite="inviteShow = true"
 54 |       v-if="room.started"
 55 |     />
 56 |   </div>
 57 | </template>
 58 | 
 59 | <script>
 60 | import { mapState, mapActions } from "vuex";
 61 | 
 62 | import Avatar from "../components/Avatar.vue";
 63 | import Controls from "../components/Controls.vue";
 64 | import JoinRoom from "../components/JoinRoom.vue";
 65 | import Modal from "../components/Modal.vue";
 66 | import EditRoom from "../components/modals/EditRoom.vue";
 67 | import Invite from "../components/modals/Invite.vue";
 68 | import Player from "../components/Player.vue";
 69 | import RoomSetup from "../components/RoomSetup.vue";
 70 | import VideoStopped from "../components/VideoStopped.vue";
 71 | 
 72 | export default {
 73 |   components: {
 74 |     Modal,
 75 |     Controls,
 76 |     Player,
 77 |     RoomSetup,
 78 |     Avatar,
 79 |     Invite,
 80 |     EditRoom,
 81 |     JoinRoom,
 82 |     VideoStopped
 83 |   },
 84 |   data() {
 85 |     return {
 86 |       inviteShow: false,
 87 |       editRoomShow: false
 88 |     };
 89 |   },
 90 |   computed: {
 91 |     ...mapState(["room", "isHost"]),
 92 |     inviteInfo() {
 93 |       return {
 94 |         roomLink: process.browser ? window.location.href : null,
 95 |         roomId: this.room.id
 96 |       };
 97 |     },
 98 |     editRoomInfo() {
 99 |       return {
100 |         roomName: this.room.name,
101 |         imageLink: this.room.imageLink
102 |       };
103 |     }
104 |   },
105 |   methods: {
106 |     ...mapActions(["stop", "sync", "login", "fetchRoom", "leaveRoom"])
107 |   },
108 |   created() {
109 |     this.login().then(() => this.fetchRoom(this.$route.params.room));
110 |   }
111 | };
112 | </script>
113 | 
114 | <style lang="scss" scoped>
115 | @import "~/assets/css/_variables.scss";
116 | 
117 | .top-nav {
118 |   height: 100px;
119 |   width: 100%;
120 |   display: flex;
121 |   align-items: center;
122 |   justify-content: space-between;
123 | }
124 | 
125 | .player-container {
126 |   height: 100%;
127 |   display: flex;
128 |   flex-flow: column;
129 |   justify-content: space-between;
130 |   flex: 1;
131 |   padding: 0 2rem;
132 | }
133 | 
134 | h1 {
135 |   color: #fff;
136 |   font-size: 1.7rem;
137 | }
138 | 
139 | footer {
140 |   width: 100%;
141 |   height: 65px;
142 |   margin-top: 1rem;
143 |   display: flex;
144 |   align-items: center;
145 |   font-size: 1rem;
146 |   font-weight: 400;
147 |   color: rgba(#fff, 0.7);
148 |   a {
149 |     margin-left: 0.3rem;
150 |     color: #fff;
151 |     text-decoration: none;
152 |   }
153 |   a:hover {
154 |     border-bottom: 1px dotted #fff;
155 |   }
156 |   a:active {
157 |     border: none;
158 |   }
159 | }
160 | 
161 | .page-container {
162 |   display: flex;
163 |   height: 100vh;
164 |   min-height: 100vh;
165 | }
166 | 
167 | .background {
168 |   position: fixed;
169 |   top: 0;
170 |   left: 0;
171 |   height: 100vh;
172 |   width: 100vw;
173 |   z-index: -1;
174 | }
175 | 
176 | .background-image {
177 |   position: absolute;
178 |   top: 0;
179 |   left: 0;
180 |   height: 100vh;
181 |   width: 100vw;
182 |   background-color: rgb(9, 12, 53);
183 |   background-image: url("~/assets/images/background.jpg");
184 |   background-size: cover;
185 | }
186 | 
187 | .background-blur {
188 |   position: absolute;
189 |   top: 0;
190 |   left: 0;
191 |   height: 100vh;
192 |   width: 100vw;
193 |   background-color: rgba(26, 26, 36, 0.6);
194 |   backdrop-filter: blur(60px);
195 | }
196 | 
197 | .background-grid {
198 |   position: absolute;
199 |   top: 0;
200 |   left: 0;
201 |   height: 100vh;
202 |   width: 100vw;
203 |   background-color: transparent;
204 |   background-image: linear-gradient(
205 |       0deg,
206 |       transparent 24%,
207 |       $grid-line-color 25%,
208 |       $grid-line-color 26%,
209 |       transparent 27%,
210 |       transparent 74%,
211 |       $grid-line-color 75%,
212 |       $grid-line-color 76%,
213 |       transparent 77%,
214 |       transparent
215 |     ),
216 |     linear-gradient(
217 |       90deg,
218 |       transparent 24%,
219 |       $grid-line-color 25%,
220 |       $grid-line-color 26%,
221 |       transparent 27%,
222 |       transparent 74%,
223 |       $grid-line-color 75%,
224 |       $grid-line-color 76%,
225 |       transparent 77%,
226 |       transparent
227 |     );
228 |   background-size: 68px 68px;
229 | }
230 | </style>
231 | 


--------------------------------------------------------------------------------
/pages/createroom.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <span class="mdi mdi-plus-circle icon"></span>
  4 |     <h2><span style="font-weight: 300">Create</span>Room</h2>
  5 | 
  6 |     <!-- Creating room -->
  7 |     <!-- <div v-if="loggedIn">
  8 |       <form @submit="createRoom">
  9 |         <div class="inputs-wrapper">
 10 |           <div class="input-wrapper">
 11 |             <label>Room name*</label>
 12 |             <input
 13 |               type="text"
 14 |               placeholder="Room name*"
 15 |               ref="roomNameInput"
 16 |               required
 17 |             />
 18 |           </div>
 19 |           <div class="input-wrapper">
 20 |             <label>Image link</label>
 21 |             <input type="text" placeholder="Image link" ref="imageLinkInput" />
 22 |           </div>
 23 |         </div>
 24 |         <button>Create</button>
 25 |       </form>
 26 |     </div> -->
 27 |     <!-- New user -->
 28 |     <!-- <div v-else> -->
 29 |     <form @submit="loginLocal">
 30 |       <div class="inputs-wrapper" style="margin: 3rem 0">
 31 |         <div class="new-user-image" ref="newUserImage">
 32 |           <span class="mdi mdi-jellyfish"></span>
 33 |         </div>
 34 |         <div class="input-wrapper">
 35 |           <label>Nickname*</label>
 36 |           <input
 37 |             type="text"
 38 |             placeholder="Nickname*"
 39 |             ref="nickNameInput"
 40 |             v-model="newNickName"
 41 |             minlength="3"
 42 |             required
 43 |           />
 44 |         </div>
 45 |       </div>
 46 |       <button>Next</button>
 47 |     </form>
 48 |   </div>
 49 |   <!-- </div> -->
 50 | </template>
 51 | 
 52 | <script>
 53 | import { mapState, mapActions } from "vuex";
 54 | export default {
 55 |   layout: "landing",
 56 |   data() {
 57 |     return {
 58 |       newNickName: null
 59 |     };
 60 |   },
 61 |   computed: {
 62 |     ...mapState(["loggedIn"])
 63 |   },
 64 |   methods: {
 65 |     ...mapActions(["login", "createRoom"]),
 66 | 
 67 |     loginLocal(e) {
 68 |       e.preventDefault();
 69 |       this.login(this.newNickName)
 70 |         .then(() =>
 71 |           this.createRoom().then(roomId => this.$router.push(`/${roomId}`))
 72 |         )
 73 |         .catch(err => console.error(err));
 74 |       this.newNickName = null;
 75 |     },
 76 | 
 77 |     // Validating nickname input and changing user image according to new nickname
 78 |     handleNickNameInput() {
 79 |       this.newNickName = this.newNickName.replace(/[^a-z0-9_]/gi, "");
 80 |       this.newNickName = this.newNickName.substring(0, 15);
 81 |     }
 82 |   },
 83 |   mounted() {}
 84 | };
 85 | </script>
 86 | 
 87 | <style lang="scss" scoped>
 88 | @import "~/assets/css/_variables.scss";
 89 | 
 90 | button {
 91 |   margin: 0 auto;
 92 | }
 93 | 
 94 | .new-user-image {
 95 |   width: 60px;
 96 |   height: 60px;
 97 |   display: flex;
 98 |   align-items: center;
 99 |   justify-content: center;
100 |   border-radius: 100%;
101 |   background-color: rgba(#fff, 0.1);
102 |   margin-bottom: 1rem;
103 |   span {
104 |     font-size: 2rem;
105 |   }
106 | }
107 | 
108 | .inputs-wrapper {
109 |   margin: 2rem 0;
110 |   display: flex;
111 |   flex-flow: column;
112 |   align-items: center;
113 |   justify-content: center;
114 | }
115 | 
116 | .icon {
117 |   font-size: 2rem;
118 |   color: #fff;
119 |   margin-bottom: 0.25rem;
120 | }
121 | 
122 | .container {
123 |   width: 100%;
124 |   height: 100%;
125 |   display: flex;
126 |   flex-flow: column;
127 |   align-items: center;
128 |   justify-content: center;
129 | }
130 | 
131 | p {
132 |   color: rgba(#fff, 0.5);
133 |   margin: 1.8rem 0;
134 |   font-size: 1.3rem;
135 | }
136 | </style>
137 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="wrapper">
 3 |     <div class="container">
 4 |       <button @click="createRoomLocal">
 5 |         <span class="mdi mdi-plus-circle"></span>Create Room
 6 |       </button>
 7 |       <p>or</p>
 8 |       <button class="button-outline" @click="$router.push('/joinroom')">
 9 |         <span class="mdi mdi-set-center"></span>Join Room
10 |       </button>
11 |     </div>
12 |     <info />
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import { mapState, mapActions } from "vuex";
18 | import Info from "../components/Info.vue";
19 | export default {
20 |   components: { Info },
21 |   layout: "landing",
22 |   computed: {
23 |     ...mapState(["loggedIn"])
24 |   },
25 |   methods: {
26 |     ...mapActions(["createRoom"]),
27 |     createRoomLocal() {
28 |       if (this.loggedIn)
29 |         this.createRoom().then(roomId => this.$router.push(`/${roomId}`));
30 |       else this.$router.push("/createroom");
31 |     }
32 |   }
33 | };
34 | </script>
35 | 
36 | <style lang="scss" scoped>
37 | @import "~/assets/css/_variables.scss";
38 | 
39 | .wrapper {
40 |   display: flex;
41 |   align-items: center;
42 | }
43 | 
44 | .container {
45 |   padding: 0 3rem 0 2rem;
46 |   width: 100%;
47 |   height: 100%;
48 |   display: flex;
49 |   flex-flow: column;
50 |   align-items: center;
51 |   justify-content: center;
52 | }
53 | 
54 | p {
55 |   color: rgba(#fff, 0.5);
56 |   margin: 1.8rem 0;
57 |   font-size: 1.3rem;
58 | }
59 | </style>
60 | 


--------------------------------------------------------------------------------
/pages/joinroom.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <span class="mdi mdi-set-center icon"></span>
 4 |     <h2><span style="font-weight: 300">Join</span>Room</h2>
 5 |     <form @submit.prevent="joinRoomLocal">
 6 |       <div class="inputs-wrapper" style="margin: 3rem 0">
 7 |         <div class="new-user-image" ref="newUserImage">
 8 |           <span class="mdi mdi-jellyfish"></span>
 9 |         </div>
10 |         <div class="input-wrapper">
11 |           <label>Room code*</label>
12 |           <input
13 |             type="text"
14 |             placeholder="Room code*"
15 |             v-model="roomCode"
16 |             minlength="6"
17 |             maxlength="6"
18 |             required
19 |           />
20 |         </div>
21 |       </div>
22 |       <button>Join</button>
23 |     </form>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   layout: "landing",
30 |   data() {
31 |     return {
32 |       roomCode: null
33 |     };
34 |   },
35 |   methods: {
36 |     joinRoomLocal() {
37 |       this.$router.push(`/${this.roomCode}`);
38 |     }
39 |   }
40 | };
41 | </script>
42 | 
43 | <style lang="scss" scoped>
44 | @import "~/assets/css/_variables.scss";
45 | 
46 | button {
47 |   margin: 0 auto;
48 | }
49 | 
50 | .new-user-image {
51 |   width: 60px;
52 |   height: 60px;
53 |   display: flex;
54 |   align-items: center;
55 |   justify-content: center;
56 |   border-radius: 100%;
57 |   background-color: rgba(#fff, 0.1);
58 |   margin-bottom: 1rem;
59 |   span {
60 |     font-size: 2rem;
61 |   }
62 | }
63 | 
64 | .inputs-wrapper {
65 |   margin: 2rem 0;
66 |   display: flex;
67 |   flex-flow: column;
68 |   align-items: center;
69 |   justify-content: center;
70 | }
71 | 
72 | .icon {
73 |   font-size: 2rem;
74 |   color: #fff;
75 |   margin-bottom: 0.25rem;
76 | }
77 | 
78 | .container {
79 |   width: 100%;
80 |   height: 100%;
81 |   display: flex;
82 |   flex-flow: column;
83 |   align-items: center;
84 |   justify-content: center;
85 | }
86 | 
87 | p {
88 |   color: rgba(#fff, 0.5);
89 |   margin: 1.8rem 0;
90 |   font-size: 1.3rem;
91 | }
92 | </style>
93 | 


--------------------------------------------------------------------------------
/plugins/ping.js:
--------------------------------------------------------------------------------
1 | setInterval(() => {
2 |   console.log("ping");
3 |   fetch(process.env.SERVER_URL + "/ping").catch(err => {
4 |     console.log("ping failed");
5 |     console.error(err);
6 |   });
7 | }, 3000);
8 | 


--------------------------------------------------------------------------------
/plugins/socket-io.js:
--------------------------------------------------------------------------------
1 | import { io } from "socket.io-client";
2 | const socket = io(process.env.SERVER_URL);
3 | 
4 | export default ({ app }, inject) => {
5 |   inject("socket", socket);
6 | };
7 | 


--------------------------------------------------------------------------------
/plugins/srt-webvtt.js:
--------------------------------------------------------------------------------
 1 | class WebVTTConverter {
 2 |   constructor(resource) {
 3 |     this.resource = resource;
 4 |   }
 5 | 
 6 |   blobToBuffer() {
 7 |     return new Promise((resolve, reject) => {
 8 |       const reader = new FileReader();
 9 |       reader.addEventListener("loadend", event => {
10 |         const buf = event.target.result;
11 |         resolve(new Uint8Array(buf));
12 |       });
13 |       reader.addEventListener("error", () =>
14 |         reject("Error while reading the Blob object")
15 |       );
16 |       reader.readAsArrayBuffer(this.resource);
17 |     });
18 |   }
19 |   /**
20 |    * @param {*} blob
21 |    * @param {*} success
22 |    * @param {*} fail
23 |    */
24 |   static blobToString(blob, success, fail) {
25 |     const reader = new FileReader();
26 |     reader.addEventListener("loadend", event => {
27 |       const text = event.target.result;
28 |       success(text);
29 |     });
30 |     reader.addEventListener("error", () => fail());
31 |     reader.readAsText(blob);
32 |   }
33 |   /**
34 |    * @param {*} utf8str
35 |    */
36 |   static toVTT(utf8str) {
37 |     return utf8str
38 |       .replace(/\{\\([ibu])\}/g, "</$1>")
39 |       .replace(/\{\\([ibu])1\}/g, "<$1>")
40 |       .replace(/\{([ibu])\}/g, "<$1>")
41 |       .replace(/\{\/([ibu])\}/g, "</$1>")
42 |       .replace(/(\d\d:\d\d:\d\d),(\d\d\d)/g, "$1.$2")
43 |       .concat("\r\n\r\n");
44 |   }
45 |   /**
46 |    * @param {*} str
47 |    */
48 |   static toTypedArray(str) {
49 |     const result = [];
50 |     str.split("").forEach(each => {
51 |       result.push(parseInt(each.charCodeAt(), 16));
52 |     });
53 |     return Uint8Array.from(result);
54 |   }
55 | 
56 |   getURL() {
57 |     return new Promise((resolve, reject) => {
58 |       if (!(this.resource instanceof Blob))
59 |         return reject(
60 |           "Expecting resource to be a Blob but something else found."
61 |         );
62 |       if (!FileReader) return reject("No FileReader constructor found");
63 |       if (!TextDecoder) return reject("No TextDecoder constructor found");
64 |       return WebVTTConverter.blobToString(
65 |         this.resource,
66 |         decoded => {
67 |           const vttString = "WEBVTT FILE\r\n\r\n";
68 |           const text = vttString.concat(WebVTTConverter.toVTT(decoded));
69 |           const blob = new Blob([text], { type: "text/vtt" });
70 |           this.objectURL = URL.createObjectURL(blob);
71 |           return resolve(this.objectURL);
72 |         },
73 |         () => {
74 |           this.blobToBuffer().then(buffer => {
75 |             const utf8str = new TextDecoder("utf-8").decode(buffer);
76 |             const vttString = "WEBVTT FILE\r\n\r\n";
77 |             const text = vttString.concat(WebVTTConverter.toVTT(utf8str));
78 |             const blob = new Blob([text], { type: "text/vtt" });
79 |             this.objectURL = URL.createObjectURL(blob);
80 |             return resolve(this.objectURL);
81 |           });
82 |         }
83 |       );
84 |     });
85 |   }
86 | 
87 |   release() {
88 |     URL.createObjectURL(this.objectURL);
89 |   }
90 | }
91 | 
92 | export default ({ app }, inject) => {
93 |   inject("VTTConverter", WebVTTConverter);
94 | };
95 | 


--------------------------------------------------------------------------------
/plugins/vue-plyr.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import VuePlyr from "vue-plyr/dist/vue-plyr.ssr.js";
3 | import "vue-plyr/dist/vue-plyr.css";
4 | 
5 | // The second argument is optional and sets the default config values for every player.
6 | Vue.use(VuePlyr, {
7 |   plyr: {}
8 | });
9 | 


--------------------------------------------------------------------------------
/screenshots/screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emanuelchristo/movie-night/06544427fba66e95b5fa5492d810ce442c00b281/screenshots/screenshot_1.png


--------------------------------------------------------------------------------
/screenshots/screenshot_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emanuelchristo/movie-night/06544427fba66e95b5fa5492d810ce442c00b281/screenshots/screenshot_2.png


--------------------------------------------------------------------------------
/screenshots/screenshot_3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emanuelchristo/movie-night/06544427fba66e95b5fa5492d810ce442c00b281/screenshots/screenshot_3.png


--------------------------------------------------------------------------------
/screenshots/screenshot_4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emanuelchristo/movie-night/06544427fba66e95b5fa5492d810ce442c00b281/screenshots/screenshot_4.png


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emanuelchristo/movie-night/06544427fba66e95b5fa5492d810ce442c00b281/static/favicon.ico


--------------------------------------------------------------------------------
/static/file_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emanuelchristo/movie-night/06544427fba66e95b5fa5492d810ce442c00b281/static/file_icon.png


--------------------------------------------------------------------------------
/static/sample.vtt:
--------------------------------------------------------------------------------
1 | WEBVTT
2 | 
3 | 00:00:00.500 --> 00:00:02.000
4 | The Web is always changing
5 | 
6 | 00:00:02.500 --> 00:00:04.300
7 | and the way we access it is changing


--------------------------------------------------------------------------------
/static/video_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emanuelchristo/movie-night/06544427fba66e95b5fa5492d810ce442c00b281/static/video_icon.png


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
  1 | const roomDefault = {
  2 |   id: "abc-defg-hij",
  3 |   name: null,
  4 |   imageLink: null,
  5 |   started: false,
  6 |   joined: false,
  7 |   playing: false,
  8 | 
  9 |   video: {
 10 |     added: false,
 11 |     type: null,
 12 |     link: null,
 13 |     thumbnail: null,
 14 |     title: null
 15 |   },
 16 | 
 17 |   player: {
 18 |     loaded: "bool",
 19 |     time: "number",
 20 |     playing: "bool",
 21 |     volume: "number",
 22 |     speed: "string",
 23 |     captions: "link string"
 24 |   },
 25 | 
 26 |   host: {
 27 |     id: "abcd",
 28 |     nickName: "Cris",
 29 |     ready: true,
 30 |     micOff: false,
 31 |     volume: 0
 32 |   },
 33 |   participants: [
 34 |     {
 35 |       id: "jkji",
 36 |       nickName: "Jake",
 37 |       ready: false,
 38 |       micOff: true,
 39 |       volume: 0
 40 |     },
 41 |     {
 42 |       id: "jkjsfasdi",
 43 |       nickName: "Thor",
 44 |       ready: true,
 45 |       micOff: false,
 46 |       volume: 0.5
 47 |     }
 48 |   ],
 49 |   voiceChat: {
 50 |     micOff: false,
 51 |     soundOff: true
 52 |   },
 53 |   chat: [
 54 |     {
 55 |       id: null,
 56 |       userId: null,
 57 |       nickName: null,
 58 |       timestamp: null,
 59 |       message: "string"
 60 |     }
 61 |   ]
 62 | };
 63 | 
 64 | export const state = () => ({
 65 |   loggedIn: false,
 66 |   userId: null,
 67 |   nickName: null,
 68 |   isHost: false,
 69 |   room: roomDefault
 70 | });
 71 | 
 72 | export const actions = {
 73 |   login({ commit }, nickName) {
 74 |     return new Promise((resolve, reject) => {
 75 |       try {
 76 |         // Checking if userId exists
 77 |         const userId = window.localStorage.getItem("userId");
 78 |         // Loggin in
 79 |         console.log("login req:", { userId, nickName });
 80 |         this.$socket.emit("auth:login", { userId, nickName }, res => {
 81 |           if (!res) {
 82 |             commit("setLoggedIn", {
 83 |               loggedIn: false,
 84 |               userId: null,
 85 |               nickName: null
 86 |             });
 87 |           } else {
 88 |             // Setting userId
 89 |             window.localStorage.setItem("userId", res.id);
 90 |             commit("setLoggedIn", {
 91 |               loggedIn: true,
 92 |               userId: res.id,
 93 |               nickName: res.nickName
 94 |             });
 95 |           }
 96 |           resolve();
 97 |           return;
 98 |         });
 99 |       } catch (err) {
100 |         reject();
101 |       }
102 |     });
103 |   },
104 | 
105 |   logout({ commit }) {
106 |     const userId = window.localStorage.getItem("userId");
107 |     window.localStorage.removeItem("userId");
108 |     this.$socket.emit("auth:logout", { userId }, () => {
109 |       this.$router.go();
110 |       commit("setLoggedIn", {
111 |         loggedIn: false,
112 |         userId: null,
113 |         nickName: null
114 |       });
115 |     });
116 |   },
117 | 
118 |   createRoom({ commit, state }) {
119 |     return new Promise((resolve, reject) => {
120 |       console.log("createRoom req:", { userId: state.userId });
121 |       this.$socket.emit("room:create", state.userId, room => {
122 |         console.log("createRoom res:", { room });
123 |         commit("setRoom", room);
124 |         resolve(room.id);
125 |       });
126 |     });
127 |   },
128 | 
129 |   async fetchRoom({ commit }, roomId) {
130 |     console.log("fetchRoom req:", { roomId });
131 |     this.$socket.emit("room:get", roomId, room => {
132 |       console.log("fetchRoom res:", { room });
133 |       commit("setRoom", room);
134 |     });
135 |     // Subscribing to room changes
136 |     this.$socket.on("room:updated", room => {
137 |       console.log("roomUpdated: ", { room });
138 |       commit("setRoom", room);
139 |     });
140 |   },
141 | 
142 |   async joinRoom({ commit, state, dispatch }, data) {
143 |     console.log("Join Room Called");
144 |     dispatch("login", data).then(() => {
145 |       console.log("joinRoom req:", {
146 |         roomId: state.room.id,
147 |         userId: state.userId
148 |       });
149 |       this.$socket.emit("room:join", {
150 |         roomId: state.room.id,
151 |         userId: state.userId
152 |       });
153 |     });
154 |   },
155 | 
156 |   addVideo({ commit, state }, data) {
157 |     return new Promise(async (resolve, reject) => {
158 |       console.log("addVideo");
159 |       try {
160 |         let video = {
161 |           added: true,
162 |           type: null,
163 |           link: null,
164 |           thumbnail: null,
165 |           title: null
166 |         };
167 |         if (data.type == "youtube") {
168 |           // YouTube video metadata server url
169 |           const url = "https://noembed.com/embed?url=" + data.link;
170 |           // YouTube metadata
171 |           const res = await this.$axios.get(url);
172 |           video = {
173 |             added: true,
174 |             type: "youtube",
175 |             link: data.link,
176 |             thumbnail: res.data.thumbnail_url,
177 |             title: res.data.title
178 |           };
179 |         } else if (data.type == "file") {
180 |           video.type = "file";
181 |           video.title = data.fileName;
182 |           video.link = null;
183 |           video.thumbnail = "/file_icon.png";
184 |         } else if (data.type == "video") {
185 |           video.type = "video";
186 |           video.link = data.link;
187 |           video.thumbnail = "/video_icon.png";
188 |           video.title = "Video from link";
189 |         }
190 | 
191 |         // Making request to server
192 |         if (state.isHost) {
193 |           this.$socket.emit("room:addvideo", {
194 |             userId: state.userId,
195 |             roomId: state.room.id,
196 |             video: video
197 |           });
198 |         }
199 |         if (data.type == "file") {
200 |           commit("setVideoFileName", data.fileName);
201 |           commit("setVideoLink", data.fileURL);
202 |         }
203 |         resolve();
204 |       } catch (err) {
205 |         console.error(err);
206 |         reject();
207 |       }
208 |     });
209 |   },
210 | 
211 |   async removeVideo({ commit, state }) {
212 |     this.$socket.emit("room:removevideo", {
213 |       userId: state.userId,
214 |       roomId: state.room.id,
215 |       video: {}
216 |     });
217 |   },
218 | 
219 |   async startRoom({ commit, state }, data) {
220 |     this.$socket.emit("room:startroom", {
221 |       userId: state.userId,
222 |       roomId: state.room.id,
223 |       data
224 |     });
225 |   },
226 | 
227 |   async setRoomInfo({ commit, state }, data) {
228 |     this.$socket.emit("room:setroominfo", {
229 |       userId: state.userId,
230 |       roomId: state.room.id,
231 |       data
232 |     });
233 |   },
234 | 
235 |   async stop({ commit, state }) {
236 |     this.$socket.emit("room:stop", {
237 |       userId: state.userId,
238 |       roomId: state.room.id
239 |     });
240 |   },
241 | 
242 |   async sync({ commit, state }, data) {
243 |     this.$socket.emit("room:sync", {
244 |       userId: state.userId,
245 |       roomId: state.room.id,
246 |       data
247 |     });
248 |   },
249 | 
250 |   async leaveRoom({ commit, state }) {
251 |     this.$socket.emit("room:leave", {
252 |       userId: state.userId,
253 |       roomId: state.room.id
254 |     });
255 |   }
256 | };
257 | 
258 | export const mutations = {
259 |   setLoggedIn(state, data) {
260 |     state.loggedIn = data.loggedIn;
261 |     state.userId = data.userId;
262 |     state.nickName = data.nickName;
263 |   },
264 |   setVideoLink(state, data) {
265 |     state.room.video.link = data;
266 |   },
267 |   setVideoFileName(state, data) {
268 |     state.room.video.title = data;
269 |   },
270 |   setCreateRoom(state, data) {
271 |     state.room = data;
272 |     state.room.id = data._id;
273 |     delete state.room._id;
274 |     state.room.joined = true;
275 |     state.isHost = true;
276 |   },
277 |   setRoom(state, data) {
278 |     if (!data) {
279 |       state.room = roomDefault;
280 |       return;
281 |     }
282 |     const videoLink = state.room.video.link;
283 |     const fileName = state.room.video.title;
284 |     state.room = data;
285 |     state.room.id = data._id || data.id;
286 |     delete state.room._id;
287 |     if (state.room.host.id == state.userId) {
288 |       state.room.joined = true;
289 |       state.isHost = true;
290 |     } else {
291 |       const userInParticipants = checkParticipant(
292 |         state.room.participants,
293 |         state.userId
294 |       );
295 |       if (userInParticipants) state.room.joined = true;
296 |     }
297 |     if (state.room.video.type == "file") {
298 |       state.room.video.link = videoLink;
299 |       state.room.video.title = fileName;
300 |     }
301 |   }
302 | };
303 | 
304 | function checkParticipant(participants, userId) {
305 |   return participants.find(p => p.id == userId);
306 | }
307 | 


--------------------------------------------------------------------------------