├── CNAME ├── app ├── app.js ├── services │ └── playService.js ├── stylesheets │ └── style.css ├── views │ └── home.html └── controllers │ └── playCtrl.js ├── favicon.ico ├── .gitignore ├── index.html └── README.md /CNAME: -------------------------------------------------------------------------------- 1 | rslashvideos.com 2 | -------------------------------------------------------------------------------- /app/app.js: -------------------------------------------------------------------------------- 1 | angular.module('rSlashVideos', ['playCtrl', 'playService']); -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arbazsiddiqui/rSlashVideos/HEAD/favicon.ico -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | .idea 8 | todo 9 | # Runtime data 10 | pids 11 | *.pid 12 | *.seed 13 | .tern-project 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # node-waf configuration 27 | .lock-wscript 28 | 29 | # Compiled binary addons (http://nodejs.org/api/addons.html) 30 | build/Release 31 | 32 | # Dependency directories 33 | node_modules 34 | jspm_packages 35 | 36 | # Optional npm cache directory 37 | .npm 38 | 39 | # Optional REPL history 40 | .node_repl_history 41 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | rSlashVideos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /app/services/playService.js: -------------------------------------------------------------------------------- 1 | angular.module('playService', []) 2 | .factory('Play', function ($http) { 3 | var playFactory = {}; 4 | var baseUrl = 'https://api.reddit.com/r/'; 5 | playFactory.getVideosFromSubreddit = function (subreddit, listing, limit) { 6 | var url = baseUrl+subreddit+'/'+listing+'.json?limit='+limit; 7 | if(listing=='topAllTime') 8 | url = baseUrl+subreddit+'/top.json?limit='+limit+'&t=all'; 9 | else if(listing=='topHour') 10 | url = baseUrl+subreddit+'/top.json?limit='+limit+'&t=hour'; 11 | else if(listing=='topDay') 12 | url = baseUrl+subreddit+'/top.json?limit='+limit+'&t=day'; 13 | else if(listing=='topWeek') 14 | url = baseUrl+subreddit+'/top.json?limit='+limit+'&t=week'; 15 | else if(listing=='topMonth') 16 | url = baseUrl+subreddit+'/top.json?limit='+limit+'&t=month'; 17 | else if(listing=='topYear') 18 | url = baseUrl+subreddit+'/top.json?limit='+limit+'&t=year'; 19 | 20 | return $http.get(url); 21 | }; 22 | 23 | return playFactory; 24 | }); -------------------------------------------------------------------------------- /app/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | .navbar-default { 2 | background-color: #334858; 3 | border-color: #334858; 4 | min-height : 11%; 5 | border-radius: 0; 6 | } 7 | 8 | .navbar-brand { 9 | color: #fff !important; 10 | padding-top: 20%; 11 | } 12 | 13 | .btn-default { 14 | border-radius: 0; 15 | background-color: #08538c; 16 | color : #fff; 17 | } 18 | .list-group-item { 19 | text-align: center; 20 | background-color: #eff2f3; 21 | } 22 | 23 | body { 24 | background-color: #fafafa; 25 | } 26 | 27 | .dd { 28 | width : 70%; 29 | } 30 | 31 | a { 32 | color : #333; 33 | } 34 | 35 | #videoList { 36 | position: fixed; 37 | width: 23%; 38 | background-color: #FFF; 39 | overflow-y: scroll; 40 | top: 12%; 41 | bottom: 0; 42 | left : 77%; 43 | } 44 | 45 | #content { 46 | position: relative; 47 | margin-left: 20%; 48 | margin-right: 28.5%; 49 | } 50 | 51 | 52 | #srList { 53 | position: fixed; 54 | width: 15%; 55 | background-color: #eff2f3; 56 | overflow-y: scroll; 57 | top: 12%; 58 | bottom: 0; 59 | left : 0; 60 | } 61 | 62 | iframe { 63 | width: 600px; 64 | height: 338px; 65 | border: 3px solid #8c8c8c; 66 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## rSlashVideos 2 | 3 | "Watch" any subreddit. Fetches videos from any subreddit and includes filters like hot, top of all time, top of year etc. 4 | 5 | [Live](https://arbazsiddiqui.github.io/rSlashVideos/) 6 | 7 | ### Motivation 8 | The intent of pursuing this project was to easily and quickly gain access to the cool videos without deliberately looking up for them while having a meal. Hence, [rSlashVideos](https://arbazsiddiqui.github.io/rSlashVideos/) 9 | 10 | ### Features 11 | * Support for every video domain like youtube, vimeo etc. 12 | * Support for GIFs 13 | * Load videos from any subreddit 14 | * Reddit like sorting filters : hot, top 15 | * Play a random video 16 | * Shuffle the playlist 17 | 18 | ### Usage 19 | 20 | Hosted using github pages [here](https://arbazsiddiqui.github.io/rSlashVideos/). 21 | Though, for some reason, if you find it unaccessable, here are the steps to run it locally on your machine : 22 | 23 | * Clone this repo ```git clone https://github.com/arbazsiddiqui/rSlashVideos && cd rSlashVideos``` 24 | * Serve the app using ```python -m SimpleHTTPServer``` 25 | * Go to ```http://localhost:8000``` in your browser 26 | * Enjoy :) 27 | 28 | ### Contributing 29 | Would love it. Create a new issue or send a PR. 30 | 31 | ### Todo 32 | - [ ] AutoPlay Feature 33 | - [ ] Implement OAuth 34 | - [ ] User related features 35 | - [ ] Add Tests 36 | - [ ] Improve UI 37 | -------------------------------------------------------------------------------- /app/views/home.html: -------------------------------------------------------------------------------- 1 |
2 | 19 |
20 |
21 | 22 |
23 | 27 | 32 |
33 |
34 | 35 | 36 | 37 | 38 |
39 |
40 |
41 | 42 |
43 | 44 | 45 |
46 | 47 | 48 |

