ユーチューブ等のコメも

このコミットが含まれているのは:
テクニカル諏訪子 2020-09-23 17:19:30 +09:00
コミット d4820024bd
5個のファイルの変更143行の追加37行の削除

ファイルの表示

@ -69,6 +69,10 @@ class VideoController extends Controller {
if ($res->gametitle == '') $res->gametitle = '初代';
$comments = DB::table('blg_comments')->where('video_id', $res->slug)->orderBy('id', 'asc')->get()->toArray();
$ytslug = explode('?v=', $res->youtube);
$res->ytcomment = $this->getYouTubeCome($ytslug[1]);
$res->nicocomment = array();
$res->bccomment = array();
foreach ($comments as $k => $c) {
if ($c->isShadow == 0) {
@ -86,4 +90,34 @@ class VideoController extends Controller {
return view('pages.site.video.prayer', ['res' => $res, 'menu' => $this->menu, 'user' => $this->user]);
}
function getYouTubeCome ($slug) {
$ch = curl_init();
$url = 'https://www.googleapis.com/youtube/v3/commentThreads?part=snippet%2Creplies&moderationStatus=published&videoId='.$slug.'&key='.env('YOUTUBE_API');
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Accept: application/json'));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$get = curl_exec($ch);
curl_close($ch);
$come = array();
$get = json_decode($get, false);
if (isset($get->error)) return array();
foreach ($get->items as $g) {
$g->comment = new \stdClass();
$g->comment->id = $g->id;
$g->comment->name = $g->snippet->topLevelComment->snippet->authorDisplayName;
$g->comment->channel = $g->snippet->topLevelComment->snippet->authorChannelUrl;
$g->comment->icon = $g->snippet->topLevelComment->snippet->authorProfileImageUrl;
$g->comment->created = date('Y年m月d日 H:i:s', strtotime($g->snippet->topLevelComment->snippet->publishedAt));
$g->comment->message = $g->snippet->topLevelComment->snippet->textDisplay;
$come[] = $g->comment;
}
return $come;
}
}

ファイルの表示

@ -8,7 +8,13 @@
<div class="commentnumber">{{ i+1 }}</div>
<div :id="`comment-${c.id}`">
<div>
<cite class="fn">{{ (c.name || '名無しのテクニシャン') }}</cite> <span class="says">より:</span>
<cite class="fn">
<span v-if="isvideo === 'n'">
<img style="height: 24px;" :src="c.icon" :alt="`${c.name}さんのアイコン`">
<a :href="c.channel">{{ (c.name || '名無しのテクニシャン') }}</a>
</span>
<span v-else>{{ (c.name || '名無しのテクニシャン') }}</span>
</cite> <span class="says">より:</span>
<span class="comment-meta commentmetadata"> <a :href="`/blog/${slug}#comment-${c.id}`">{{ c.created }}</a></span>
</div>
<p style="white-space: pre-wrap;">{{ c.message }}</p>
@ -17,31 +23,33 @@
</li>
</ul>
</span>
<hr />
<div v-if="err" class="alert alert-danger">{{ err }}</div>
<div class="form-group row">
<div class="col-md-4 col-lg-3">名前</div>
<div class="input-group col-md col-lg">
<input type="text" id="new-name" class="form-control" v-model="newComment.name" placeholder="ご入力しない場合、名前は「名無しのテクニシャン」になります。" />
<span v-if="isvideo !== 'n'">
<hr />
<div v-if="err" class="alert alert-danger">{{ err }}</div>
<div class="form-group row">
<div class="col-md-4 col-lg-3">名前</div>
<div class="input-group col-md col-lg">
<input type="text" id="new-name" class="form-control" v-model="newComment.name" placeholder="ご入力しない場合、名前は「名無しのテクニシャン」になります。" />
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-4 col-lg-3">メールアドレス</div>
<div class="input-group col-md col-lg">
<input type="text" id="new-mail" class="form-control" v-model="newComment.mail" placeholder="返信される場合、メールに通知を送ります。" />
<div class="form-group row">
<div class="col-md-4 col-lg-3">メールアドレス</div>
<div class="input-group col-md col-lg">
<input type="text" id="new-mail" class="form-control" v-model="newComment.mail" placeholder="返信される場合、メールに通知を送ります。" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-lg-3">本文</div>
<div class="col-md col-lg">
<textarea class="form-control" id="new-message" rows="16" v-model="newComment.text"></textarea>
<div class="row">
<div class="col-md-4 col-lg-3">本文</div>
<div class="col-md col-lg">
<textarea class="form-control" id="new-message" rows="16" v-model="newComment.text"></textarea>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<button type="button" class="btn btn-block btn-primary" @click="send">送信</button>
<div class="row" style="margin-top: 16px;">
<div class="col">
<button type="button" class="btn btn-block btn-primary" @click="send">送信</button>
</div>
</div>
</div>
</span>
</div>
</template>
@ -63,21 +71,23 @@
this.newComment.text = '';
},
send () {
this.err = '';
this.sending = true;
if (this.isvideo !== 'n') {
this.err = '';
this.sending = true;
axios.post('/api/comment/new', {
comment: this.newComment,
isvideo: this.isvideo,
slug: this.slug
}).then(res => {
this.sending = false;
if (res.data.status === '010100') { this.comment.push(res.data.result); this.reset(); }
else this.err = 'エラーコード【' + res.data.status + '】' + res.data.message;
}).catch(err => {
this.sending = false;
this.err = 'サーバーエラーコード【' + err.response.status + '】' + err.response.data.message;
});
axios.post('/api/comment/new', {
comment: this.newComment,
isvideo: this.isvideo,
slug: this.slug
}).then(res => {
this.sending = false;
if (res.data.status === '010100') { this.comment.push(res.data.result); this.reset(); }
else this.err = 'エラーコード【' + res.data.status + '】' + res.data.message;
}).catch(err => {
this.sending = false;
this.err = 'サーバーエラーコード【' + err.response.status + '】' + err.response.data.message;
});
}
}
}
}

