16 | 
17 |
26 | )
27 | }
28 |
29 |
30 | export default withRouter(SideBarItem)
31 |
--------------------------------------------------------------------------------
/bin/setup:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env ruby
2 | require 'fileutils'
3 | include FileUtils
4 |
5 | # path to your application root.
6 | APP_ROOT = File.expand_path('..', __dir__)
7 |
8 | def system!(*args)
9 | system(*args) || abort("\n== Command #{args} failed ==")
10 | end
11 |
12 | chdir APP_ROOT do
13 | # This script is a starting point to setup your application.
14 | # Add necessary setup steps to this file.
15 |
16 | puts '== Installing dependencies =='
17 | system! 'gem install bundler --conservative'
18 | system('bundle check') || system!('bundle install')
19 |
20 | # Install JavaScript dependencies if using Yarn
21 | # system('bin/yarn')
22 |
23 | # puts "\n== Copying sample files =="
24 | # unless File.exist?('config/database.yml')
25 | # cp 'config/database.yml.sample', 'config/database.yml'
26 | # end
27 |
28 | puts "\n== Preparing database =="
29 | system! 'bin/rails db:setup'
30 |
31 | puts "\n== Removing old logs and tempfiles =="
32 | system! 'bin/rails log:clear tmp:clear'
33 |
34 | puts "\n== Restarting application server =="
35 | system! 'bin/rails restart'
36 | end
37 |
--------------------------------------------------------------------------------
/frontend/components/Vods/VodShow/VodShow.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { connect } from 'react-redux'
3 | import { withRouter } from 'react-router-dom'
4 | import { requestVod } from '../../../actions/vod_actions'
5 | import classes from './VodShow.module.css'
6 | /* eslint-disable */
7 |
8 | class VodShow extends React.Component {
9 |
10 | componentDidMount() {
11 | this.props.requestVod(this.props.match.params.vodId)
12 | }
13 |
14 | render() {
15 | return (
16 | <>
17 | {
18 | this.props.vod ? (
19 |
22 | ) : null
23 | }
24 |
25 | )
26 | }
27 | }
28 |
29 |
30 | const mSTP = (state, ownProps) => {
31 | return {
32 | vod: state.entities.vods[ownProps.match.params.vodId],
33 | }
34 | }
35 |
36 |
37 | const mDTP = (dispatch) => {
38 | return {
39 | requestVod: (vodId) => dispatch(requestVod(vodId)),
40 | }
41 | }
42 |
43 |
44 | export default withRouter(connect(mSTP, mDTP)(VodShow))
45 |
--------------------------------------------------------------------------------
/db/migrate/20200501081013_create_active_storage_tables.active_storage.rb:
--------------------------------------------------------------------------------
1 | # This migration comes from active_storage (originally 20170806125915)
2 | class CreateActiveStorageTables < ActiveRecord::Migration[5.2]
3 | def change
4 | create_table :active_storage_blobs do |t|
5 | t.string :key, null: false
6 | t.string :filename, null: false
7 | t.string :content_type
8 | t.text :metadata
9 | t.bigint :byte_size, null: false
10 | t.string :checksum, null: false
11 | t.datetime :created_at, null: false
12 |
13 | t.index [ :key ], unique: true
14 | end
15 |
16 | create_table :active_storage_attachments do |t|
17 | t.string :name, null: false
18 | t.references :record, null: false, polymorphic: true, index: false
19 | t.references :blob, null: false
20 |
21 | t.datetime :created_at, null: false
22 |
23 | t.index [ :record_type, :record_id, :name, :blob_id ], name: "index_active_storage_attachments_uniqueness", unique: true
24 | t.foreign_key :active_storage_blobs, column: :blob_id
25 | end
26 | end
27 | end
28 |
--------------------------------------------------------------------------------
/frontend/components/HomePageIndex/HomePageIndex.module.css:
--------------------------------------------------------------------------------
1 | .indexWrapper {
2 | flex-grow: 6.0;
3 | display: flex;
4 | flex-direction: column;
5 | background-color: #0E0E10;
6 | height: 100vh;
7 | overflow-y: scroll;
8 |
9 | }
10 |
11 |
12 | .indexWrapper > h2 {
13 | padding-top: 20px;
14 | margin-left: 40px;
15 | color: white;
16 |
17 | }
18 |
19 | .indexWrapper > hr {
20 | width: 90%;
21 | margin-top: 30px;
22 | margin-bottom: 40px;
23 | margin-left: 40px;
24 | background-color: rgb(48,48,50);
25 | border: .5px solid rgb(48,48,50) ;
26 | }
27 |
28 | .innerContainer{
29 | display: flex;
30 | flex-direction: column;
31 | align-items: flex-start;
32 | width: 100%;
33 | padding-bottom: 200px;
34 | margin-left: 40px;
35 | }
36 |
37 | .innerContainer > hr {
38 | width: 90%;
39 | margin-top: 30px;
40 | margin-bottom: 30px;
41 | background-color: rgb(48,48,50);
42 | border: .5px solid rgb(48,48,50) ;
43 | }
44 |
45 | .categoriesHeader {
46 | color: white;
47 | margin-bottom: 5px;
48 | }
49 |
50 |
51 | .categoriesHeader > b {
52 | color: #0CD6F8;
53 | }
54 |
--------------------------------------------------------------------------------
/app/models/vod.rb:
--------------------------------------------------------------------------------
1 | class Vod < ApplicationRecord
2 | validates :channel_id, :title, :category, presence: true
3 |
4 | belongs_to :channel
5 |
6 | has_one_attached :videoUrl
7 |
8 | # filter --> {:filterType => value}
9 | def self.all_filter(filter)
10 |
11 | if !filter[:channel_id].nil?
12 | newFilter = {:channel_id => filter[:channel_id].to_i}
13 | return Vod.where("channel_id = :channel_id", newFilter)
14 | elsif !filter[:category].nil?
15 | newFilter = {:category => filter[:category]}
16 | return Vod.where("category = :category", newFilter)
17 | elsif !filter[:random].nil?
18 | count = Vod.count + 1
19 | ids = []
20 | vods = []
21 | while ids.length < 5
22 | randomId = rand(count)
23 | if randomId != 0 && !ids.include?(randomId)
24 | ids.push(randomId)
25 | end
26 | end
27 | ids.each do |id|
28 | vods.push(Vod.where("id = ?", "#{id}")[0])
29 | end
30 | return vods
31 | end
32 |
33 | return Vod.all
34 |
35 | end
36 |
37 | end
38 |
39 |
40 |
--------------------------------------------------------------------------------
/config/initializers/content_security_policy.rb:
--------------------------------------------------------------------------------
1 | # Be sure to restart your server when you modify this file.
2 |
3 | # Define an application-wide content security policy
4 | # For further information see the following documentation
5 | # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
6 |
7 | # Rails.application.config.content_security_policy do |policy|
8 | # policy.default_src :self, :https
9 | # policy.font_src :self, :https, :data
10 | # policy.img_src :self, :https, :data
11 | # policy.object_src :none
12 | # policy.script_src :self, :https
13 | # policy.style_src :self, :https
14 |
15 | # # Specify URI for violation reports
16 | # # policy.report_uri "/csp-violation-report-endpoint"
17 | # end
18 |
19 | # If you are using UJS then enable automatic nonce generation
20 | # Rails.application.config.content_security_policy_nonce_generator = -> request { SecureRandom.base64(16) }
21 |
22 | # Report CSP violations to a specified URI
23 | # For further information see the following documentation:
24 | # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only
25 | # Rails.application.config.content_security_policy_report_only = true
26 |
--------------------------------------------------------------------------------
/frontend/components/About/AboutPage.module.css:
--------------------------------------------------------------------------------
1 | .aboutWrapper {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | flex-grow: 6;
6 | background-color: #18181B;
7 | height: 100vh;
8 | overflow-y: scroll;
9 | }
10 |
11 | .mostOuter {
12 | padding-bottom: 500px;
13 | }
14 |
15 | .outer {
16 | margin-top: 450px ;
17 | display: flex;
18 | flex-direction: column;
19 | width: 600px;
20 | height: 700px;
21 | background-color: #DADCE0;
22 | align-items: center;
23 | border-radius: 5px;
24 | -webkit-box-shadow: 8px 6px 10px 0px rgba(0,0,0,1);
25 | -moz-box-shadow: 8px 6px 10px 0px rgba(0,0,0,1);
26 | box-shadow: 8px 6px 10px 0px rgba(0,0,0,1);
27 |
28 | }
29 |
30 | .outer > h1 {
31 | margin-top: 15px;
32 | margin-bottom: 5px;
33 | color: black;
34 | }
35 |
36 | .outer > h2 {
37 | margin-bottom: 15px;
38 | }
39 |
40 |
41 | .linkWrapper {
42 | display: flex;
43 | width: 80%;
44 | justify-content: space-evenly;
45 |
46 | }
47 | .linkWrapper > li {
48 | list-style: none;
49 | }
50 |
51 | .icon {
52 | width: 60px;
53 | height: 60px;
54 | cursor: pointer;
55 | }
56 |
57 | .picture {
58 | width: 80%;
59 | margin-top: 40px;
60 | border-radius: 8px;
61 | }
--------------------------------------------------------------------------------
/frontend/components/NavBar/NavBar.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import classes from './NavBar.module.css'
4 | import SessionControlsContainer from '../SessionControls/session_controls_container'
5 | import SearchBar from './SearchBar'
6 |
7 | /* eslint-disable */
8 |
9 | const NavBar = () => {
10 |
11 | return (
12 |
34 | )
35 | }
36 |
37 |
38 | export default NavBar
39 |
--------------------------------------------------------------------------------
/frontend/components/Channels/ChannelIndexItem/ChannelIndexItem.module.css:
--------------------------------------------------------------------------------
1 | .channelItem {
2 | list-style: none;
3 | width: 350px;
4 | height: 195px;
5 | background-color: #27262C;
6 | margin-right: 20px;
7 | color: white;
8 | display: flex;
9 | flex-direction: column;
10 | justify-content: center;
11 | /* border-radius: 7px; */
12 | align-items: center;
13 | /* -webkit-box-shadow: 4px 3px 5px 0px rgba(145,71,255,1);
14 | -moz-box-shadow: 4px 3px 5px 0px rgba(145,71,255,1);
15 | box-shadow: 4px 3px 5px 0px rgba(145,71,255,1); */
16 | }
17 |
18 | .icon {
19 | width: 50px;
20 | height: 50px;
21 | margin-top: 10px;
22 | border-radius: 50%;
23 | }
24 |
25 | .videoPlayer {
26 |
27 | width: 350px;
28 | cursor: pointer;
29 | margin: 0;
30 | padding: 0;
31 | }
32 |
33 | .videoPlayer:hover {
34 | border: 2px solid #0CD6F8;
35 | }
36 |
37 | .channelDetailsWrapper {
38 | display: flex;
39 | align-items: center;
40 | margin-bottom: 40px;
41 |
42 | }
43 |
44 | .details > h4 {
45 | color: white;
46 | }
47 |
48 | .details > h5 {
49 | color: #8F8F98;
50 | }
51 |
52 | .details {
53 | margin-top: 10px;
54 | margin-left: 10px;
55 | }
--------------------------------------------------------------------------------
/frontend/components/Channels/ChannelIndexItem/ChannelIndexItem.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import classes from './ChannelIndexItem.module.css'
4 | /* eslint-disable */
5 |
6 | const ChannelIndexItem = ({ user, vod, channel }) => {
7 | return (
8 |
18 | {
19 | // First request returns specific channel info and user info. Need to wait for second request to get followed channels/users for sidebar
20 | Object.keys(users).length > 1 && users[channel.ownerId] ? (
21 |
24 | {users[channel.ownerId].username}
) : null 22 | } 23 |Offline
25 |
9 | {user ? (
10 |
11 |
30 | )
31 | }
32 |
33 |
34 |
35 |
36 |
37 | export default ChannelIndexItem
--------------------------------------------------------------------------------
/frontend/components/App.module.css:
--------------------------------------------------------------------------------
1 | .mainNav {
2 | background-color: #18181B;
3 | /* background-color: whitesmoke; */
4 | height: 55px;
5 | display: flex;
6 | justify-content: space-between;
7 | align-items: center;
8 | box-shadow: 3px 3px 8px #888888;
9 | border-bottom: 2px solid #0E0E10;
10 | width: 100%;
11 | flex-shrink: 0
12 | }
13 |
14 |
15 | .leftNav {
16 | margin-left: 20px;
17 | display: flex;
18 | align-items: center;
19 |
20 | }
21 |
22 | .rightNav {
23 | margin-right: 20px;
24 | }
25 |
26 | .appTitle {
27 | color: whitesmoke;
28 | }
29 |
30 | .mainContainer {
31 | display: flex;
32 | height: 100%;
33 | /* overflow-y: visible; */
34 | }
35 | .mainContainer2 {
36 | height: 100%;
37 | /* overflow-y: visible; */
38 | }
39 |
40 |
41 | .browseContainer {
42 | display: flex;
43 | height: 55px;
44 | margin-left: 20px;
45 | align-items: center;
46 | justify-content: center;
47 | border-bottom: 2px solid #A970FF;
48 | cursor: pointer;
49 | }
50 |
51 | .browseContainer > span {
52 | color: #A970FF;
53 | font-size: 19px;
54 | font-weight: 540;
55 |
56 | }
57 | .line{
58 | height: 40px;
59 | border-left: .5px solid rgb(48,48,50);
60 | margin-left: 20px;
61 |
62 | }
63 |
--------------------------------------------------------------------------------
/frontend/components/MainNav/MainNav.module.css:
--------------------------------------------------------------------------------
1 | .directoryWrapper {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: flex-start;
5 | padding-left: 30px;
6 | padding-top: 40px;
7 | background-color: #0E0E10;
8 | flex-grow: 6;
9 | height: 100vh;
10 | overflow-y: scroll;
11 | }
12 |
13 | .outer {
14 | padding-bottom: 500px;
15 | }
16 |
17 | .directoryWrapper > h1 {
18 | margin-bottom: 30px;
19 | font-size: 50px;
20 | }
21 |
22 |
23 | .tabsWrapper {
24 | display: flex;
25 | width: 300px;
26 | justify-content: flex-start;
27 | align-items: center;
28 | box-sizing: border-box;
29 | margin-bottom: 100px;
30 | margin-top: 20px;
31 | }
32 |
33 | .tabsWrapper > li {
34 | display: flex;
35 | color: white;
36 | list-style: none;
37 | margin-right: 20px;
38 | font-weight: 700;
39 | font-size: 19px;
40 | box-sizing: border-box;
41 | cursor: pointer;
42 | border-bottom: 2px solid #18181B;
43 |
44 | }
45 |
46 | .tabSelected {
47 | box-sizing: border-box;
48 | border-bottom: 2px solid #9147FF !important;
49 | }
50 | .tabSelected > p {
51 | color: #9147FF
52 | }
53 |
54 |
55 | .tabTitle {
56 | box-sizing: border-box;
57 | margin-bottom: 5px;
58 | }
59 |
60 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/application.css:
--------------------------------------------------------------------------------
1 | /*
2 | * This is a manifest file that'll be compiled into application.css, which will include all the files
3 | * listed below.
4 | *
5 | * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
6 | * vendor/assets/stylesheets directory can be referenced here using a relative path.
7 | *
8 | * You're free to add application-wide styles to this file and they'll appear at the bottom of the
9 | * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
10 | * files in this directory. Styles in this file should be added after the last require_* statement.
11 | * It is generally better to create a new file per style scope.
12 | *
13 | *= require_tree .
14 | *= require_self
15 | */
16 |
17 | * {
18 | margin: 0;
19 | }
20 |
21 | h4, h2, li, ul, nav, div {
22 | margin: 0;
23 | padding: 0;
24 | }
25 | h1{
26 | color: white;
27 | }
28 |
29 | a {
30 | text-decoration: none;
31 |
32 |
33 | }
34 | html {
35 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
36 | /* font-family: 'Ubuntu', sans-serif; */
37 | -webkit-font-smoothing: antialiased;
38 | }
39 |
40 | body {
41 | height: 200%;
42 | overflow-y: hidden;
43 | }
44 |
45 |
--------------------------------------------------------------------------------
/frontend/components/Channels/ChannelIndex.module.css:
--------------------------------------------------------------------------------
1 | .indexWrapper {
2 | flex-grow: 6.0;
3 | display: flex;
4 | flex-direction: column;
5 | box-sizing: border-box;
6 |
7 | /* flex-wrap: wrap; */
8 | background-color: #0E0E10;
9 | /* justify-content: center; */
10 | overflow-y: scroll;
11 | height: 100vh;
12 | padding-bottom: 800px;
13 | }
14 |
15 | .indexWrapper > h1 {
16 | padding-top: 200px;
17 | margin-left: 40px;
18 |
19 | }
20 |
21 | .indexWrapper > hr {
22 | width: 90%;
23 | margin-top: 30px;
24 | margin-bottom: 40px;
25 | margin-left: 40px;
26 | background-color: rgb(48,48,50);
27 | height: .5px;
28 | border: none;
29 | }
30 |
31 | .innerContainer{
32 | display: flex;
33 | flex-direction: column;
34 | align-items: flex-start;
35 | width: 100%;
36 | overflow-y: scroll;
37 | /* padding-bottom: 200px; */
38 | margin-left: 41px;
39 | }
40 |
41 | .innerContainer > hr {
42 | width: 90%;
43 | margin-top: 30px;
44 | margin-bottom: 30px;
45 | background-color: rgb(48,48,50);
46 | border: .5px solid rgb(48,48,50) ;
47 | }
48 |
49 |
50 | .channelsContainer {
51 | display: flex;
52 | flex-wrap: wrap;
53 | /* height: 100vh;
54 | overflow-y: scroll; */
55 | }
56 |
57 |
--------------------------------------------------------------------------------
/frontend/components/MainPage/MainPage.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | import React from 'react'
4 | import { Route, Switch } from 'react-router-dom'
5 | import classes from './MainPage.module.css'
6 |
7 | import AuthRoute from '../../util/route_util'
8 | import ChannelShow from '../Channels/ChannelShow/ChannelShow'
9 | import CategoryShow from '../Categories/CategoryShow'
10 | import Dashboard from '../Dashboard/Dashboard'
11 | import SideBar from '../SideBar/SideBar'
12 | import HomePageIndex from '../HomePageIndex/HomePageIndex'
13 | import MainNav from '../MainNav/MainNav'
14 | import AboutPage from '../About/AboutPage'
15 |
16 | const MainPage = () => {
17 |
18 |
19 | return (
20 |
12 | {
13 | vod.videoUrl ? (
14 | ) : ( )
17 | }
18 |
19 |
20 |
21 |
22 |
26 |
27 | ) : null
28 | }
29 | {vod.title}
23 |{user.username}
24 |{vod.category}
25 |
21 |
23 |
30 |
31 |
32 |
33 | )
34 | }
35 |
36 |
37 | export default MainPage
38 |
--------------------------------------------------------------------------------
/frontend/components/Categories/CategoryShow.module.css:
--------------------------------------------------------------------------------
1 | .categoryWrapper {
2 | display: flex;
3 | flex-direction: column;
4 | background-color: #0E0E10;
5 | flex-grow: 6;
6 | overflow-x: hidden;
7 | overflow-y: scroll;
8 | height: 100vh;
9 |
10 | }
11 |
12 | .banner {
13 | display: flex;
14 | flex-direction: column;
15 | }
16 |
17 | .infoArea {
18 | display: flex;
19 | margin: 40px;
20 | }
21 |
22 | .description {
23 | display: flex;
24 | flex-direction: column;
25 | margin-left: 30px;
26 | }
27 |
28 | .description > h5 {
29 | margin-top: 15px;
30 | color:#75757C;
31 | font-size: 14px;
32 | }
33 |
34 | .videoWrapper {
35 | margin-top: 60px;
36 | display: flex;
37 | flex-wrap: wrap;
38 | padding-bottom: 300px;
39 | }
40 |
41 |
42 | .categoryWrapper > hr {
43 | width: 90%;
44 | margin-left: 20px;
45 | margin-top: 30px;
46 | background-color: rgb(48,48,50);
47 | height: .5px;
48 | border: none;
49 | }
50 |
51 |
52 | .videoCountWrapper{
53 | display: flex;
54 | margin: 30px;
55 | }
56 |
57 | .videoCountWrapper h1:nth-child(1) {
58 | margin-right: 10px;
59 | color: #EFEFF1;
60 | }
61 |
62 |
63 | .videoCountWrapper h1:nth-child(2) {
64 | margin-right: 10px;
65 | color: #A4A4AF;
66 | }
67 |
--------------------------------------------------------------------------------
/frontend/components/NavBar/NavBar.module.css:
--------------------------------------------------------------------------------
1 | .mainNav {
2 | background-color: #18181B;
3 | /* background-color: whitesmoke; */
4 | height: 55px;
5 | display: flex;
6 | justify-content: space-between;
7 | align-items: center;
8 | box-shadow: 3px 3px 8px #888888;
9 | border-bottom: 2px solid #0E0E10;
10 | width: 100%;
11 | flex-shrink: 0
12 | }
13 |
14 |
15 | .leftNav {
16 | margin-left: 20px;
17 | display: flex;
18 | align-items: center;
19 |
20 | }
21 |
22 | .rightNav {
23 | margin-right: 20px;
24 | }
25 |
26 | .appTitle {
27 | color: whitesmoke;
28 | }
29 |
30 | .mainContainer {
31 | display: flex;
32 | overflow-y: hidden;
33 | }
34 | .mainContainer2 {
35 | overflow-y: hidden;
36 | }
37 |
38 |
39 | .browseContainer {
40 | display: flex;
41 | box-sizing: border-box;
42 | height: 55px;
43 | margin-left: 20px;
44 | align-items: center;
45 | justify-content: center;
46 | cursor: pointer;
47 | }
48 |
49 |
50 |
51 | .browseContainer > span {
52 | color: white;
53 | font-size: 19.5px;
54 | font-weight: 540;
55 |
56 | }
57 |
58 | .browseContainer > span:hover {
59 | color: #A970FF;
60 |
61 |
62 | }
63 | .line{
64 | height: 40px;
65 | border-left: .5px solid rgb(48,48,50);
66 | margin-left: 20px;
67 |
68 | }
--------------------------------------------------------------------------------
/frontend/components/SideBar/SideBar.module.css:
--------------------------------------------------------------------------------
1 | .sideBar {
2 | background-color: #1F1F23;
3 | height: calc(100vh - 55px);
4 | flex-grow: 1.1;
5 | min-width: 250px;
6 | max-width: 250px;
7 | display: flex;
8 | flex-direction: column;
9 | overflow-y: hidden;
10 |
11 | }
12 |
13 | .sideBarItemContainer {
14 | padding-left: 15px;
15 | padding-top: 3px;
16 | padding-bottom: 3px;
17 | margin-top: 15px;
18 | display: flex;
19 | justify-content: flex-start;
20 | align-items: center;
21 | cursor: pointer;
22 | position: relative;
23 | }
24 | .sideBarItemContainer:hover {
25 | background-color: #3A3A3D;
26 | }
27 |
28 |
29 |
30 |
31 | .sideBarItem {
32 | /* font-size: 25px; */
33 | }
34 |
35 | .logo {
36 | width: 40px;
37 | height: 40px;
38 | border-radius: 50%;
39 | margin-right: 10px;
40 | }
41 |
42 |
43 | .channelDetails {
44 | display: flex;
45 | align-items: center;
46 |
47 | }
48 | .channelDetails > h4 {
49 | color: rgb(231, 231, 240);
50 | font-size: 12px;
51 | }
52 |
53 | .sideBarItemContainer > h5 {
54 | position: absolute;
55 | right: 10px;
56 | color: #C0C0C5;
57 | }
58 |
59 | .sideBar > h3 {
60 | color: white;
61 | margin-top: 20px;
62 | margin-left: 15px;
63 | font-size: 14px;
64 | }
--------------------------------------------------------------------------------
/frontend/actions/follow_actions.js:
--------------------------------------------------------------------------------
1 | export const RECEIVE_FOLLOW = "RECEIVE_FOLLOW"
2 | export const REMOVE_FOLLOW = "REMOVE_FOLLOW"
3 | export const RECEIVE_FOLLOWED_CHANNELS = "RECEIVE_FOLLOWED_CHANNELS"
4 | import * as FollowsAPIUtil from '../util/follows_api_util'
5 |
6 |
7 | const receiveFollow = (follow) => {
8 |
9 | return {
10 | type: RECEIVE_FOLLOW,
11 | follow
12 | }
13 |
14 | }
15 |
16 |
17 | const removeFollow = (follow) => {
18 |
19 | return {
20 | type: REMOVE_FOLLOW,
21 | follow
22 | }
23 |
24 | }
25 |
26 | const receiveFollowedChannels = (channels) => {
27 |
28 | return {
29 | type: RECEIVE_FOLLOWED_CHANNELS,
30 | channels
31 | }
32 |
33 | }
34 |
35 |
36 | export const requestFollowedChannels = (channelId) => (dispatch) => {
37 |
38 | return FollowsAPIUtil.getChannelFollowers(channelId)
39 | .then((channels) => dispatch(receiveFollowedChannels(channels)))
40 | }
41 |
42 |
43 |
44 | export const createFollow = (follow) => dispatch => {
45 |
46 | return FollowsAPIUtil.postFollow(follow)
47 | .then((follow) => dispatch(receiveFollow(follow)))
48 | }
49 |
50 |
51 | export const deleteFollow = (channelId) => dispatch => {
52 |
53 | return FollowsAPIUtil.deleteFollow(channelId)
54 | .then((follow) => dispatch(removeFollow(follow)))
55 | }
--------------------------------------------------------------------------------
/frontend/components/ChannelFollowers/ChannelFollowers.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import React from 'react'
3 | import { connect } from 'react-redux'
4 | import { withRouter } from 'react-router-dom'
5 | import classes from './ChannelFollowers.module.css'
6 | import { requestFollowedChannels } from '../../actions/follow_actions'
7 |
8 | class ChannelFollowers extends React.Component {
9 |
10 | componentDidMount() {
11 | this.props.requestFollowedChannels(this.props.match.params.channelId)
12 | }
13 |
14 | render() {
15 | return (
16 |
17 | {
18 | this.props.channels.map((channel) => {
19 | return (
20 |
28 | )
29 | }
30 | }
31 |
32 |
33 | const mSTP = (state) => {
34 | const channels = state.entities.channels.followedChannels ? Object.values(state.entities.channels.followedChannels) : []
35 | return {
36 | channels,
37 | }
38 | }
39 |
40 | const mDTP = (dispatch) => {
41 | return {
42 | requestFollowedChannels: (channelId) => dispatch(requestFollowedChannels(channelId)),
43 | }
44 | }
45 |
46 | export default withRouter(connect(mSTP, mDTP)(ChannelFollowers))
47 |
--------------------------------------------------------------------------------
/frontend/components/About/AboutPage.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import classes from './AboutPage.module.css'
3 | /* eslint-disable */
4 |
5 |
6 | const AboutPage = () => {
7 |
8 | return (
9 |
21 |
22 | {channel.channelName}
23 |
24 | )
25 | })
26 | }
27 |
10 |
34 |
35 |
36 | )
37 | }
38 |
39 |
40 | export default AboutPage
41 |
--------------------------------------------------------------------------------
/app/views/api/channels/index_first_vods.json.jbuilder:
--------------------------------------------------------------------------------
1 | json.channels do
2 | @channels.each do |channel|
3 | json.set! channel.id do
4 | json.id channel.id
5 | json.ownerId channel.owner_id
6 | json.channelName channel.channel_name
7 | json.logoUrl url_for(channel.logoUrl)
8 | end
9 | end
10 | end
11 |
12 |
13 | json.vods do
14 | @channels.each do |channel|
15 | vod = channel.vods.first
16 | if !vod.nil?
17 | json.set! vod.id do
18 | json.id vod.id
19 | json.channelId vod.channel_id
20 | json.title vod.title
21 | json.category vod.category
22 | json.videoUrl url_for(vod.videoUrl)
23 | end
24 | else
25 | json.set! SecureRandom.base64(64) do
26 | json.id nil
27 | json.channelId channel.id
28 | json.title nil
29 | json.category nil
30 | json.videoUrl nil
31 | end
32 | end
33 | end
34 | end
35 |
36 |
37 | json.users do
38 | @channels.each do |channel|
39 | owner = channel.owner
40 | json.set! owner.id do
41 | json.id owner.id
42 | json.username owner.username
43 | json.channelId channel.id
44 | json.follows owner.followed_channels.map{|channel| channel.id }
45 | end
46 | end
47 | end
--------------------------------------------------------------------------------
/frontend/actions/vod_actions.js:
--------------------------------------------------------------------------------
1 | import * as VodAPIUtil from '../util/vod_api_util'
2 | export const RECEIVE_VOD = "RECEIVE_VOD"
3 | export const RECEIVE_VODS = "RECEIVE_VODS"
4 | export const CLEAR_VODS = "CLEAR_VODS"
5 | export const RECEIVE_RANDOM_VODS = "RECEIVE_RANDOM_VODS"
6 |
7 |
8 | const receiveVod = (vod) => {
9 | return {
10 | type: RECEIVE_VOD,
11 | vod,
12 | }
13 | }
14 |
15 |
16 | const receiveVods = (payload) => {
17 | return {
18 | type: RECEIVE_VODS,
19 | payload,
20 | }
21 | }
22 |
23 | const receiveRandomVods = (payload) => {
24 | return {
25 | type: RECEIVE_RANDOM_VODS,
26 | payload,
27 | }
28 | }
29 |
30 | export const clearVods = () => {
31 | return {
32 | type: CLEAR_VODS,
33 | }
34 | }
35 |
36 |
37 | export const requestVod = (vodId) => (dispatch) => {
38 | return VodAPIUtil.fetchVod(vodId)
39 | .then((vod) => dispatch(receiveVod(vod)))
40 | }
41 |
42 |
43 | export const requestVods = (filter) => (dispatch) => {
44 | return VodAPIUtil.fetchVods(filter)
45 | .then((vods) => dispatch(receiveVods(vods)))
46 | }
47 |
48 | export const requestRandomVods = (filter) => (dispatch) => {
49 | return VodAPIUtil.fetchVods(filter)
50 | .then((vods) => dispatch(receiveRandomVods(vods)))
51 | }
52 |
53 | export const createVod = (formData) => (dispatch) => {
54 | return VodAPIUtil.postVod(formData)
55 | .then((vod) => dispatch(receiveVod(vod)))
56 | .fail((err) => console.log(err))
57 | }
58 |
--------------------------------------------------------------------------------
/frontend/components/Session/TabNavs/TabsNav.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import classes from './TabNavs.module.css'
3 | /* eslint-disable */
4 |
5 |
6 | class TabNavs extends React.Component {
7 |
8 | constructor(props) {
9 | super(props)
10 | this.state = {
11 | currentForm: '',
12 | }
13 | this.changeTab = this.changeTab.bind(this)
14 | }
15 |
16 |
17 | componentDidMount() {
18 | this.setState({ currentForm: this.props.currentForm })
19 | }
20 |
21 | changeTab() {
22 | this.props.clearErrors()
23 | this.props.navToOtherForm()
24 | let nextForm
25 | this.state.currentForm === 'Login' ? nextForm = 'Sign Up' : nextForm = 'Login'
26 | this.setState({ currentForm: nextForm })
27 | }
28 |
29 | render() {
30 | const loginBtnClasses = [classes.navTab]
31 | const signupBtnClasses = [classes.navTab]
32 |
33 | if (this.state.currentForm === 'Sign Up') {
34 | signupBtnClasses.push(classes.selected)
35 | } else {
36 | loginBtnClasses.push(classes.selected)
37 | }
38 |
39 | return (
40 | 
13 | 
19 | 
24 | 
29 | -
41 |
- 42 | Log In 43 | 44 |
- 45 | Sign Up 46 | 47 |
26 |
31 |
39 | )
40 | }
41 | }
42 |
43 |
44 | const mSTP = (state) => {
45 | return {
46 | vods: Object.values(state.entities.vods),
47 | }
48 | }
49 |
50 | const mDTP = (dispatch) => {
51 | return {
52 | requestVods: (filter) => dispatch(requestVods(filter)),
53 | clearVods: () => dispatch(clearVods()),
54 | }
55 | }
56 |
57 |
58 | export default withRouter(connect(mSTP, mDTP)(ChannelVideosIndex))
59 |
--------------------------------------------------------------------------------
/frontend/components/Modal/Modal.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import React from 'react'
3 | import { connect } from 'react-redux'
4 | import { closeModal } from '../../actions/modal_actions'
5 | import LoginContainerComponent from '../Session/login_container_component'
6 | import SignupContainerComponent from '../Session/SignupForm/signup_container_component'
7 |
8 | import classes from './Modal.module.css'
9 | import DemoForm from '../Session/DemoForm/DemoForm'
10 | import SuccessMessage from '../Dashboard/SuccessMessage'
11 |
12 |
13 | const Modal = ({ modal, closeModal }) => {
14 | if (!modal) {
15 | return null
16 | }
17 |
18 | let component
19 | switch (modal) {
20 | case 'login':
21 | component =
27 |
30 | Videos
28 |{this.props.vods.length}
29 |31 |
32 | {
33 | this.props.vods.map((vod, idx) => {
34 | return
38 |
38 |
42 | )
43 |
44 | }
45 |
46 |
47 | const mSTP = (state) => {
48 | return {
49 | modal: state.ui.modal,
50 | }
51 | }
52 |
53 |
54 | const mDTP = (dispatch) => {
55 | return {
56 | closeModal: () => dispatch(closeModal()),
57 | }
58 | }
59 |
60 |
61 | export default connect(mSTP, mDTP)(Modal)
--------------------------------------------------------------------------------
/frontend/components/Vods/VodsIndex/ChannelVideosIndex.module.css:
--------------------------------------------------------------------------------
1 | .indexWrapper {
2 | display: flex;
3 | flex-direction: column;
4 | flex-wrap: wrap;
5 | }
6 |
7 | .vodsWrapper {
8 | display: flex;
9 | flex-wrap: wrap;
10 | }
11 |
12 |
13 | .vodItem {
14 | display: flex;
15 | flex-direction: column;
16 | justify-content: center;
17 | align-items: flex-start;
18 | margin: 30px;
19 | box-sizing: border-box;
20 |
21 | }
22 |
23 | .vodItem > h4 {
24 | color: white;
25 | margin-top: 10px;
26 |
27 | }
28 |
29 | .vodItem > h6 {
30 | margin-top: 5px;
31 | color: rgb(169, 169, 179);
32 | font-size: 12px;
33 |
34 | }
35 |
36 | .vodThumb {
37 | width: 100%;
38 | height: 160px;
39 | background-color: white;
40 | display: flex;
41 | justify-content: center;
42 | align-items: center;
43 | }
44 |
45 | .videoPlayer {
46 | width: 300px;
47 | height: 160px;
48 | box-sizing: border-box;
49 | cursor: pointer;
50 | border: 1px solid transparent;
51 | }
52 |
53 | .videoPlayer:hover {
54 | border: 1px solid blue;
55 |
56 | }
57 |
58 |
59 | .videoCountWrapper{
60 | display: flex;
61 | margin: 30px;
62 | }
63 |
64 | .videoCountWrapper h1:nth-child(1) {
65 | margin-right: 10px;
66 | color: #EFEFF1;
67 | }
68 |
69 |
70 | .videoCountWrapper h1:nth-child(2) {
71 | margin-right: 10px;
72 | color: #A4A4AF;
73 | }
74 |
75 |
76 |
77 | .indexWrapper > hr {
78 | width: 90%;
79 | margin-left: 20px;
80 | margin-top: 30px;
81 | margin-bottom: 30px;
82 | background-color: rgb(48,48,50);
83 | height: .5px;
84 | border: none;
85 | }
--------------------------------------------------------------------------------
/config/puma.rb:
--------------------------------------------------------------------------------
1 | # Puma can serve each request in a thread from an internal thread pool.
2 | # The `threads` method setting takes two numbers: a minimum and maximum.
3 | # Any libraries that use thread pools should be configured to match
4 | # the maximum value specified for Puma. Default is set to 5 threads for minimum
5 | # and maximum; this matches the default thread size of Active Record.
6 | #
7 | threads_count = ENV.fetch("RAILS_MAX_THREADS") { 5 }
8 | threads threads_count, threads_count
9 |
10 | # Specifies the `port` that Puma will listen on to receive requests; default is 3000.
11 | #
12 | port ENV.fetch("PORT") { 3000 }
13 |
14 | # Specifies the `environment` that Puma will run in.
15 | #
16 | environment ENV.fetch("RAILS_ENV") { "development" }
17 |
18 | # Specifies the `pidfile` that Puma will use.
19 | pidfile ENV.fetch("PIDFILE") { "tmp/pids/server.pid" }
20 |
21 | # Specifies the number of `workers` to boot in clustered mode.
22 | # Workers are forked webserver processes. If using threads and workers together
23 | # the concurrency of the application would be max `threads` * `workers`.
24 | # Workers do not work on JRuby or Windows (both of which do not support
25 | # processes).
26 | #
27 | # workers ENV.fetch("WEB_CONCURRENCY") { 2 }
28 |
29 | # Use the `preload_app!` method when specifying a `workers` number.
30 | # This directive tells Puma to first boot the application and load code
31 | # before forking the application. This takes advantage of Copy On Write
32 | # process behavior so workers use less memory.
33 | #
34 | # preload_app!
35 |
36 | # Allow puma to be restarted by `rails restart` command.
37 | plugin :tmp_restart
38 |
--------------------------------------------------------------------------------
/frontend/components/Dashboard/VideoForm.module.css:
--------------------------------------------------------------------------------
1 | .videoUploadWrapper {
2 |
3 | margin-top: 80px;
4 | margin-left: 20px;
5 | padding-bottom: 700px;
6 |
7 | /* display: flex; */
8 |
9 | }
10 |
11 |
12 | .videoUploadWrapper > h2 {
13 | color: white;
14 | margin-bottom: 15px;
15 |
16 | }
17 |
18 | .videoForm {
19 | display: flex;
20 | align-items: center;
21 | width: 900px;
22 | height: 380px;
23 | background-color: #18181B;
24 | border: 1px solid #303032;
25 | border-radius: 7px;
26 | }
27 |
28 | .videoPlayer {
29 | padding: 30px;
30 | width: 400px;
31 |
32 | }
33 |
34 |
35 | .formInput {
36 | width: calc(100% - 10px);
37 | background-color: #3A3A3D;
38 | color: white;
39 | border-radius: 5px;
40 | box-sizing: border-box;
41 | height: 27px;
42 | margin-top: 7px;
43 | padding-left: 10px;
44 | border: none;
45 |
46 | }
47 |
48 | .formInput:focus {
49 | border: solid #9147FF 2.2px;
50 | background-color: rgb(0, 0, 0);
51 | border-radius: 5px;
52 | outline: none;
53 |
54 | }
55 |
56 | .formLabel {
57 | width: 90%;
58 | margin-bottom: 25px;
59 | font-size: 12px;
60 | }
61 |
62 |
63 | .categoryInput {
64 | width: 48%;
65 | background-color: #3A3A3D;
66 | color: white;
67 | box-sizing: border-box;
68 | border-radius: 5px;
69 | margin-top: 5px;
70 | height: 32px;
71 | margin-right: 7px;
72 | cursor: pointer;
73 |
74 | }
75 |
76 |
77 | .categoryInput:focus {
78 | border: solid #9147FF 2.2px;
79 | background-color: rgb(0, 0, 0);
80 | border-radius: 5px;
81 | outline: none;
82 | }
83 |
--------------------------------------------------------------------------------
/frontend/components/Channels/ChannelShow/ChannelShow.module.css:
--------------------------------------------------------------------------------
1 | .channelWrapper {
2 | flex-grow: 6.0;
3 | background-color: #0E0E10;
4 | display: flex;
5 | height: 100vh;
6 | overflow-y: scroll !important;
7 |
8 | }
9 |
10 |
11 | .channelContents {
12 | display: flex;
13 | flex-direction: column;
14 | background-color: #0E0E10;
15 | width: 100px;
16 | flex-grow: 3;
17 |
18 | }
19 |
20 | nav {
21 | background-color: #18181B;
22 | height: 48px;
23 | border-bottom: 2px solid #18181B ;
24 | display: flex;
25 | justify-content: space-between;
26 | align-items: center;
27 |
28 | }
29 |
30 | .leftNav {
31 | width: 100px;
32 | }
33 |
34 | .rightNav {
35 | width: 500px;
36 | }
37 |
38 |
39 | .right {
40 | min-width: 342px;
41 | max-width: 342px;
42 | flex: 1;
43 | height: calc(100vh - 55px);
44 | }
45 |
46 | .followWrapper {
47 | display: flex;
48 | justify-content: center;
49 | align-items: center;
50 | width: 100px;
51 | height: 30px;
52 | border-radius: 5px;
53 | background-color: #9147FF;
54 | color: white;
55 | margin-right: 20px;
56 | cursor: pointer;
57 | }
58 |
59 | .followWrapper:hover {
60 | opacity: .7;
61 |
62 | }
63 |
64 |
65 | .followWrapper > h5 {
66 | color: white;
67 | margin-left: 5px;
68 |
69 | }
70 |
71 | .followIcon {
72 | color: #EFEFF1;
73 | }
74 |
75 |
76 | .userIconWrapper {
77 | display: flex;
78 | justify-content: center;
79 | align-self: center;
80 | border-radius: 50%;
81 | z-index: 6000;
82 |
83 | }
84 |
85 | .userIcon{
86 | border-radius: 50%;
87 | width: 40px;
88 | height: 40px;
89 | cursor: pointer;
90 | }
91 |
92 |
93 |
--------------------------------------------------------------------------------
/frontend/reducers/channels_reducer.js:
--------------------------------------------------------------------------------
1 | import { RECEIVE_CHANNELS, UPDATE_CHANNEL, RECEIVE_CHANNEL, CLEAR_CHANNELS, RECEIVE_SEARCHED_CHANNELS } from '../actions/channel_actions'
2 | import { RECEIVE_NEW_USER } from '../actions/session_actions'
3 | import {RECEIVE_VODS, RECEIVE_RANDOM_VODS } from '../actions/vod_actions'
4 | import { RECEIVE_FOLLOWED_CHANNELS } from '../actions/follow_actions'
5 |
6 |
7 | const channelsReducer = (state = {}, action) => {
8 | Object.freeze(state);
9 | let newState = Object.assign({}, state);
10 |
11 | switch (action.type) {
12 | case RECEIVE_CHANNELS:
13 | return Object.assign({}, state, action.payload.channels)
14 | case RECEIVE_CHANNEL:
15 | return Object.assign({}, state, action.channel)
16 | case UPDATE_CHANNEL:
17 | newState = Object.assign({}, state)
18 | const channel = Object.values(action.channel)[0]
19 | newState[channel.id] = channel
20 | return newState
21 | case RECEIVE_NEW_USER:
22 | return Object.assign({}, state, action.payload.channel)
23 | case RECEIVE_VODS:
24 | return Object.assign({}, state, action.payload.channels)
25 | case RECEIVE_RANDOM_VODS:
26 | newState = Object.assign({}, state)
27 | newState['randomVodChannels'] = action.payload.channels
28 | return newState
29 | case RECEIVE_SEARCHED_CHANNELS:
30 | newState = Object.assign({}, state)
31 | newState['searched'] = action.payload.channels
32 | return newState
33 | case RECEIVE_FOLLOWED_CHANNELS:
34 | newState = Object.assign({}, state)
35 | newState['followedChannels'] = action.channels
36 | return newState
37 | case CLEAR_CHANNELS:
38 | return {}
39 | default:
40 | return state
41 | }
42 | }
43 |
44 |
45 |
46 | export default channelsReducer;
47 |
48 |
49 |
--------------------------------------------------------------------------------
/frontend/components/Channels/ChannelIndex.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import React from 'react'
3 | import { connect } from 'react-redux'
4 | import { withRouter } from 'react-router-dom'
5 | import { requestChannels } from '../../actions/channel_actions'
6 | import { requestVods, clearVods } from '../../actions/vod_actions'
7 | import classes from './ChannelIndex.module.css'
8 | import ChannelIndexItem from './ChannelIndexItem/ChannelIndexItem'
9 |
10 | class ChannelIndex extends React.Component {
11 |
12 |
13 | componentDidMount() {
14 | const { match, requestChannels } = this.props
15 | if (match.path === '/') {
16 | requestChannels({ firstVods: true })
17 | } else {
18 | requestChannels({ allChannels: true })
19 | }
20 | }
21 |
22 | componentWillUnmount() {
23 | this.props.clearVods()
24 | }
25 |
26 |
27 | render() {
28 | return (
29 | e.stopPropagation()}>
39 | {component}
40 |
41 |
30 | {
31 | this.props.vods.map((vod, idx) => {
32 | const channel = this.props.channels[vod.channelId]
33 | let user
34 | channel ? user = this.props.users[channel.ownerId] : user = null
35 | return
39 | )
40 | }
41 | }
42 |
43 | const mSTP = (state) => {
44 | return {
45 | channels: state.entities.channels,
46 | users: state.entities.users,
47 | vods: Object.values(state.entities.vods),
48 | }
49 | }
50 |
51 |
52 | const mDTP = (dispatch) => {
53 | return {
54 | requestChannels: (filter) => dispatch(requestChannels(filter)),
55 | requestVods: () => dispatch(requestVods()),
56 | clearVods: () => dispatch(clearVods()),
57 | }
58 | }
59 |
60 |
61 | export default withRouter(connect(mSTP, mDTP)(ChannelIndex))
62 |
--------------------------------------------------------------------------------
/frontend/components/Carousel/Carousel.module.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | [type=radio] {
4 | display: none;
5 | }
6 |
7 | #slider {
8 | height: 35vw;
9 | position: relative;
10 | perspective: 1000px;
11 | transform-style: preserve-3d;
12 | }
13 |
14 | #slider label {
15 | margin: auto;
16 | width: 60%;
17 | height: 100%;
18 | border-radius: 4px;
19 | position: absolute;
20 | left: 0; right: 0;
21 | cursor: pointer;
22 | transition: transform 0.4s ease;
23 | }
24 |
25 | #s1:checked ~ #slide4, #s2:checked ~ #slide5,
26 | #s3:checked ~ #slide1, #s4:checked ~ #slide2,
27 | #s5:checked ~ #slide3 {
28 | box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
29 | transform: translate3d(-30%,0,-200px);
30 | }
31 |
32 | #s1:checked ~ #slide5, #s2:checked ~ #slide1,
33 | #s3:checked ~ #slide2, #s4:checked ~ #slide3,
34 | #s5:checked ~ #slide4 {
35 | box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
36 | transform: translate3d(-15%,0,-100px);
37 | }
38 |
39 | #s1:checked ~ #slide1, #s2:checked ~ #slide2,
40 | #s3:checked ~ #slide3, #s4:checked ~ #slide4,
41 | #s5:checked ~ #slide5 {
42 | box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
43 | transform: translate3d(0,0,0);
44 | }
45 |
46 | #s1:checked ~ #slide2, #s2:checked ~ #slide3,
47 | #s3:checked ~ #slide4, #s4:checked ~ #slide5,
48 | #s5:checked ~ #slide1 {
49 | box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
50 | transform: translate3d(15%,0,-100px);
51 | }
52 |
53 | #s1:checked ~ #slide3, #s2:checked ~ #slide4,
54 | #s3:checked ~ #slide5, #s4:checked ~ #slide1,
55 | #s5:checked ~ #slide2 {
56 | box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
57 | transform: translate3d(30%,0,-200px);
58 | }
59 |
60 | #slide1 { background: #00BCD4 }
61 | #slide2 { background: #4CAF50 }
62 | #slide3 { background: #CDDC39 }
63 | #slide4 { background: #FFC107 }
64 | #slide5 { background: #FF5722 }
--------------------------------------------------------------------------------
/frontend/components/Categories/Categories.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | import React from 'react'
4 | import { connect } from 'react-redux'
5 | import { withRouter, Link } from 'react-router-dom'
6 | import { clearVods } from '../../actions/vod_actions'
7 | import { requestCategories } from '../../actions/category_actions'
8 | import classes from './Categories.module.css'
9 |
10 | class Categories extends React.Component {
11 |
12 | componentDidMount() {
13 | this.props.requestCategories()
14 | }
15 |
16 | componentWillUnmount() {
17 | this.props.clearVods()
18 | }
19 |
20 | render() {
21 | return (
22 |
23 | {
24 | this.props.categories.map((category, idx) => {
25 | const key = category.id || idx
26 | return (
27 |
28 |
41 | )
42 | }
43 | }
44 |
45 |
46 | const mSTP = (state) => {
47 | return {
48 | categories: Object.values(state.entities.categories),
49 | }
50 | }
51 |
52 | const mDTP = (dispatch) => {
53 | return {
54 | clearVods: () => dispatch(clearVods()),
55 | requestCategories: () => dispatch(requestCategories()),
56 | }
57 | }
58 |
59 | export default withRouter(connect(mSTP, mDTP)(Categories))
60 |
--------------------------------------------------------------------------------
/public/500.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
29 |
36 |
37 | )
38 | })
39 | }
40 |
30 |
35 |
31 | 
32 |
33 |
32 | {category.name}
34 |
60 |
65 |
66 |
67 |
--------------------------------------------------------------------------------
/frontend/components/SessionControls/DropDownMenu/DropDownMenu.module.css:
--------------------------------------------------------------------------------
1 | .dropDown{
2 | position: absolute;
3 | width: 170px;
4 | height: 300px;
5 | background-color: #18181B;
6 | right: 5px;
7 | top: 50px;
8 | color: white;
9 | border-radius: 7px;
10 | z-index: 99999;
11 | -webkit-box-shadow: 4px 3px 5px 0px rgba(0,0,0,1);
12 | -moz-box-shadow: 4px 3px 5px 0px rgba(0,0,0,1);
13 | box-shadow: 4px 3px 5px 0px rgba(0,0,0,1);
14 | word-wrap: break-word;
15 |
16 | }
17 |
18 | .dropDown > li {
19 | font-size: 13px;
20 | list-style: none;
21 | color:white;
22 | margin: 5px;
23 | padding: 10px;
24 | cursor: pointer;
25 | }
26 |
27 | .dropDown > li:hover {
28 | background-color: rgb(58,58,61);
29 |
30 | }
31 |
32 | .hide {
33 | display: none;
34 | }
35 |
36 | .show {
37 | display: block;
38 | }
39 |
40 |
41 | .topDiv {
42 | display: flex;
43 | /* border-bottom: 1px solid lightgrey; */
44 | padding: 8px;
45 | margin-bottom: 20px;
46 |
47 |
48 |
49 | }
50 |
51 | .userIconMain {
52 | color: white;
53 | font-size: large;
54 | /* margin-left: 10px; */
55 | font-size: 23px;
56 | padding: 10px;
57 | border-radius: 50%;
58 | background-color: #00BAA3;
59 | cursor: pointer;
60 | }
61 |
62 |
63 | .dropDown > hr {
64 | width: 85%;
65 | margin: auto;
66 | background-color: rgb(48,48,50);
67 | height: .5px;
68 | border: none;
69 | }
70 |
71 | .topDiv > h5 {
72 | margin-left: 8px;
73 | margin-top: 4px;
74 | font-size: 11.5px;
75 | font-weight: 700;
76 |
77 | }
78 |
79 | .userIconWrapper {
80 | display: flex;
81 | justify-content: center;
82 | align-self: center;
83 | border-radius: 50%;
84 | z-index: 6000;
85 |
86 | }
87 |
88 | .userIcon{
89 | border-radius: 50%;
90 | width: 45px;
91 | height: 45px;
92 | cursor: pointer;
93 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Fidget",
3 | "private": true,
4 | "dependencies": {
5 | "@babel/core": "^7.9.0",
6 | "@babel/preset-env": "^7.9.5",
7 | "@babel/preset-react": "^7.9.4",
8 | "@fortawesome/fontawesome-svg-core": "^1.2.28",
9 | "@fortawesome/free-solid-svg-icons": "^5.13.0",
10 | "@fortawesome/react-fontawesome": "^0.1.9",
11 | "babel-loader": "^8.1.0",
12 | "file-loader": "^6.0.0",
13 | "react": "^16.13.1",
14 | "react-dom": "^16.13.1",
15 | "react-redux": "^7.2.0",
16 | "react-router-dom": "^5.1.2",
17 | "react-typist": "^2.0.5",
18 | "redux": "^4.0.5",
19 | "redux-logger": "^3.0.6",
20 | "redux-thunk": "^2.3.0",
21 | "webpack": "^4.43.0",
22 | "webpack-cli": "^3.3.11"
23 | },
24 | "description": "This README would normally document whatever steps are necessary to get the application up and running.",
25 | "version": "1.0.0",
26 | "main": "index.js",
27 | "directories": {
28 | "lib": "lib",
29 | "test": "test"
30 | },
31 | "scripts": {
32 | "test": "echo \"Error: no test specified\" && exit 1",
33 | "webpack": "webpack --mode=development --watch",
34 | "postinstall": "webpack"
35 | },
36 | "engines": {
37 | "node": "10.13.0",
38 | "npm": "6.4.1"
39 | },
40 | "repository": {
41 | "type": "git",
42 | "url": "git+https://github.com/ccoombsesmail/Fidget.git"
43 | },
44 | "keywords": [],
45 | "author": "",
46 | "license": "ISC",
47 | "bugs": {
48 | "url": "https://github.com/ccoombsesmail/Fidget/issues"
49 | },
50 | "homepage": "https://github.com/ccoombsesmail/Fidget#readme",
51 | "devDependencies": {
52 | "css-loader": "^3.5.3",
53 | "eslint": "^6.8.0",
54 | "eslint-config-airbnb": "^18.1.0",
55 | "eslint-plugin-import": "^2.20.2",
56 | "eslint-plugin-jsx-a11y": "^6.2.3",
57 | "eslint-plugin-react": "^7.20.0",
58 | "eslint-plugin-react-hooks": "^2.5.1",
59 | "style-loader": "^1.1.0"
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/public/422.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
61 |
63 | We're sorry, but something went wrong.
62 |If you are the application owner check the logs for more information.
64 |
60 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/public/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
61 |
64 | The change you wanted was rejected.
62 |Maybe you tried to change something you didn't have access to.
63 |If you are the application owner check the logs for more information.
65 |
60 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/frontend/actions/channel_actions.js:
--------------------------------------------------------------------------------
1 | export const RECEIVE_CHANNELS = 'RECEIVE_CHANNELS'
2 | export const RECEIVE_CHANNEL = 'RECEIVE_CHANNEL'
3 | export const UPDATE_CHANNEL = "UPDATE_CHANNEL"
4 | export const CLEAR_CHANNELS = "CLEAR_CHANNELS"
5 | export const RECEIVE_SEARCHED_CHANNELS = "RECEIVE_SEARCHED_CHANNELS"
6 | import * as ChannelAPIUtil from '../util/channels_api_util'
7 |
8 |
9 |
10 | const receiveChannel = (channel) => {
11 |
12 | return {
13 | type: RECEIVE_CHANNEL,
14 | channel
15 | }
16 | }
17 |
18 |
19 | const receiveChannels = (payload) => {
20 |
21 | return{
22 | type: RECEIVE_CHANNELS,
23 | payload
24 | }
25 |
26 | }
27 |
28 | const receiveSearchedChannels = (payload) => {
29 |
30 | return{
31 | type: RECEIVE_SEARCHED_CHANNELS,
32 | payload
33 | }
34 | }
35 |
36 |
37 |
38 | const receiveUpdatedChannel = (channel) => {
39 |
40 | return {
41 | type: UPDATE_CHANNEL,
42 | channel
43 | }
44 | }
45 |
46 |
47 | export const clearChannels = () => {
48 |
49 | return {
50 | type: CLEAR_CHANNELS,
51 | }
52 | }
53 |
54 |
55 |
56 | export const requestChannel = (channelId) => dispatch => {
57 |
58 | return ChannelAPIUtil.fetchChannel(channelId)
59 | .then((channel) => dispatch(receiveChannel(channel)))
60 | }
61 |
62 |
63 |
64 | export const requestChannels = (filter) => dispatch => {
65 |
66 | return ChannelAPIUtil.fetchChannels(filter)
67 | .then((payload) => dispatch(receiveChannels(payload)))
68 | }
69 |
70 |
71 | export const requestSearchedChannels = (filter) => dispatch => {
72 |
73 | return ChannelAPIUtil.fetchChannels(filter)
74 | .then((payload) => dispatch(receiveSearchedChannels(payload)))
75 | }
76 |
77 |
78 | export const updateChannel = (channelOwnerId, formData) => dispatch => {
79 |
80 | return ChannelAPIUtil.updateChannel(channelOwnerId, formData)
81 | .then(channel => dispatch(receiveUpdatedChannel(channel)))
82 | }
83 |
84 |
--------------------------------------------------------------------------------
/app/models/user.rb:
--------------------------------------------------------------------------------
1 | class User < ApplicationRecord
2 | validates :username, :session_token, presence: true, uniqueness: true
3 | validates :password_digest, presence: true
4 | validates :password, length: {minimum: 6, allow_nil: true}
5 | validates_email_format_of :email, :message => 'Please enter a valid email'
6 | validate :dob_is_valid_date
7 |
8 |
9 | attr_reader :password
10 | after_initialize :ensure_session_token
11 |
12 | has_one :channel,
13 | foreign_key: :owner_id,
14 | class_name: :Channel,
15 | dependent: :destroy
16 |
17 | has_many :follows
18 |
19 |
20 | has_many :followed_channels,
21 | through: :follows,
22 | source: :channel
23 |
24 |
25 | def self.find_by_credentials(username, password)
26 | queryResult = []
27 | user = User.find_by(username: username)
28 | # return nil if user.nil?
29 |
30 | queryResult.push(user)
31 | return queryResult.push({usernameError: "This username does not exist"}) if user.nil?
32 |
33 | user.verify_password(password) ? queryResult : [nil, { passwordError: "That password was incorrect. Please try again."}]
34 |
35 | end
36 |
37 |
38 | def verify_password(password)
39 | BCrypt::Password.new(self.password_digest).is_password?(password)
40 | end
41 |
42 |
43 |
44 | def password=(password)
45 | @password = password
46 | self.password_digest = BCrypt::Password.create(password)
47 | end
48 |
49 |
50 | def reset_session_token!
51 | self.session_token = SecureRandom.base64(64)
52 | self.save
53 | self.session_token
54 | end
55 |
56 |
57 | private
58 |
59 | def ensure_session_token
60 | self.session_token ||= SecureRandom.base64(64)
61 | end
62 |
63 | def dob_is_valid_date
64 | errors.add(:dob, 'Please Enter A Valid Date Of Birth') if ((Date.parse(dob.to_s) rescue ArgumentError) == ArgumentError)
65 |
66 | end
67 |
68 |
69 | end
70 |
--------------------------------------------------------------------------------
/frontend/components/ChannelHome/ChannelHome.module.css:
--------------------------------------------------------------------------------
1 | .videoPlayer {
2 | width: 100%;
3 | height: 700px;
4 | padding-bottom: 600px;
5 |
6 | }
7 |
8 | .btnWrapper {
9 | height: 800px;
10 | display: flex;
11 | align-items: center;
12 | justify-content: center;
13 | }
14 |
15 | .btnWrapper > button {
16 | margin-top: -100px;
17 | padding: 10px;
18 | width: 300px;
19 | background-color: #9147FF;
20 | border: none;
21 | color: whitesmoke;
22 | text-decoration: none;
23 | border-radius: 5px;
24 | font-weight: 800;
25 | letter-spacing: 1px;
26 | text-transform: uppercase;
27 | font-size: 17px;
28 | margin-right: 12px;
29 | font-family: 'Ubuntu', sans-serif;
30 | cursor: pointer;
31 | -webkit-animation: pulse 2.3s ease-in-out infinite alternate; /* Safari 4+ */
32 | -moz-animation: pulse 2.3s ease-in-out infinite alternate; /* Fx 5+ */
33 | -o-animation: pulse 2.3s ease-in-out infinite alternate; /* Opera 12+ */
34 | animation: pulse 2.3s ease-in-out infinite alternate; /* IE 10+, Fx 29+ */
35 |
36 | }
37 |
38 | .peerVideoWrapper {
39 | display: flex;
40 | }
41 |
42 |
43 |
44 | @keyframes pulse {
45 | from {
46 | box-shadow: 0px 0px 4px #9147FF;
47 |
48 | }
49 | to {
50 | box-shadow: 0px 0px 40px #9b5bfa;
51 |
52 | }
53 | }
54 |
55 |
56 | @-webkit-keyframes pulse {
57 | from {
58 | box-shadow: 0px 0px 4px #9147FF;
59 |
60 | }
61 | to {
62 | box-shadow: 0px 0px 40px #9b5bfa;
63 |
64 | }
65 | }
66 | @-moz-keyframes pulse {
67 | from {
68 | box-shadow: 0px 0px 4px #9147FF;
69 |
70 | }
71 | to {
72 | box-shadow: 0px 0px 40px #9b5bfa;
73 |
74 | }
75 | }
76 | @-o-keyframes pulse {
77 | from {
78 | box-shadow: 0px 0px 4px #9147FF;
79 |
80 | }
81 | to {
82 | box-shadow: 0px 0px 40px #9b5bfa;
83 |
84 | }
85 | }
86 | @keyframes pulse {
87 | from {
88 | box-shadow: 0px 0px 4px #9147FF;
89 |
90 | }
91 | to {
92 | box-shadow: 0px 0px 40px #9b5bfa;
93 |
94 | }
95 | }
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = {
4 | entry: path.join(__dirname, "frontend", "index.jsx"),
5 | output: {
6 | path: path.join(__dirname, "app", "assets", "javascripts"),
7 | filename: "bundle.js"
8 | },
9 | resolve: {
10 | extensions: [".js", ".jsx", "*"]
11 | },
12 | module: {
13 | rules: [
14 | {
15 | exclude: /(node_modules)/,
16 | use: {
17 | loader: "babel-loader",
18 | query: {
19 | presets: ["@babel/env", "@babel/react"]
20 | }
21 | }
22 |
23 | },
24 | {
25 | test: /\.css$/,
26 | use: [
27 | 'style-loader',
28 | {
29 | loader: 'css-loader',
30 | options: {
31 | importLoaders: 1,
32 | modules: {
33 | mode: 'local',
34 | localIdentName: '[name]__[local]--[hash:base64:5]'
35 | }
36 | }
37 | }
38 | ],
39 | include: /\.module\.css$/
40 | },
41 | {
42 | test: /\.css$/,
43 | use: [
44 | 'style-loader',
45 | 'css-loader',
46 |
47 | ],
48 | exclude: /\.module\.css$/
49 | },
50 | {
51 | test: /\.(png|jp(e*)g|svg|gif)$/,
52 | use: [
53 | {
54 | loader: 'file-loader',
55 | options: {
56 | name: '/images/[hash]-[name].[ext]',
57 | },
58 | },
59 | ],
60 | }
61 | ]
62 | },
63 | devtool: "source-map"
64 | };
--------------------------------------------------------------------------------
/config/environments/test.rb:
--------------------------------------------------------------------------------
1 | Rails.application.configure do
2 | # Settings specified here will take precedence over those in config/application.rb.
3 |
4 | # The test environment is used exclusively to run your application's
5 | # test suite. You never need to work with it otherwise. Remember that
6 | # your test database is "scratch space" for the test suite and is wiped
7 | # and recreated between test runs. Don't rely on the data there!
8 | config.cache_classes = true
9 |
10 | # Do not eager load code on boot. This avoids loading your whole application
11 | # just for the purpose of running a single test. If you are using a tool that
12 | # preloads Rails for running tests, you may have to set it to true.
13 | config.eager_load = false
14 |
15 | # Configure public file server for tests with Cache-Control for performance.
16 | config.public_file_server.enabled = true
17 | config.public_file_server.headers = {
18 | 'Cache-Control' => "public, max-age=#{1.hour.to_i}"
19 | }
20 |
21 | # Show full error reports and disable caching.
22 | config.consider_all_requests_local = true
23 | config.action_controller.perform_caching = false
24 |
25 | # Raise exceptions instead of rendering exception templates.
26 | config.action_dispatch.show_exceptions = false
27 |
28 | # Disable request forgery protection in test environment.
29 | config.action_controller.allow_forgery_protection = false
30 |
31 | # Store uploaded files on the local file system in a temporary directory
32 | config.active_storage.service = :test
33 |
34 | config.action_mailer.perform_caching = false
35 |
36 | # Tell Action Mailer not to deliver emails to the real world.
37 | # The :test delivery method accumulates sent emails in the
38 | # ActionMailer::Base.deliveries array.
39 | config.action_mailer.delivery_method = :test
40 |
41 | # Print deprecation notices to the stderr.
42 | config.active_support.deprecation = :stderr
43 |
44 | # Raises error for missing translations
45 | # config.action_view.raise_on_missing_translations = true
46 | end
47 |
--------------------------------------------------------------------------------
/frontend/components/SideBar/SideBar.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { connect } from 'react-redux'
3 | import { withRouter } from 'react-router-dom'
4 | import classes from './SideBar.module.css'
5 | import { requestChannels } from '../../actions/channel_actions'
6 | import { getFollowedChannels } from '../../util/selectors'
7 | import SideBarItem from './SideBarItem'
8 | /* eslint-disable */
9 |
10 |
11 | class SideBar extends React.Component {
12 |
13 | componentDidMount() {
14 | this.props.requestChannels()
15 | }
16 |
17 |
18 | render() {
19 | return (
20 |
43 | )
44 | }
45 | }
46 |
47 |
48 | const mSTP = (state) => {
49 | const currentUser = state.entities.users[state.session.currentUserId]
50 | let followedChannels = []
51 | if (currentUser) {
52 | followedChannels = getFollowedChannels(state.entities.channels, currentUser)
53 | }
54 | return {
55 | channels: Object.values(state.entities.channels).slice(0,7),
56 | users: state.entities.users,
57 | followedChannels: followedChannels.slice(0, 7),
58 | }
59 | }
60 |
61 |
62 | const mDTP = (dispatch) => {
63 | return {
64 | requestChannels: () => dispatch(requestChannels()),
65 | }
66 | }
67 |
68 |
69 | export default withRouter(connect(mSTP,mDTP)(SideBar))
70 |
--------------------------------------------------------------------------------
/frontend/components/Session/ErrorBox/ErrorBox.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import classes from './ErrorBox.module.css'
3 | /* eslint-disable */
4 |
5 |
6 | const ErrorBox = ({ errors, navToOtherForm, passwordMatch}) => {
7 |
8 | let errorMessage = null
9 |
10 | if (errors['usernameError']) {
11 | errorMessage = (
12 | <>
13 |
14 | {errors['usernameError']}
15 |
16 |
61 |
64 | The page you were looking for doesn't exist.
62 |You may have mistyped the address or the page may have moved.
63 |If you are the application owner check the logs for more information.
65 |17 | Want to create a new account? 18 |
19 | 20 | ) 21 | } else if (errors['passwordError']) { 22 | errorMessage = ( 23 | <> 24 | 25 | {errors['passwordError']} 26 | 27 |28 | Forgot your password? 29 |
30 | 31 | ) 32 | } else if (!passwordMatch) { 33 | errorMessage = ( 34 | <> 35 | 36 | Passwords do not match 37 | 38 |39 | {/* Forgot your password? */} 40 |
41 | 42 | ) 43 | } else if (Object.values(errors).length === 0) { 44 | errorMessage = null 45 | } else{ 46 | errorMessage = ( 47 | <> 48 | 49 | {errors[0]} 50 | 51 |52 | {/* Forgot your password? */} 53 |
54 | 55 | ) 56 | } 57 | 58 | return ( 59 | <> 60 | { 61 | errorMessage === null ? null : ( 62 |
63 |
67 | )
68 | }
69 |
70 | )
71 | }
72 |
73 |
74 | export default ErrorBox
75 |
--------------------------------------------------------------------------------
/frontend/components/ChatRoom/MessageForm/MessageForm.module.css:
--------------------------------------------------------------------------------
1 | .messageFormWrapper{
2 | position: absolute;
3 | bottom: 0;
4 | margin-bottom: 10px;
5 | width: 310px;
6 | left: 50%;
7 | transform: translateX(-50%);
8 | margin-left: -5px;
9 |
10 | }
11 |
12 | .emojiInputWrapper{
13 |
14 | display: flex ;
15 | align-items: center;
16 | margin-right: -10px;
17 | }
18 |
19 |
20 | .messageSubmit {
21 | width: 100%;
22 | background-color: #3A3A3D;
23 | border: solid #3A3A3D 1px;
24 | border-radius: 6px;
25 | padding: 5px;
26 | height: 30px;
27 | font-weight: 700;
28 | color: white;
29 |
30 | }
31 |
32 |
33 | .messageSubmit:focus {
34 | background-color: black;
35 | border: solid #9147FF 3px;
36 | border-radius: 8px;
37 | outline: none;
38 | }
39 |
40 |
41 | .submitButtonWrapper {
42 | display: flex;
43 | padding-top: 10px;
44 | justify-content: space-between;
45 | align-items: center;
46 | background-color: #18181B;
47 |
48 |
49 | }
50 |
51 | .chatButton {
52 |
53 | width: 50px;
54 | height: 30px;
55 | color: white;
56 | font-weight: 600;
57 | background-color: #9147FF;
58 | border: none;
59 | border-radius: 7px;
60 | margin-right: -12px;
61 |
62 | }
63 | .chatButton:hover {
64 | opacity: .7;
65 | }
66 |
67 | .pointIconWrapper{
68 | width: 30px;
69 | height: 30px;
70 | display: flex;
71 | justify-content: center;
72 | align-items: center;
73 | margin-left: 5px;
74 | border-radius: 5px;
75 | }
76 |
77 | .pointIconWrapper:hover {
78 | background-color: #3A3A3D;
79 |
80 | }
81 |
82 | .pointIcon{
83 | font-size: large;
84 | color: #C2C2C4;
85 |
86 | }
87 |
88 |
89 | .emojiBtn {
90 | position: absolute;
91 | right: -5px;
92 | font-size: 15px;
93 | width: 30px;
94 | height: 30px;
95 | display: flex;
96 | justify-content: center;
97 | align-items: center;
98 | border-radius: 5px;
99 | color: #C2C2C4;
100 | /* top: 50%; */
101 | /* transform: translateY(50%) */
102 | }
103 |
104 | .emojiBtn:hover {
105 | background-color: grey;
106 | }
--------------------------------------------------------------------------------
/frontend/components/Channels/ChannelShow/FollowButton.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3 | import { faHeart, faHeartBroken } from '@fortawesome/free-solid-svg-icons'
4 | import classes from './ChannelShow.module.css'
5 |
6 |
7 |
8 | const FollowButton = ({ currentUserId, followChannel, unfollowChannel, channel, follows }) => {
9 |
10 |
11 |
12 |
13 | const handleFollowClick = () => {
14 | if (currentUserId) {
15 | followChannel()
16 | }
17 | }
18 |
19 | const handleUnfollowClick = () => {
20 | if (currentUserId) {
21 | unfollowChannel(channel.id)
22 | }
23 | }
24 |
25 |
26 | return (
27 | <>
28 | {
29 | isChannelOwner(currentUserId, channel) ? :
30 | currentlyFollowing(currentUserId, channel, follows) ? (
31 |
64 | {errorMessage}
65 |
66 |
32 |
) : (
36 |
37 | Unfollow
34 | 35 |
38 |
42 |
43 | )
44 | }
45 |
46 | )
47 |
48 | }
49 |
50 |
51 | function isChannelOwner(currentUserId, channel) {
52 | if (currentUserId && channel && currentUserId === channel.id) {
53 | return true
54 | }
55 | return false
56 | }
57 |
58 |
59 | function currentlyFollowing(currentUserId, channel, follows) {
60 | if (!currentUserId) {
61 | return false
62 | } else {
63 | if (channel && follows.indexOf(channel.id) !== -1) {
64 | return true
65 | } else {
66 | return false
67 | }
68 | }
69 | }
70 |
71 |
72 | export default FollowButton;
--------------------------------------------------------------------------------
/frontend/actions/session_actions.js:
--------------------------------------------------------------------------------
1 | export const RECEIVE_CURRENT_USER = 'RECEIVE_CURRENT_USER'
2 | export const RECEIVE_NEW_USER = 'RECEIVE_NEW_USER'
3 | export const LOGOUT_CURRENT_USER = 'LOGOUT_CURRENT_USER'
4 | export const RECEIVE_SESSION_ERRORS = 'RECEIVE_SESSION_ERRORS'
5 | export const CLEAR_SESSION_ERRORS = 'CLEAR_SESSION_ERRORS'
6 |
7 | import * as SessionAPIUtil from '../util/session_api_util'
8 | import {closeModal} from './modal_actions'
9 |
10 | const receiveCurrentUser = (user) => {
11 |
12 | return {
13 | type: RECEIVE_CURRENT_USER,
14 | user
15 | }
16 | }
17 |
18 |
19 | const receiveNewUser = (payload) => {
20 |
21 | return {
22 | type: RECEIVE_NEW_USER,
23 | payload
24 | }
25 | }
26 |
27 |
28 | const logoutCurrentUser = () => {
29 | return {
30 | type: LOGOUT_CURRENT_USER
31 | }
32 | }
33 |
34 |
35 | const receiveSessionErrors = (errors) => {
36 |
37 | return {
38 | type: RECEIVE_SESSION_ERRORS,
39 | errors
40 | }
41 | }
42 |
43 |
44 | export const clearSessionErrors = () => {
45 | return {
46 | type: CLEAR_SESSION_ERRORS
47 | }
48 | }
49 |
50 |
51 |
52 | export const signup = (user) => dispatch => {
53 |
54 | return SessionAPIUtil.createUser(user)
55 | .then((payload) => dispatch(receiveNewUser(payload)))
56 | .then(() => dispatch(closeModal()))
57 | .fail(err => dispatch(receiveSessionErrors(err)))
58 |
59 |
60 |
61 | }
62 |
63 |
64 |
65 |
66 | export const login = (user) => dispatch => {
67 |
68 | return SessionAPIUtil.createSession(user)
69 | .then((user) => dispatch(receiveCurrentUser(user)))
70 | .then(() => dispatch(closeModal()))
71 | .fail(err => dispatch(receiveSessionErrors(err)))
72 |
73 |
74 | }
75 |
76 |
77 | export const logout = () => dispatch => {
78 |
79 | return SessionAPIUtil.deleteSession()
80 | .then(() => dispatch(logoutCurrentUser()))
81 |
82 |
83 |
84 |
85 | }
86 |
87 |
88 | export const clearErrors = () => dispatch => {
89 |
90 | return () => {
91 | dispatch(clearSessionErrors())
92 | }
93 |
94 | }
--------------------------------------------------------------------------------
/frontend/components/Categories/CategoryShow.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import React from 'react'
3 | import { connect } from 'react-redux'
4 | import { withRouter } from 'react-router-dom'
5 | import { requestVods, clearVods } from '../../actions/vod_actions'
6 | import { requestCategory } from '../../actions/category_actions'
7 | import classes from './CategoryShow.module.css'
8 |
9 | import VodIndexItem from '../Vods/VodsIndex/VodIndexItem'
10 |
11 | class CategoryShow extends React.Component {
12 |
13 | componentDidMount() {
14 | const { categoryName } = this.props.match.params
15 | this.props.requestVods({
16 | category: categoryName,
17 | })
18 | this.props.requestCategory(categoryName)
19 | }
20 |
21 |
22 | componentWillUnmount() {
23 | this.props.clearVods()
24 | }
25 |
26 |
27 | render() {
28 | const { categories, vods, channels } = this.props
29 | return (
30 | Follow
40 | 41 |
31 |
45 |
57 | )
58 | }
59 | }
60 |
61 |
62 | const mSTP = (state) => {
63 | return {
64 | vods: Object.values(state.entities.vods),
65 | channels: state.entities.channels,
66 | categories: Object.values(state.entities.categories),
67 | }
68 | }
69 |
70 |
71 | const mDTP = (dispatch) => {
72 | return {
73 | requestVods: (filter) => dispatch(requestVods(filter)),
74 | clearVods: () => dispatch(clearVods()),
75 | requestCategory: (name) => dispatch(requestCategory(name)),
76 | }
77 | }
78 |
79 |
80 | export default withRouter(connect(mSTP, mDTP)(CategoryShow))
81 |
--------------------------------------------------------------------------------
/frontend/components/Session/DemoForm/DemoForm.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { withRouter } from 'react-router-dom'
3 | import { connect } from 'react-redux'
4 | import Typist from 'react-typist'
5 | import { login } from '../../../actions/session_actions'
6 | import classes from '../SessionForm.module.css'
7 | import TabNavs from '../TabNavs/TabsNav'
8 | /* eslint-disable */
9 |
10 |
11 | class DemoForm extends React.Component {
12 | constructor(props) {
13 | super(props)
14 | this.state = {
15 | username: this.props.demoUser.username,
16 | password: '12345678',
17 | }
18 |
19 | this.handleSubmit = this.handleSubmit.bind(this)
20 | }
21 |
22 |
23 | handleSubmit() {
24 | this.props.login(this.state)
25 | }
26 |
27 |
28 | render() {
29 |
30 | return (
31 |
32 | {
33 | categories[0] ? (
34 |
44 |
35 | 
36 |
41 | ) : null
42 | }
43 |
36 |
37 |
40 | {categories[0].name}
38 |{categories[0].description}
39 |45 |
46 |
49 | Videos
47 |{vods.length}
48 |
50 | {
51 | vods.map((vod) => {
52 | return
56 |
32 |
33 | 
34 |
35 |
63 | )
64 | }
65 | }
66 |
67 |
68 | const mSTP = (state) => {
69 |
70 | return {
71 | demoUser: state.entities.users[state.ui.demoUserId],
72 | }
73 | }
74 |
75 |
76 | const mDTP = (dispatch) => {
77 |
78 | return {
79 | login: (user) => dispatch(login(user)),
80 | }
81 | }
82 |
83 |
84 | export default withRouter(connect(mSTP, mDTP)(DemoForm))
85 |
--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source 'https://rubygems.org'
2 | git_source(:github) { |repo| "https://github.com/#{repo}.git" }
3 |
4 | ruby '2.5.1'
5 |
6 | # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
7 | gem 'rails', '~> 5.2.4', '>= 5.2.4.2'
8 | # Use postgresql as the database for Active Record
9 | gem 'pg', '>= 0.18', '< 2.0'
10 | # Use Puma as the app server
11 | gem 'puma', '~> 3.11'
12 | # Use SCSS for stylesheets
13 | gem 'sass-rails', '~> 5.0'
14 | # Use Uglifier as compressor for JavaScript assets
15 | gem 'uglifier', '>= 1.3.0'
16 | # See https://github.com/rails/execjs#readme for more supported runtimes
17 | # gem 'mini_racer', platforms: :ruby
18 |
19 | # Use CoffeeScript for .coffee assets and views
20 | gem 'coffee-rails', '~> 4.2'
21 | # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
22 | gem 'jbuilder', '~> 2.5'
23 | # Use Redis adapter to run Action Cable in production
24 | gem 'redis', '~> 4.0'
25 | # Use ActiveModel has_secure_password
26 | gem 'bcrypt', '~> 3.1.7'
27 |
28 | gem 'validates_email_format_of'
29 |
30 | # Use ActiveStorage variant
31 | # gem 'mini_magick', '~> 4.8'
32 | gem 'jquery-rails'
33 | # Use Capistrano for deployment
34 | # gem 'capistrano-rails', group: :development
35 | gem "aws-sdk-s3", require: false
36 | # Reduces boot times through caching; required in config/boot.rb
37 | gem 'bootsnap', '>= 1.1.0', require: false
38 |
39 | group :development, :test do
40 | # Call 'byebug' anywhere in the code to stop execution and get a debugger console
41 | gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
42 | gem 'better_errors'
43 | gem 'binding_of_caller'
44 | gem 'pry-rails'
45 | gem 'annotate'
46 | gem 'jquery-rails'
47 |
48 | end
49 |
50 | group :development do
51 | # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
52 | gem 'web-console', '>= 3.3.0'
53 | gem 'listen', '>= 3.0.5', '< 3.2'
54 | # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
55 | gem 'spring'
56 | gem 'spring-watcher-listen', '~> 2.0.0'
57 | end
58 |
59 | group :test do
60 | # Adds support for Capybara system testing and selenium driver
61 | gem 'capybara', '>= 2.15'
62 | gem 'selenium-webdriver'
63 | # Easy installation and use of chromedriver to run system tests with Chrome
64 | gem 'chromedriver-helper'
65 | end
66 |
67 | # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
68 | gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
69 |
--------------------------------------------------------------------------------
/config/environments/development.rb:
--------------------------------------------------------------------------------
1 | Rails.application.configure do
2 | # Settings specified here will take precedence over those in config/application.rb.
3 |
4 | # In the development environment your application's code is reloaded on
5 | # every request. This slows down response time but is perfect for development
6 | # since you don't have to restart the web server when you make code changes.
7 | config.cache_classes = false
8 |
9 | # Do not eager load code on boot.
10 | config.eager_load = false
11 |
12 | config.web_console.whitelisted_ips = '10.0.0.101'
13 |
14 | # Show full error reports.
15 | config.consider_all_requests_local = true
16 |
17 | # Enable/disable caching. By default caching is disabled.
18 | # Run rails dev:cache to toggle caching.
19 | if Rails.root.join('tmp', 'caching-dev.txt').exist?
20 | config.action_controller.perform_caching = true
21 |
22 | config.cache_store = :memory_store
23 | config.public_file_server.headers = {
24 | 'Cache-Control' => "public, max-age=#{2.days.to_i}"
25 | }
26 | else
27 | config.action_controller.perform_caching = false
28 |
29 | config.cache_store = :null_store
30 | end
31 |
32 |
33 |
34 | # Store uploaded files on the local file system (see config/storage.yml for options)
35 | config.active_storage.service = :amazon_dev
36 |
37 | config.active_storage.service = :amazon_prod
38 |
39 | # Don't care if the mailer can't send.
40 | config.action_mailer.raise_delivery_errors = false
41 |
42 | config.action_mailer.perform_caching = false
43 |
44 | # Print deprecation notices to the Rails logger.
45 | config.active_support.deprecation = :log
46 |
47 | # Raise an error on page load if there are pending migrations.
48 | config.active_record.migration_error = :page_load
49 |
50 | # Highlight code that triggered database queries in logs.
51 | config.active_record.verbose_query_logs = true
52 |
53 | # Debug mode disables concatenation and preprocessing of assets.
54 | # This option may cause significant delays in view rendering with a large
55 | # number of complex assets.
56 | config.assets.debug = true
57 |
58 | # Suppress logger output for asset requests.
59 | config.assets.quiet = true
60 |
61 | # Raises error for missing translations
62 | # config.action_view.raise_on_missing_translations = true
63 |
64 | # Use an evented file watcher to asynchronously detect changes in source code,
65 | # routes, locales, etc. This feature depends on the listen gem.
66 | config.file_watcher = ActiveSupport::EventedFileUpdateChecker
67 | end
68 |
--------------------------------------------------------------------------------
/frontend/components/MainNav/MainNav.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | import React from 'react'
4 | import classes from './MainNav.module.css'
5 | import { withRouter } from 'react-router-dom'
6 | import Categories from '../Categories/Categories'
7 | import ChannelIndex from '../Channels/ChannelIndex'
8 |
9 | class MainNav extends React.Component {
10 |
11 | constructor(props) {
12 | super(props)
13 | this.state = {
14 | nextTab: 'channels'
15 | }
16 |
17 | this.changeTab = this.changeTab.bind(this)
18 | }
19 |
20 |
21 | // componentDidUpdate(prevProps, prevState) {
22 |
23 | // if (this.state.nextTab === "videos" && prevState.nextTab !== "videos") {
24 | // this.props.history.push(`/channels/${this.props.channelId}/${this.props.channelName}/videos`)
25 | // }
26 | // }
27 |
28 | changeTab(tab) {
29 | // this.props.history.push(`/channels/${this.props.channelId}/${this.props.channelName}/${tab}`)
30 | this.setState({ nextTab: tab })
31 | }
32 |
33 |
34 |
35 | render() {
36 |
37 | let homeClasses = []
38 | let videoClasses = []
39 |
40 | switch (this.state.nextTab) {
41 | case "channels":
42 | homeClasses.push(classes.tabSelected)
43 | break;
44 | case "categories":
45 | videoClasses.push(classes.tabSelected)
46 | break;
47 | default:
48 | break;
49 | }
50 |
51 | return (
52 |
34 |
35 |
53 |
76 |
77 | )
78 | }
79 | }
80 |
81 |
82 |
83 | export default withRouter(MainNav);
--------------------------------------------------------------------------------
/frontend/components/Channels/ChannelShow/ChannelNavs.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import classes from './ChannelNavs.module.css'
3 | import {withRouter} from 'react-router-dom'
4 |
5 | class ChannelNavs extends React.Component {
6 |
7 | constructor(props) {
8 | super(props)
9 | let nextTab = 'home'
10 | if (props.location.state) {
11 | nextTab = props.location.state.tab
12 | }
13 |
14 | this.state = {
15 | nextTab: nextTab
16 | }
17 |
18 | this.changeTab = this.changeTab.bind(this)
19 | }
20 |
21 | componentDidMount() {
22 | this.setState({nextTab: this.getTabFromUrl()})
23 | }
24 |
25 | getTabFromUrl() {
26 | let url = this.props.location.pathname
27 | let i = url.length
28 | while (i > 0) {
29 | if (url[i] === '/'){
30 | return url.slice(i+1)
31 | }
32 | i--
33 | }
34 | return null
35 | }
36 |
37 |
38 | changeTab(tab) {
39 | this.props.history.push(`/channels/${this.props.channelId}/${this.props.channelName}/${tab}`)
40 | this.setState({nextTab: tab})
41 | }
42 |
43 |
44 |
45 | render() {
46 |
47 | let homeClasses = []
48 | let videoClasses = []
49 | let followersClasses = []
50 |
51 | switch (this.state.nextTab) {
52 | case "home":
53 | homeClasses.push(classes.tabSelected)
54 | break;
55 | case "videos":
56 | videoClasses.push(classes.tabSelected)
57 | break;
58 | case 'followers':
59 | followersClasses.push(classes.tabSelected)
60 | break;
61 | default:
62 | break;
63 | }
64 |
65 | return(
66 |
54 |
75 | Browse
55 |-
56 |
- this.changeTab("channels")} className={homeClasses.join(' ')}>
57 |
Channels
58 |
59 |
60 | - this.changeTab("categories")} className={videoClasses.join(' ')}>
61 |
Categories
62 |
63 |
-
67 |
- this.changeTab("home")} className={homeClasses.join(' ')}>
68 |
Home
69 |
70 |
71 | - this.changeTab("videos")} className={videoClasses.join(' ')}>
72 |
Videos
73 |
74 |
75 | - this.changeTab("followers")} className={followersClasses.join(' ')}>
76 |
Followers
77 |
78 |
- e.stopPropagation()}>
43 |
- handleClick('showChannel')}>
51 |
52 | Channel 53 |
54 | - handleClick('dashboard')}>
55 |
56 | Dashboard 57 |
58 | - handleClick('logout')}>
59 |
60 | Sign Out 61 |
62 |
44 |
49 | handleClick('dashboard')} className={classes.userIconWrapper}>
45 | 
46 |
47 | {currentUser.username}
48 |50 |
- e.stopPropagation()}>
65 |
- handleClick('login')}>
66 |
67 | Sign In 68 |
69 |
68 | 69 | {`${message[1]}: `} 70 | 71 | 72 | {`${message[0]}`} 73 | 74 |
75 | 76 |
82 |
90 | )
91 | }
92 | }
93 |
94 |
95 | const mSTP = (state) => {
96 | return {
97 | currentUser: state.entities.users[state.session.currentUserId],
98 | }
99 | }
100 |
101 | const mDTP = (dispatch) => {
102 | return {
103 | openModal: (form) => dispatch(openModal(form)),
104 | }
105 | }
106 |
107 |
108 | export default withRouter(connect(mSTP, mDTP)(ChatRoom))
109 |
--------------------------------------------------------------------------------
/frontend/components/Session/SessionForm.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { withRouter } from 'react-router-dom'
3 | import classes from './SessionForm.module.css'
4 |
5 | import TabNavs from './TabNavs/TabsNav'
6 | import ErrorBox from './ErrorBox/ErrorBox'
7 | /* eslint-disable */
8 |
9 |
10 | class SessionForm extends React.Component {
11 | constructor(props) {
12 | super(props)
13 | this.state = {
14 | username: '',
15 | password: '',
16 | confirmPassword: '',
17 | passwordMatch: true,
18 | }
19 | this.handleSubmit = this.handleSubmit.bind(this)
20 | }
21 |
22 | componentDidMount() {
23 | const input = document.getElementById('usernameLogin')
24 | input.focus()
25 | }
26 |
27 | update(type) {
28 | return (e) => {
29 | this.setState({ [type]: e.currentTarget.value })
30 | }
31 | }
32 |
33 | handleSubmit(e) {
34 | e.preventDefault()
35 | if (this.state.confirmPassword !== this.state.password && this.props.formType === 'Sign Up') {
36 | this.setState({ passwordMatch: false })
37 | } else {
38 | this.props.processForm({
39 | username: this.state.username,
40 | password: this.state.password,
41 | })
42 | }
43 | }
44 |
45 | render() {
46 | let disableBtn = false
47 | const submitBtnClasses = [classes.formSubmit]
48 | if (this.state.username === '' || this.state.password === '') {
49 | disableBtn = true
50 | submitBtnClasses.push(classes.disableSubmit)
51 | }
52 | return (
53 |
87 | )
88 | }
89 | }
90 |
91 |
92 | export default withRouter(SessionForm)
93 |
--------------------------------------------------------------------------------
83 | STREAM CHAT {this.props.channelId}
84 |
85 |
86 | {messageList}
87 |
88 | 
58 |