{{playVideoTitle}}

49 |
View on Reddit
50 |
51 | 52 |
53 | 61 |
62 |
63 |
64 | 65 |
66 | -------------------------------------------------------------------------------- /app/controllers/playCtrl.js: -------------------------------------------------------------------------------- 1 | angular.module('playCtrl', []) 2 | .controller('PlayController', function ($scope, $rootScope, Play, $sce, $window) { 3 | 4 | $scope.videos = []; 5 | $scope.subreddits = ["videos", "deepIntoYouTube", "documentaries", "music", "gaming", "ted", "woahTube", "asmr", "contagiousLaughter"]; 6 | $scope.sr = ""; 7 | $scope.listings = ["hot", "topAllTime", "topHour", "topDay", "topWeek", "topMonth", "topYear"]; 8 | $scope.listing = "hot"; 9 | $scope.currentSubreddit = "videos"; 10 | $scope.currentVideoIndex = 0; 11 | $scope.playVideoUrl = $sce.trustAsHtml(''); 12 | 13 | $scope.getVideosFromSubreddit = function (subreddit, listing, limit) { 14 | $scope.playVideoUrl = $sce.trustAsHtml('

Loading '+listing+' videos from r/'+subreddit+'...'+'

'); 15 | resetScope(); 16 | $scope.currentSubreddit = subreddit; 17 | Play.getVideosFromSubreddit(subreddit, listing, limit) 18 | .success(function (data) { 19 | createVideoList(data.data.children); 20 | if ($scope.videos.length != 0) 21 | $scope.playVideo($scope.videos[0]); 22 | else 23 | $scope.playVideoUrl = $sce.trustAsHtml('

No videos in this subreddit :(

'); 24 | }) 25 | .error(function (err) { 26 | $scope.playVideoUrl = $sce.trustAsHtml('

Subreddit not found :(

'); 27 | }) 28 | }; 29 | 30 | $scope.playVideo = function (video, index) { 31 | if (index) 32 | $scope.currentVideoIndex = index; 33 | $scope.playVideoUrl = $sce.trustAsHtml(video.embedHtml); 34 | $scope.playVideoTitle = video.title; 35 | $scope.playVideoRedditLink = video.redditLink; 36 | }; 37 | 38 | $scope.addSubreddit = function () { 39 | $scope.subreddits.push($scope.sr); 40 | $scope.getVideosFromSubreddit($scope.sr, $scope.listing, 100); 41 | $scope.sr = "" 42 | }; 43 | 44 | $scope.playRandomVideo = function () { 45 | Play.getVideosFromSubreddit('videos', 'random', null) 46 | .success(function (data) { 47 | randomvideo = {}; 48 | randomvideo['title'] = data[0].data.children[0].data.title; 49 | randomvideo['redditLink'] = "https://www.reddit.com" + data[0].data.children[0].data.permalink; 50 | embedHtml = document.createElement('div'); 51 | embedHtml.innerHTML = data[0].data.children[0].data.media.oembed.html; 52 | randomvideo['embedHtml'] = embedHtml.textContent; 53 | $scope.playVideo(randomvideo); 54 | }); 55 | }; 56 | 57 | $scope.shuffle = function () { 58 | var currentIndex = $scope.videos.length, temporaryValue, randomIndex; 59 | while (0 !== currentIndex) { 60 | randomIndex = Math.floor(Math.random() * currentIndex); 61 | currentIndex -= 1; 62 | temporaryValue = $scope.videos[currentIndex]; 63 | $scope.videos[currentIndex] = $scope.videos[randomIndex]; 64 | $scope.videos[randomIndex] = temporaryValue; 65 | } 66 | }; 67 | 68 | $scope.applySubredditListing = function () { 69 | $scope.getVideosFromSubreddit($scope.currentSubreddit, $scope.listing, 100) 70 | }; 71 | 72 | $scope.next = function () { 73 | $scope.playVideo($scope.videos[$scope.currentVideoIndex + 1]) 74 | $scope.currentVideoIndex = $scope.currentVideoIndex + 1; 75 | }; 76 | 77 | $scope.previous = function () { 78 | $scope.playVideo($scope.videos[$scope.currentVideoIndex - 1]); 79 | $scope.currentVideoIndex = $scope.currentVideoIndex - 1; 80 | }; 81 | 82 | $scope.reload = function () { 83 | $window.location.reload() 84 | }; 85 | 86 | $scope.isActive = function(item) { 87 | return $scope.currentSubreddit === item; 88 | }; 89 | 90 | var createVideoList = function (children) { 91 | for (i = 0; i < children.length; i++) { 92 | child = children[i]; 93 | temp = {}; 94 | if (child.data.media != null) { 95 | if (child.data.media.oembed.type == 'video') { 96 | temp['thumbnailUrl'] = child.data.media.oembed.thumbnail_url; 97 | embedHtml = document.createElement('div'); 98 | embedHtml.innerHTML = child.data.media.oembed.html; 99 | temp['embedHtml'] = embedHtml.textContent; 100 | temp['title'] = child.data.title; 101 | temp['redditLink'] = "https://www.reddit.com" + child.data.permalink; 102 | $scope.videos.push(temp); 103 | } 104 | } 105 | } 106 | }; 107 | 108 | var resetScope = function () { 109 | $scope.videos = []; 110 | $scope.currentVideoIndex = 0; 111 | $scope.playVideoTitle = ""; 112 | $scope.playVideoRedditLink = ""; 113 | }; 114 | 115 | $scope.getVideosFromSubreddit($scope.currentSubreddit, $scope.listing, 100) 116 | }); --------------------------------------------------------------------------------