ファイルの表示

@ -41,3 +41,17 @@
.navbar-brand:hover, .nav-item:hover {
background-color: $suwa07;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
border-color: $suwa08;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
color: $white1;
background-color: $suwa04;
border-color: $suwa08;
}
.nav-tabs {
border-bottom: 1px solid $suwa03;
}

ファイルの表示

@ -133,5 +133,13 @@
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
@if (strpos($_SERVER['REQUEST_URI'], '/video/play') !== false || $_SERVER['REQUEST_URI'] == '/video/play')
<script>
$('#commenting a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
</script>
@endif
</body>
</html>

ファイルの表示

@ -10,7 +10,47 @@
<div class="container-fluid">
<div class="row">
<div class="col">
<comments slug="{{$res->slug}}" isvideo="t" :comments="{{json_encode($res->comments)}}" />
<ul class="nav nav-tabs" id="commenting" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">テク諏訪</a>
</li>
@if ($res->ytcomment)
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">YT</a>
</li>
@endif
@if ($res->nicocomment)
<li class="nav-item" role="presentation">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">ニコ動</a>
</li>
@endif
@if ($res->bccomment)
<li class="nav-item" role="presentation">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Bit</a>
</li>
@endif
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
<comments slug="{{$res->slug}}" isvideo="t" :comments="{{json_encode($res->comments)}}" />
</div>
@if ($res->ytcomment)
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<comments slug="{{$res->slug}}" isvideo="n" :comments="{{json_encode($res->ytcomment)}}" />
</div>
@endif
@if ($res->nicocomment)
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">
<comments slug="{{$res->slug}}" isvideo="n" :comments="{{json_encode($res->nicocomment)}}" />
</div>
@endif
@if ($res->bccomment)
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">
<comments slug="{{$res->slug}}" isvideo="n" :comments="{{json_encode($res->bccomment)}}" />
</div>
@endif
</div>
</div>
</div>
</div>