VueTube

README.md

VueTube

This Gist was generated by Contrived.

Do not modify the metadata file if you want to open in Contrived again. Otherwise, it is safe to delete.

Happy Hacking!

contrivedExperimentMetadata.json

{"user":{"id":"5fab1a234b1e8dd7b26ed000","name":"Christopher Harold Butler","avatar":"https://avatars2.githubusercontent.com/u/29358086?v=4"},"templateVersion":"1","templateId":"vuejs","resources":["<meta charset=\"UTF-8\" />","<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">","<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css\" integrity=\"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh\" crossorigin=\"anonymous\">"],"dependencies":[{"name":"vue","version":"2.6.11","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"},{"name":"axios","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js","version":"0.21.0"}],"files":[{"id":1,"parentId":0,"name":"public","type":"folder","isRoot":true,"selected":false,"expanded":true,"children":[{"id":2}]},{"id":2,"parentId":1,"name":"index.html","type":"file","mimeType":"html","isRoot":false,"open":false,"selected":false,"content":"<div class='App' id=\"root\" />"},{"id":3,"parentId":0,"name":"src","type":"folder","isRoot":true,"selected":false,"expanded":true,"children":[{"id":4},{"id":5},{"id":7}]},{"id":4,"parentId":3,"name":"index.js","type":"file","mimeType":"es6","isRoot":false,"isEntry":true,"open":true,"selected":true,"content":"\nimport SearchBar from 'SearchBar.js';\nimport VideoDetail from 'VideoDetail.js';\nimport VideoList from 'VideoList.js';\nimport VideoListItem from 'VideoListItem.js';\n\n\n\nconst app = new Vue({\n  el: '#root',\n  name: 'App',\n  data() {\n    return {\n      videos: [],\n      selectedVideo: null,\n    };\n  },\n  mounted() {\n    // this.onTermChange('muse madness');\n  },\n  methods: {\n    onTermChange(searchTerm) {\n      axios.get('https://www.googleapis.com/youtube/v3/search', {\n        params: {\n          key: API_KEY,\n          type: 'video',\n          part: 'snippet',\n          q: searchTerm,\n        }\n      }).then(res => {\n        this.videos = res.data.items;\n        this.selectedVideo = res.data.items[0];\n      });\n    },\n    onVideoSelect(video) {\n      this.selectedVideo = video;\n    }\n  },\n  template: `\n    <div class=\"App container\">\n      <h1>VueTube</h1>\n      <SearchBar @termChange=\"onTermChange\" />\n      <div class=\"row\">\n        <VideoDetail :video=\"selectedVideo\" />\n        <VideoList @videoSelect=\"onVideoSelect\" :videos=\"videos\" />\n      </div>\n    </div>\n  `,\n});","secrets":[{"id":"SAqS2yRVD","key":"API_KEY","value":"'AIzaSyAFPbefcDTjeCcmNd06VmZfewoHVGJCT1I'"}]},{"id":5,"parentId":3,"name":"styles.css","type":"file","mimeType":"css","isRoot":false,"open":false,"selected":false,"content":".App {\n\tfont-family: sans-serif;\n\ttext-align: center;\n}\n\ninput {\n  width: 100%\n}\n\n.Details {\n  margin-top: 10px;\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.SearchContainer {\n  text-align: center;\n  margin: 20px;\n}\n\nli {\n  display: flex;\n  cursor: pointer;\n}\nli:hover {\n  background-color: #eee;\n}\n\n.row {\n  display: flex;\n  flex-direction: column;\n}"},{"id":6,"parentId":0,"name":"README.md","type":"file","mimeType":"markdown","isRoot":true,"open":false,"selected":false,"content":"\n\n## Experiment Title\n> simple, one-line description\n\n\n### Experiment Status\n> | Finished | In progress | Abandoned\n> | Working | Kindof working | Broken\n\n\n### Purpose\n - [ ] Proof of concept\n - [ ] Prototype\n - [x] No purpose, just fun\n\n> If you want to take a more scientific approach consider including the following sections\n\n#### Research\n - What questions are you trying to answer or discover?\n\n#### Hypothesis\n - What do you think will happen?\n\n#### Results\n - What happened in the experiment?\n\n#### Conclusion\n - Was the hypothesis correct ?\n\n### Built With\n> list the framework or libraries you used\n\n- react + styled components\n\n### Features\n> what's so cool about this experiment ?\n\n - [x] feature one\n - [x] feature two\n\n### To Do:\n> is there anything left to do ?\n\n - [x] task 1\n - [x] task 2\n\n\n### How To Use / Example\n> how can people use or play with your experiment ?\n\n\n## API / Components\n> do you want to say anything about the components or code in this experiment ?\n\nThe `App` component is where the magic happen!\n```\nconst App = () => {\n  return (\n    <div className='App'>\n      <h1>Hello Contrived!</h1>\n      <h2>Start editing to create something magic!</h2>\n    </div>\n  );\n};\n\nexport default App;\n```\n\n\n## Author / Feedback\n> give yourself a little credit !\n\nChristopher Harold Butler ([ChristopherHButler](https://github.com/ChristopherHButler))\n\n## Inspiration / Acknowledgements / Thanks\n> did anyone help you with this / did something inspire you to make this ?\n\nI just really wanted to make my own [https://codesandbox.io/](https://codesandbox.io/)\n\n## License\n> APACHE | BSD | MIT | GNU GPL | ?\n> Need help deciding? Check out [https://choosealicense.com/](https://choosealicense.com/)\n"},{"id":7,"parentId":3,"name":"components","type":"folder","isRoot":false,"selected":false,"expanded":true,"children":[{"id":8},{"id":9},{"id":10},{"id":11}]},{"id":8,"parentId":7,"name":"SearchBar.js","type":"file","mimeType":"es6","isRoot":false,"isEntry":false,"open":false,"selected":false,"content":"\n\nVue.component('SearchBar', {\n\tmethods: {\n    onInput: function(event) {\n      this.$emit('termChange', event.target.value);\n    }\n  },\n\ttemplate: `\n\t\t<div class=\"SearchContainer\">\n    \t<input @input=\"onInput\" />\n  \t</div> \n\t`,\n});","secrets":[]},{"id":9,"parentId":7,"name":"VideoDetail.js","type":"file","mimeType":"es6","isRoot":false,"isEntry":false,"open":false,"selected":false,"content":"\n\nVue.component('VideoDetail', {\n  props: ['video'],\n  computed: {\n    videoUrl() {\n      const videoId = this.video.id.videoId;\n      return `https://www.youtube.com/embed/${videoId}`;\n    }\n  },\n\ttemplate: `\n\t\t<div class=\"col-md-12\" v-if=\"video\">\n      <div class=\"embed-responsive embed-responsive-16by9\">\n        <iframe class=\"embed-responsive-item\" :src=\"videoUrl\" />\n      </div>\n      <div class=\"Details\">\n        <h4>{{ video.snippet.title }}</h4>\n        <p>{{ video.snippet.description }}</p>\n      </div>\n    </div>\n\t`,\n});","secrets":[]},{"id":10,"parentId":7,"name":"VideoList.js","type":"file","mimeType":"es6","isRoot":false,"isEntry":false,"open":false,"selected":false,"content":"\n\nVue.component('VideoList', {\n\tprops: ['videos'],\n  methods: {\n    onVideoSelect(video) {\n      this.$emit('videoSelect', video);\n    }\n  },\n\ttemplate: `\n\t\t<ul class=\"list-group col-md-12\">\n      <VideoListItem\n        :key=\"video.etag\"\n        v-for=\"video in videos\"\n        :video=\"video\"\n        @videoSelect=\"onVideoSelect\"\n      />\n    </ul>\n\t`,\n});","secrets":[]},{"id":11,"parentId":7,"name":"VideoListItem.js","type":"file","mimeType":"es6","isRoot":false,"isEntry":false,"open":true,"selected":false,"content":"\n\nVue.component('VideoListItem', {\n\tprops: ['video'],\n  computed: {\n    thumbnailUrl() {\n      return this.video.snippet.thumbnails.default.url;\n    }\n  },\n  methods: {\n    onVideoSelect() {\n      this.$emit('videoSelect', this.video);\n    }\n  },\n\ttemplate: `\n\t\t<li class=\"list-group-item\" @click=\"onVideoSelect\">\n      <img class=\"mr-3\" :src=\"thumbnailUrl\" />\n      <div class=\"media-body\">\n        {{ video.snippet.title }}\n      </div>\n    </li>\n\t`,\n});","secrets":[]}],"experimentId":"5fbebf5e32f2800017fdc99c"}